Se você já trabalhou com o WordPress e o tema Divi, sabe que um dos maiores desafios é manter a consistência visual em diferentes dispositivos. Tamanhos que funcionam em desktop podem quebrar em mobile, e cores que parecem harmônicas no design às vezes não se traduzem bem na prática. O Divi 5 chega para resolver isso de forma elegante, com um sistema de variáveis e presets que transforma a maneira como você constrói layouts.
O Variable Generator é a ferramenta que unifica dois pilares do design moderno: sistemas de tamanho fluido (com a função clamp() do CSS) e paletas de cores relativas (usando o espaço de cor HSL). Em vez de definir valores fixos e esperar que funcionem, você cria regras matemáticas que se adaptam automaticamente. O resultado é um tema mais leve, mais rápido de ajustar e muito mais previsível.
Neste artigo, você vai aprender exatamente como configurar esse gerador, desde os conceitos básicos até exemplos práticos que pode aplicar hoje nos seus projetos. Prepare-se para dar um salto de qualidade no seu design system.
O que é o Variable Generator do Divi 5?
O Variable Generator é um módulo nativo do Divi 5 que permite criar e gerenciar variáveis CSS personalizadas. Ele funciona em conjunto com o sistema de presets do tema, que são grupos de variáveis predefinidas. Por exemplo, você pode definir uma variável chamada --spacing-md e usá-la em qualquer lugar do layout — seja margem, padding ou gap.
A grande novidade é a capacidade de gerar valores fluidos usando clamp(). Em vez de um valor fixo como 32px, você define um intervalo com mínimo, ideal e máximo: clamp(1rem, 4vw, 3rem). Isso faz com que o tamanho se ajuste suavemente entre mobile e desktop, sem media queries.
Como funciona o sistema de tamanhos fluido com clamp()
A função clamp() do CSS permite definir um valor que se ajusta fluidamente entre um mínimo e um máximo, baseado em uma expressão como viewport width (vw). No Variable Generator, você pode configurar três parâmetros:
- Valor mínimo: o menor tamanho que o elemento terá (ex: 14px).
- Valor preferido: a expressão fluida (ex: 2vw).
- Valor máximo: o maior tamanho permitido (ex: 48px).
O resultado é algo como clamp(0.875rem, 2vw, 3rem). Esse valor é atribuído a uma variável, como --font-size-base, e reaproveitado em todo o tema. Se você quiser aumentar a escala geral, basta alterar essa única variável.
Exemplo prático: criando uma escala tipográfica fluida
Suponha que você queira uma hierarquia de títulos que se adapte perfeitamente. No Variable Generator, crie variáveis para cada nível de heading:
--h1: clamp(2.5rem, 5vw, 4.5rem);
--h2: clamp(2rem, 4vw, 3.5rem);
--h3: clamp(1.5rem, 3vw, 2.5rem);
--body: clamp(1rem, 1.5vw, 1.25rem);Depois, no Construtor Divi, você aplica essas variáveis nos respectivos elementos. Pronto: em mobile os títulos serão menores, em tablets médios e em desktop maiores — sem nenhum breakpoint manual.
rem nos valores mínimo e máximo. Isso respeita as configurações de zoom do navegador do usuário.Criando paletas de cores relativas com HSL
O segundo pilar do Variable Generator é o suporte a cores relativas usando o espaço de cor HSL (Matiz, Saturação, Luminosidade). Em vez de definir cores hexadecimais fixas, você define uma cor base e deriva as demais a partir dela.
Por exemplo, defina uma variável --color-primary com o valor hsl(220, 80%, 50%). Agora, para criar uma variação mais escura, você faz:
--color-primary-dark: hsl(from var(--color-primary) h s calc(l - 20%));Isso subtrai 20% de luminosidade da cor base, gerando um tom mais escuro automaticamente. Se você mudar a cor primária, todas as variações se ajustam — um sonho de manutenção.
Construindo uma paleta completa
Com o Variable Generator, você pode criar dezenas de cores derivadas com operações matemáticas simples:
| Variável | Cálculo relativo | Resultado (exemplo) |
|---|---|---|
--color-primary |
Base | hsl(220, 80%, 50%) |
--color-primary-light |
Aumenta L em 15% | hsl(220, 80%, 65%) |
--color-primary-dark |
Diminui L em 20% | hsl(220, 80%, 30%) |
--color-accent |
Muda H em 60° | hsl(280, 80%, 50%) |
--color-gray-200 |
Saturação 0%, L 90% | hsl(0, 0%, 90%) |
“Cores relativas eliminam o retrabalho. Mude a cor primária e veja todo o sistema se ajustar magicamente.”
Aplicação prática no Divi 5
O Variable Generator está integrado ao Painel de Personalização do Divi 5. Para começar, vá em Divi → Theme Customizer → Variable Generator. Lá você encontrará:
- Campos para definir variáveis de tamanho (spacing, font-size, border-radius, etc.).
- Campos para cores com suporte a expressões relativas HSL.
- Opção de exportar/importar todo o conjunto de variáveis para usar em outros sites.
Depois de configuradas, as variáveis ficam disponíveis em todos os módulos do Divi. No Construtor Visual, você pode selecionar a variável diretamente nos campos de design (ex: Margem → digite var(--spacing-lg)).
Dicas avançadas para otimização
Para extrair o máximo do Variable Generator:
- Combine
clamp()commin()emax()para cenários mais complexos, como larguras de container que nunca ultrapassam um valor fixo. - Use presets para diferentes seções: crie um preset “Home”, outro “Blog” e outro “Produtos”. Cada um pode ter escalas tipográficas ligeiramente diferentes.
- Documente suas variáveis em um arquivo externo (ex: no Figma) para manter a comunicação entre design e desenvolvimento.
Se você está acostumado com ferramentas como Elementor, vai sentir falta de uma interface visual para criar variáveis. No Divi 5, o processo é mais técnico, mas o resultado é muito mais eficiente e padronizado.
Conclusão
O Variable Generator do Divi 5 é uma ferramenta indispensável para quem busca um design system profissional, responsivo e de fácil manutenção. Com sistemas de tamanho fluido via clamp() e paletas de cores relativas em HSL, você elimina inconsistências e reduz drasticamente o tempo de ajustes.
Para dominar completamente o recurso, sugiro montar um projeto de teste: crie 10 variáveis de tamanho e 8 cores derivadas, aplique-as em um layout simples e veja como a alteração de um único valor transforma tudo. Você nunca mais vai querer voltar aos valores fixos.
Quer aprender ainda mais? Explore a documentação oficial do Divi 5 e compartilhe suas experiências nos comentários. O futuro do design responsivo começa agora — e ele é fluido.
