Ir para o conteúdo principal

Como alinhar elementos na mesma linha no Divi

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

A capacidade de alinhar verticalmente o conteúdo ao criar um site com Divi pode ser uma adição prática à sua ferramenta de design. Às vezes, um determinado layout exige que o conteúdo seja alinhado verticalmente de maneiras diferentes (centralizado, baixo, alto). A necessidade mais comum é centralizar seu conteúdo verticalmente.

Ele fornece um espaçamento simétrico muito conveniente ao usar vários layouts colunas para o seu conteúdo. Além disso, o conteúdo centralizado verticalmente fica centrado em larguras de navegador diferentes, eliminando o incômodo de aplicar preenchimento ou margens personalizadas para capacidade de resposta semelhante.

neste Tutoriel, Vou mostrar-lhe como adicionar alguns fragmentos de CSS a qualquer coluna para alinhar verticalmente o conteúdo. Usarei alguns dos layouts Divi predefinidos para exemplos de como proceder. Se você não sabe muito sobre CSS, não precisa se preocupar. Será muito fácil aplicar em seus próprios layouts em segundos.

Entendendo Flex e Divi

A propriedade Flex (ou Flexbox) é simplesmente uma maneira de posicionar elementos em pilhas horizontais e / ou verticais (muito parecido com uma tabela). Exceto que, diferentemente das tabelas tradicionais, a propriedade flex permite criar caixas que se ajustem ao tamanho do conteúdo que ela contém.

Divi usa a propriedade flex sempre que você selecionar "Equalize Column Heights" como o parâmetro de linha. Isso simplesmente garante que o tamanho de suas colunas se ajuste ao tamanho da coluna com mais conteúdo. E como Equalize Column Heights ativa o flex para o contêiner de linha, você pode facilmente aproveitá-lo adicionando css às ​​suas colunas para ajustar o conteúdo de cada coluna (ou zona).

Por exemplo, se você adicionar "margin: auto" a uma coluna em uma linha, o conteúdo dessa coluna (seja um ou mais módulos) ficará centralizado verticalmente.

Além disso, se você adicionar "align-items: center" à sua linha, todas as suas colunas (e seus conteúdos) serão centralizadas verticalmente.

Naturalmente, há muitos outros usos da propriedade Flex no design da Web, bem como CSS mais avançado que você pode aplicar ao seu tema. Mas para este tutorial, eu queria manter as coisas simples.

É realmente necessário?

Tecnicamente, não. Você pode alinhar verticalmente seu conteúdo / módulos em uma coluna usando espaçamento personalizado (preenchimento e margem). Por exemplo, você pode usar as opções de espaçamento Divi para fornecer uma coluna igual ao preenchimento superior e inferior para centralizar o (s) módulo (s) verticalmente na coluna. Você também pode adicionar apenas um preenchimento maior que uma coluna para alinhar o conteúdo inferior. No entanto, pode ser necessário ajustar o espaçamento ao atualizar sua página com mais conteúdo. Além disso, pode ser difícil manter esse alinhamento em larguras de navegador diferentes.

Portanto, se você está procurando uma solução para alinhar verticalmente o conteúdo sem precisar pensar no espaçamento personalizado, acho que isso será útil.

Vamos começar!

Carregue o layout predefinido na sua página

Para começar, vou usar o layout do Portfólio da Empresa de Design de Interiores. Para obter esse layout na sua página, crie uma nova página. Em seguida, dê um título à sua página. Clique em “Usar Divi Builder” e depois “Use Visual Builder”. Em seguida, selecione a opção "Escolha um layout básico". Em seguida, selecione o Kit de Layout da Empresa de Design de Interiores no pop-up Carregar da Biblioteca. Por fim, selecione a página Portfólio na lista de layouts e clique em "Usar este layout".

template divi theme wordpress.png

Depois que o layout é carregado na sua página, você está pronto para ir.

Método 1: Como Alinhar Verticalmente Conteúdo com Flex e Margem Automática

Abra as configurações de linha da segunda linha da página (a diretamente abaixo da linha com o título da página). Sob os parâmetros de design, abra o grupo de opções de dimensionamento e observe que "Equalize Column Heights" já está ativo. Isso significa que a linha agora possui a propriedade flex ("display: flex;") adicionada.

harmonize as alturas das columns.png

Agora vá para as configurações da guia Avançado para a mesma linha e adicione o seguinte trecho css no campo de entrada do item principal na coluna 2.

margem: auto;

margem automática divi.png

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Agora o conteúdo da segunda coluna foi movido para ser centralizado verticalmente.

Torne o conteúdo inferior alinhado

Se você quiser alinhar seu conteúdo na parte inferior para que todos os módulos empilhem na parte inferior de sua coluna, você poderá ajustar o valor da margem da seguinte maneira:

margem: auto 0;

margin divi line.png

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

Em vez de adicionar "margin: auto" a cada coluna individualmente, você também pode centralizar verticalmente o conteúdo de todas as colunas da sua linha, adicionando o seguinte snippet ao elemento principal de seus parâmetros de linha.

alinhar-itens: centro;

alinhar elementos divi.png

Ou se você quiser que todo o conteúdo de suas colunas seja alinhado na parte inferior, você pode adicionar este trecho:

itens de alinhamento: flex-end;

E não se esqueça de que você pode aproveitar o recurso Divi Extend Styles clicando com o botão direito do mouse no item principal com seu snippet de CSS e clicando em "Expandir item principal".

extend main element.png

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

expandir estilos em divi.png

Agora tudo está centralizado verticalmente.

aparência das mudanças divi.png

Mas você deve ter notado que a cor de fundo da coluna branca não cobre mais a altura total da linha. Isso porque adicionamos "margin: auto" à coluna. Para resolver esse problema, você pode alterar a cor de plano de fundo da linha em branco e remover o preenchimento da linha. Mas, em vez disso, mostrarei uma maneira de centralizar o conteúdo de sua coluna sem alterar a margem.

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

No primeiro método, aproveitamos a propriedade de flexão adicionada à linha. Isso fez com que cada uma de nossas colunas fosse uma "caixa flexível" que pudesse ser alinhada verticalmente simplesmente ajustando a margem.

Mas há também uma maneira de flexionar a direção para alinhar o conteúdo de nossa coluna sem perder o efeito "Equalizar altura da coluna" que mantém nossas colunas (e os planos de fundo das colunas) do mesmo tamanho. Para fazer isso, simplesmente adicionaremos algumas linhas de CSS à nossa coluna para que todos os módulos da coluna sejam empilhados verticalmente e depois centralizados.

Vamos voltar para nossa linha no exemplo anterior. Abra as configurações de linha e exclua qualquer CSS personalizado que você tenha clicando com o botão direito do mouse em CSS personalizado e clicando em "Redefinir estilos CSS personalizados".

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Em seguida, adicione o seguinte CSS na coluna 2, elemento principal:

exibição: flex; flex-direction: coluna; justificar-conteúdo: centro;

Steering flex-column.png

Ou, se eu quisesse alinhar o conteúdo na parte inferior, basta substituir "Justify content: center" por "justify content: flex-end".

flex alignment end.png

O melhor dessa configuração é que, se meu conteúdo estiver centralizado verticalmente e a largura da linha for atingida, o conteúdo permanecerá centralizado.

aparência de boxes.png

Faça anotações (Resumo) com diferentes quantidades de textos alinhados verticalmente

Tornar o conteúdo da sua coluna verticalmente centrado também pode ser útil para anotações. Como você sabe, nem todas as sinopses conterão a quantidade exata de texto usada para descrever a função ou serviço. Centralizar esses sinopses verticalmente pode criar um design bonito para o seu layout.

Para este exemplo, vou alinhar verticalmente os sinopses no layout da home page digital pagamentos.

Primeiramente, adicionarei diferentes quantidades de corpo de texto aos resumos para dar uma representação mais realista do aspecto de um site.

alinhamento de blorbds.png

Agora eu tenho que ir para as configurações de linha e 'Harmonizar alturas de coluna'.

harmonize columns.png

Agora posso adicionar meus snippets de CSS para alinhar meu conteúdo e modificar o design.

Na guia Avançado das suas configurações de linha, podemos centralizar verticalmente o conteúdo de nossas colunas adicionando o seguinte em Elemento Primário:

alinhar-itens: centro;

Modifique o alinhamento de conteúdo divi.png

Ou altere-o seguindo para alinhá-los.

itens de alinhamento: flex-end;

alinhamento na parte inferior divi.png

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

Você também pode redefinir seus estilos CSS personalizados e adicionar as seguintes margens personalizadas para alinhar a parte inferior da primeira coluna e a terceira parte superior da coluna alinhada.

Elemento principal CSS da coluna 1:

margem: auto auto 0;

Elemento principal CSS da coluna 3:

margem: 0 auto auto;

personalize o alinhamento dos resumos divi.png

E quanto aos layouts de uma coluna?

Tecnicamente, você não precisa de fragmento de CSS nem de flexionar para centralizar verticalmente o conteúdo de sua coluna. Tudo o que você precisa fazer é ter espaço igual acima e abaixo do seu conteúdo (ou módulos). Na maioria das vezes, os usuários precisam de conteúdo vertical centralizado em modelos de várias colunas porque desejam que o conteúdo adjacente seja alinhado perfeitamente.

É isso para este tutorial que mostra como alinhar elementos na mesma linha no Divi.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
4 ações
ação2
chilrear
Enregistrer2
Whatsapp