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?
- How to insert in Divi?
- Where to insert the Ariane thread?
- What alternative to Breadcrumb NavNext?
- In conclusion...
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:
- one Divi child theme,
- a plugin named Breadcrumb NavNext,
- a text editor.
1. Install the Breadcrumb NavNext plugin
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.
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.
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.
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.
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.
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!
36 Comments