Como criar colunas iguais alturas com Flexbox no Divi 5

Criar layouts profissionais limpos é uma pedra angular de design eficaz da web e alturas iguais de coluna contribuem para um layout equilibrado. Esteja você exibindo produtos, serviços ou itens de portfólio, as colunas que alinham aumentam perfeitamente a experiência do usuário. No Divi 4, foram possíveis colunas iguais, mas o Divi 5 traz muito mais para a mesa.

No Divi 5, a integração de seu sistema de layout do Flexbox melhora o processo, oferecendo uma maneira mais simples e flexível de criar alturas iguais de coluna. Esta postagem o guiará a criar layouts limpos e equilibrados. Vamos mergulhar!

Alturas iguais de coluna no divi 4

No Divi 4, alcançar colunas com alturas iguais era direto, mas limitado. Uma alternância ativou todas as colunas dentro de uma linha para corresponder à altura da coluna mais alta. Esse recurso foi um salva -vidas para manter a consistência visual, mas tinha limitações que geralmente exigiam soluções alternativas.

O efeito de altura igual no Divi 4 foi aplicado aos recipientes da coluna, o que significa que as cores, imagens ou bordas de fundo tiveram que ser definidas no nível da coluna. Essa abordagem não se estendeu aos módulos dentro das colunas, o que poderia levar a lacunas desajeitadas. Por exemplo, um botão embaixo de um módulo de texto curto em uma coluna deixaria o espaço estranho abaixo dele, enquanto um botão abaixo de um módulo de texto mais longo em outra coluna o encheu, criando uma aparência desequilibrada.

Quando os designers queriam mais controle, como alinhar o conteúdo do módulo verticalmente ou ajustar o espaçamento, era necessário o CSS personalizado. Isso representou um desafio, especialmente para iniciantes, pois eles tiveram que mergulhar nos campos CSS personalizados da Divi para obter resultados polidos. Por exemplo, se você quisesse que os botões se alinhassem à parte inferior da coluna no Divi 4, teria que usar o CSS para alcançá -lo.

Como o Flexbox no Divi 5 endereça colunas iguais

O Flexbox é perfeitamente integrado ao Divi 5, facilitando a criação de alturas iguais da coluna. Ao contrário da opção baseada em alternância do Divi 4, o Divi 5 aproveita o FlexBox para fornecer controles embutidos que facilitam o design de páginas da web.

Com o Flexbox, você pode esticar automaticamente as colunas para corresponder às mais altas, oferecendo opções precisas de alinhamento para as colunas e seu conteúdo. Isso elimina a necessidade de CSS personalizados, possibilitando layouts avançados para todos os usuários do Divi, para iniciantes e profissionais. O sistema de layout do Flexbox da Divi 5 permite que os designers criem facilmente designs profissionais consistentes.

Como criar alturas iguais de coluna no divi 5

Criar colunas com igual altura no Divi 5 é uma brisa graças à sua integração do Flexbox. Nas etapas abaixo, demonstraremos como configurar as coisas e garantir que tudo se alinhe perfeitamente.

Etapa 1: Crie seu design

Abra o Visual Builder em uma página nova ou existente. Clique no ícone Black + para adicionar uma nova linha .

Quando a caixa de diálogo da nova seção aparecer, selecione o layout de três colunas em colunas iguais .

Adicione um módulo de grupo na primeira coluna.

Em seguida, adicione um módulo de ícone no módulo de grupo na primeira coluna.

Selecione o ícone de verificação na guia Conteúdo.

Na guia Design , defina a cor do ícone como #2eA3F2 e o tamanho do ícone para 36px.

Em seguida, adicione um módulo de título abaixo do módulo de ícone. Certifique -se de adicionar o cabeçalho ao módulo de grupo clicando no ícone preto + em vez do cinza.

Digite web design como o título na guia Conteúdo .

Na guia Design, escolha H5 como o nível de título , entre como a fonte do cabeçalho e médio como o peso da fonte . Defina o estilo da fonte do cabeçalho como maiúscula , com o alinhamento do texto para a esquerda , a cor do texto do título para #000000 e mantenha o tamanho do texto do cabeçalho no tamanho padrão de 16px .

Em seguida, adicione um módulo de texto sob o título dentro do módulo de grupo. Você pode deixar as configurações como estão.

Adicionaremos um módulo de botão para o módulo final na coluna. No entanto, em vez de adicioná -lo ao módulo de grupo, adicionaremos -o embaixo. Isso nos permitirá criar alturas iguais na coluna, mas alinhe o botão na parte inferior, tornando o design mais coeso.

Clique na guia Design e atribua as configurações de estilo desejado ao módulo de botão. Verifique seu botão para garantir que ele esteja fora do módulo de grupo, olhando para a visualização das camadas no menu esquerdo. Quando concluído, o botão deve se parecer com a captura de tela abaixo-alinhada à esquerda com fundo azul e texto branco.

Etapa 2: colunas duplicadas

Depois que a primeira coluna for preenchida com conteúdo, copiaremos o conteúdo da primeira coluna para a segunda e terceira colunas e fará algumas alterações. Você pode excluir a segunda e a terceira colunas e duplicar a primeira, ou copiar e colar o módulo de grupo e o botão nas segunda e terceira colunas.

Em seguida, mude o título do título na 2ª coluna para codificar e o título do título na 3ª coluna para marketing . Também excluiremos parte do conteúdo do módulo de texto na 2ª coluna para que possamos demonstrar como o Divi 5 lida com o Flexbox com comprimentos de conteúdo variados. Como você pode ver, as colunas são irregulares.

Antes de passarmos para a próxima etapa, clique na primeira coluna e adicione o espaçamento de 25px a todos os lados da nossa coluna.

Também adicionaremos um raio de borda de 15px e uma largura de borda de 1px com #666666 como cor.

A última etapa para projetar nossa linha é copiar os atributos de design da 1ª coluna e colá -los nas colunas restantes. Clique com o botão direito do mouse na primeira coluna e selecione Copiar estilos de itens . Em seguida, clique com o botão direito do mouse na 2ª coluna e selecione Colar o estilo de item . Repita esta ação para a 3ª coluna também.

Etapa 3: Definir configurações do Flexbox para alturas iguais

Em seguida, precisaremos definir nossas configurações do Flexbox para a linha. O Divi 5 integra os controles do FlexBox em seu sistema de layout, indo além do Divi 4 do equalize as alturas da coluna. Navegue até a guia Design para a linha e verifique se o Flex é selecionado em Layout .

Em seguida, verifique se a linha é selecionada sob a direção do layout , comece em justificar o conteúdo e o alongamento é selecionado em itens alinhados . Isso informará ao Divi 5 para manter a estrutura da coluna, alinhar todos os itens dentro da linha à esquerda e preencher o espaço disponível dentro do contêiner pai.

Em seguida, clique nas configurações da primeira coluna. Clique no menu suspenso Layout para revelar suas configurações na guia Design . Por padrão, o Flex será selecionado em Layout . No campo de direção do layout , selecione coluna . Sob justificar o conteúdo , selecione o espaço entre . Alinhe todos os itens ao início (à esquerda) e deixe o Layout embrulhado definido sem embrulho .

Repita as etapas acima para as 2º e 3º colunas. Você também pode usar os recursos de cópia/colar ou estender para aplicar as mesmas configurações nas colunas restantes da linha.

Todos os módulos dentro do grupo serão esticados para preencher o espaço disponível, e os botões fora do grupo serão alinhados à parte inferior.

Etapa 4: Responsabilidade do teste

Os pontos de interrupção responsivos personalizáveis do Divi 5 facilitam a garantia de garantir que suas alturas iguais da coluna fiquem ótimas em todos os dispositivos. Use a visualização responsiva alterna para visualizar seu layout no Visual Builder. Por padrão, existem três pontos de interrupção. No entanto, o Divi 5 agora tem 7, que pode ser facilmente ativado clicando no menu Ellipsis na barra de ferramentas na parte superior do Visual Builder. Ative os pontos de interrupção que você deseja e clique em Salvar para aplicá -los.

Clique para visualizar seu layout na visualização do tablet . Como você pode ver, o Flexbox mantém as colunas empilhadas lado a lado.

Você pode alterar a estrutura da coluna para permitir que as colunas se empilhem verticalmente em dispositivos menores. Enquanto estiver no ponto de interrupção do tablet, clique na guia Conteúdo para a linha . Clique em Alterar estrutura da coluna .

Quando a caixa de diálogo aparecer, clique para ativar a linha única em colunas iguais . Isso alterará a linha de 3 colunas para uma única coluna em tablet e dispositivos móveis, preservando a estrutura de 3 colunas nos desktops.

Ao visualizar as alterações em todos os pontos de interrupção, você verá como o Divi faz a transição do layout para telas pequenas.

Ao automatizar o alinhamento da altura, os designers podem se concentrar na criatividade, e não nas correções técnicas, facilitando a construção de sites profissionais em uma fração do tempo. O sistema de layout do Flexbox da Divi 5 também suporta uma melhor organização de conteúdo por meio de grupos de módulos, facilitando a alinhamento dos módulos sem CSS personalizados do que nunca.

Casos de uso comuns

O sistema Flexbox da Divi 5 torna a criação de alturas iguais de coluna versátil e eficaz para vários casos de uso. Abaixo estão algumas maneiras comuns em que o sistema Flexbox da Divi 5 brilha:

1. Listagens de produtos

Nos layouts de comércio eletrônico, os cartões de produto geralmente variam em comprimento de conteúdo devido a títulos ou descrições. Com o Flexbox da Divi 5, você pode criar uma grade de cartões de produto, onde cada coluna mantém a mesma altura, garantindo uma aparência limpa e profissional. Por exemplo, um produto com uma breve descrição se alinha perfeitamente com um com uma descrição mais longa. O sistema Flexbox da Divi 5 permite evitar lacunas desajeitadas e criar uma experiência coesa que promova a confiança e o engajamento do usuário.

2. Seções em destaque

As seções de serviço ou recurso são uma boa opção para o sistema Flexbox da Divi. O FlexBox no Divi 5 garante que todos os módulos dentro de uma linha tenham alturas iguais de coluna, criando uma aparência equilibrada e polida. Seja exibindo BIOS da equipe, serviços ou destaques de recursos, colunas equalizadas facilitam a digitalização de suas páginas da web, melhorando a experiência do usuário.

3. Grades de portfólio

Uma grade de portfólio é o estojo de uso perfeito para o Flexbox, especialmente para freelancers que exibem seu trabalho. O FlexBox garante que os itens da galeria como imagens se alinhem uniformemente, mesmo com diferentes proporções. Você pode usar um módulo de grupo, atribuir uma imagem de fundo e ajustar o espaçamento de acordo. Isso cria uma grade profissional e arrumada que mostra seu trabalho de forma consistente, tornando -o ideal para fotógrafos, designers ou agências com o objetivo de impressionar clientes em potencial.

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!

Familiarize -se com o recurso Flexbox do Divi 5 hoje

O sistema de layout do Flexbox da Divi 5 marca um salto significativo da maneira do Divi 4 de equalizar alturas da coluna, transformando como os usuários do Divi criam colunas iguais. Onde o Divi 4 confiava em um método rígido e dependente de fundo que geralmente exigia CSS personalizado para refinamento, o Divi 5 aproveita o FlexBox para fornecer controles intuitivos e capacidade de resposta perfeita. O resultado é um sistema mais eficiente que remove a necessidade de soluções alternativas de CSS personalizadas e permite que os usuários da DIVI criem facilmente layouts profissionais polidos.

Você está pronto para elevar seus sites de divi? Mergulhe nas configurações do Flexbox do Divi 5 e experimente as possibilidades criativas que eles desbloqueiam. Compartilhe seus comentários abaixo ou conecte -se conosco em nossos canais de mídia social para compartilhar seus pensamentos sobre nosso novo recurso Flexbox.