The Divi theme is full of options, you can customize almost anything from your back office. Except that the developers forgot (or knowingly omitted) to provide an option for the breadcrumb trail.
However, it is so useful, whether for the user (who can easily be located in your site) or for indexing robots. This 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 program:
- What is the use of a breadcrumb trail?
- How to insert it in Divi?
- Where to insert the breadcrumb trail?
- What alternative to Breadcrumb NavNext?
- In conclusion....
Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
What is the use of a breadcrumb trail?
Indeed, you may not find it useful to add a breadcrumb trail to your site or blog and yet this is recommended if not essential.
First of all, let's think of the user, i.e. the Internet user, for whom this functionality can be very practical in internal navigation on your site, especially if it offers a lot of content. The visitor will therefore be more comfortable finding his "path", going back etc., this improves the UX (user experience).
Then, let's think about the natural referencing of your site. Indexing robots appreciate sites that show a breadcrumb trail, so it's obvious to please them! This functionality is far from being superfluous and is an asset not to be overlooked in terms of SEO.
How to 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
- Look for the Breadcrumb NavNext plugin
- Click on set up
- Enable it
2. Configure the plugin
This free plugin offers some configuration options that I won't dwell on, but you can enable or disable some interesting options for that:
- Go to the tab Settings > Breadcrumb NavNext
- You will then find 4 tabs: General, Post Types, Taxonomies and Micellaneous. This is where you can customize the content of your breadcrumb trail.
- You can even decide on the separator of the elements that make up your breadcrumb trail. Usually, we 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 breadcrumb trail
Once the Breadcrumb NavNext plugin is set up, you will need to insert a piece of code inside of a PHP file from your children's theme so that the breadcrumb trail appears on your site. Here is what you will need to insert:
Where to insert this famous Ariadne's thread?
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 this question is quite subjective... Let's look at some examples:
Case n°1: in the file header.php
The file header.php contains the header of your site with usually the logo, navigation(s) etc. So this is the perfect 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 the files of your Divi theme (the parent theme) and paste this copy into the folder of your child theme.
For the example of my screenshot above, I inserted the code after line 60 of my file header.php.
Case n°2: in the file single.php under the title of the article
The file single.php 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 will need to modify. Always by duplicating the file single.php of the parent theme in your child theme and modifying it using a text editor as explained in Case n°1.
For this example, I inserted it after line 37 of the file single.phpjust below the title that I spotted from the tags.
Case n°3: in the file single.php below the front page image
It may also be an alternative solution that I like less but that might be suitable for some of your projects. All you have to do is change the location of the code tip to place it after the call for the image on the front page.
To insert this piece of code, I have located the end of the section named .and_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 on the code too much, 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 may be a good alternative.
You saw that with a few pieces of code, we can customize your Divi themeNot only is it not complicated, but this feature will also be beneficial for the natural referencing of your site. So, what are you waiting for?
Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!