Introdução
O rodapé de um site é uma das áreas mais estratégicas — e, infelizmente, uma das mais negligenciadas. Ele aparece em todas as páginas, carrega informações essenciais do negócio, reforça a identidade da marca e oferece ao visitante um último caminho claro para entrar em contato com você. No WordPress, o Divi 5 elevou essa peça a um novo patamar, combinando seu poderoso Theme Builder com recursos modernos de design.
Neste sétimo artigo da série, vou mostrar como construir um rodapé totalmente personalizado no Divi 5, aproveitando ao máximo as Variáveis de Design e os Presets de Elemento. Você vai sair daqui com um rodapé consistente, fácil de manter e perfeito para qualquer projeto.
Por que um Rodapé Personalizado é Essencial?
O rodapé não é apenas um espaço para repetir informações. Ele é a âncora da experiência do usuário. Um rodapé bem planejado:
- Reforça a credibilidade da marca com dados de contato, endereço e redes sociais.
- Oferece navegação secundária para páginas importantes (política de privacidade, termos de uso).
- Melhora o SEO ao agrupar links relevantes.
- Funciona como um CTA silencioso: assine a newsletter, baixe um material, entre em contato.
“O rodapé é a última impressão que seu visitante leva — faça valer a pena.”
Com o Divi 5, você pode criar um rodapé global que se adapta a qualquer contexto, sem precisar repetir o trabalho página por página.
Entendendo o Theme Builder do Divi 5
O Theme Builder é o coração da personalização global no Divi. Ele permite que você atribua layouts específicos para cabeçalho, corpo e rodapé com base em condições (página inicial, posts, arquivos, 404 etc.). No Divi 5, a interface ficou ainda mais fluida e responsiva.
Criando um Template de Rodapé
- No painel do WordPress, vá em Divi → Theme Builder.
- Clique em “Adicionar Novo Template” e escolha “Rodapé”.
- Defina as condições: “Site inteiro” ou “Páginas específicas”.
- Clique em “Construir Rodapé” e o Divi Builder será aberto.
Usando Variáveis de Design no Rodapé
As Variáveis de Design do Divi 5 permitem centralizar cores, fontes e espaçamentos. Isso é um divisor de águas: mude uma variável e todo o rodapé se ajusta automaticamente.
Como Configurar Variáveis no Rodapé
- Ao editar o rodapé Divi, abra as configurações da seção principal.
- No painel Design, você encontrará campos como
--color-primary,--font-body,--spacing-section. - Defina valores globais (ex.: cor primária #0056b3).
- Use essas variáveis nos módulos de texto, ícones sociais e botões.
Por exemplo, em vez de aplicar a cor azul manualmente em cada módulo, insira var(--color-primary) no campo de cor. No Divi 5, você pode até mesmo sobrescrever variáveis localmente, se precisar de um tom diferente em um bloco específico.
Presets de Elemento para Consistência Visual
Os Element Presets (Presets de Elemento) são estilos salvos que podem ser reutilizados em módulos, colunas e seções. No rodapé, eles garantem que botões, ícones e títulos sigam o mesmo padrão.
Criando um Preset para o Rodapé
- No builder, clique com o botão direito em um módulo (ex.: botão de “Fale Conosco”).
- Escolha “Salvar como Preset” e nomeie como “Botão Rodapé”.
- Agora, ao adicionar outro botão, vá em Presets e selecione o salvo.
- Se precisar atualizar todos os botões do rodapé, edite o preset e ele se propaga automaticamente.
--color-primary como cor de fundo.Passo a Passo: Construindo um Rodapé Completo
Vamos montar um rodapé funcional com três colunas: informações de contato, links rápidos e redes sociais.
1. Estrutura da Seção
Adicione uma seção de rodapé com largura total e fundo escuro (use a variável --color-dark). Dentro dela, insira uma linha com três colunas de largura 1/3 cada.
2. Coluna da Esquerda – Contato
Adicione um módulo de Texto com o nome da empresa, endereço e telefone. Formate o título como H4 e o parágrafo com var(--font-size-small).
3. Coluna Central – Links Rápidos
Use um módulo de Menu Personalizado ou Lista de Links apontando para páginas como “Sobre”, “Serviços”, “Política de Privacidade”. Atribua o preset “Link Rodapé” para manter a cor e o hover consistentes.
4. Coluna da Direita – Redes Sociais
Adicione um módulo de Ícones Sociais com links para Facebook, Instagram, LinkedIn e YouTube. Defina o tamanho dos ícones com var(--icon-size) e a cor com var(--color-accent).
5. Linha Inferior – Copyright
Insira uma nova linha abaixo com uma coluna única. Coloque um módulo de Texto com “© 2025 Sua Empresa. Todos os direitos reservados.” e centralize o texto. Use a variável --color-gray-light para diferenciar.
Considerações Finais
Com o Divi 5, construir um rodapé personalizado nunca foi tão rápido e flexível. Ao unir o Theme Builder, as Variáveis de Design e os Element Presets, você cria um sistema de design que economiza horas de trabalho e garante consistência visual em todo o site.
Além disso, a integração com ferramentas como Yoast SEO e Google Analytics pode ser feita diretamente no rodapé, adicionando scripts de acompanhamento sem complicação. E se você usa o WooCommerce, o Divi 5 permite criar rodapés específicos para páginas de produto e checkout.
“Um rodapé bem feito não passa despercebido — ele é a chave de ouro da experiência do usuário.”
Agora é a sua vez: abra o Theme Builder do Divi 5, crie seu primeiro rodapé personalizado e veja a diferença que um design global faz. Se você ainda não atualizou seu WordPress para a versão mais recente, aproveite para testar o Divi 5 em um ambiente de desenvolvimento. Depois, compartilhe o resultado nos comentários — vou adorar ver o que você construiu!
Próximo passo: Na Parte 8, vamos explorar como otimizar o desempenho do Divi 5 com WP Rocket e boas práticas de cache. Não perca!
