Criando um sistema de dimensionamento e espaçamento com variáveis ​​de design Divi 5

O Divi 5 oferece uma maneira estruturada de definir, gerenciar e reutilizar decisões de dimensionamento e espaçamento em todo o site. Usando variáveis ​​e predefinições de design, você pode criar um sistema de design escalável fácil de manter, ajustar e replicar.

Nesta postagem, mostraremos como pensar em sistemas e o guiaremos na construção de um sistema abrangente de dimensionamento e espaçamento.

O Divi 5 está pronto para ser usado em qualquer novo site que você criar, mas sugere que você adie a migração de sites existentes (por enquanto).

Por que usar um sistema de dimensionamento e espaçamento?

A maioria dos usuários do Divi deseja consistência em layouts, margens e tipografia. Mas poucos dedicam um tempo para definir esses padrões desde o início. Ou, se o fizer, você provavelmente o fez através de um tema infantil com muito estilo. Agora, você pode:

Inscreva -se no nosso canal do YouTube

1. Defina uma variável numérica uma vez (como 16px ou grampo (16px, 4VW, 48px))
2. Atribua -o a predefinições de módulo/elemento
3. Ou predefinições de grupo de opções (como espaçamento ou dimensionamento)
4. Atualize a variável posterior e veja as alterações refletidas em todo o local
5. Use menos CSS no geral para páginas mais finas

Com outros construtores de sites, os designers tendem a se apoiar fortemente nas estruturas CSS para aplicar espaçamento e dimensionamento consistentes enquanto usam um sistema que podem levar de projeto para projeto. Com o Divi 5, você pode criar sua própria "estrutura de design" que funciona dentro da interface do usuário Divi usando as variáveis ​​de design da Divi sem precisar tocar em uma única linha de código.

Tamanho do elemento, preenchimento e margens

Cada elemento da web tem três componentes que afetam o espaçamento e o tamanho gerais:

• Tamanho do elemento : o tamanho do conteúdo do núcleo de um elemento, definido por largura e altura.
• Preenchimento : o espaço adicionado dentro de um elemento, aumentando sua área clicável e tamanho visual.
• Margem : o espaço adicionado fora de um elemento, afastando -o de outros elementos.

Exemplos práticos para elementos de divi

Em geral, é assim que você pode esperar usar preenchimento e margem no divi:

• As seções geralmente têm preenchimento superior e inferior (não margem) para criar espaçamento vertical dentro de uma página.
• As linhas geralmente se beneficiam do preenchimento vertical, mas, de outra forma, permitem que o conteúdo as preencha.
• As colunas se concentram principalmente na margem aplicada para criar lacunas de coluna.
• Os módulos geralmente usam uma margem inferior para separar claramente elementos empilhados, mas a quantidade de margem depende de agrupamentos visuais.

Valores de espaçamento padrão da divi

Iniciantes para o web design que usam o Divi provavelmente nem percebem que o Divi toma algumas decisões de espaçamento para você fora da caixa. Designers mais experientes geralmente os ajustam para corresponder aos seus objetivos, mas esses padrões permitem que a maioria das pessoas inicie seus projetos rapidamente.

Esses padrões podem ser úteis, mas os designers geralmente preferem definir seus próprios padrões de espaçamento. Se você quisesse ver como seria a sua página sem o estofamento padrão configurado, você pode fazer isso:

1. Vá para qualquer elemento e encontre o grupo de opções de espaçamento na guia Design .
2. Abra o grupo de opções padrão e defina o preenchimento superior e inferior para 0 (zero).
3. Salve a predefinição do espaçamento padrão para aplicá-lo em todo o local a todos os elementos.

Isso mostrará como é suas páginas sem as configurações padrão da Divi. Não ficará tão bom, mas você começará a ver o que precisa fazer para criar seu próprio sistema de design (ou pode usar os padrões da Divi e fazer alterações como achar melhor).

Usando uma escala de espaçamento de 8 pontos

A escala de 8 pontos é um esquema de layout em que os valores de espaçamento são construídos usando incrementos de 8. Portanto, em vez de usar valores arbitrários como 13px ou 27px, você adere a valores como 8, 16, 24, 32, 40, 48 e assim por diante.

Este sistema ajuda:

• Mantenha o ritmo vertical e horizontal usando uma rubrica consistente de tamanhos
• Certifique -se de que as pilhas de espaçamento são de maneira limpa nos pontos de interrupção
• Acelerar a tomada de decisão (menos opções = design mais rápido)

Você pode usar a escala em PX ou REM, dependendo da sua preferência ou tipo de escala. Por exemplo, 16px se torna 1Rem quando o tamanho da fonte base é de 16px.

Mockup de uma página que agrupa sua atenção a áreas selecionadas e empurra os visitantes para baixo na página com espaçamento vertical

O espaçamento vertical diz ao leitor onde se concentrar. Os itens agrupados com o espaçamento mais apertado são naturalmente vistos como relacionados entre si. As coisas separadas por mais espaço indicam uma nova idéia.

Como criar um sistema de dimensionamento e espaçamento

Um sistema para seus tamanhos e espaços consiste em duas coisas: definir variáveis ​​ou tokens que serão usados ​​em um design e usando consistentemente essas variáveis ​​em todo o design do site. Aqui está como você pode fazer isso com o Divi.

Etapa 1: Crie variáveis ​​de números no gerenciador de variáveis ​​de design

O Divi 5 apresenta uma interface visual para definir valores numéricos reutilizáveis. Cada variável de número inclui:

1. Um nome facilmente recordável (por exemplo, gap-sm, text-h1) que não é muito longo
2. Um valor numérico ou função calc () ou grampo ()
3. Uma unidade CSS (PX, REM, %, VW, etc.)

Por causa do gerenciador de variáveis, você não precisa escrever variáveis ​​CSS em uma folha de estilo separada. Você define tudo isso no Design Variable Manager e os seleciona nos campos de entrada no Visual Builder.

Abaixo está um conjunto inicial completo de variáveis ​​numéricas para corresponder a um sistema de design de 8 pontos. Você não precisa usar isso, mas isso lhe dá uma idéia do que é possível.

E aqui está o que parece preencher isso no Variable Manager.

Observe que esses valores de espaçamento serão úteis no próximo recurso Flexbox do Divi 5

Etapa 2: Planejando seu sistema de espaçamento de 8 pontos

Suas páginas normalmente conterão padrões repetidos de elementos. Procure grupos ou clusters comuns como:

• Título, parágrafo, botão
• Pedimento de cabeçalho pequeno, cabeçalho grande, parágrafo
• Ícone, parágrafo
• Cartas contendo vários elementos

Com seus wireframes iniciais (ou projetos de espaço reservado), você terá a oportunidade de criar padrões em potencial. Você também criará coisas que não se encaixam nos padrões que precisará decidir como lidar. Mas isso faz parte do design.

Você pode fazer isso no figma ou criando diretamente uma página de Wireframe com elementos de espaço reservado no Divi. Basta obter tudo o que você pode definir em uma página. Você pode usar uma extensão do Chrome chamado Medir tudo para ajudá -lo a visualizar o espaçamento (a princípio com o espaçamento padrão da Divi) quando você começa a ajustá -los.

Para usar a extensão, ativá -la na barra de ferramentas do Chrome Extension. Em seguida, clique em um elemento na página em que você está interessado, concentrando a ferramenta nesse elemento. A partir daí, mova o mouse para medir vários aspectos entre o elemento atualmente selecionado e outros elementos enquanto você passa sobre eles.

Etapa 3: Atribua variáveis ​​de números às predefinições do grupo de opções

Com um quadro de arame de uma página configurado e uma variável de design no local, você pode começar a fazer alterações de espaçamento e tamanho relacionadas à sua página. Você pode começar com grupos de conteúdo primeiro. Vamos nos concentrar no cabeçalho, parágrafo e botão na seção de heróis.

Wireframe com conteúdo de espaço reservado e dimensionamento de fontes/fontes no lugar

Observe que, neste momento, você já desejará ter um primeiro rascunho da sua tipografia configurada. Isso inclui fontes, dimensionamento de fontes e espaçamento de altura/letra de linha. Sem isso, é muito provável que você reequilibre todo o seu tamanho depois de estabelecer seu sistema tipográfico.

Exemplo de opções de dimensionamento de tipografia configuradas como variáveis ​​numéricas

Agora, queremos avaliar qual espaçamento padrão está sendo aplicado no design. Para fazer isso, você pode olhar para o gráfico anteriormente no post e compará -lo com o que temos na seção Herói. Obviamente, existe uma seção (#1) e duas linhas (#2 e#3). No momento, definiremos o preenchimento de linha/parte inferior da linha padrão como zero.

Em seguida, temos duas opções para o espaçamento da seção: podemos definir o preenchimento para zero e descobrir mais tarde, ou podemos definir alguns preenchimentos preliminares de cima e inferior no elemento padrão predefinido para seções para se parecer mais assim:

• Desktop : preenchimento superior e inferior definido para Space-xxxl
• Tablet : preenchimento superior e inferior definido para Space-xxl
• Mobile : preenchimento superior e inferior definido para Space-XL

Mas o que você faz depende inteiramente de você e das variáveis ​​de design de espaçamento que você acaba configurando (ou usando os padrões, se você preferir adotá -las como suas). O que temos agora (com preenchimento de linha padrão definido como zero e preenchimento de seção personalizada):

Etapa 4: espaçamento do módulo

A próxima coisa a fazer é trabalhar no espaçamento entre os módulos dentro das seções/linhas. A chave é escolher uma maneira consistente de aplicar espaçamento aos módulos.

Você tem opções, você pode dividir o espaçamento de várias maneiras:

• Aplique espaçamento no margin-top
• Aplique espaçamento no fundo da margem
• Aplique espaçamento uniformemente entre margem e gargalhada

É importante lembrar que muitos módulos têm um fundo de margem aplicado por padrão, por isso recomendo que você vá com essa convenção e comece por aí ao definir seu paradigma de espaçamento. Para iniciantes, você pode definir as margens superior/inferior como zero para ver como o espaçamento entre os módulos parece sem nenhum padrão aplicado a eles.

Nesta seção, aplicamos 0px à margem superior e inferior para ver todos esses módulos sem espaçamento padrão

Agora, podemos começar a atribuir variáveis ​​de design de espaçamento ao fundo da margem desses módulos para criar um sistema de espaçamento. Começaremos com o cabeçalho e o texto do corpo.

Ao começar a ver padrões com o espaçamento do módulo, você pode adicionar essas opções de espaçamento às predefinições de elementos padrão. E como você precisa criar regras de espaçamento para elementos que se desviam, você pode criar predefinições de elementos personalizados. Os novos elementos usarão a predefinição padrão a partir daí, mas você pode selecionar rapidamente uma predefinição de elemento personalizada para várias situações.

Como você usará o Divi 5 para dimensionar e espaçar?

Criar um sistema de espaçamento e dimensionamento com quem você está feliz se resume a praticar os fundamentos e se inclinar para as ferramentas em questão. O Divi 5 está a caminho de criar o sistema de design de fato para sites do WordPress. Ele atinge o ponto ideal de ter muita flexibilidade, mas é fácil envolver a cabeça.

Se você nunca pensou em criar sistemas de design, o Divi permite que você pense nisso a partir de uma variável de design e um nível predefinido, não apenas em um módulo individual ou nível de elemento. Isso ajuda você a aplicar consistentemente as decisões de design base a elementos mais rápidos do que nunca.

Você vai experimentar o sistema de 8 pontos ou tem outras coisas planejadas? Além disso, é sua primeira vez pensando no espaçamento padrão da Divi? Isso torna o design com o Divi automático, mas para designers profissionais, você pode alterar alguns desses padrões para obter sua visão perfeita de pixels.

O Divi 5 está pronto para ser usado em qualquer novo site que você criar.