3 maneiras criativas de estilizar o link ativo do seu Divi Navigation Vertical

Publicados: 2017-09-11

Neste tutorial Divi, vamos mostrar algumas maneiras interessantes de estilizar o link ativo em sua navegação vertical. Este tutorial segue um tutorial anterior, onde mostramos como criar links ativos em scroll para sites Divi de uma página. Portanto, antes de experimentar as diferentes formas de estilização, você deve primeiro configurar os links ativos ao rolar pelo artigo anterior, pois o código que usaremos será desenvolvido posteriormente.

Algo que você deve ter em mente durante este tutorial é o fato de que você só pode ver os resultados depois de salvar a página. Ao apenas visualizar sua página, as alterações não aparecerão.

3 maneiras criativas de estilizar o link ativo do seu Divi Navigation Vertical

Inscreva-se no nosso canal no Youtube

Como funciona

Para criar uma navegação que ajusta automaticamente o link ativo conforme você rola a página para baixo, usamos o plug-in Page Scroll to ID que o ajuda a alcançar facilmente os resultados desejados. Além disso, o plugin também oferece diferentes opções que você pode escolher manualmente nas configurações.

O plug-in ajuda a identificar a posição que um visitante tem em seu site e mudará o item de menu de acordo com a seção do site que eles estão visualizando no momento. Esta é uma pequena interação que definitivamente ajudará seus visitantes a navegar por todo o conteúdo de uma página. Eles saberão automaticamente que parte de sua página estão explorando e a que distância estão de outras seções nas quais possam estar interessados.

Observação: saiba que esse método se aplica apenas a sites compostos por apenas uma página.

Ativar navegação vertical

Os exemplos que mostraremos como fazer serão especialmente valiosos se você estiver usando a navegação vertical. Então, vá em frente e habilite a navegação vertical no Theme Customizer (se você ainda não fez isso no post anterior).

Se você estiver no painel do WordPress, vá para Aparência> Personalizar> Cabeçalho e navegação> Formato do cabeçalho> Habilitar navegação vertical.

link ativo

Estilo de link ativo nº 1

O primeiro exemplo que gostaríamos de mostrar a você é brilhante. Cada vez que um visitante passa por uma das seções, outro item do menu começará a brilhar. É uma maneira sutil, mas bonita e elegante de ajudar seus visitantes a navegar por uma página.

link ativo

Configurações da barra de menu principal

Comece fazendo algumas alterações em sua barra de menu principal. Se você estiver no painel do WordPress, vá para Aparência> Personalizar> Cabeçalho e navegação> Barra do menu principal e faça as seguintes modificações:

  • Ocultar imagem do logotipo: Habilitar
  • Tamanho do texto: 24
  • Espaçamento entre letras: -1
  • Fonte: Macaco Feliz
  • Cor do texto: #FFFFFF
  • Cor do link ativo: #FFFFFF
  • Cor de fundo: rgba (255,255,255,0)
  • Cor de fundo da lista suspensa: rgba (255,255,255,0)

link ativo

Adicionar código CSS às opções do tema

A próxima coisa que você precisa fazer é adicionar algum código CSS. Existem algumas maneiras de adicionar código CSS ao seu site. Vamos lidar com três métodos nesses exemplos, começando com as opções de tema. Se você estiver no painel do WordPress, vá para Divi> Opções de tema> Role para baixo na guia Geral e coloque as seguintes linhas de código CSS na caixa CSS personalizada: 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

Estilo de link ativo # 2

O segundo estilo de link ativo é aquele que tem uma aparência muito limpa e elegante. Como de costume, os links ativos mudarão de acordo com a maneira como você está rolando para baixo no site de uma página. Ao clicar em um dos itens do menu, o mesmo estilo será aplicado.

link ativo

Configurações da barra de menu principal

Começaremos fazendo o mesmo que fizemos no primeiro exemplo deste post; fazer modificações na barra de menu principal. Para fazer isso, vá para Aparência no painel do WordPress> Personalizar> Cabeçalho e navegação> Barra de menu principal e certifique-se de ter as seguintes configurações:

  • Ocultar imagem do logotipo: Habilitar
  • Tamanho do texto: 24
  • Espaçamento entre letras: 2
  • Fonte: Lagosta
  • Cor do texto: #FFFFFF
  • Cor do link ativo: #FFFFFF
  • Cor de fundo: rgba (255,255,255,0)
  • Cor de fundo do menu suspenso: rgba (255,255,255,0)

link ativo

Adicionar código CSS ao personalizador de tema

Como dito no exemplo anterior, você pode adicionar o código CSS ao seu site de várias maneiras. Além de adicionar o código personalizado às Opções de tema, você também pode adicioná-lo ao Personalizador de temas. Se você estiver no painel do WordPress, vá para Aparência> Personalizar> CSS adicional e coloque as seguintes linhas de código no campo CSS personalizado: 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Estilo de link ativo # 3

O terceiro estilo de link ativo que escolhemos compartilhar com você é aquele que se concentra principalmente na palavra-chave que está sendo usada como um item de menu. Usando as configurações corretas para a sombra do texto, o mesmo texto envolverá o item de menu que enfatiza a posição que um visitante tem em seu site.

link ativo

Configurações da barra de menu principal

Para este último exemplo, comece fazendo algumas alterações na barra de menu principal. Se você estiver no painel do WordPress, vá para Aparência> Personalizar> Cabeçalho e navegação> Barra de menu principal e faça as seguintes alterações aplicáveis ​​à navegação vertical:

  • Ocultar imagem do logotipo: Habilitar
  • Tamanho do texto: 16
  • Espaçamento entre letras: 2
  • Fonte: Josefin Slab
  • Estilo da fonte: maiúsculas
  • Cor do texto: #FFFFFF
  • Cor do link ativo: #FFFFFF
  • Cor de fundo: rgba (255,255,255,0)
  • Cor de fundo do menu suspenso: rgba (255,255,255,0)

link ativo

Adicionar código CSS a uma página em particular

Outra opção que você tem para adicionar o código CSS é adicioná-lo a uma página em particular. Abra sua página inicial (e, portanto, a página onde você colocou todo o conteúdo) com o Divi Builder e clique no seguinte ícone:

link ativo

Depois de clicar no ícone, coloque as seguintes linhas de código CSS no campo CSS personalizado: 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Pensamentos finais

Nesta postagem, mostramos algumas maneiras fáceis e agradáveis ​​de estilizar o link ativo em seu menu. Esta postagem foi uma continuação de uma postagem anterior, onde mostramos como criar links ativos na rolagem para sites Divi de uma página. Lembre-se de que você terá que salvar as alterações antes de poder ver os resultados, apenas visualizar sua página não fará o trabalho. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Botond1977 / shutterstock.com