Fil d'Ariane Divi

How do I insert a breadcrumb trail in Divi? And where to put it?

Updated on 30/10/2020 | Published on 29/09/2017 | 30 comments

1,063 words

4

The Divi theme is full of options, you can customise almost everything from your back-office. Except that the developers forgot (or consciously omitted) to provide an option for the breadcrumb trail.

Yet it is so useful, both for the Internet user (who can easily find his way around your site) and for the indexing robots. It is also an asset for improve SEO (natural referencing).

In this article, you will see how to add a breadcrumb trail for free and above all you will be able to decide where to insert it.

Find out what you can do with the Divi theme

Here is the programme:

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

What is the purpose of a breadcrumb trail?

Indeed, you may not find it useful to add a breadcrumb trail to your site or blog and yet it is recommended, not to say essential.

First of all, let's think about the user, i.e. the Internet user, for whom this functionality can be very practical in the internal navigation of your site, especially if it offers a lot of content. The visitor will therefore be more comfortable finding his or her way around, going back, etc., and this improves the UX (user experience).

Next, think about the natural referencing of your site. The indexing robots appreciate sites that display a breadcrumb trail, so it is obvious to please them! This functionality is far from being superfluous and is an asset not to be neglected in terms of SEO.

How do I insert a breadcrumb trail in Divi?

To add it to your Divi theme, you will need three things:

1. Install the Breadcrumb NavNext plugin

Breadcrumb NavNext - fil d'Ariane
Breadcrumb NavNext plugin to insert a breadcrumb

This is done in the same way as installing any plugin:

  • Go to the tab Extensions > Add
  • Search for the Breadcrumb NavNextplugin
  • Click on install
  • Activate it

2. Configure the plugin

This free plugin offers a few configuration options which I won't go into, but you can enable or disable some interesting options:

  • Go to the Settings > Breadcrumb NavNext
  • You will then find 4 tabs: General, Post Types, Taxonomies and Micellaneous. This is where you can customise the content of your breadcrumb trail.
  • You can even decide on the separator for the elements that make up your breadcrumb trail. Generally, this symbol is ">" but you can change it with the help of the guide to the symbols available in HTML and put an arrow, a heart, a diamond etc.
Choisir le séparateur de son fil d'Ariane
Option to choose the separator for your breadcrumb trail

3. Display your breadcrumb trail

Once you have set up the Breadcrumb NavNext plugin, you will need to insert a piece of code into it of a PHP file from your child theme so that the breadcrumb trail appears on your site. Here is what you need to insert:

 

Where to insert this famous Ariadne's thread?

Now that you have all the cards in your hand, all you have to do is copy and paste the code we have just seen... but the big question is : where to insert this piece of code? And the answer to this question is quite subjective... Let's see some examples:

Case 1: in the header.php

The file header.php file contains the header of your site, usually with the logo, navigation(s) etc. It is therefore the right place to display a breadcrumb trail.

With this method, it will be present on all the pages of your site: pages, articles, archive pages etc.

To insert it, you will need to duplicate the header.php file contained in your Divi theme files (the parent theme) and paste this copy into your child theme folder.

Breadcrumb placé sous le menu - header.php
Breadcrumb trail under the menu - header.php

Then you edit this file with a software (a text editor such as SublimText or Bracket for example) and you will choose the ideal place to insert it.

For the example in my screenshot above, I have inserted the code after line 60 of my file header.php.

Case 2: in the file single.php below the title of the article

The file single.php file is the reference file for displaying blog posts.

If you want your breadcrumb trail to appear only on your articles, then this is the file you need to modify. Again, by duplicating the single.php from the parent theme into your child theme and modifying it with a text editor as explained in Case 1.

Fil d'Ariane affiché sous le titre de mon article
Breadcrumb trail posted under the title of my article

Pour cet exemple, je l’ai inséré après <strong>la ligne 37</strong> du fichier <strong><em>single.php</em></strong>, juste en dessous du titre que j’ai repéré grâce aux balises <strong><h1> et </h1></strong>.

Case 3: in the single.php below the front page image

This can also be an alternative solution which I like less but which could be suitable for some of your projects. All you have to do is change the location of the code snippet to after the front page image.

Fil d'Ariane placé sous l'image à la une
Breadcrumb trail under the front page image

To insert this piece of code, I located the end of the section named .et_post_meta_wrapperafter line 123, as you can see in the screenshot above.

obtenir Divi - get Divi

An alternative to Breadcrumb NavNext?

If you don't want to get your hands too deep into the code, you can always opt for a premium plugin that does the job very well.

This is the extension named Divi Breadcrumbs Module which is available for 15$... It can be a good alternative.

Other solutions: Yoast SEO and SEOPress also offer a Breadcrumb functionality.

In conclusion...

You have seen that with a few bits of code, you can customise your Divi themeNot only is it easy to do, but it will also benefit your website's natural referencing. So, what are you waiting for?

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

Comment ajouter un fil d'Ariane dans Divi ?
How do you add a breadcrumb trail in Divi? Say it on Pinterest
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

30 Commentaires

  1. Jamel

    Bonjour Lycia,

    Meilleurs voeux pour cette nouvelle année!

    J’ai suivi ton tuto. Toutefois, lorsque j’ajoute ton code, le fil d’ariane s’affiche dans le menu secondaire. Je n’ai pas le même rendu…
    J’utilise Divi + Woocommerce. Où placer ce code pour qu’il puisse s’afficher en haut des pages te fiches produits.

    Merci d’avance

  2. Lycia

    Bonjour Jamel ! Meilleurs vœux à toi aussi.
    Concernant le Fil d’Ariane, je me doute que s’il apparaît dans ton menu secondaire c’est que tu l’as inséré à cette endroit dans le code, tu as dû l’insérer dans le fichier header.php, je me trompe ? Il faut donc que tu refasses des essais jusqu’à ce qu’il apparaisse où tu le désires. Pour ma part, sur ce blog Astuces Divi, j’ai utilisé le Cas N°2, c’est à dire, en dessous du titre de mon article, j’ai donc modifié le fichier single.php : regarde en haut de cet article, il est en couleur VIOLET & VERT…
    Concernant WooCommerce, moi aussi je l’utilise et le fil d’Ariane est automatique, je n’ai rien eu à faire, c’est l’extension WooCommerce qui l’a géré toute seule, comme tu peux le voir sur un produit de ma boutique (boutique en cours de construction mais déjà visible), le chemin (fil d’Ariane) est déjà disponible, juste au dessus de l’image de mon produit, regarde sur ce produit par exemple (le fil d’Ariane est en gris, cette fois) : Support Divi
    J’espère que ma réponse va t’aider et n’hésite pas à revenir nous donner ta solution, ça pourrait aider d’autres personnes.
    Bonne continuation.

  3. Philippe Lenders

    Bonjour,

    Une idée pour insérer un fils d’ariane quand on utilise le modèle « blank page » ?

    Merci !

  4. Lycia Diaz

    Bonne question !
    Je n’ai pas testé avec un modèle Blank. Il faudrait voir quel est le modèle de page qui est utilisé par Divi pour afficher une Blank Page. Tu peux utiliser l’extension « Afficher le modèle courant » qui t’indiquera quel fichier modifier. Peut-être l’insérer dans le fichier page.php ??? À tester.

  5. Philippe Lenders

    Non, j’avais déjà essayé avec « page.php » 😉
    Grâce à l’extension « afficher le modèle courant », c’est résolu !
    C’est dans « page-template-blank.php »
    On est cependant « condamné » (je pense) à afficher le fils d’Ariane tout en haut, ce qui n’est pas très joli et moins pratique qu’en dessous du module « menu pleine page » par exemple.
    Peut-être demain avec Divi 4 ?
    Encore merci Lycia !

  6. Lycia Diaz

    Super ! Merci Philippe pour le tuyau !
    Du coup, ça me fait penser à quelque chose : pourquoi ne pas placer le code du fil d’Ariane au sein d’un module « code » de Divi et de le placer où tu veux au sein de ton layout ? Par exemple, en dessous de ton module « menu » ? C’est peut-être faisable ? À tester…

  7. Philippe Lenders

    Ben … non : c’est du PHP qu’il faut insérer. Le module Code n’accepte que HTML, CSS ou Javascript

  8. Lycia Diaz

    Ah mince… je n’avais pas réfléchi… ni essayé… mais du coup avec le nouveau Theme Builder, je me demande comment faire. Il faudrait que je teste…

  9. Philippe Lenders

    Divi 4.0 avec custom header :

    J’ai mis le code dans page.php, après la ligne 17
    Juste avant

    Je pense qu’il y a d’autres possibilité

  10. Philippe Lenders

    Euh, pas une bonne idée de copier coller la ligne en php.
    Donc, coller le code après la ligne 17 juste avant le test «  »have_posts »

  11. Lycia Diaz

    Merci Philippe,
    En effet, tu ne peux pas insérer du PHP en commentaire, c’est une histoire de sécurité 😉 mais merci pour l’info, elle pourra servir pour d’autres utilisateurs.

  12. arlt

    Bonsoir Lycia,

    Merci à nouveau pour ce superbe tutoriel qui va changer ma vie si j’arrive à régler un petit soucis 🙂

    J’ai tout respecté à la lettre, par contre je n’arrive pas à trouver la solution pour que le fil d’ariane soit : accueil > la page et non la catégorie.

    J’ai peut-être un soucis dans la hiérarchie de mon site…

    Au cas où, si jamais tu as quelques minutes pour me sauver, voici comment se présente mon site.

    Dans mon menu, j’ai un onglet blog avec deux sous-rubriques (ce sont des pages). Ces deux pages comprennent des articles de blog qui eux sont classés dans des catégories.

    Voilà rien de plus ! cela ne me paraît pas très déconnant niveau utilisation.
    Mais pour le coup, le fil d’ariane me renvoie vers mes catégories. Je n’ai pas trouvé de solution dans les réglages (ou pas vu). Et pour couronner le tout, je me rends compte que la catégorie vers laquelle il me renvoie, comprend tous mes articles sur une seule page à la suite. Pas top top pour Google.

    En tout cas, je te remercie d’avance si tu as le temps de m’aider.

    Stéphanie

  13. Lycia Diaz

    Salut Stéphanie !
    Je suis allée voir ton site.
    Effectivement, c’est la catégorie qui est prise en compte dans la hiérarchie. Je ne pense pas qu’il y ait une option pour ça. Et bien sûr, un fil d’Ariane est très compliqué à coder, donc, là je ne vois pas de solution.
    Par contre – et cela n’est que mon avis – c’est mieux que la page d’archive de catégorie affiche de nombreux articles plutôt que 5 ou 10 : cela évite à Google d’indexer beaucoup de pages. Par exemple, si tu as 100 articles dans ta catégorie, il vaut mieux que Google indexe 1 page d’archive comprenant 100 articles plutôt que 10 pages de 10 articles, non ? Le budget crawl « coûte cher »…
    Par contre, j’ai une solution pour toi : tu peux customiser ta page d’archive de catégorie depuis le nouveau thème builder et tu pourrais afficher tes cartes de blog avec tes jolies « images à la une » au sein de cette page.
    Au passage j’ai vu que tes articles utilisaient la mention « mis à jour le » : as-tu suivi le tuto publié ici ? Hi hi, c’est un clin d’œil 😉
    Au plaisir d’échanger…

  14. Stéphanie

    Bonjour Lycia,
    Je te remercie pour ton retour et surtout pour ta solution. Je vais voir ce que je peux faire pour garder les choses dans l’état et customiser ma page d’archive.
    Pour répondre à ta dernière question : en effet j’ai suivi le tuto de mise à jour (ce n’est pas le seul d’ailleurs :)). Tes 2 blogs sont pour moi d’excellentes sources d’améliorations et d’inspiration. Un grand merci pour le travail accompli.
    Belle journée,
    Stéphanie

  15. Lycia Diaz

    Merci Stéphanie ! C’est très gentil à toi ! Et oui, je me doute que mon tuto n’est pas le seul, c’est une fonctionnalité plutôt courante 😉 À bientôt
    Lycia

  16. JLuc

    Lycia,
    Pour installer mon fil d’Ariane, je ne suis pas passé par autant d’aspects tech.
    J’ai simplement ajouté à l’emplacement souhaité le module « code » puis j’y ai collé « [wpseo_breadcrumb] ».
    Trop simpliste pour être efficace à ton avis ?

  17. Lycia Diaz

    Non c’est aussi une bonne méthode 😉

  18. Stéphane

    bonjour et merci pour toutes vos astuces que je parcours assidument depuis 2 jours (vive le confinement). Je trouve par contre des choses un peu contradictoire, comme par exemple le positionnement d’un breadcrumb « automatique » sur les pages produits woocommerce. Cela est tout a fait juste, mais comme j’utilise en même temps ton tuto sur la création d’un template général pour mes fiches produits avec le divi thème builder, il se trouve que le breadcrumb disparait a cet endroit ! et aucune extension divi ou woocommerce n’est proposé pour ça dans le theme builder, donc comment faire ?
    en général, mais a moins que je me trompe, je trouve dommage que l’on ne puisse pas implanter des extensioins externes a divi dans le theme builder, car pour ma boutique j’ai besoin de modules tres spécifiques, et du coup jene vois pas comment les intégrer sur l’ensemble des mfiches produits (sauf ceux qui disposent évidemment d’un shortcode). en tout cas merci pour ces tutos clairs et précis

  19. stéphane

    Oups méa culpa !! contrairement a ce que je disais, et pour ceux qui chercheraient bêtement comme moi le fil d’ariane dans le theme builder, et en particulier sur une fiche produit, le module a appeler est le « woo miettes de pain »…et oui j’ai même pas tilté qu’ils avaient traduit breadcrumb au mot à mot!! mdr c’était là sous mes yeux et j’ai rien vu!!! donc rectification et amende honorable, il semble qu’on puisse faire ce que l’on veut avec ce thème builder …

  20. Lycia Diaz

    Salut Stephane. J’allais vous répondre mais vous avez trouvé ! Cool

  21. stéphane

    Salut Lycia, de rien, et finalement j’ai encore besoin de tes lumières ! comme je le disais dans mon premier post, je n’arrive pas a trouver par contre sur le thème builder, le moyen d’insérer des modules autres que ceux de divi. sais-tu si c’est volontaire de leur part ou pas ? car le soucis c’est que j’ai au moins 2 a 3 modules qui me permettent d’avoir des fonctions complémentaires sur mes fiches produit (comme calcul d’un prix dégressifs selon les quantités), et je ne peux pas les utiliser du coup sur mon modèle de page..c’est bien dommâge puisque le but est de gagner du temps dans la composition de ses fiches produits, mais là sans ces fonctionnalités cela ne m’avance a rien…merci de ta réponse !

  22. Lycia Diaz

    Salut Stéphane,
    J’avais perdu de vue ton commentaire.
    Euh, quand tu parles de module, tu parles d’une extension ?
    Normalement, la fonctionnalité doit marcher et ne doit pas être supprimée de tes fiches produit. C’est bien des fiches produit que tu parles ?

  23. Christian DECONYNCK

    Bonjour Lycia,
    Christian dans le tuyau… Je viens de chercher à intégrer le fil d’Ariane mais rien n’apparaît. J’ai fais de multiples tentatives. Pour information, j’utilise un thème enfant de DIvi dont j’ai personnalisé header et corps pour la page d’accueil et les articles. Du coup je me pose la question : le fait de ne pas utiliser un header global a-t-il une incidence sur le choix du fichier header dans lequel on intègre le bout de ton code ? Je pensais que non, mais je me trompe peut-être ?
    Merci pour ton aide…

  24. Lycia Diaz

    Salut Christian. Je crois qu’effectivement les fichiers sont différents selon la méthode utilisée. J’ai remarqué de nouveaux fichiers depuis l’apparition du thème builder mais je te confirme que le fichier header.php est bien celui utilisé si tu n’utilises PAS le Thème Builder de Divi. Tu peux utiliser des plugins du genre Which Template (https://wordpress.org/plugins/which-template/) pour voir quels fichiers sont utilisés par le thème lorsque tu navigues en front. Cela peut te donner des indications.

  25. 7hil

    Bonjour Lycia,
    JLuc ecrit :
    Pour installer mon fil d’Ariane, je ne suis pas passé par autant d’aspects tech.
    J’ai simplement ajouté à l’emplacement souhaité le module « code » puis j’y ai collé « [wpseo_breadcrumb] ».

    Mon modèle de page est un blank page
    Peut tu développer s’il te plait ?
    Merci

  26. 7hil

    problème avec mes commentaires ?

  27. Lycia Diaz

    Pardon c’est moi qui suis dans le jus…

  28. Lycia Diaz

    Effectivement il y a des solutions plus faciles selon le plugin SEO utilisé.

  29. 7hil

    oui merci Lycia ♥
    Jean-Luc parlais de Yoast , et effectivement c’est simple, très rapide et ça fonctionne du premier coup !
    MERCI

  30. Lycia Diaz

    Ah super. Mon article est vieux et plus d’actualité certainement 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This