Estilos CSS para o menu móvel do Divi
Um dos desejos mais comuns de cada usuário Divi é sempre ter estilos de design diferentes para o menu, principalmente para a navegação do celular.
Por isso pensei que a criação de uma coleção de estilos para customizar o Menu Mobile do Divi poderia ser útil para todos aqueles usuários que desejam um novo visual para o menu, mas têm pouco ou nenhum conhecimento do código.
Isso não só permitirá que você personalize o design do seu menu móvel, mas também tenha maior flexibilidade, pois os estilos são aplicados apenas à navegação móvel, então você pode usar com segurança o menu padrão para a navegação da área de trabalho e um dos estilos deste lista para celular.
Nota : Peço desculpas antecipadamente se meu inglês houver alguns erros, ainda tenho que melhorar. ?
Antes de começar..
Para fazer com que todos os layouts que você vê neste tutorial funcionem bem, você precisa adicionar ao seu site Divi o código JS que você pode encontrar dentro do arquivo que você pode baixar clicando no botão abaixo. Você deve adicionar este código JS no campo “ Adicionar código ao do seu blog ” que você pode encontrar no painel de opções.
Divi> Opções de tema> Integrações>
Adicionar código ao do seu blog.
Ao contrário da primeira versão deste post, nesta versão atualizada eu usei um código JS que permite que você tenha os itens do menu clicável pai. Com o código anterior não era.
Nota: Se você também deseja adicionar ícones como nos exemplos neste tutorial, você precisará adicionar Font-Awesome ao seu site Divi. Mas é apenas uma opção, cada estilo funciona bem, mesmo sem Font-Awesome.
1. Estilo Slide-In
Este estilo permite um menu flutuante com slide-in, muito semelhante ao menu slide-in do Divi, com a diferença que este estilo se aplica apenas à navegação móvel.
2. Estilo de gradiente deslizante
Este estilo é semelhante ao anterior, mas como você pode ver, apliquei um fundo gradiente e apontei o link atual com um fundo transparente e com o preenchimento à esquerda. Para personalizar a cor de fundo, basta substituir as duas cores entre os colchetes e você pode decidir a direção do gradiente substituindo superior por: direita, esquerda ou inferior. Claro, você pode obter mais efeitos de gradiente, mas eu preferia uma solução mais simples para personalizar também para iniciantes.
3. Stile Full-Width
O estilo Full-Width, como o nome sugere, permite que você tenha um menu móvel que cobre a tela inteira. Neste exemplo, você pode ver o resultado final que pode ser personalizado em minutos.
4. Estilo Multicolor
O estilo Multicolor é um dos meus favoritos. Novamente a customização é realmente muito fácil, tudo o que você precisa fazer é substituir as cores de cada elemento, a parte inferior do código. Mas relaxe, adicionei um comentário no código para ajudá-lo a personalizar as cores facilmente.
5. Estilo Multicolor com Ícone à esquerda e Texto alinhado à direita
Como você pode ver é muito parecido com o estilo anterior, a única customização que apliquei, movo os ícones à esquerda e alinhe o texto à direita.
6. Estilo Windows Phone
Esse estilo é o que uso atualmente no meu site e é inspirado no design do novo Windows Phone. Uma dica para você é usar esse estilo para sites que possuem poucos itens no menu, pois com um menu extenso o resultado visual, mas também a experiência do usuário, podem não ser os melhores.
7. Estilo slide-in com imagem de fundo
Prometi que compartilharia outros estilos para o menu móvel, e aqui está este novo estilo adicionado aos anteriores, e isso permite que você tenha um menu com efeito de slide, mas com uma imagem de fundo. Deixe-me saber o que você acha nos comentários 😉
8. Estilo Slide-In de SJ James di Divi.Space
Este é m estilo Slide-in criado por SJ James Divi.Space, um exemplo fantástico de como pode ser personalizado o menu mobile do Divi para um resultado simplesmente fantástico. Repara na animação que abre e fecha o menu, realmente fantástica!
9. Style Sleeker de James Fosker da DiviStride
Outro estilo que quero mostrar foi criado por James Fosker da DiviStride . O Sleeker tem um design clean e muito bacana, perfeito para um cardápio com muitos itens.
Mais seis snippets CSS
Aqui temos os seis snippets CSS reunidos em um só lugar.
Passo a passo
- Faça login no WordPress e vá para Divi> Theme Customizer> Custom CSS
- Cole o seguinte código CSS:
2. Save.
Mais modelos? é só clicar nos links abaixo