6 novas galerias de imagem construídas com linhas aninhadas do Divi 5 (download grátis)

Se você já tentou criar uma galeria de imagens manualmente, sabe a rapidez com que as coisas ficam confusas. Imagens desiguais, linhas desalinhadas e designs sem resposta transformam uma galeria simples em um pesadelo de layout.

Mesmo no Divi 4, estruturas de imagem complexas geralmente significavam empilhar várias linhas e seções especializadas, espaços de ajustes e horas de personalização manual. Mas com o Divi 5, você pode pular tudo isso.

Graças ao seu novo recurso de linhas aninhadas, você pode criar estruturas de galeria de imagens mais avançadas. Nesta postagem, mostraremos como e forneceremos 6 projetos de layout da galeria para dar uma vantagem.

O Divi 5 está pronto para ser usado em novos sites, mas espere um pouco antes de migrar os existentes.

Usando linhas aninhadas para construir layouts complexos

O Divi 4 já tinha tudo o que você precisava para criar galerias de imagens, mas criar layouts complexos geralmente parecia desajeitado. O Divi 5 apresenta linhas aninhadas que oferecem uma maneira mais rápida e limpa de criar layouts avançados da galeria visualmente, sem necessidade de hacks.

Inscreva -se no nosso canal do YouTube

O que são linhas aninhadas?

As linhas aninhadas são um novo recurso de layout poderoso no Divi 5, que permite colocar uma linha dentro de outra, oferecendo mais controle sobre como você estrutura sua página. Isso torna possível projetar seções complexas diretamente dentro do construtor visual sem precisar escrever código ou confiar em soluções alternativas.

Nestar uma linha é como adicionar outro módulo. Você só precisa passar o elemento em que deseja colocar sua linha e clicar no botão Plus para escolher uma nova linha. Em seguida, você pode escolher entre todos esses layouts de linha, que são perfeitos para várias estruturas de galerias.

Esta linha aninhada se comporta exatamente como uma linha regular. Você pode escolher uma estrutura de coluna, adicionar módulos e aninhar outra linha, se necessário - graças à sua infinita aninhabilidade. Você também pode redimensionar as colunas arrastando, portanto, o ajuste das larguras parece intuitivo e não envolve hacks de matemática ou espaçamento.

Linhas aninhadas também são totalmente responsivas por padrão. Desde o construtor, você pode ajustar seu layout em várias telas. Como faz parte da estrutura Divi 5, ele funciona perfeitamente com outros recursos, como predefinições de grupo de opções e variáveis ​​de design. Também compartilharemos dicas para combinar linhas aninhadas com os recursos avançados do Divi 5 para otimizar o fluxo de trabalho de design da sua galeria.

Aprenda tudo sobre as linhas aninhadas do Divi 5

O que torna as linhas aninhadas diferentes?

No Divi 4, a criação de layouts de galeria de imagens personalizadas envolvidas de forma criativa usando linhas, seções especializadas e layouts para obter designs mais avançados. Isso significava que seria um desafio se você não tivesse know-how de design. E mesmo se você tivesse a experiência, estava limitado a algumas estruturas de layout.

As linhas aninhadas oferecem uma abordagem mais intuitiva. Você não precisa mais confiar em linhas separadas ou seções especializadas. Você pode aninhar facilmente linhas e misturá -las e combiná -las com módulos para criar padrões de design ilimitados. Quer criar uma vitrine de produto? Crie uma linha de duas colunas, adicione sua imagem em destaque à esquerda e descrição à direita, aninhe uma linha de três colunas sob a imagem esquerda e adicione imagens de suporte. Sua imaginação é o limite!

6 layouts de galeria de imagens que você pode construir com linhas aninhadas

Para dar um vislumbre do que é possível, criamos seis designs de layout da galeria de imagens com instruções sobre como as linhas aninhadas foram usadas para projetá -las. Vamos analisá -los.

Layout 1: Galeria CTA em linha

O layout da grade em camadas usa uma grade moderna ao estilo de revista que destaca um projeto com uma combinação de visuais grandes, fotos de suporte e texto cuidadosamente colocado. A primeira seção é uma linha aninhada de duas colunas (aninhada em outra linha de duas colunas) com duas imagens, e o próximo é outra grande imagem. Um banner de texto horizontal quebra a grade, adicionando contexto e uma frase de chamariz. A seção inferior traz outro layout de três colunas para continuar a história, mas com espaço para uma descrição mais longa de texto.

Esse design é perfeito para portfólios, exibições imobiliárias ou layouts editoriais que requerem ritmo visual e hierarquia clara de conteúdo. Funciona lindamente nos tamanhos de tela enquanto ainda se sente estruturado e intencional.

Como construir

Comece com uma linha de duas colunas. Adicione uma imagem à direita e ninhe outra linha na coluna esquerda. Adicione fotos a todos. Em seguida, outra linha aninhada é colocada sob um banner para manter um parágrafo de texto ao lado de outro conjunto de visuais. Repita toda a estrutura ou faça algumas alterações, como colocar a linha de texto sobre imagens aninhadas.

Esse layout é único em como as linhas aninhadas são usadas dentro de cada seção visual. As linhas aninhadas do Divi 5 permitem flexibilidade estrutural, misturando formatos de linha dentro de uma única coluna e colocando -as em elementos contextuais.

Layout 2: Split Focus Gallery

Um layout de duas colunas, onde a coluna esquerda empilha uma imagem vertical acima de um bloco de texto curto, e a coluna direita apresenta uma imagem grande seguida por uma linha de três imagens de suporte menores. Esse arranjo destaca um momento visual principal, permitindo espaço para o contexto escrito e uma tira de imagem secundária dentro do mesmo layout.

O layout da Galeria Split Focus é perfeito para galerias de casamento, evento ou floral, onde cada bloco visual captura um único momento ou emoção. Também funciona bem quando você deseja combinar uma imagem focal ousada com miniaturas de suporte e uma pequena mensagem, testemunho ou mensagem de introdução ao lado.

Como construir

Crie uma linha de 2 colunas. Na coluna esquerda, empilhe uma imagem vertical na parte superior e um módulo de texto abaixo dela usando duas linhas separadas. Na coluna direita, insira um único módulo de imagem na parte superior da foto em destaque e adicione uma linha aninhada com três colunas diretamente abaixo dela para manter imagens de suporte menores.

A chave é ajustar o preenchimento e definir a largura da calha para 1 na linha aninhada para manter tudo apertado e limpo. Posteriormente, quando você adicionar as imagens, crie uma predefinição de borda (defina a largura da borda para 2 e a cor da borda branca ) e aplique -a a todos os elementos.

Layout 3: Galeria do Spotlight do Projeto

Este layout transforma sua galeria de imagens em uma vitrine de projetos ou ofertas individuais. Em vez de apenas exibir visuais, cada item recebe seu próprio rótulo e chamada de ação, tornando-o ideal para portfólios, receitas, destaques do produto ou estudos de caso.

Uma linha curta de duas colunas segue cada imagem. O lado esquerdo contém uma descrição rápida ou nome do projeto, e o lado direito apresenta um botão que convidando o usuário a agir, como o pedido agora . O layout da galeria do Project Spotlight traz mais propósitos e interação à sua galeria.

Como construir

Sob cada imagem, adicionamos uma linha aninhada de duas colunas. Usamos a coluna esquerda para uma breve descrição e a coluna direita para um botão de frase de chamariz. Em seguida, estilizamos o botão usando estilos globais e repetimos essa estrutura para cada item da galeria para manter a consistência. Para tornar a linha sobrepor a imagem, definimos a posição como absoluta com o deslocamento vertical 40px e o índice Z 1000.

Também adicionamos uma predefinição de sombra a todas as imagens, o que não apenas deu à galeria uma aparência polida, mas também economizou tempo, permitindo que aplique a marca consistente em vários módulos em apenas alguns cliques.

Layout 4: Galeria de revelação de rolagem

O layout da galeria de rolagem de revelação foi projetado para contar histórias visuais que se desenrolam à medida que os usuários rolam. Cada seção possui uma imagem grande emparelhada com visuais de suporte menores (criados pelo aninhamento de várias linhas).

É perfeito para galerias editoriais, exibições de receitas (destacando etapas ou ingredientes) ou páginas da equipe da empresa que desejam capturar momentos de grupo interativamente. Em vez de os espectadores esmagadores, ele os guia por cada história visualmente, um quarteirão de cada vez.

Como construir

A estrutura é simples: crie uma linha de duas colunas. Adicione um módulo de imagem, título, texto e um botão à esquerda. À direita, aninhe uma nova linha com duas colunas e insira módulos de imagem em cada um para suportar visuais. Em seguida, você pode empilhar alternativamente linhas únicas e de duas colunas para criar uma grade semelhante a uma alvenaria.

O principal jogador deste layout é a seção esquerda, que fica. Para fazer com que a seção em destaque seja, você precisa criar um grupo de módulos e ativar as configurações de rolagem de efeitos . Clique no seu grupo de módulos e vá para Configurações> Avançado> Efeitos de rolagem.

Faça o seu grupo de módulos grudar na parte superior e defina o limite pegajoso inferior para a área do corpo. À medida que os usuários rolam para baixo, a imagem em destaque permanece, enquanto as outras imagens continuam aumentando.

Layout 5: Galeria de produtos escalonados

Nem toda galeria precisa de uma imagem focal ou estrutura complexa. Às vezes, tudo o que você precisa é de um conjunto de imagens dispostas em uma estrutura escalonada, e é aí que as linhas aninhadas brilham em silêncio.

Esse layout é ideal para sites de comércio eletrônico ou focado no produto, onde você deseja destacar uma coleção sem fazer com que pareça uma grade típica. Ele usa muito espaço em branco e linhas aninhadas para quebrar a monotonia visual misturando uma, duas e três colunas linhas dentro de uma única seção. O resultado é um layout bem equilibrado que parece artesanal e editorial, perfeito para mostrar detalhes do produto, close-ups de materiais ou itens complementares.

Funciona especialmente bem para marcas com produtos táteis ou de luxo, como artigos de couro, cerâmica ou itens feitos à mão, onde a narrativa visual é importante.

Como construir

Crie uma linha de duas colunas. Adicione um layout empilhado de imagens usando linhas aninhadas na coluna esquerda. Uma linha tem duas fotos pequenas lado a lado e a outra tem uma imagem vertical. Na coluna direita, aninhe uma nova linha com três colunas e insira imagens do produto. Abaixo disso, coloque seu texto e botão.

Para criar o efeito da bolsa sobreposta (como na seção Made Made) , adicione um módulo de imagem em sua linha e use o posicionamento absoluto (avançado> Posição> Absolute ). Em seguida, use os controles deslizantes de deslocamento e o INDEX Z para caminhar entre as duas seções. Isso permite criar layouts no estilo de revista, onde as imagens quebram a grade para maior interesse visual.

Layout 6: Grade de portfólio assimétrico

O layout de grade de portfólio assimétrico combina narrativa e imagens em um formato limpo de duas colunas. Use a coluna esquerda para introduzir um projeto com um título, descrição curta e CTA. Na coluna direita, uma linha aninhada de três colunas está acima de uma grande imagem em destaque, dando uma oportunidade perfeita para mostrar visuais importantes com fotos de apoio.

Esse design é ideal para designers, fotógrafos ou agências que apresentam estudos de caso ou portfólios com curadoria. Ele mantém a atenção focada ao oferecer um ritmo de rolagem natural e um fluxo amigável para dispositivos móveis.

Como construir

Comece com uma linha de duas colunas. Na coluna esquerda, adicione um módulo de texto para o seu título e descrição, seguido por um módulo de botão (se desejar).

Adicione uma linha aninhada na coluna direita. Escolha o layout de três colunas e empilhe outro módulo de imagem. Insira três imagens de suporte na linha aninhada e uma imagem grande no módulo de imagem empilhada. Use outras estruturas de linha para criar mais padrões.

Para manter tudo alinhado, defina a largura da calha como 1 e corte suas fotos em alturas consistentes antes de fazer o upload. Use uma predefinição global de imagem (como uma borda macia ou sombra de queda) e pairar os efeitos para manter as coisas interativas, mas refinadas.

Você também notaria outra linha aninhada sobrepondo a imagem. Definimos a posição absoluta para criar o efeito de sobreposição .

Principais dicas para criar galerias de imagem interativas

Quando o seu layout estiver no lugar, polvilhe em alguns detalhes extras para tornar suas galerias mais polidas. Aqui está como:

1. Crie efeitos de pairar

Adicionar efeitos de pairar é uma das maneiras mais fáceis de fazer com que suas galerias de imagem pareçam mais dinâmicas. Ele adiciona interatividade sem distrair o conteúdo e ajuda as imagens a se sentirem vivas quando os usuários se envolvem com eles.

No Divi 5, é fácil adicionar efeitos de pairar às suas imagens. Durante a edição, você pode alternar facilmente para o mouse (e os modos responsivos) e personalizar suas configurações.

Você não precisa mudar para o mouse para todas as opções diferentes de imagem ou configuração; Basta alternar uma vez, fazer alterações em todos os elementos que você deseja personalizar e salvar. Mudamos a cor da borda, mas você também pode experimentar filtros, transformar, adicionar sombra e mais facilmente.

Você pode aplicá -lo a imagens individuais ou salvá -lo como predefinido se quiser que todas as suas imagens se comportem da mesma maneira. É um pequeno detalhe, mas faz sua galeria parecer atenciosa e interativa, e o Divi o torna fácil.

2. Use atributos de cópia/colar para aplicar estilos às imagens rapidamente

A personalização manualmente de cada imagem em uma galeria pode ser demorada, especialmente ao aplicar estilos consistentes, como bordas, sombras ou efeitos de pairar. Embora as predefinições sejam ótimas para estilos globais, talvez você não queira criar uma nova predefinição para todos os pequenos ajustes.

O sistema de gerenciamento de atributos da Divi 5 oferece uma solução simplificada. Com apenas alguns cliques, você pode copiar estilos de uma imagem e aplicá -los a outros. Você não precisa repetir manualmente o mesmo processo de personalização para todas as imagens. Você pode simplesmente copiar, colar e manter consistência.

Por exemplo, personalize um elemento e copie e cole seus atributos para os outros elementos para replicar o estilo.

O Divi 5 também permite um controle mais granular. Por exemplo, você pode copiar e colar grupos de atributos específicos, como apenas as configurações de design ou apenas os efeitos do pairar. Isso torna seu fluxo de trabalho eficiente e coeso.

3. Use o grampo para criar imagens fluidas e responsivas

Em um layout de galeria moderno, suas imagens não devem apenas escalar, mas também respondem de forma inteligente a diferentes tamanhos de tela. É exatamente isso que a função Clamp () ajuda você a alcançar.

O Divi 5 suporta o Clamp () e muitas outras unidades avançadas que permitem inserir manualmente os valores de tamanho em qualquer lugar, incluindo os campos de largura, preenchimento e margem de imagem. CLAMP () é ideal para capacidade de resposta. Permite definir um valor mínimo, ideal e máximo, tudo em uma linha.

Por exemplo, um grampo (1200px, 30VW, 1400px) diz ao Divi para nunca ficar abaixo de 1200px, escala até 30% da largura da viewport, mas o limite a 1400px.

Isso é especialmente útil para tiras de imagem ou layouts escalonados, onde você deseja uma grade mais fluida sem pontos de interrupção. Quando combinado com linhas aninhadas, o CLAMP () ajuda cada bloqueio a se adaptar naturalmente sem a necessidade de ajustes móveis separados.

4. Visualizar e ajustar para diferentes dispositivos

Depois que seu layout ficar bem no desktop, é fácil ajustá-lo para tablets e móveis usando as ferramentas de edição responsivas embutidas da Divi. Alterne entre as visualizações do dispositivo e ajuste as configurações como tamanho da imagem, espaçamento e alinhamento de texto para cada tela.

Por exemplo, você pode reduzir o preenchimento entre as linhas em colunas móveis ou pilhas de maneira diferente para uma melhor experiência de rolagem. Demorar alguns minutos para ajustar essas configurações, pode fazer com que sua galeria se sinta limpa e profissional em todas as telas.

Baixe os layouts da galeria gratuitamente

Quer começar a usar os layouts da galeria 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!

Construir galerias de imagem aninhadas (e muito mais) com o divi 5

As linhas aninhadas do Divi 5 simplificam layouts complexos, permitindo que você coloque linhas nas linhas. Eles também oferecem infinitos de aninhabilidade e controle preciso sobre seus projetos.

As linhas aninhadas são apenas uma das características exclusivas do Divi 5. Esteja atento ao novo sistema de layout baseado em Flexbox da Divi, que também introduz uma ampla gama de novos modelos de linha e controles do Flexbox para fornecer todas as ferramentas e simplicidade para criar qualquer layout que você possa imaginar.

À medida que continuamos a melhorar o Divi 5, você pode esperar ainda mais recursos que aprimorem seus recursos de design e simplificam seu fluxo de trabalho.

Se você está construindo galerias da maneira mais difícil, agora é o momento perfeito para experimentar o Divi 5 e experimentar como linhas aninhadas e ferramentas de layout visual podem simplificar tudo.

O Divi 5 está pronto para ser usado em novos sites, mas espere um pouco antes de migrar os existentes.