Se você trabalha com WordPress e usa o tema Divi, já deve ter percebido que o cabeçalho tradicional pode ocupar muito espaço, especialmente em projetos que exigem um visual minimalista. A navegação lateral (sidebar) é uma solução elegante: ela mantém o header limpo, com apenas um logotipo e um ícone de hambúrguer, e revela o menu completo somente quando o usuário interage. Com as novas Interações Divi 5, esse efeito ficou ainda mais fácil de implementar, sem scripts externos ou conhecimentos profundos de JavaScript.
Neste artigo, vou mostrar passo a passo como criar uma navegação lateral personalizada com Divi 5. Você aprenderá a configurar o layout, adicionar as interações de abrir e fechar e estilizar a sidebar para combinar com o design do seu site. O melhor: tudo visualmente, direto no construtor visual do Divi.
“Com Divi 5, você pode criar interações sofisticadas sem escrever uma linha de código.”
O que são as Interações Divi 5?
Antes de colocar a mão na massa, vale entender o que são as Interações Divi 5. Essa nova funcionalidade permite que você adicione animações e comportamentos dinâmicos a qualquer elemento do seu site — como cliques, hover, scroll e muito mais. Tudo é configurado por uma interface visual, eliminando a necessidade de CSS ou JavaScript customizado.
No caso da navegação lateral, usaremos a interação de clique para alternar a visibilidade da sidebar. O Divi 5 oferece triggers (gatilhos) e ações (como mostrar, esconder, adicionar classe CSS) que tornam o processo simples e rápido.
Preparando o layout básico: cabeçalho mínimo
O primeiro passo é criar um cabeçalho limpo, que servirá como ponto de partida. Vamos usar o Módulo de Cabeçalho do Divi com um logotipo à esquerda e um ícone de hambúrguer à direita.
1. Crie um cabeçalho fixo
Adicione uma seção no topo da página, defina como “Fixo” (posição sticky) e insira um módulo de coluna única. Dentro, coloque o módulo de logo e um módulo de texto ou ícone para o hambúrguer. No meu exemplo, usei o caractere “☰” dentro de um módulo de texto com largura mínima e personalização visual.
2. Oculte o menu padrão
Se o tema estiver exibindo o menu principal no cabeçalho, remova-o ou desabilite a exibição. Queremos que o menu só apareça na sidebar.
3. Crie a sidebar (oculta inicialmente)
Insira uma nova seção abaixo do cabeçalho, com largura total e altura de tela cheia (100vh). Esta seção será a sua sidebar. Coloque dentro dela os itens de menu (links, imagens, botões). Depois, nas configurações da seção, vá em Avançado → Posicionamento e defina:
- Posição: Fixo
- Horizontal: Esquerda (ou direita, conforme seu design)
- Largura: 300px (ajuste conforme necessário)
- Z-index: um valor alto (ex: 9999)
Além disso, na aba Design, defina a opacidade como 0 e o overflow como hidden para que ela fique invisível inicialmente.
Adicionando as interações de abrir e fechar
Agora vem a parte mágica: usar as Interações Divi 5 para controlar a sidebar.
Interação para abrir (clique no hambúrguer)
- Selecione o módulo do ícone de hambúrguer.
- Vá para a aba Interações (no painel de configurações do módulo).
- Clique em “Adicionar Interação”.
- Escolha o gatilho On Click.
- Na ação, selecione Definir opacidade do elemento alvo.
- No campo “Alvo”, clique e selecione a seção da sidebar.
- Defina a opacidade alvo como 1 (visível).
- Adicione uma segunda ação: Adicionar classe CSS ao mesmo alvo, com o nome da classe “sidebar-ativa” (você pode usar essa classe para estilizar posteriormente).
- Salve as alterações.
Interação para fechar (clique em um botão dentro da sidebar ou fora dela)
Crie um botão de fechar (ex: “X”) dentro da sidebar. No módulo desse botão, adicione uma interação On Click que defina a opacidade da sidebar como 0 e remova a classe “sidebar-ativa”.
Você também pode adicionar um overlay: uma seção transparente atrás da sidebar que, ao ser clicada, feche o menu. Basta repetir o processo de interação no overlay.
Personalizando o design da sidebar
Agora que a funcionalidade está pronta, vamos estilizar a sidebar para que ela se integre ao seu site.
- Plano de fundo: Use gradiente, cor sólida ou imagem. Lembre-se de que a sidebar deve contrastar com o conteúdo principal.
- Itens de menu: Utilize o módulo de menu do Divi ou crie links manuais com espaçamento adequado. Adicione efeitos hover usando interações ou CSS.
- Animação de entrada: Você pode combinar a opacidade com uma transição CSS. Na seção sidebar, adicione uma transição:
transition: opacity 0.3s ease, transform 0.3s ease;e na classe “sidebar-ativa” definatransform: translateX(0);enquanto a sidebar sem a classe temtransform: translateX(-100%);. - Botão de fechar: Posicione no canto superior direito, com ícone claro.
Para aplicar a transição, vá nas configurações da seção da sidebar, aba Design → Transições e adicione as propriedades desejadas. Ou, se preferir, insira CSS customizado na aba Avançado.
/* Exemplo de CSS para animação suave */
.sidebar-section {
transform: translateX(-100%);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.sidebar-section.sidebar-ativa {
transform: translateX(0);
opacity: 1 !important;
}Considerações finais e próximos passos
Com esse passo a passo, você consegue implementar uma navegação lateral funcional e elegante usando apenas as Interações Divi 5. Essa técnica é especialmente útil em sites institucionais, portfólios e landing pages que buscam um visual moderno.
Lembre-se de testar em diferentes dispositivos. No mobile, a sidebar geralmente ocupa a tela inteira; você pode ajustar a largura dinamicamente com media queries ou usando os controles de responsividade do Divi.
Se você quiser aprofundar, experimente adicionar animações nos itens do menu (como fade-in com delay) ou integrar a sidebar com o menu de navegação do WordPress usando o módulo de Menu do Divi. As possibilidades são enormes.
“A simplicidade é a sofisticação máxima.” – Leonardo da Vinci
Gostou do tutorial? Compartilhe com outros desenvolvedores e não esqueça de se inscrever no nosso canal do YouTube para mais conteúdos sobre WordPress, Divi e design web. Deixe nos comentários qual recurso do Divi 5 você gostaria de ver aqui no blog!
Se quiser explorar outras ferramentas para turbinar seus sites, confira Elementor e Crocoblock como alternativas avançadas para construtores de página.
