10 layouts de grade feitos com linhas aninhadas do Divi 5 (download grátis)

Os layouts da grade oferecem uma maneira estruturada e flexível de organizar o conteúdo, aprimorar a experiência do usuário e garantir a capacidade de resposta perfeita entre os dispositivos. Com o lançamento do Divi 5 Public Alpha, os web designers têm um novo conjunto de ferramentas para criar belos layouts de grade que ultrapassam os limites criativos. Com um construtor visual completamente redesenhado e novos recursos poderosos, como linhas aninhadas, unidades avançadas e grupos de módulos, você pode facilmente criar layouts complexos em camadas.

Nesta postagem, exibiremos layouts de grade que você pode construir facilmente com o Divi 5, desde grades de recursos simétricos a blogs de alvenaria dinâmicos e exibições de portfólio interativo. Esteja você projetando um portfólio, loja de comércio eletrônico ou site corporativo, esses layouts o inspirarão a elevar seus projetos e cativar seu público.

Vamos explorar como os recursos avançados do Divi 5 tornam possíveis esses layouts criativos no estilo da grade.

O Divi 5 está pronto para ser usado em novos sites, mas ainda não recomendamos a conversão de sites existentes para o Divi 5.

Principais recursos Divi 5 para layouts de grade

A Recoilt Foundation da Divi 5 apresenta recursos que facilitam a criação de layouts de grade do que nunca. Essas ferramentas permitem que os designers criem grades complexas e visualmente atraentes com precisão e eficiência, mantendo a flexibilidade entre os dispositivos. Abaixo, exploramos os principais recursos do Divi 5 que tornam possíveis a criação de belos layouts de grade.

Inscreva -se no nosso canal do YouTube

Linhas aninhadas

O recurso de linhas aninhadas do Divi 5 permite que você coloque linhas nas linhas, oferecendo infinito aninhabilidade para criar estruturas de grade complexas com uma interface intuitiva de arrastar e soltar. Essa funcionalidade simplifica o design de grades de várias camadas, oferecendo controle preciso sobre a colocação do módulo.

Seja construindo uma vitrine complexa de produtos ou uma grade de portfólio em camadas, as linhas próximas permitem organizar o conteúdo com mais inteligência, tornando seus layouts dinâmicos e visualmente envolventes.

Pontos de interrupção personalizáveis

O design responsivo é crítico para os sites modernos, e os pontos de interrupção personalizáveis ​​da Divi 5 facilitam a garantia de garantir que suas grades pareçam impecáveis ​​em qualquer dispositivo. Você pode utilizar sete desktops, tablets e pontos de interrupção móvel, permitindo que as grades se adaptem perfeitamente a vários tamanhos de tela.

Emparelhado com a escala de tela, que fornece visualizações em tempo real de seus layouts em diferentes pontos de interrupção do Visual Builder, esse recurso garante que suas grades sejam otimizadas para capacidade de resposta, oferecendo uma experiência consistente do usuário em todos os dispositivos.

Grupos de módulos

Grupos de módulos simplificam o processo de projetar e manter a estética consistente da grade. Ao agrupar os módulos, você pode aplicar um estilo coletivo e reutilizar esses grupos em várias páginas, economizar tempo e garantir a consistência do design.

Isso é particularmente útil para layouts de grade, como postagens de blog ou cartões de produto, onde elementos consistentes de design - como fontes, cores ou efeitos de pairar - são essenciais para uma aparência coesa em todo o site.

Variáveis ​​de design

Com variáveis ​​de design, o Divi 5 oferece gerenciamento centralizado de elementos de design -chave, como cores, fontes, links, tipografia e muito mais. Esse recurso garante a uniformidade nos layouts da grade - e em todo o seu site - facilitando a manutenção de uma identidade visual consistente. Os estilos são definidos no gerenciador de variáveis ​​e podem ser aplicados onde quiser

Precisa atualizar um estilo de cor ou fonte? As variáveis ​​de design permitem fazer alterações em um só lugar, aplicando -as instantaneamente em todas as seções e páginas, simplificando seu fluxo de trabalho e mantendo seus projetos polidos.

Unidades avançadas

As unidades avançadas do Divi 5 oferecem controle granular sobre espaçamento e dimensionamento com opções como VW, VH, REM e EM. Essas unidades permitem layouts de grade dinâmica e responsiva que escalem perfeitamente entre os dispositivos. Você pode ajustar o preenchimento, margens ou tamanhos de elemento com o gerenciador de variáveis. As unidades avançadas fornecem a flexibilidade de alinhar e escalar componentes de grade com precisão, garantindo que seus layouts sejam funcionais e visualmente harmoniosos.

Gerenciamento de atributos

O gerenciamento de atributos acelera o processo de design, permitindo que você copie, cola e redefine atributos entre os elementos de design. Esse recurso é fundamental para aplicar estilos consistentes, como efeito de pairar ou espaçamento, a vários módulos. Ao reduzir tarefas repetitivas, o gerenciamento de atributos permite que você se concentre na criatividade e acelerando o desenvolvimento de layouts complexos de grade.

Esses recursos do Divi 5 funcionam juntos para fornecer flexibilidade e eficiência incomparáveis, facilitando a criação de layouts de grade impressionantes e responsivos que aprimoram a experiência do usuário e elevam seus designs da web.

10 exemplos de layout da grade criativa no divi 5

Os layouts da grade são uma pedra angular do design da web moderno e, com o Divi 5, construí -los nunca foi tão fácil. Esteja você mostrando produtos, portfólios, membros da equipe ou perguntas frequentes, o Divi 5 é capaz de criar layouts funcionais e visualmente impressionantes. Vejamos 10 exemplos de layouts de grade que você pode criar com o Divi 5.

1. Grade de recurso simétrica

As grades de recursos simétricas oferecem uma ótima maneira de mostrar produtos, serviços ou itens de portfólio de maneira limpa e organizada. Esse estilo de grade é perfeito para destacar o conteúdo estruturado e é versátil em seu aplicativo. Eles podem ser usados ​​para sites de negócios, portfólios e páginas de destino, oferecendo uma aparência polida que orienta os usuários por meio de informações sem esforço.

No exemplo abaixo, construímos uma grade de quatro colunas para mostrar um negócio de boticário. Podemos obter uma aparência profissional e polida em minutos usando linhas aninhadas, grupos de módulos e gerenciamento de atributos.

2. Grade de alvenaria

Uma grade de alvenaria é um layout dinâmico de estilo Pinterest que organiza postagens de blog, itens de portfólio ou até receitas de alturas variadas em uma grade visualmente envolvente e bem compactada. Ao contrário das grades tradicionais com alturas de linha fixa, as grades de alvenaria permitem que o conteúdo flua naturalmente, preenchendo lacunas verticais para criar uma aparência orgânica e perfeita. Este estilo de grade é perfeito para sites que priorizam a narrativa visual, como blogs, revistas ou portfólios criativos. Com os recursos nativos do Divi 5, a criação de uma grade de alvenaria elegante e responsiva é intuitiva e eficiente.

No exemplo abaixo, combinamos linhas aninhadas e grupos de módulos para criar uma grade de alvenaria para receitas, usando os atalhos da Divi para duplicar os grupos mais rapidamente.

3. Grade de portfólio interativa

Um layout de grade de portfólio interativo fornece uma maneira envolvente de mostrar seu trabalho. Você pode incorporar pop -ups de caixa de luz, efeitos de pairar, botões e muito mais para permitir que os usuários explorem seu conteúdo. Esse estilo de grade é excelente para sites que visam cativar seu público com trabalho visual, como fotografia, design ou ambos, enquanto fornecem navegação e interatividade perfeitas.

Com os recursos avançados da Divi 5, os designers podem criar grades de portfólio responsivas e amigáveis ​​que destacam o trabalho criativo de maneira eficaz.

4. Grade de exibição de produtos

Uma grade de vitrine de produtos oferece uma maneira única de apresentar seus melhores vendedores, produtos em destaque ou novos produtos que você está apresentando ao mundo. Você pode criar um layout estruturado e visualmente atraente com imagens, títulos, preços e botões otimizados para lojas de comércio eletrônico. Usando um layout de grade, você pode criar um layout limpo e organizado para facilitar a navegação dos usuários e tomam decisões de compra.

Com o Divi 5, você pode utilizar recursos poderosos para criar layouts responsivos e consistentes da marca que impulsionam o engajamento e as conversões.

5. grade de membro da equipe

As grades membros da equipe permitem exibir perfis de equipe com imagens, nomes, funções e links sociais. Esse estilo de grade cria uma apresentação profissional e acessível, tornando -o ideal para sites destacando a experiência e a personalidade de sua equipe. As grades de equipes são perfeitas para sites corporativos, agências ou organizações sem fins lucrativos, mas podem ser aplicadas em qualquer site em que você precise mostrar as pessoas.

No exemplo abaixo, usamos uma grade de três colunas com linhas aninhadas e aplicamos variáveis ​​de design para controlar o tamanho da fonte de forma responsável.

6. Grid de serviços

Um layout da grade é uma ótima maneira de mostrar os serviços de uma empresa. Ele destaca os serviços em um formato organizado e digitalizado, tornando -o ideal para sites que precisam comunicar suas proposições de valor. Perfeito para agências, freelancers ou empresas baseadas em serviços, o Grid usa os recursos avançados do Divi 5 para criar layouts responsivos e envolventes que impulsionam as consultas e conversões do cliente.

No exemplo abaixo, usamos uma linha de quatro colunas, atribuímos uma fórmula calc () para espaçamento da linha e grupos de módulos incorporados e linhas aninhadas para acelerar o processo de design.

7. grade de cronograma de eventos

O estilo da grade do cronograma de eventos é perfeito para organizar e apresentar informações sensíveis ao tempo, profissionalmente e organizadas, tornando-o ideal para sites que hospedam eventos como conferências, workshops ou reuniões comunitárias. Os recursos do Divi 5 permitem adicionar datas, títulos e descrições em um formato de grade, facilitando os visitantes para encontrar o que eles querem.

O exemplo abaixo mostra um layout de três colunas com linhas aninhadas para exibir eventos funcional e esteticamente.

8. grade de mesa de preços

Divi 4 (e Divi 5) vêm com um módulo de preços, mas é limitado a preços, um botão e pontos de bala. Para aqueles que desejam expandir a funcionalidade nativa da Divi e construir uma grade de preços atendida às suas necessidades, o Divi 5 fornece uma maneira de fazê -lo. Você pode criar uma grade de preços que exibe incrivelmente seu conteúdo usando linhas aninhadas, grupos de módulos e gerenciamento de atributos.

Por exemplo, você pode criar um layout de três colunas que forneça preços, recursos e vários botões sem precisar estar em conformidade com as limitações do módulo de precificação interno. Você pode ajustar as configurações responsivas para telas menores e criar uma predefinição do grupo de opções para colunas de 50% de largura, garantindo que suas colunas se alinhem perfeitamente no tablet e no celular.

9. Grade de acordeão de perguntas frequentes

Ter uma seção de perguntas frequentes no seu site pode ajudar os usuários a acessar uma lista de perguntas frequentes, dando -lhes uma idéia melhor do que você oferece. Esse estilo de grade combina a clareza de uma grade com a interatividade dos módulos de acordeão, tornando -o ideal para sites que precisam fornecer informações concisas e acessíveis. Perfeito para páginas de suporte, centros de ajuda ou sites informativos, a grade de perguntas frequentes aproveita os recursos robustos do Divi 5 para criar layouts responsivos e envolventes que aprimoram a experiência do usuário.

Neste exemplo, usamos linhas aninhadas para criar uma seção de perguntas frequentes envolventes com vídeos informativos e perguntas e respostas para fornecer aos usuários as informações relevantes necessárias para tomar uma decisão informada.

10. grade da galeria de imagens

Uma grade da galeria com um pop -up de caixa de luz é uma maneira visualmente impressionante de mostrar fotografia, exemplos de portfólio ou outras imagens. Este estilo de grade é perfeito para mostrar a narrativa visual, tornando -o ideal para sites que priorizam imagens impressionantes, como galerias de arte, blogs de viagens ou fotografia. Com o Divi 5, os designers podem criar grades de galerias responsivas e envolventes que cativam.

No exemplo abaixo, usamos um layout simples de quatro colunas para mostrar imagens. Para um toque adicional, ativamos a Lightbox nas imagens e adicionamos um módulo de compartilhamento social no canto inferior direito de cada foto.

Dicas para criar layouts de grade eficazes no divi 5

Graças aos recursos poderosos e flexíveis do Divi 5, a criação de layouts de grade eficaz é mais fácil do que nunca. Esteja você criando uma grade de recursos ou uma galeria de imagens dinâmicas com elementos de sobreposição, essas dicas ajudarão você a maximizar os recursos do Divi 5 para criar designs responsivos, coesos e eficientes que impulsionam a experiência do usuário do seu site.

1. Alavancar linhas aninhadas

O recurso de linhas aninhadas do Divi 5 cria estruturas complexas de grade de várias camadas. Você pode organizar o conteúdo aninhando linhas nas linhas, como colocar imagens e texto em uma única célula de grade para um alinhamento preciso. As linhas aninhadas são perfeitas para criar layouts como grades de portfólio ou horários de eventos, oferecendo a flexibilidade de projetar grades criativas e estruturadas.

2. Otimize para capacidade de resposta

Usando escala de tela e pontos de interrupção personalizáveis, você pode garantir que suas grades pareçam perfeitas em todos os dispositivos. Os layouts de teste dentro do Visual Builder em tempo real para visualizar como eles se adaptam em dispositivos de mesa, tablets e móveis. Você pode ajustar os tamanhos de larguras, espaçamento ou fontes da coluna em pontos de interrupção específicos para manter a usabilidade e o apelo visual. Com os pontos de interrupção personalizáveis ​​da Divi 5, você pode garantir uma experiência perfeita para todos os usuários, de telas grandes a smartphones.

3. Use grupos de módulos para eficiência

Os grupos de módulos no Divi 5 podem otimizar seu fluxo de trabalho agrupando elementos de grade semelhantes, como cartões de produto ou perfis de membros da equipe. Você pode aplicar simultaneamente um estilo consistente - fontes, cores, efeitos de pairar, etc. - a vários módulos e reutilizá -los nas páginas. Isso economiza tempo para manter a uniformidade em grades, como mesas de preços ou perguntas frequentes, reduzir edições repetitivas e garantir uma aparência polida.

4. Mantenha a consistência com variáveis ​​de design

Use variáveis ​​de design para centralizar o controle sobre cores, fontes, espaçamento, links e muito mais. Ao definir esses elementos em um só lugar, você pode atualizar os estilos globalmente, perfeitos para manter as grades de serviço ou layouts de galeria visualmente harmoniosos.

5. Experimente unidades avançadas

Aprimore a flexibilidade de suas grades usando unidades avançadas como VH, VW, REM, Calc () ou Clamp () para espaçamento dinâmico e dimensionamento. Essas unidades permitem que seus elementos da grade escalem fluidamente com base no tamanho da viewport ou nas configurações de fontes, garantindo a capacidade de resposta e o equilíbrio visual.

Baixe os layouts da seção da grade gratuitamente

Quer começar a usar os layouts da grade dentro do Divi 5? Inscreva -se abaixo para obter acesso aos arquivos JSON. Você pode enviá -los para sua biblioteca Divi e importá -los para suas páginas depois.

Baixe os arquivos

Baixe gratuitamente

Junte -se ao boletim informativo Divi e enviaremos um e -mail para você uma cópia do pacote de layout da página de destino do Divi Ultimate, além de toneladas de outros recursos, dicas e truques incríveis e gratuitos. Siga adiante e você será um mestre em divi em pouco tempo. Se você já está inscrito, basta digitar seu endereço de e -mail abaixo e clique em Download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Verifique seu endereço de e -mail para confirmar sua assinatura e ter acesso a pacotes semanais de layout semanal gratuitos!

Desencadear a criatividade com o divi 5

O conjunto de recursos do Divi 5, de linhas aninhadas ao gerenciamento de atributos, permite que os designers construam facilmente layouts de grade versáteis, responsivos e visualmente impressionantes. O Divi 5 fornece flexibilidade, precisão e eficiência incomparáveis ​​para criar qualquer layout da grade, de grades de recursos a portfólios interativos. Esteja você construindo um site de comércio eletrônico, uma página sobre a página ou uma seção de perguntas frequentes, a interface moderna do Divi 5 e os recursos aprimorados tornam a sua visão criativa à vida simples.

Você está pronto para explorar as possibilidades? Mergulhe no alfa público Divi 5 para experimentar a criação de seus layouts de grade. Como mencionado anteriormente, o Divi 5 é adequado para novos sites, mas não recomendamos usá -lo em sites existentes, pelo menos ainda não.

Adoraríamos ver suas criações. Compartilhe seus layouts de grade exclusivos em nossas mídias sociais ou comente abaixo.