Divi Plugin Highlight - DotNav

Divi possui um recurso de navegação embutido, chamado Dot Navigation, que coloca uma série de pontos ao longo do lado direito da tela. Cada ponto representa uma seção dessa página. Clicar nos pontos leva a essa seção. Os pontos são simples e combinam com a maioria dos designs de sites. E se você quisesse estilizá-los? Melhor ainda, e se você quisesse mostrar um rótulo ou animá-lo no carregamento? Você pode estar interessado em um plugin chamado DotNav.

DotNav é um plugin de terceiros da Divicio.us. DotNav oferece as ferramentas para alterar a cor, tamanho e forma dos pontos e planos de fundo, adicionar rótulos, desativar pontos específicos e controlar o carregamento da animação. Você pode ocultar DotNav por dispositivo. Neste destaque do plugin, daremos uma olhada no DotNav.

Nestes exemplos, estou usando um layout que vem com o Divi chamado Recursos do produto. As imagens foram tiradas de Unsplash.com. Primeiro, vamos habilitar o Divi's Dot Navigation.

Habilitando a navegação por pontos

A navegação por pontos pode ser ativada ou desativada por página. Você encontrará as configurações no editor visual da página, no canto superior direito em Configurações da página de pontos.

A navegação por pontos aparecerá no lado direito da página. Os pontos representam as seções. Clicar em um ponto leva você para essa seção. Neste exemplo, naveguei para a segunda seção e o segundo ponto está aceso.

Instalando DotNav

Primeiro, descompacte o arquivo de download. Haverá três arquivos na pasta. Faça upload e ative o arquivo divi-dotnav.

Configurações do personalizador de tema DotNav

As configurações para DotNav são encontradas no Customizador de Tema. Inclui três áreas:

• Configurações Gerais
• Configurações de ponto
• Configurações de etiqueta

Vamos examinar cada área.

Configurações gerais do DotNav

As configurações gerais permitem ocultar o DotNav por dispositivo, ajustar o deslocamento, borda, preenchimento, cores e animação. Existem 11 animações para escolher, incluindo mover-se a partir de uma direção que você escolher, esmaecer a partir de uma direção ou girar no eixo x ou y.

Exemplos

Quando você ajusta os controles, vê as mudanças em tempo real. Neste exemplo, defini o deslocamento direito para 38 e ajustei a largura, o raio e o preenchimento da borda para criar uma borda arredondada.

Neste exemplo, defini a largura da borda como 10 e o raio da borda como 30 em todos os lados e o preenchimento superior como 20, da direita para 10, inferior para 20 e da esquerda para 9. Usei cores de fundo e de borda da própria página para que se misture.

DotNav Dot Settings

As configurações de pontos permitem mostrar ou ocultar seções individuais (requer CSS adicionado à seção), ajustar as margens, raio da borda, largura e cor. As configurações de pontos incluem cor, largura e altura e cor, largura e altura de foco.

Exemplos

Neste exemplo, eu defini o raio da borda do ponto para 10 ao redor e ajustei a largura do ponto para 30. Isso cria linhas horizontais interessantes em vez de pontos redondos.

Ajustar a largura da borda e a altura do ponto pode criar alguns efeitos interessantes. Aqui, defini a largura da borda do ponto em 4 para a parte superior e 10 para a direita.

Aqui, configurei o raio da borda superior esquerda para 0, a superior direita para 98 e a esquerda dos outros como 10. Também configurei a largura da borda do ponto para 6 e ajustei a cor do ponto e a cor do ponto ativo.

Este usa as configurações gerais padrão e tem uma largura de borda de 1, uma largura e altura de ponto de 15 e largura e altura de ponto ativo de 20. Os pontos são cinza escuro com uma borda vermelha. O ponto ativo é branco com uma borda vermelha.

Esta é a mesma configuração de ponto e adiciona uma largura de borda superior e inferior, raio e preenchimento para criar a borda arredondada.

Configurações de etiqueta DotNav

As configurações de etiqueta permitem que você mostre ou oculte as etiquetas dos pontos, ajuste a fonte, o fundo, a largura, aplique uma largura fixa, etc. A largura fixa adiciona ajustes para a largura regular da etiqueta, largura da etiqueta ativa e alinhamento do texto da etiqueta. Para mostrar os rótulos, as seções devem ter um ID (que é usado como rótulo).

Adicione o rótulo ao campo CSS ID na guia Avançado de cada seção.

Os rótulos serão exibidos automaticamente. Os rótulos podem ser personalizados e você pode optar por não exibir rótulos específicos. Este exemplo mostra as configurações padrão.

Neste eu mudei as cores do plano de fundo e da fonte e fiz o deslocamento da seção ativa e uma cor salmão para sua fonte. Você pode ajustar o espaçamento de linha horizontal, mas para a vertical você deve ajustar as margens dos pontos nas Configurações de ponto. Para mim, essa foi a única confusão sobre os ajustes.

Se você não quiser que todos os rótulos apareçam, você pode defini-lo como Active Only, Hover Only ou Active and Hover.

Eu ajustei as configurações de pontos para colocar algum espaço entre os rótulos. Isso me permitirá deixar os rótulos mais altos sem que eles se sobreponham. Neste, as margens dos pontos são definidas em 16 para a parte superior e inferior. O raio da borda superior direita e inferior esquerda é definido como 72, e o canto superior esquerdo e inferior direito é definido como 22.

Nas configurações de rótulo, ajustei o preenchimento para 10 em todos os lados, configurei o deslocamento direito de foco ativo para 45 e aumentei o tamanho da fonte para 18. Os rótulos se destacam um pouco mais.

Escondendo Pontos Específicos

Você pode ocultar pontos específicos, se desejar. Adicione a classe CSS à guia Configurações avançadas do módulo de seção. Você encontrará o CSS em Dot Settings no Theme Customizer.

Nas Configurações de ponto, a primeira configuração é uma caixa suspensa. É definido como Mostrar por padrão. Selecione Ocultar. Isso oculta todas as seções às quais você adicionou a classe CSS da seção ocultar (a classe CSS é encontrada na nota acima da caixa suspensa). A seção chamada TODAS AS COISAS CERTAS não está mais na estrutura de navegação de pontos.

Este exemplo mostra apenas ao passar o mouse. A fonte e a cor do ponto ativo / flutuante são definidas como vermelhas. O plano de fundo e as bordas são transparentes. A margem do ponto é definida como 16 para a parte superior e inferior. A largura é 15 e a altura é 5, com o ponto ativo definido como 20 e 8.

Este usa uma largura fixa para os rótulos. Estou usando preto para o plano de fundo do rótulo ativo com uma fonte vermelha e uma borda vermelha para a esquerda e a direita (que está definida como 5). O raio da borda é definido como 9 para fornecer uma ligeira curva. Eu centrei o texto nos rótulos. O deslocamento correto é 6 para fazer com que os rótulos fiquem pendurados na linha. O deslocamento direito ativo é 20 para fazê-lo saltar para fora da linha.

Também encurtei os nomes das seções e escondi o rótulo da seção All The Right Things. As fontes estão em itálico.

Para as configurações de pontos, defini a largura como 6 e a altura como 38. O ponto ativo é 10 e 35. Isso faz com que os pontos pareçam uma linha vertical. Vou usar este exemplo para mostrar animações.

DotNav Animations

As animações mostram como os pontos aparecem quando a página é carregada. Inclui 11 animações. A duração da animação pode ser ajustada usando o controle deslizante. Aqui está uma olhada em alguns deles.

Em cheio

Right In é difícil de ver, mas se move da direita conforme aparece.

Inferior para dentro

Bottom In aparece e desliza para cima.

Aparecimento gradual

Fade In Fade in já está no lugar.

Fade In Left

Fade In Left fade in e então se move da esquerda para a direita no lugar.

Fade In Top

Fade In Top fade in e, em seguida, faz um grande movimento para baixo.

Virar X

Flip In X salta a partir do eixo X e salta conforme se posiciona.

Virar em Y

Flip In Y inverte a partir do eixo Y e se parece com uma porta.

Licença e Documentação

O plugin pode ser usado com sites ilimitados para você e seus clientes. A documentação está incluída no arquivo de download. Achei os controles intuitivos o suficiente para que não precisasse da documentação, mas fico feliz que ela esteja incluída para garantir.

Pensamentos finais

Achei o DotNav fácil de usar. Ele fornece muitas personalizações para os pontos e planos de fundo, e eu gosto de poder adicionar rótulos. As seções hover e ativa se destacam e podem ser personalizadas separadamente. As animações são interessantes, mas não são muitas e só animam no carregamento. Ajustar a largura e a altura da etiqueta em duas guias separadas (ajustar a altura do ponto para a altura da etiqueta) pode ser confuso no início, mas quando peguei o jeito, não tive problemas para fazer os ajustes.

Como todas as configurações no Theme Customizer, as configurações DotNav são para todo o site. Você precisará experimentar as cores da fonte e do plano de fundo para encontrar uma combinação que funcione com todos os planos de fundo do seu site.

Se você estiver interessado em personalizar a navegação de pontos do Divi, o DotNav do Divicio.us pode ser o plugin que você está procurando.

Nós queremos ouvir de você. Você usou DotNav para Divi? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque em newelle / shutterstock.com