Criando um sistema de espaçamento baseado em lacunas com Divi 5

O espaçamento consistente é a base de um site profissional polido. Em vez de gerenciar as margens em elementos individuais um por um, você pode confiar em um único sistema que mantém os layouts limpos e equilibrados em seu site.

Com as novas variáveis ​​de design do Divi 5 e os recursos do Flexbox, agora você pode criar um sistema de espaçamento baseado em lacunas diretamente no Visual Builder, não é necessário codificação personalizada. Vamos dar uma olhada!

Por que os métodos de espaçamento tradicionais ficam aquém

As margens e o preenchimento parecem simples o suficiente. Adicione um pouco de espaço aqui, ajuste o preenchimento lá. Mas essa abordagem pode ficar facilmente confusa. Aqui está como isso se desenrola na prática:

Você define uma margem de 30px em um bloco de texto. Então você precisa de espaço em torno de um botão, para adicionar 20px.

Outro módulo precisa de espaço para respirar, para escolher 40px. Cada decisão parece certa no momento, mas você está construindo uma casa de cartas.

Mude para o celular e tudo pode parecer desbalido. Esses valores de pixel cuidadosamente escolhidos não se traduzem. Seu espaçamento parece perfeito na área de trabalho, mas desequilibrado em tamanhos de tela menores. Então você cria valores específicos para dispositivos móveis e os valores do tablet.

Agora você está gerenciando três sistemas de espaçamento diferentes. Essa abordagem dividida dificulta a manutenção de um ritmo visual consistente em seu site.

Como as propriedades de lacunas simplificam o espaçamento

As propriedades do espaço funcionam de maneira diferente das margens tradicionais. Você não aplica espaçamento a cada elemento individualmente. Em vez disso, você define regras de espaçamento no contêiner pai. O contêiner lida com o espaçamento entre todos os elementos filhos automaticamente.

Com o Flexbox ativado, você obtém dois controles de lacuna: horizontal e vertical. Defina a lacuna horizontal para 24px, e todos os elementos filhos recebem 24px de espaço entre eles horizontalmente. Defina o espaço vertical para 15px e os elementos empilhados obtêm 15px do espaço vertical.

Isso funciona para qualquer conteúdo dentro do contêiner Flexbox. Módulos de texto, imagens, botões, divisores e o que você coloca lá, obtém o mesmo espaçamento consistente. Você não precisará cavar módulos individuais e ajustar suas margens separadamente; As propriedades de lacunas lidam com o espaçamento matemático.

O método tradicional faz escolhas de espaçamento aleatório: 10px aqui, 20px lá, 40px em outro lugar. Esses valores dispersos causam inconsistências e dificultam saber qual espaçamento se aplica. Propriedades do GAP Remova adivinhação usando uma regra consistente para todos os elementos.

Essa abordagem ainda tem limitações. Você ainda precisa se lembrar de todos os valores que usou e aplicá -lo manualmente onde precisar. Você precisa adivinhar quais valores funcionam onde. Depois de definir esses valores, mudar de idéia significa encontrar cada um e substituí -lo manualmente, deixando espaço para erros e inconsistências.

Um sistema de espaçamento baseado em lacunas com variáveis ​​Flexbox e design é uma abordagem muito melhor.

Como configurar o sistema de lacunas no divi 5

Construir um sistema de espaçamento baseado em lacunas parece complexo, mas o Divi 5 o torna surpreendentemente direto. Você não precisa de nenhum conhecimento de codificação ou estruturas externas. O Visual Builder lida com tudo através de variáveis ​​de design e controles do Flexbox. Vamos orientá -lo em cada etapa, desde a criação de suas variáveis ​​de espaçamento até a economia de predefinições reutilizáveis.

1. Crie variáveis ​​de espaçamento

O Divi 5 pode armazenar valores de lacunas dentro do construtor visual usando variáveis ​​de design. Você constrói seu sistema de espaçamento uma vez e aplica esses valores em qualquer lugar que os controles Flexbox apareçam, nenhuma função CSS personalizada é necessária.

O Variable Manager pode ser encontrado na barra lateral esquerda do seu construtor visual. Clique nesse ícone e abra a guia Números onde as variáveis ​​de espaçamento podem ser adicionadas.

Aqui, você criará valores que podem ser usados ​​em todo o site em vez de pixels codificados. Várias variáveis ​​de design estão disponíveis; Não vamos cobrir os que estão neste post, mas temos um excelente guia.

Comece com sua unidade de espaçamento base. A maioria dos designers trabalha com 8-12px como base, mas você pode escolher 4px, 10px ou o que quer que seja o seu ritmo de design. Você pode usar unidades avançadas aqui, além de apenas pixels. Por exemplo, estamos começando com o REM em vez de pixels (assumindo o padrão do navegador 1Rem = 16px):

• Gap XS: 0,75REM (~ 12px para relacionamentos apertados para colunas com apenas ícone e texto)
• Gap S: 1.25Rem (~ 20px para colunas com blocos de texto)
• Gap M: 2REM (~ 32px para caixas de recursos, colunas de serviço)
• Gap L: 3REM (~ 48px para seções de conteúdo principal, layouts da barra lateral)

Esses rótulos não são consertados; Você e sua equipe podem renomeá -los conforme necessário. Você também pode adicionar mais variáveis ​​de lacunas. As unidades REM escalam com as configurações da fonte do navegador; portanto, os visitantes que aumentam o tamanho do texto obtêm espaçamento proporcional. Isso melhora a acessibilidade.

Use grampos para fazer lacunas escaláveis

Também podemos usar o CLAMP (). Explicaremos brevemente se você não souber o que é um grampo (). Mas primeiro, considere adicionar o seguinte às variáveis ​​numéricas:

• Gap da coluna horizontal: grampo (16px, 2VW, 32px) (para lacunas horizontais entre cartões, recursos, etc.)
• Gap da coluna vertical: grampo (16px, 1,5VW, 32px) (para lacunas verticais entre cartões, recursos, etc.)

CLAMP () é uma unidade CSS segura para usar. Você dá três valores: min, preferido e máx. O navegador tenta o valor preferido, mas se for muito pequeno, usa o min e, se for muito grande, usa o máximo.

Por exemplo, lacuna horizontal da coluna: grampo (16px, 2VW, 32px). A lacuna escala com largura da tela (2VW = 2% da viewport). Não vai ficar abaixo de 16px em telas pequenas ou acima de 32px em telas grandes. Isso mantém o espaçamento equilibrado sem pontos de interrupção ou consultas de mídia.

Você pode usar qualquer valores. Escolhemos esse método porque é fácil de manter, adapta -se para mudar e produz resultados mais consistentes.

2. Ative o layout do Flexbox em suas seções

Novas seções usam Flexbox por padrão. Para sites mais antigos, converta uma seção clicando no ícone Configurações, abrindo a guia Design, escolhendo o estilo de layout na guia Layout e selecionando "flex". Faça o mesmo com suas linhas e colunas.

Depois de ativar o Flex, você obtém opções como justificar conteúdo para alinhamento e distribuição. Os controles alinhados de itens permitem definir como os itens se comportam quando o espaço acaba horizontalmente.

Aqui, você pode detectar os controles de lacuna, que possuem controles deslizantes horizontais e verticais separados para definir o espaçamento entre colunas ou módulos dentro de uma linha.

3. Aplique valores de lacuna usando suas variáveis

Depois de configurar suas variáveis ​​de lacunas no Variable Manager da Divi, aplicar -as às configurações do Flexbox Gap se torna direto através do sistema de conteúdo dinâmico. Navegue até as configurações de layout e pairam sobre os rótulos nos campos de lacunas horizontais ou verticais para revelar o ícone de conteúdo dinâmico.

Clique no ícone de conteúdo dinâmico para abrir a caixa de diálogo de seleção de variáveis. Suas variáveis ​​de lacunas salvas aparecem neste menu.

Como você deve ter notado, adicionamos dois conjuntos de lacunas com base no contexto em que seriam usados. Vamos dar um mergulho mais profundo para entender o porquê:

Lacunas de grampo: entre colunas flexíveis

Suas lacunas de grampo funcionariam no nível do "contêiner" através das configurações do Flexbox da Divi.

Aplique lacuna na coluna horizontal [grampo (16px, 2VW, 32px)] quando você tiver colunas organizadas lado a lado, como três cartões de serviço em uma linha. Depois de selecionado, o Divi o aplica automaticamente na configuração do GAP. O campo exibirá seu nome de variável, confirmando a conexão. Isso cria espaçamento horizontal proporcional entre a coluna 1, a coluna 2 e a coluna 3 quando a direção do layout é definida como uma linha.

Aplique lacuna de coluna vertical [grampo (16px, 1.5VW, 32px)] Quando a direção do layout estiver definida como coluna, empilhando itens verticalmente. Isso espalhará itens proporcionalmente de cima para baixo quando a direção do layout for definida como uma coluna.

Quando as colunas com a direção da linha envolvem várias linhas, como seis cartas dispostas em três colunas por linha, aplique as duas lacunas. Uma lacuna horizontal espaça itens dentro de cada linha, enquanto uma lacuna vertical espana as linhas.

Lacunas básicas: conteúdo dentro de linhas

Suas lacunas básicas controlam as relações entre peças de conteúdo dentro de cada coluna. Quando um título é seguido por um parágrafo e um botão na mesma coluna, considere aplicar o Gap XS (0,75REM) entre eles.

Considere o uso do GAP S (1.25REM) para grupos de conteúdo com vários elementos de texto ou lacuna L (3REM) se você precisar de espaçamento significativo entre duas colunas, especialmente se a direção do layout da coluna estiver definida como uma linha.

A vantagem das variáveis ​​de design

As variáveis ​​de design têm vários benefícios sobre os valores de digitação manualmente. Como os rótulos podem ser contextuais, eles continuam espaçando consistentes sem memorizar os valores de pixel ou REM.

Ao alterar a filosofia de espaçamento, atualize uma variável no Variable Manager para atualizar todas as lacunas usadas no site.

Esse método visual também evita erros de espaçamento quando os membros da equipe inserem valores diferentes. As variáveis ​​de lacunas criam um idioma comum para o espaçamento, mantendo os layouts alinhados com os padrões de design que você definiu. Isso é especialmente útil em grandes projetos com muitos colaboradores ou após a entrega do cliente quando os clientes editam ou adicionam páginas.

4. Configure lacunas responsivas

Os telefones celulares têm espaço horizontal limitado. Seu layout de serviço de três colunas fica ótimo na área de trabalho, mas fica apertado e rígido para ler em uma tela de telefone de 360px.

O Divi 5 oferece sete pontos de interrupção personalizáveis ​​para trabalhar: telefone, telefone largo, tablet, comprimido largo, desktop, widescreen e ultra largo. Cada ponto de interrupção funciona de forma independente. Você pode alterar a direção do layout, trocar variáveis ​​de lacuna ou ajustar o alinhamento no celular sem estragar a área de trabalho. Isso permite ter como alvo as larguras exatas da tela, onde seu layout precisa mudar.

Mude para o seu ponto de interrupção do telefone e altere a direção do layout de "linha" para "coluna". Limpe a opção Horizontal Gap, pois suas colunas empilham verticalmente, em vez de lutar pelo espaço horizontal.

A lacuna vertical baseada em grampo diminui e cresce automaticamente à medida que a largura da viewport muda. Em uma pequena tela de telefone, 2VW é igual a 7px, mas o grampo não excederá o mínimo de 16px. Em uma tela maior, 2VW pode significar 18px e em uma tela ainda maior, 20px.

O espaçamento cresce suavemente entre esses limites à medida que o tamanho da tela muda. Sem definir valores diferentes manualmente, você obtém espaçamento apertado no móvel e espaçamento generoso na área de trabalho.

As lacunas básicas ainda podem precisar de ajustes manuais por ponto de interrupção. O Gap M pode parecer muito apertado no celular. Mude para o seu ponto de interrupção móvel e aplique lacuna L em vez da opção GAP vertical.

Você também pode criar variáveis ​​específicas para dispositivos móveis, como "Gap Mobile S" ou "Gap Mobile L" e aplicá-las aos pontos de interrupção do telefone e do tablet. No entanto, as lacunas básicas de base e grampo funcionam bem na maioria dos casos.

5. Salve sua configuração como predefinido

Seu sistema de lacunas funciona bem agora. As variáveis ​​de design fornecem controle sobre o espaçamento através da interface visual com a qual você trabalha. Mas a configuração de configurações do Flexbox repetidamente envelhece rapidamente. Você precisa ajustar as configurações de direção, alinhamento e embalagem do layout. Em seguida, você aplica suas variáveis ​​de lacuna em cada nova seção. Este processo consome tempo.

Predefinições de grupo de opções corrigem esse problema. Ele armazena sua configuração completa do Flexbox, incluindo direção de layout, alinhamento, embalagem, justificativa e lacunas horizontais e verticais que fazem referência às suas variáveis ​​de design.

Depois de definir todas as configurações do Flexbox, passe o mouse sobre o painel de estilo de layout. Você verá o ícone de predefinições do grupo de opções.

Clique nele e selecione "Crie predefinição dos estilos atuais". Nomeie -o com base no que o layout faz: "Grid de três colunas", "Grid de serviços" ou "exibição de cartões".

A predefinição é transportada pela configuração do Flexbox para qualquer contêiner. Ele não copia cores de fundo, fontes ou outro estilo visual.

Aplique sua “grade de três colunas” predefinida a qualquer linha. Ele configura automaticamente o mesmo espaçamento, alinhamento e comportamento de embalagem. Cada linha ou coluna mantém sua aparência visual enquanto usa a mesma estrutura de layout.

Você gasta menos tempo recriando configurações que já aperfeiçoou. A identidade visual permanece exclusiva para cada seção. A fundação estrutural permanece consistente em todo o seu site. Seu sistema de lacunas permanece rápido para implementar e seus padrões de layout comprovados são reutilizados com eficiência.

Obtenha espaçamento perfeito todas as vezes com o divi 5

Com as novas variáveis ​​Flexbox e design do Divi 5, o espaçamento consistente se torna fácil. O GAP controla os layouts de equilíbrio entre os dispositivos, enquanto as variáveis ​​garantem que as atualizações reflitam em todo o site com uma única alteração.

Em vez de correções constantes, você obtém um sistema claro em que pode confiar. Defina seu espaçamento uma vez, reutilize -o em todos os lugares e concentre -se em projetar ótimas experiências para seus visitantes.