Point culminant du plugin Divi – DotNav

Divi dispose d'une fonction de navigation intégrée, appelée Dot Navigation, qui place une série de points le long du côté droit de l'écran. Chaque point représente une section de cette page. En cliquant sur les points, vous accédez à cette section. Les points sont simples et se fondent dans la plupart des conceptions de sites Web. Et si vous vouliez les coiffer ? Mieux encore, et si vous vouliez afficher une étiquette ou les animer au chargement ? Vous pourriez être intéressé par un plugin appelé DotNav.

DotNav est un plugin tiers de Divicio.us. DotNav vous donne les outils pour modifier la couleur, la taille et la forme des points et des arrière-plans, ajouter des étiquettes, désactiver des points spécifiques et contrôler l'animation de chargement. Vous pouvez masquer DotNav par appareil. Dans ce point culminant du plugin, nous allons jeter un œil à DotNav.

Dans ces exemples, j'utilise une mise en page fournie avec Divi appelée Fonctionnalités du produit. Les images sont prises sur Unsplash.com. Tout d'abord, activons la navigation par points de Divi.

Activation de la navigation par points

La navigation par points peut être activée ou désactivée page par page. Vous trouverez les paramètres dans l'éditeur visuel de la page, dans le coin supérieur droit sous Paramètres de la page de points.

La navigation par points apparaîtra sur le côté droit de la page. Les points représentent les sections. En cliquant sur un point, vous accédez à cette section. Dans cet exemple, j'ai navigué jusqu'à la deuxième section et le deuxième point est allumé.

Installation de DotNav

Tout d'abord, décompressez le fichier de téléchargement. Il y aura trois fichiers dans le dossier. Téléchargez et activez le fichier divi-dotnav.

Paramètres de personnalisation du thème DotNav

Les paramètres de DotNav se trouvent dans le personnalisateur de thème. Il comprend trois domaines :

• réglages généraux
• Paramètres de points
• Paramètres d'étiquette

Regardons chaque domaine.

Paramètres généraux de DotNav

Les paramètres généraux vous permettent de masquer DotNav par appareil, d'ajuster le décalage, la bordure, le remplissage, les couleurs et l'animation. Vous avez le choix entre 11 animations, notamment le déplacement dans la direction de votre choix, le fondu enchaîné à partir d'une direction ou le basculement sur l'axe x ou y.

Exemples

Lorsque vous ajustez les commandes, vous voyez les changements en temps réel. Dans cet exemple, j'ai défini le décalage droit sur 38 et ajusté la largeur, le rayon et le rembourrage de la bordure pour créer un bord arrondi.

Dans cet exemple, j'ai défini la largeur de la bordure sur 10 et le rayon de la bordure sur 30 sur tous les côtés, et le rembourrage supérieur sur 20, droite sur 10, bas sur 20 et gauche sur 9. J'ai utilisé des couleurs d'arrière-plan et de bordure à partir de la page elle-même afin qu'il se mélange.

Paramètres de point DotNav

Les paramètres de points vous permettent d'afficher ou de masquer des sections individuelles (nécessite l'ajout de CSS à la section), d'ajuster les marges, le rayon de la bordure, la largeur et la couleur. Les paramètres de point incluent la couleur, la largeur et la hauteur, ainsi que la couleur, la largeur et la hauteur du survol.

Exemples

Dans cet exemple, j'ai défini le rayon de la bordure des points sur 10 tout autour et ajusté la largeur des points à 30. Cela crée des lignes horizontales intéressantes au lieu de points ronds.

Le réglage de la largeur de la bordure et de la hauteur des points peut créer des effets intéressants. Ici, j'ai défini la largeur de la bordure des points sur 4 pour le haut et 10 pour la droite.

Ici, j'ai défini le rayon de la bordure supérieure gauche sur 0, le haut à droite sur 98 et les autres sur 10. J'ai également défini la largeur de la bordure du point sur 6 et ajusté à la fois la couleur du point et la couleur du point actif.

Celui-ci utilise les paramètres généraux par défaut et a une largeur de bordure de 1, une largeur et une hauteur de point de 15, et une largeur et une hauteur de point actives de 20. Les points sont gris foncé avec une bordure rouge. Le point actif est blanc avec une bordure rouge.

Il s'agit des mêmes paramètres de point et ajoute une largeur de bordure supérieure et inférieure, un rayon et un rembourrage pour créer le bord arrondi.

Paramètres d'étiquette DotNav

Les paramètres d'étiquette vous permettent d'afficher ou de masquer les étiquettes de points, d'ajuster la police, l'arrière-plan, la largeur, d'appliquer une largeur fixe, etc. La largeur fixe ajoute des ajustements pour la largeur d'étiquette normale, la largeur d'étiquette active et l'alignement du texte de l'étiquette. Afin d'afficher les étiquettes, les sections doivent avoir un ID (qui est utilisé comme étiquette).

Ajoutez l'étiquette au champ CSS ID dans l'onglet Avancé de chaque section.

Les étiquettes s'afficheront automatiquement. Les étiquettes peuvent être personnalisées et vous pouvez choisir de ne pas afficher d'étiquettes spécifiques. Cet exemple montre les paramètres par défaut.

Dans celui-ci, j'ai modifié les couleurs d'arrière-plan et de police et créé le décalage de la section active et une couleur saumon pour sa police. Vous pouvez ajuster l'espacement des lignes horizontales, mais pour la verticale, vous devez ajuster les marges des points dans les paramètres des points. Pour moi, c'était le seul ce déroutant sur les ajustements.

Si vous ne voulez pas que toutes les étiquettes s'affichent, vous pouvez le définir sur Actif uniquement, Survol uniquement ou Actif et survol.

J'ai ajusté les paramètres des points pour mettre un peu d'espace entre les étiquettes. Cela me permettra de rendre les étiquettes plus hautes sans qu'elles se chevauchent. Dans celui-ci, les marges de points sont définies sur 16 pour le haut et le bas. Le rayon des bordures en haut à droite et en bas à gauche est défini sur 72, et celui en haut à gauche et en bas à droite est défini sur 22.

Dans les paramètres des étiquettes, j'ai ajusté le rembourrage à 10 de tous les côtés, défini le décalage droit du survol actif à 45 et augmenté la taille de la police à 18. Les étiquettes ressortent un peu plus.

Cacher des points spécifiques

Vous pouvez masquer des points spécifiques si vous le souhaitez. Ajoutez la classe CSS à l'onglet Paramètres avancés du module de section. Vous trouverez le CSS dans les paramètres de points dans le personnalisateur de thème.

Dans les paramètres de points, le premier paramètre est une liste déroulante. Il est défini sur Afficher par défaut. Sélectionnez Masquer. Cela masque toutes les sections auxquelles vous avez ajouté la classe CSS de section de masquage (la classe CSS se trouve dans la note au-dessus de la liste déroulante). La section intitulée TOUTES LES BONNES CHOSES n'est plus dans la structure de navigation par points.

Cet exemple ne s'affiche qu'au survol. La police et la couleur du point actif/survol sont définies sur rouge. Le fond et les bordures sont transparents. La marge de points est définie sur 16 pour le haut et le bas. La largeur est de 15 et la hauteur de 5, avec le point actif défini sur 20 et 8.

Celui-ci utilise une largeur fixe pour les étiquettes. J'utilise du noir pour l'arrière-plan de l'étiquette active avec une police rouge et une bordure rouge pour la gauche et la droite (qui est définie sur 5). Le rayon de la bordure est défini sur 9 pour lui donner une légère courbe. J'ai centré le texte dans les étiquettes. Le décalage de droite est de 6 pour que les étiquettes s'accrochent à la ligne. Le décalage actif à droite est de 20 pour le faire sauter hors de la ligne.

J'ai également raccourci les noms de section et masqué l'étiquette de la section intitulée All The Right Things. Les polices sont en italique.

Pour les paramètres de points, j'ai défini la largeur sur 6 et la hauteur sur 38. Le point actif est 10 et 35. Cela fait ressembler les points à une ligne verticale. Je vais utiliser cet exemple pour montrer des animations.

Animations DotNav

Les animations montrent comment les points apparaissent lorsque la page se charge. Il comprend 11 animations. La durée de l'animation peut être ajustée à l'aide du curseur. Voici un aperçu de quelques-uns d'entre eux.

Droit dedans

Right In est difficile à voir mais il se déplace de la droite tel qu'il apparaît.

En bas

Bottom In apparaît et glisse vers le haut.

Fondu en entrée

Fade In s'estompe déjà en place.

Fondu vers la gauche

Fade In Left s'ouvre en fondu puis se déplace de gauche à droite pour se mettre en place.

Fondu en haut

Fade In Top s'ouvre en fondu puis effectue un grand mouvement vers le bas.

Retourner X

Flip In X se retourne à partir de l'axe X et rebondit au fur et à mesure qu'il se met en place.

Retourner en Y

Flip In Y se retourne à partir de l'axe Y et ressemble à une porte.

Licence et documentation

Le plugin peut être utilisé avec un nombre illimité de sites Web pour vous et vos clients. La documentation est incluse dans le fichier de téléchargement. J'ai trouvé les commandes suffisamment intuitives pour ne pas avoir besoin de la documentation, mais je suis content qu'elle soit incluse au cas où.

Dernières pensées

J'ai trouvé DotNav facile à utiliser. Il offre de nombreuses personnalisations aux points et aux arrière-plans, et j'aime pouvoir ajouter des étiquettes. Les sections de survol et actives se distinguent et peuvent être personnalisées séparément. Les animations sont intéressantes mais il n'y en a pas beaucoup et elles ne s'animent qu'au chargement. Ajuster la largeur et la hauteur de l'étiquette sur deux onglets séparés (ajuster la hauteur du point pour la hauteur de l'étiquette) peut être déroutant au début, mais une fois que j'ai compris, je n'ai eu aucun mal à faire les ajustements.

Comme tous les paramètres du personnalisateur de thème, les paramètres de DotNav s'appliquent à l'ensemble du site. Vous devrez expérimenter avec les couleurs de police et d'arrière-plan pour trouver une combinaison qui fonctionne avec tous les arrière-plans de votre site Web.

Si vous souhaitez personnaliser la navigation par points de Divi, DotNav de Divicio.us pourrait être le plugin que vous recherchez.

Nous voulons de vos nouvelles. Vous avez utilisé DotNav pour Divi ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via newelle / shutterstock.com