Comment activer la navigation par points sur le module de curseur vidéo de votre Divi

La navigation par points est l'une des formes de navigation les plus courantes trouvées dans les curseurs. Cela est vrai quel que soit le contenu du curseur. La navigation par points offre aux utilisateurs un moyen simple et intuitif de naviguer dans le contenu du curseur. Heureusement, le module Video Slider de Divi inclut une option de navigation par points. Dans cet article, nous verrons comment activer la navigation par points sur le module Video Slider de votre Divi. Nous explorerons également quelques combinaisons d'options en cours de route.

Commençons.

Navigation par défaut du curseur vidéo Divi

Voyons d'abord comment fonctionne la navigation dans le module Video Slider. Par défaut, chaque diapositive est affichée sous forme de vignette sous le lecteur vidéo. La diapositive actuelle est assombrie par une superposition. Dans cet exemple, la diapositive à l'extrême gauche est la diapositive active.

La sélection de la miniature d'une diapositive fait naviguer le lecteur vidéo vers cette diapositive. Dans cet exemple, la troisième diapositive à partir de la gauche est la diapositive active. La vignette est plus foncée pour indiquer qu'il s'agit de la diapositive active. Tout ce que j'ai fait, c'est cliquer sur sa vignette.

Nous pouvons également naviguer avec les flèches qui apparaissent lorsque nous survolons la diapositive active. Celles-ci nous amènent à la diapositive précédente ou suivante. Celles-ci sont utiles si vous souhaitez avancer ou reculer dans les diapositives, une diapositive à la fois. C'est idéal pour naviguer sur quelques diapositives. Si vous avez beaucoup de diapositives, cela peut prendre un certain temps pour trouver une certaine vidéo.

Qu'est-ce que la navigation par points ?

La navigation par points est un petit ensemble de points qui apparaissent au bas de la diapositive vidéo. Chaque point représente une diapositive vidéo dans le curseur. Cliquer sur un point révèle cette diapositive dans le lecteur vidéo. Le point de la diapositive active est plus lumineux que les autres points. C'est un excellent moyen de voir combien de diapositives il y a, où se trouve le curseur dans la liste des diapositives et de naviguer rapidement vers une diapositive spécifique.

La navigation par points est particulièrement utile lorsque vous avez beaucoup de diapositives ou que vous souhaitez économiser de l'espace. La navigation est améliorée, tout comme la navigation par vignettes, tout en utilisant moins d'espace dans la mise en page et en réduisant l'encombrement visuel.

Lorsque l'utilisateur veut voir une certaine diapositive, il n'a pas besoin d'attendre que le curseur la lui montre à nouveau, ou d'utiliser les flèches pour parcourir les diapositives jusqu'à ce qu'il atteigne celle qu'il souhaite voir. Ils peuvent simplement sélectionner la diapositive qu'ils souhaitent voir en cliquant sur son point.

Activation de la navigation par points dans le curseur vidéo

Les vignettes ont fière allure, mais elles occupent plus d'espace. Parfois, nous voulons une empreinte plus petite pour notre module Video Slider ou une conception moins encombrée. Lorsqu'elle est activée, la navigation par points remplace la navigation par vignettes, ce qui nous donne un design plus propre et moins encombré. Nous pouvons l'utiliser avec ou sans les flèches de navigation.

Pour activer la navigation par points dans le module Video Slider, activez d'abord le Visual Builder en cliquant sur le lien en haut de votre page. Ensuite, survolez le module Video Slider et cliquez sur l'icône d'engrenage pour ouvrir ses paramètres.

Faites défiler jusqu'à Éléments . Ici, vous verrez une option pour activer ou désactiver les flèches, et une liste déroulante intitulée Slider Controls .

Cliquez sur la liste déroulante pour voir vos options.

Sélectionnez Utiliser la navigation par points et vous verrez les vignettes supprimées et les points ajoutés à la diapositive principale.

• Commandes du curseur : utiliser la navigation par points

Votre curseur vidéo a maintenant un aspect plus simple et prend moins de place. Vous verrez un point pour chaque diapositive, donc si vous avez beaucoup de diapositives, cela sera plus visible.

Navigation par points clairs ou foncés

La couleur de navigation par points par défaut est le blanc. Cela fonctionne très bien pour les images vidéo sombres et les superpositions, mais il peut être difficile de voir si ces images ou superpositions sont claires. Heureusement, vous pouvez les modifier en fonction de vos besoins avec une simple commande.

Dans l'onglet Conception des paramètres du curseur vidéo, accédez à Couleur des commandes du curseur et sélectionnez Sombre dans la liste déroulante.

• Couleur des commandes du curseur : sombre

La couleur sombre des commandes du curseur fonctionne particulièrement bien avec des images claires ou une couleur de superposition de vignettes comme celle de l'exemple ci-dessous. Assurez-vous de tester vos options de couleur de navigation par points pour voir ce qui fonctionne le mieux avec votre image et les couleurs de superposition.

Navigation par points de curseur vidéo sans navigation par flèche

Passer de la vignette à la navigation par points ajoute un autre ensemble de boutons de navigation à la diapositive elle-même. Les flèches et les points apparaissent désormais lorsque l'utilisateur survole la diapositive, et les points sont toujours visibles. Étant donné que l'utilisateur verra toujours les points, vous pouvez décider de ne pas inclure les flèches.

Heureusement, vous avez la possibilité de désactiver les flèches. Dans les paramètres de contenu du module Video Slider, vous verrez une section intitulée Elements . Cette section contient un paramètre appelé Afficher les flèches . C'est activé par défault. Cliquez simplement pour le désactiver.

• Afficher les flèches : non

Le curseur vidéo affiche maintenant les diapositives avec uniquement la navigation par points lorsque je les survole.

Exemples de navigation par points de curseur vidéo

Voyons à quoi ressemble le module Divi Video Slider dans une mise en page Divi en utilisant la navigation par points. Pour mes exemples, j'utilise la page À propos du pack gratuit Cafe Layout disponible dans Divi. Cette page comprend un module vidéo placé sur des images d'arrière-plan d'images de café pour l'environnement du café.

Voici la présentation de la page À propos :

Voici une vue rapprochée de la section que je personnalise. Vous pouvez voir les images en arrière-plan. Si nous ne faisons pas attention au design, nous pouvons facilement le rendre encombré.

Simplifier la conception

Tout d'abord, j'ai remplacé le module Video par un module Video Slider. Ensuite, j'ai créé quatre diapositives et ajouté des superpositions d'images à chaque diapositive. J'ai laissé la navigation par défaut activée. Cela fonctionne, mais la navigation par vignettes semble un peu encombrée avec cet arrière-plan. Il y a trop d'images dans un petit espace et cela devient très vite déroutant. Le module vidéo d'origine avait l'air plus propre. La navigation par points résoudra ce problème.

Voici le module Video Slider avec la navigation par points activée. Il a l'aspect plus simple et plus propre du module vidéo et il est toujours utilisable comme curseur vidéo. Mis à part les points supplémentaires sur l'image, il ressemble au module vidéo d'origine.

Changer le design sur mobile

Les points peuvent être trop petits ou difficiles à utiliser sur votre curseur vidéo lorsqu'il est utilisé avec des smartphones. Dans ce cas, vous pouvez utiliser la navigation par vignettes uniquement sur les téléphones et conserver la navigation par points sur les ordinateurs de bureau et les tablettes.

Dans les paramètres des commandes du curseur , cliquez sur l' icône de la tablette pour ouvrir les options de taille d'écran. Sélectionnez l' icône du téléphone , puis choisissez Utiliser la piste des miniatures . Cela active la navigation par vignettes pour les téléphones, laissant les ordinateurs de bureau et les tablettes afficher la navigation par points. Les utilisateurs disposent désormais d'un moyen simple de naviguer dans les diapositives, quelle que soit la taille de l'écran de leur appareil.

Mettre fin aux pensées

C'est notre regard sur la façon d'activer la navigation par points sur le module Video Slider de votre Divi. Les points offrent un design simple et épuré qui convient parfaitement à toutes les mises en page. Les points sont intuitifs, de sorte que les utilisateurs savent déjà comment naviguer avec eux. Le choix entre les options de couleurs claires et foncées vous donne une certaine flexibilité afin qu'elles fonctionnent bien avec vos images et superpositions. La navigation par points du curseur vidéo de Divi est un excellent choix si vous voulez un look propre et minimal pour vos curseurs vidéo.

Nous voulons de vos nouvelles. Utilisez-vous la navigation par points dans votre module Divi Video Slider ? Faites-le nous savoir dans les commentaires ci-dessous.