Como alinhar seções, linhas, colunas e módulos vertical e horizontalmente no DIVI Builder

Ao construir um site usando Divi, a opção de alinhar verticalmente o conteúdo pode ser uma adição valiosa ao seu kit de ferramentas de design. Dependendo do layout, o conteúdo pode precisar ser alinhado verticalmente de várias maneiras (centralizado, inferior, superior). A necessidade mais comum é que seu material esteja alinhado verticalmente. Ele adiciona um lindo toque de espaçamento simétrico ao seu conteúdo, o que é muito útil ao usar layouts de múltiplas colunas. Além disso, o conteúdo centralizado verticalmente permanece centralizado nas larguras do navegador, eliminando a necessidade de preenchimento ou margens personalizadas para obter capacidade de resposta semelhante.

Nesta lição, ensinarei como alinhar verticalmente o conteúdo de qualquer coluna usando algumas linhas simples de CSS. Para fins de demonstração, usarei vários layouts pré-fabricados do Divi. Você não precisa se preocupar se não estiver familiarizado com CSS. Em questão de segundos, você poderá aplicar isso ao seu design.

• Compreendendo a diferença entre Flex e Divi
• Isso é necessário?
• Adicione o layout pré-configurado à sua página.
• Método 1: Alinhar conteúdo verticalmente com margem flexível e automática
• Alinhando o conteúdo na parte inferior
• Alinhamento vertical de conteúdo para as colunas da sua linha
• Método 2: Alinhar o conteúdo verticalmente usando a direção flexível da coluna
• E quanto aos layouts com apenas uma coluna?
• Considerações finais sobre o alinhamento vertical e horizontal do DIVI

Compreendendo a diferença entre Flex e Divi

O atributo CSS Flex (ou Flexbox) é apenas um meio de organizar itens em pilhas horizontais e verticais (como uma tabela). Ao contrário das tabelas típicas, no entanto, o recurso flexível permite criar caixas que “flexibilizam” o tamanho do conteúdo que contêm.

Divi usa o atributo flex quando você escolhe “Equalizar alturas das colunas” como configuração de linha. Simplificando, isso garante que o tamanho de todas as suas colunas se ajuste ao tamanho da coluna com mais informações. Como “Equalizar alturas das colunas” aciona o flex para o contêiner de linha, você pode usá-lo adicionando CSS às suas colunas para alterar o conteúdo de cada coluna (ou caixa).

Se você adicionar “margin: auto” a qualquer coluna em uma linha, por amp , o conteúdo dessa coluna (seja um ou vários módulos) será centralizado verticalmente.

Todas as suas colunas (e seu conteúdo) serão centralizadas verticalmente se você adicionar “align-items: center;” para sua linha.

Claro, a propriedade flex tem muito mais aplicações em web design e CSS mais avançado que você pode utilizar em seu tema. No entanto, eu queria manter as coisas simples para este tutorial.

Isso é necessário?

Em um sentido técnico, não. Você pode usar espaçamento personalizado para posicionar seu conteúdo/módulos verticalmente dentro de uma coluna (preenchimento e margem). Por amp , você pode usar as opções de espaçamento do Divi para centralizar o(s) módulo(s) verticalmente dentro da fila para fornecer a uma coluna um preenchimento igual na parte superior e inferior. Você também pode alinhar o conteúdo na parte inferior adicionando preenchimento superior a uma coluna. Ao adicionar mais conteúdo à sua página, pode ser necessário modificar o espaçamento. Além disso, manter esse alinhamento em vários tamanhos de navegador pode ser problemático.

Portanto, se você está procurando uma maneira de alinhar as informações verticalmente sem se preocupar com espaçamentos específicos, acho que isso será benéfico.

Vamos começar esta festa!

Adicione o layout pré-configurado à sua página.

Vou começar com o layout da página do portfólio da empresa de design de interiores. Crie uma nova página para ter esse layout em sua página. Depois disso, dê um nome à sua página. Selecione “Usar Divi Builder” e depois “Usar Visual Builder” no menu suspenso. Em seguida, escolha “Escolher um layout pré-fabricado” no menu suspenso. Em seguida, selecione o Interior Design Company Layout Pack na janela Carregar da biblioteca. Por fim, ao selecionar os layouts, escolha a página Portfólio e clique em “Usar este Layout”.

Você estará pronto para começar depois que o layout for carregado na sua página.

Método 1: Alinhar conteúdo verticalmente com margem flexível e automática

Abra as configurações de linha da segunda linha (aquela diretamente abaixo da linha com o título da página). Abra o grupo de opções Dimensionamento nas opções de design e observe que “Equalizar alturas das colunas” já está ativo; Isso significa que a propriedade flex (“display: flex;”) foi adicionada à linha.

Na caixa de entrada Elemento principal da coluna 2, vá para as configurações da guia Avançado para a mesma linha e adicione o seguinte snippet CSS.

O conteúdo da segunda coluna agora foi realocado para ficar centralizado verticalmente.

Alinhando o conteúdo na parte inferior

Você pode alterar o valor da margem da seguinte maneira para alinhar o conteúdo na parte inferior, de modo que todos os módulos sejam empilhados na parte inferior da coluna:

Alinhamento vertical de conteúdo para as colunas da sua linha

Você pode centralizar verticalmente o conteúdo de todas as colunas da sua linha adicionando o seguinte snippet ao elemento principal das configurações da linha, em vez de adicionar “margin: auto” a cada coluna individualmente.

Você também pode usar este snippet se quiser que todas as informações em suas colunas sejam alinhadas na parte inferior:

Lembre-se de que você pode usar o recurso Estender estilos do Divi clicando com o botão direito do mouse no elemento principal com seu snippet CSS e selecionando “Estender elemento principal”.

Em seguida, para centralizar verticalmente todo o conteúdo de cada coluna da página, aplique o elemento principal CSS a todas as linhas da página (ou seção).

Tudo agora está verticalmente equilibrado.

No entanto, você deve ter observado que a cor de fundo branca da coluna não cobre mais a linha inteira devido à adição de “margem: auto” na coluna. Você pode remediar isso alterando a cor de fundo da linha para branco e removendo o preenchimento da linha. Em vez disso, ensinarei como centralizar o conteúdo da sua coluna sem precisar alterar a margem.

Método 2: Alinhar o conteúdo verticalmente usando a direção flexível da coluna

Usamos a propriedade flex adicionada primeiramente à linha. Como resultado, cada uma de nossas colunas tornou-se uma “caixa flexível” que poderia ser alinhada verticalmente alterando a margem.

No entanto, podemos utilizar a direção flexível para alinhar o texto da nossa coluna sem sacrificar o efeito “Equalizar a altura da coluna”, que mantém nossas colunas (e planos de fundo das colunas) do mesmo tamanho. Para fazer isso, adicionaremos algumas linhas de CSS à nossa fila, fazendo com que todos os módulos dentro dela sejam empilhados verticalmente e depois centralizados.

Voltemos à linha do amp anterior. Ao clicar com o botão direito em CSS personalizado e selecionar “Redefinir estilos CSS personalizados”, você pode remover qualquer CSS personalizado que possa ter nas configurações de linha.

Em seguida, no elemento principal da coluna 2, aplique o seguinte CSS:

Altere “justify-content: center” para “justify-content: flex-end” para alinhar o conteúdo na parte inferior.

Gosto dessa configuração porque se eu posicionar meu conteúdo verticalmente e deixar a linha com largura total, o conteúdo permanecerá centralizado.

Fazendo sinopses alinhados verticalmente com várias quantidades de texto

Centralizar verticalmente o conteúdo de suas colunas também pode ajudar com sinopses. Como você deve saber, nem toda sinopse terá a mesma quantidade de texto para descrever um recurso ou serviço. Centralizar essas sinopses verticalmente pode ajudar a deixar seu layout bonito.

Para o layout da página inicial de pagamentos digitais, alinharei verticalmente as sinopses deste amp .

Para criar uma representação mais realista da aparência de um site, primeiro adicionarei quantidades variadas de conteúdo corporal às sinopses.

Agora preciso “Equalizar as alturas das colunas” nas configurações da linha.

Agora posso alinhar meu texto e ajustar o design usando trechos CSS.

Podemos centralizar verticalmente o conteúdo de nossas colunas adicionando o seguinte à seção Elemento Principal da guia Avançado de nossas Configurações de Linha:

Altere para o seguinte para alinhá-los na parte inferior.

Você também pode alinhar a primeira coluna na parte inferior e a terceira coluna na parte superior, redefinindo seus estilos CSS personalizados e adicionando as seguintes margens personalizadas.

 Coluna 1 Elemento Principal CSS:

 Coluna 3 Elemento Principal CSS:

E quanto aos layouts com apenas uma coluna?

Você não precisa de um snippet CSS ou flex para centralizar verticalmente o conteúdo de uma coluna. Tudo que você precisa fazer é garantir que seu texto tenha espaçamento igual acima e abaixo (ou módulos). A maioria dos consumidores exige conteúdo centralizado verticalmente em layouts com muitas colunas porque desejam que o material adjacente seja alinhado corretamente.

Considerações finais sobre o alinhamento vertical e horizontal do DIVI

Embora esta solução dependa de alguns pequenos trechos de CSS personalizado, acho que pode ser útil para pessoas que procuram uma solução rápida para um procedimento demorado. Sinta-se à vontade para compartilhar suas opiniões sobre essa abordagem, bem como lições ex amp de como ela economizou tempo e esforço no passado.