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.
Here is the programme:
- What is the purpose of a breadcrumb trail?
- How to insert it in Divi?
- Where to insert the breadcrumb trail?
- What is the alternative to Breadcrumb NavNext?
- In conclusion...
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
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.
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.
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.
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.
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.
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.
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!