Se você já passou horas ajustando cores, fontes e espaçamentos em cada página de um site, sabe como é frustrante manter a consistência visual. No WordPress, com o Divi 5, esse problema tem uma solução elegante: os Presets. Na Parte 3 do nosso curso, construímos uma biblioteca de variáveis de design (cores, fontes, números, imagens, textos e links) para um site de coworking. Agora, na Parte 4, vamos transformar essas variáveis em um sistema de design reutilizável usando os Presets do Divi 5. O resultado? Um workflow mais rápido, layouts previsíveis e uma marca consistente sem retrabalho.
O que são Presets no Divi 5?
Os Presets são conjuntos pré-definidos de configurações de estilo que podem ser salvos e aplicados globalmente ou localmente no Divi. Eles funcionam como blocos de construção que carregam cores, tipografia, bordas, sombras e outros atributos de design. Diferente das variáveis de design (que definem tokens como $cor-primaria ou $fonte-heading), os presets organizam esses tokens em grupos lógicos que podem ser aplicados a elementos inteiros — como botões, containers, títulos ou seções.
Criando Option Groups para organizar seus Presets
Antes de criar os presets propriamente ditos, você precisa entender os Option Groups. Eles são os contêineres que agrupam opções de estilo relacionadas. No Divi 5, a interface de customização permite criar grupos como “Botões Primários”, “Botões Secundários”, “Títulos de Seção”, etc. Cada grupo pode conter múltiplas opções que, juntas, formam um preset.
Para criar um Option Group:
- Acesse o Construtor de Temas (Theme Builder) ou o Editor de Layout do Divi.
- Clique em “Global Settings” ou em “Customizer” dependendo da versão.
- Navegue até a seção “Presets” e clique em “Novo Grupo de Opções”.
- Dê um nome significativo, como “Botões Coworking – Primário”.
- Defina as propriedades: cor de fundo, cor do texto, borda, sombra, padding, etc.
Transformando variáveis de design em Presets reutilizáveis
Agora vamos aplicar o que aprendemos na Parte 3. Suponha que suas variáveis definiram:
- Cor primária: #2C3E50
- Cor secundária: #E74C3C
- Fonte body: Open Sans, 16px
- Fonte heading: Montserrat, 28px
- Espaçamento vertical: 20px
No Preset “Título de Seção – Coworking”, você combina a fonte heading, a cor primária e o espaçamento inferior de 20px. Salve como um preset global. Agora, sempre que inserir um título de seção, basta aplicar esse preset — as variáveis são herdadas automaticamente.
Exemplo prático: Botão de Call to Action
Crie um novo Option Group chamado “Botões – CTA”. Dentro dele, defina:
- Cor de fundo: $cor-secundaria (#E74C3C)
- Cor do texto: #FFFFFF
- Borda com raio de 5px
- Sombra: 0px 4px 6px rgba(0,0,0,0.1)
- Padding: 12px 24px
- Transição de hover: escurecer fundo em 10%
Salve como preset “CTA Padrão”. Agora, qualquer botão que receber esse preset terá exactamente a mesma aparência. Quer um botão de download diferente? Crie outro preset “CTA Download” com cor primária e ícone.
Aplicando Presets a módulos e layouts completos
Os presets não se limitam a elementos isolados. Você pode criar presets completos para seções que incluem fundo, padding, cor do texto, bordas e até animações. Por exemplo, um preset “Seção Hero – Coworking” pode ter:
- Fundo gradiente usando suas cores primárias
- Padding superior de 120px
- Título com fonte heading e sublinhado decorativo
- Parágrafo com fonte body e cor cinza claro
- Espaçamento entre elementos de 24px
Para aplicar, vá no editor Divi, selecione a seção e, no painel de configurações, procure a opção “Preset da Seção”. Escolha o preset desejado. Em segundos, a seção fica estilizada.
Presets para layouts de página inteira?
Sim! Você pode salvar layouts completos como presets usando a biblioteca do Divi (Divi Library). Embora não seja exatamente um preset de estilo, a combinação de estruturas pré-definidas com presets de estilo garante que qualquer novo layout siga o mesmo sistema visual.
Dicas para escalar seu sistema de design com Divi 5
Para que seu sistema de presets realmente traga ganhos de produtividade, siga estas boas práticas:
- Documente tudo: Crie uma planilha ou página no Notion mapeando cada preset, suas variáveis de design e exemplos de uso. Isso ajuda novos membros da equipe.
- Use nomes consistentes: Adote um padrão como [Tipo] – [Variante] – [Contexto], ex: “Botão – Primário – Hero”.
- Teste em múltiplos módulos: Antes de lançar, aplique o preset em diferentes contextos (módulo de texto, bloco de chamada, galeria) para verificar responsividade e legibilidade.
- Atualize via variáveis de design: Sempre que precisar de uma alteração global, modifique a variável raiz. Os presets que a referenciam serão atualizados automaticamente.
- Exporte e importe: O Divi 5 permite exportar presets como JSON. Você pode manter uma base centralizada e importar em novos sites.
Se você utiliza outras ferramentas no ecossistema WordPress, como Elementor, saiba que o conceito de presets também existe (Global Widgets, Global Colors, etc.), mas o Divi 5 leva a ideia a um nível mais granular com os Option Groups. A integração com Crocoblock ou ACF pode exigir adaptações, mas o princípio é o mesmo: centralizar as decisões de estilo.
“Um bom sistema de design não é sobre restringir a criatividade, mas sobre eliminar o atrito das decisões repetitivas.”
Conclusão: Acelere seu workflow com Divi 5 Presets
Os Presets do Divi 5 são a peça que faltava para transformar variáveis de design em um sistema realmente funcional e escalável. Com Option Groups bem organizados, você reduz o tempo de estilização em até 50%, garante consistência visual em todas as páginas e facilita futuras manutenções. Se você seguiu as Partes 1 a 3 do nosso curso, agora tem uma base sólida para aplicar o que aprendeu em projetos reais — seja um site de coworking, uma landing page para clientes ou um blog corporativo.
O próximo passo? Coloque a mão na massa! Abra o Divi 5, crie seu primeiro Option Group e transforme um botão genérico em um componente reutilizável. Depois, compartilhe sua experiência nos comentários ou me marque nas redes sociais. Quer continuar aprendendo? Na próxima parte, vamos explorar como otimizar a performance com CSS personalizado e presets dinâmicos.
Não perca tempo: comece hoje mesmo a usar os Presets do Divi 5 e veja a diferença no seu processo de criação de sites WordPress.
