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 o conteúdo verticalmente 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 seja alinhado verticalmente. Ele adiciona um toque adorável de espaçamento simétrico ao seu conteúdo, o que é muito útil ao usar layouts de colunas múltiplas. Além disso, o conteúdo centralizado verticalmente permanece centralizado nas larguras do navegador, eliminando a necessidade de preenchimento ou margens personalizadas para obter uma capacidade de resposta semelhante.

Nesta lição, vou ensiná-lo a alinhar o conteúdo verticalmente em qualquer coluna usando algumas linhas simples de CSS. Para fins de demonstração, usarei vários layouts pré-fabricados de 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: Alinhando verticalmente o conteúdo com flex e margem automática
• Alinhando o conteúdo na parte inferior
• Alinhamento de conteúdo vertical para as colunas de sua linha
• Método 2: Alinhando o conteúdo verticalmente usando a direção flexível da coluna
• E os 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 mesa). Ao contrário das tabelas típicas, no entanto, o recurso flex permite que você crie caixas que se “flexibilizam” para o tamanho do conteúdo que contêm.

Divi usa o atributo flex quando você escolhe “Equalize Column Heights” como sua configuração de linha. Simplificando, isso garante que o tamanho de todas as suas colunas se ajusta ao tamanho da coluna com mais informações. Como “Equalize Column Heights” 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 ex amp le, o conteúdo dessa coluna (se é um ou vários módulos) será centralizado verticalmente.

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

Obviamente, a propriedade flex possui muito mais aplicativos 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 em uma coluna (preenchimento e margem). Para ex amp le, você pode usar opções de espaçamento de Divi para centralizar o módulo (s) verticalmente dentro da fila para dar uma coluna igual superior e preenchimento de fundo. 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 ter que 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 este layout em sua página. Depois disso, dê um nome à sua página. Selecione “Usar Divi Builder” e “Usar Visual Builder” no menu suspenso. Em seguida, escolha “Escolha um layout predefinido” no menu suspenso. Em seguida, selecione o Pacote de layout da Interior Design Company na janela Carregar da biblioteca. Finalmente, a partir da seleção de layouts, escolha a página Portfólio e clique em “Usar este Layout”.

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

Método 1: Alinhando verticalmente o conteúdo com flex e margem automática

Abra as configurações de linha para a 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 “Equalize Column Heights” 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 ser 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 de conteúdo vertical para as colunas de sua linha

Você pode centralizar verticalmente o conteúdo de todas as colunas em sua linha, adicionando o seguinte trecho ao elemento principal de suas configurações de 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 na página, aplique o elemento principal CSS a todas as linhas da página (ou seção).

Tudo agora está equilibrado verticalmente.

No entanto, você pode ter observado que a cor de fundo da coluna branca não cobre mais a linha inteira devido à adição de "margem: automático" na coluna. Você pode remediar isso alterando a cor de fundo da linha para branco e removendo o preenchimento da linha. Em vez disso, vou ensiná-lo a centralizar o conteúdo de sua coluna sem precisar alterar a margem.

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

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

No entanto, podemos utilizar flex-direction para alinhar o texto de nossa coluna sem sacrificar o efeito “Equalize a altura da coluna”, que mantém nossas colunas (e fundos de coluna) 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, em seguida, centralizados.

Vamos voltar à linha do ex amp le 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 por baixo.

Eu gosto dessa configuração porque se eu posicionar meu conteúdo verticalmente e deixar a linha completa, o conteúdo permanece centralizado.

Criação de sinopses alinhadas verticalmente com várias quantidades de texto

Tornar o conteúdo de suas colunas centralizado verticalmente 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. Tornar essas sinopses centralizadas verticalmente pode ajudar a melhorar a aparência do seu layout.

Para o Pagamentos Digital Home Layout de Página, vou alinhar verticalmente os blurbs para esta ex amp le.

Para criar um retrato mais realista da aparência de um site, primeiro adicionarei várias quantidades de conteúdo corporal às sinopses.

Agora preciso “Equalizar Alturas de Coluna” nas configurações de linha.

Agora posso alinhar meu texto e ajustar o design usando snippets 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 no topo, redefinindo seus estilos CSS personalizados e adicionando as seguintes margens personalizadas.

 CSS do elemento principal da coluna 1:

 Coluna 3 CSS do elemento principal:

E os layouts com apenas uma coluna?

Você não precisa de um snippet ou flex CSS para centralizar verticalmente o conteúdo de uma coluna. Tudo que você precisa fazer é certificar-se de 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

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