Breadcrumb Divi

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

Updated on 08/06/24

1133 words

4 minutes of reading
34 comments

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

The Theme Divi is full of options, you can customize almost everything from your back office. Except that developers have forgotten (or knowingly omitted) to predict an option for breadcrumbs.

Yet it's so useful, whether it's for Internet users (which can easily be located in your site) or for indexing robots. This is also an asset for improving SEO (natural reference).

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

Discover all you can do with the theme Divi

Here is the program:

What is the use of breadcrumbs?

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

First of all, think of the user, i.e. the Internet user, for whom this feature can be convenient in internal navigation on your site, especially if it offers many content. The visitor will therefore be more comfortable to find his "path", go back etc., it improves the UX (user experience).

Next, let's think about the natural referencing of your site. Indexing robots like sites that display breadcrumbs, so it’s obvious to please them! This functionality is far from superfluous and it is an asset that should not be overlooked in terms of SEO.

How to insert a breadcrumb in Divi?

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

1. Install the Breadcrumb NavNext plugin

Breadcrumb NavNext - Breadcrumb
The Breadcrumb NavNext plugin to insert an Ariane thread

This happens in the same way as installing any plugin:

  • Go to tab Extensions > Add
  • Search plugin Breadcrumb NavNext
  • Click on install
  • Enable it

2. Configure plugin

This free plugin offers some configuration options on which I will not dwell but know that you can enable or disable some interesting options, for this:

  • Go to the tab Settings > Breadcrumb NavNext
  • You will find 4 tabs: General, Post Types, Taxonomies and Micellaneous. This is where you can customize the content of your breadcrumbs.
  • You can even decide of the separator of the elements that make up your breadcrumbs. You usually find this symbol " >" but you can change it by using the Guide to symbols available in HTML and put an arrow, a heart, a diamond etc.
Choose the separator of his Ariane thread
Option to choose the separator of its Ariane thread

3. Display your Ariane thread

Once the plugin Breadcrumb NavNext set, you will need to insert a piece of code inside a PHP file of your theme child so that the Ariane thread appears on your site. Here is what you will need to insert:

 <div id="ad-breadcrumbs" class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
 <?php if(function_exists('bcn_display')){
 bcn_display();
 }?>
 </div>

Where to insert this famous breadcrumb?

Now that you have all the cards in hand, you just have to copy and paste the code we just saw... but the big question is: Where to insert this piece of code? And the answer to that question is quite subjective... Here are some examples:

Case #1: in the file header.php

does the job very well... It's even more convenient! header.php contains the header of your site with usually logo, navigation(s) etc. It is therefore the right place to display a breadcrumb.

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

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

Breadcrumb placed under the menu - header.php
Breadcrumb feed under the menu – header.php

Then you Edit this file with software (a text editor such as SublimText or Bracket for example) and you Choose the ideal place for insertion.

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

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

does the job very well... It's even more convenient! single.php is the reference file to display blog articles.

If you want your Breadcrumb to appear only on your articles, then this is the file you will need to edit. Always duplicate the file single.php the parent theme in your child theme and modifying it using a text editor as explained in Case #1.

Breadcrumb posted under the title of my article
Breadcrumb posted under my article title

For this example, I inserted it after line 37 file single.php, just below the title that I spotted thanks to the tags and.

Case #3: in the file single.php below the picture at the front

It can also be an alternative solution that I like less but that might suit some of your projects. Simply change the location of the code tip to place it after the call to image at the front.

Breadcrumb under the front page
Breadcrumb under the front page

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

get Divi - get Divi

An alternative to Breadcrumb NavNext?

If you don't want too much Put your hands in 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... That can be a good alternative.

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

In conclusion...

You saw that with a few bits of code, we could Customize its theme Divi, not only is it not complicated but in addition, this feature will benefit your site's natural SEO. So, what are you waiting for?

Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos!

How to add an Ariane thread to Divi?
How to add an Ariane thread to Divi? Say it on Pinterest

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256

Proudly translated by wpLingua, the translation extension for WordPress That I develop! SEO-Friendly / Automatic / Editable

34 Comments

  1. Jamel
  2. Lycia
  3. Philippe Lenders
  4. Lycia Diaz
  5. Philippe Lenders
  6. Lycia Diaz
  7. Philippe Lenders
  8. Lycia Diaz
  9. Philippe Lenders
  10. Philippe Lenders
  11. Lycia Diaz
  12. arlt
  13. Lycia Diaz
  14. Stéphanie
  15. Lycia Diaz
  16. JLuc
  17. Lycia Diaz
  18. Stéphane
  19. stéphane
  20. Lycia Diaz
  21. stéphane
  22. Lycia Diaz
  23. Christian DECONYNCK
  24. Lycia Diaz
  25. 7hil
  26. 7hil
  27. Lycia Diaz
  28. Lycia Diaz
  29. 7hil
  30. Lycia Diaz
  31. Alex
  32. Lycia Diaz
  33. Laurette
  34. Lycia Diaz

Submit a comment

Your email address will not be published. Required fields are indicated with *

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.