Manter a consistência visual em um site grande é um dos maiores desafios do design web. Cores, fontes, espaçamentos e sombras mudam de página para página, e a cada atualização manual o risco de desalinhamento cresce. O Divi 5 resolve esse problema com as Variáveis de Design – valores nomeados e reutilizáveis que funcionam como alicerces de um verdadeiro sistema de design global.
Na Parte 2 desta série, exploramos a interface do Divi 5. Agora é hora de ir direto ao ponto: criar e gerenciar variáveis que vão unificar o visual do seu projeto. Se você já usou variáveis CSS ou tokens de design em ferramentas como Figma, vai reconhecer o conceito. Mas aqui, tudo fica integrado ao builder visual, sem precisar de código.
Neste artigo, você vai aprender o que são as Variáveis de Design, como configurá-las no Divi 5 e como aplicá-las para criar um sistema consistente, escalável e fácil de manter. Vamos lá?
O que são Variáveis de Design no Divi 5?
As Variáveis de Design são contêineres nomeados que armazenam valores como cores, fontes, tamanhos, bordas e sombras. Em vez de ajustar manualmente cada módulo ou seção, você define o valor uma vez e o referencia em todo o site. Quando precisar alterar, edita a variável e a mudança se propaga automaticamente.
No Divi 5, essas variáveis ficam organizadas em um painel centralizado, acessível pelo menu Design Variables dentro do builder. Lá você pode criar categorias (ex.: “Cores Primárias”, “Tipografia”, “Espaçamentos”) e definir tokens para cada propriedade.
Por que usar um sistema de design global?
Imagine um site com 50 páginas. A cor primária (#2B6CB0) aparece em botões, links, cabeçalhos e backgrounds. Se o cliente pedir para mudar para #1A365D, você teria que percorrer cada módulo manualmente. Com variáveis, a mudança é instantânea.
Além da economia de tempo, um sistema de design global traz:
- Consistência visual – todas as páginas seguem o mesmo guia de estilos.
- Escalabilidade – novos módulos já herdam os tokens definidos.
- Manutenção simplificada – alterações centralizadas evitam retrabalho.
- Colaboração facilitada – equipes trabalham com um vocabulário comum (ex.: “uso a variável –cor-primaria”).
“Variáveis de Design não são apenas um recurso – são a base de uma arquitetura de front-end profissional.”
Passo a passo: como criar variáveis de design no Divi 5
Vamos criar um conjunto básico para um projeto fictício: uma loja de café artesanal. Siga os passos abaixo.
1. Acesse o painel de Variáveis de Design
No editor Divi 5, clique no ícone de engrenagem (Configurações Globais) no canto superior direito. Dentro do modal, selecione a aba Design Variables. Você verá uma lista de categorias pré-definidas (Cores, Tipografia, etc.).
2. Crie uma categoria personalizada (opcional)
Clique em “Add Category” e nomeie, por exemplo, “Café – Cores”. Organizar por contexto ajuda equipes maiores.
3. Adicione variáveis de cor
Clique em “Add Variable” dentro da categoria. Preencha:
- Name: “Cor Primária”
- Slug:
cor-primaria(gerado automaticamente, mas pode editar) - Value:
#6B4226(marrom escuro, tom de café) - Type: Cor
Repita para “Cor Secundária” (#D4A574), “Cor de Fundo” (#F5EDE0) etc.
4. Crie variáveis de tipografia
Volte para categoria “Tipografia” (ou crie uma nova). Adicione:
- Fonte Títulos:
Playfair Display(serifada, elegante) - Fonte Corpo:
Lato(sans-serif, legível) - Tamanho H1:
48px - Tamanho Parágrafo:
16px - Altura de Linha:
1.6
Perceba que você pode usar valores absolutos ou relativos (em, rem). O Divi 5 respeita a unidade que você definir.
5. Defina variáveis de espaçamento e borda
Crie uma categoria “Espaços”. Adicione:
- Padding Botão:
12px 24px - Margin Seção:
60px 0 - Borda Padrão:
2px solid var(--cor-primaria)(sim, você pode referenciar outras variáveis no valor!)
Aplicando variáveis nos módulos
Com as variáveis criadas, vá para qualquer página. Selecione um módulo (ex.: Botão). No painel de configurações, você encontrará um novo ícone de “+” ao lado de campos como Cor de Fundo, Tamanho da Fonte etc. Clique nele para abrir a lista de variáveis disponíveis.
Escolha --cor-primaria para o fundo do botão e --tamanho-paragrafo para o texto. Pronto – o módulo agora está vinculado ao sistema global.
Boas práticas ao criar seu sistema de design
Para que as variáveis sejam realmente úteis, siga estas recomendações:
- Mantenha um número limitado de variáveis – comece com 5 a 10 cores, 3 a 5 tamanhos de fonte e 2 a 3 espaçamentos. Depois expanda conforme necessário.
- Use nomes consistentes – defina um padrão:
--cor-primaria,--fonte-titulo,--espacamento-grande. Evite variações como--cor-1. - Documente o propósito de cada variável – o Divi 5 permite adicionar descrições. Aproveite para anotar onde cada token deve ser usado.
- Crie temas separados – para lojas com modo claro/escuro, duplique as variáveis em categorias diferentes (ex.: “Claro-Cores” e “Escuro-Cores”) e alterne via lógica condicional (JS ou classes CSS).
- Teste em vários breakpoints – variáveis de tamanho podem ter valores diferentes para desktop e mobile? No Divi 5, você pode definir variáveis responsivas diretamente, mas lembre-se de testar.
Integração com outros builders e ferramentas
Se você também usa Elementor ou Gutenberg, saiba que o conceito de variáveis de design é semelhante. No Elementor, por exemplo, existe o recurso de “Global Colors” e “Global Fonts”. A diferença é que no Divi 5 o sistema é mais granular, permitindo variáveis para quase qualquer propriedade CSS.
Para quem trabalha com Crocoblock ou JetEngine, as variáveis podem ser combinadas com campos dinâmicos, criando templates ainda mais inteligentes. Por exemplo, o título de um post pode usar a fonte definida na variável --fonte-titulo.
Exemplo prático: mudança instantânea de paleta
Suponha que seu cliente queira testar uma paleta mais vibrante para o verão. Você duplica a categoria “Cores” e renomeia para “Cores Verão”. Altera os valores: primária para #E67E22 (laranja), secundária para #F1C40F (amarelo). Depois, no painel de configurações globais, você troca a categoria ativa de “Cores” para “Cores Verão”. Todos os módulos que usam variáveis da categoria original agora apontam para os novos valores.
Isso é útil para campanhas sazonais, testes A/B ou temas sazonais sem precisar recriar páginas.
Conclusão
As Variáveis de Design do Divi 5 transformam a maneira como gerenciamos estilos em sites WordPress. Elas oferecem o poder dos tokens de design com a praticidade de um builder visual. Se você leva a sério a consistência e a eficiência no desenvolvimento web, esse recurso não é opcional – é essencial.
Agora é a sua vez: abra seu projeto Divi 5, crie as primeiras variáveis e comece a construir um sistema de design que vai economizar horas de trabalho repetitivo. E não pare por aí – compartilhe este artigo com sua equipe e estabeleça um padrão de design unificado.
Se você ainda não usa Divi 5, experimente a versão mais recente e veja como as variáveis podem simplificar seu fluxo de trabalho. Suas futuras versões do projeto vão agradecer.
