Point culminant du plugin Divi – Module Divi Breadcrumbs

Lorsque je navigue sur un site Web, l'un des outils de navigation que je recherche est le fil d'Ariane. Ils sont parfaits pour vous montrer où vous vous trouvez dans la hiérarchie de navigation et pour trouver facilement d'autres articles dans la structure. Breadcrumbs peut être ajouté à Divi avec un plugin appelé Divi Breadcrumbs Module.

Divi Breadcrumbs Module est un plugin tiers de CodeCrater qui crée des fils d'Ariane basés sur la localisation. En d'autres termes, il vous montre la hiérarchie des catégories de la page que vous lisez actuellement. Le fournit également des liens pour chaque élément de la hiérarchie afin que vous puissiez facilement voir les derniers messages pour chacune des catégories. Les fils d'Ariane sont hautement personnalisables.

En utilisant le module Breadcrumbs, vous pouvez placer des fils d'Ariane sur des pages et des publications individuelles qui utilisent le Divi Builder. Il fonctionne également avec Extra et le plugin Divi Builder. Dans ce point culminant du plugin, nous examinerons le plugin dans Divi et Extra et verrons quelques-unes des façons dont il peut être personnalisé.

Pourquoi utiliser la chapelure ?

Les fils d'Ariane laissent une trace qui montre la hiérarchie des catégories et constitue un excellent moyen d'améliorer la navigation. Ils ne prennent pas beaucoup de place et peuvent réduire et simplifier le nombre d'actions qu'un utilisateur doit effectuer pour naviguer dans votre contenu. Ceci est particulièrement important si vous avez beaucoup de catégories intégrées.

Le module Divi Breadcrumbs améliore le référencement en fournissant à Google des informations hiérarchiques sur votre site Web. Cela signifie que vous devez choisir des mots-clés pour vos catégories pour lesquelles vous souhaitez vous classer. Cela oblige également les concepteurs à utiliser des noms de catégorie plus faciles à comprendre.

Les fils d'Ariane améliorent à la fois l'UX et l'UI. Ils ne doivent pas remplacer votre menu de navigation standard, mais ils peuvent susciter l'intérêt et garder les visiteurs sur votre site plus longtemps.

Module de chapelure Divi

Téléchargez et activez le plugin comme d'habitude. Le module apparaîtra dans un rouge vif appelé Hollywood Cerise. De nombreux plugins de fil d'Ariane nécessitent Yoast car ils tirent leur fil d'Ariane du plugin Yoast, mais le module Divi Breadcrumbs ne nécessite pas Yoast. Au lieu de cela, il crée sa propre chapelure. Il n'y a donc pas d'autres plugins requis.

Les paramètres de contenu incluent le masquage du fil d'Ariane d'accueil, l'ajout de votre propre texte de fil d'Ariane d'accueil, le choix de l'icône de séparation (parmi 12 choix), le masquage de la page actuelle, les paramètres d'arrière-plan et l'étiquette d'administrateur. Les paramètres de conception incluent le style des icônes, du texte et des liens, ainsi que les options d'espacement standard.

Exemples de modules de fil d'Ariane Divi

Il s'agit d'une mise en page d'article de base avec le module de titre de publication avec image, le module de fil d'Ariane et le module de texte des articles. J'ai laissé les paramètres de fil d'Ariane à leurs valeurs par défaut.

Voici à quoi ressemble le module avec les paramètres par défaut. Les liens pour Home et Fencing sont en bleu pour montrer qu'ils sont cliquables. La chapelure peut être placée à gauche, au centre ou à droite.

Dans cet exemple, j'ai placé le fil d'Ariane au centre et ajouté un arrière-plan dégradé et augmenté les tailles de police à la fois pour le titre de l'article (14 points) et les liens (12 points). Le texte est blanc. Comme ils sont imprimés sur un dégradé, je leur ai fait la même couleur. J'ai aussi changé le séparateur de ligne. Dans un article régulier, je n'attirerais pas l'attention sur les fils d'Ariane avec un fond dégradé, mais cela montre ce que vous pouvez en faire.

Ajout de chapelure sous un menu pleine largeur

Le meilleur endroit pour ajouter du fil d'Ariane est en haut de la page. Dans cet exemple, j'ai créé un article à l'aide d'un menu pleine largeur et défini le remplissage et les marges sur 0 pour la section pleine largeur et la section standard. J'ai intégré les catégories pour montrer la hiérarchie.

J'ai modifié les couleurs de police du fil d'Ariane pour qu'elles correspondent au menu pleine largeur, mais je les ai ensuite adoucies pour qu'elles ne se démarquent pas. J'ai remplacé le séparateur par une flèche et supprimé la page d'accueil et la page actuelle de la navigation du fil d'Ariane.

Notez que le fil d'Ariane suit la même structure intégrée que les catégories dans l'image au-dessus. L'article lui-même inclut également ces catégories, mais il n'y a pas de structure hiérarchique. Ils peuvent être supprimés du titre si vous ne souhaitez pas afficher les mêmes catégories plusieurs fois.

Dans cet exemple, j'ai placé la couleur d'arrière-plan dans la ligne, l'ai rendue pleine largeur, changé la couleur de la police pour qu'elle ne dépasse pas le menu et ajouté 1 pixel à l'espacement des lettres. De petits changements peuvent faire une grande différence.

Il s'agit des mêmes paramètres utilisant l'arrière-plan dans le module de fil d'Ariane au lieu de la ligne. J'ai ajouté un rembourrage pour réduire la largeur. J'aime le fait que cela crée un petit élément qui semble séparé mais attaché au menu au-dessus.

Styliser le séparateur

Le séparateur a également des caractéristiques de style. Modifiez le style, la taille, la couleur, l'espacement et la hauteur de la police. Entre les options de séparation et les fonctions de style, vous pouvez facilement créer des séparateurs pour correspondre à la marque de votre site Web.

Cet exemple utilise la police par défaut en violet et une taille de police de 20 pour les séparateurs.

Voici le même séparateur avec une police Georgia pour le séparateur. Il suffit de changer la police du séparateur pour lui donner un nouveau look.

Voici le même séparateur utilisant la police Black Ops One. Il est plus audacieux et se démarque davantage.

Il s'agit de la police Droid Serif à 20 points avec un interligne de 4 pixels. J'ai fait la police d'un rouge foncé.

Même les points changent de forme avec les choix de police. Celui-ci est Passion One à 24 points. Cela vaut la peine de passer du temps à expérimenter avec les polices, les couleurs et les tailles pour créer quelque chose d'unique. C'est facile à faire avec les commandes de style standard.

Utilisation du module Divi Breadcrumbs avec Extra

Le module Divi Breadcrumbs fonctionne avec Extra et le plugin Divi Builder. Voici un aperçu de Extra avec des fils d'Ariane sous l'image à droite. J'ai inclus le nom du message car le fil d'Ariane est très éloigné du titre en haut de l'écran. Il utilise un séparateur de barres.

Idéalement, le fil d'Ariane serait en haut de la page. Dans ma mise en page, le module de fil d'Ariane est en haut. La raison pour laquelle cela s'affiche sous l'image est que j'autorise Extra à afficher l'image en vedette.

Dans cet exemple, j'ai placé l'image dans la mise en page et défini la section pour qu'elle ait 0 rembourrage supérieur. J'ai supprimé le message actuel et rendu le séparateur rouge.

Licence, mises à jour, support

Le plugin peut être installé sur un nombre illimité de sites Web pour vous et vos clients. Les mises à jour sont à vie. Il comprend six mois d'accompagnement.

• Cliquez ici pour acheter : Module Divi Breadcrumbs

Dernières pensées

Les miettes de pain sont l'une de ces petites choses que vous remarquez lorsqu'elles manquent. S'ils sont conçus correctement, ils seront là lorsque l'utilisateur en aura besoin et resteront à l'écart lorsqu'ils n'en auront pas besoin. Le module Divi Breadcrumbs est un excellent moyen de les ajouter à vos pages et publications Divi et ils peuvent facilement être stylisés pour s'adapter à l'image de marque de votre site. C'est simple et intuitif.

Si vous souhaitez ajouter des fils d'Ariane à vos mises en page Divi, Divi Breadcrumbs Module pourrait être le plugin dont vous avez besoin.

Nous aimerions vous entendre! Avez-vous essayé le module Divi Breadcrumbs ? Faites-nous part de votre expérience dans les commentaires ci-dessous.

Image en vedette via Yevgenij_D / shutterstock.com