Adding breadcrumbs to your Divi website is super easy to do and does not require any paid plugin or coding. I will show you how to do this with 3 different free plugins.
I start with 2 very popular SEO plugins that come with a breadcrumb function. If you don’t want to use any of these SEO plugins then I have an alternative plugin only for the breadcrumb function.
I like to use shortcodes for the breadcrumbs in my Divi websites. This will give me more control over the placement of the breadcrumbs. The breadcrumb plugins in this tutorial also have sitewide options. I don’t use these sitewide options I like to use the Theme Builder in Divi and create a custom template and then place a breadcrumb shortcode in it. This will give me more options for placement and styling. And with the template assignments options, I can place them everywhere.
Breadcrumb With Yoast SEO
Maybe you are already using Yoast SEO on your site. If that is the case then you only need to add a shortcode to your page and you have breadcrumbs.
After installing the plugin make sure breadcrumbs are enabled. Go to SEO > Search Appearance > Breadcrumbs
You will also find some additional settings here for your breadcrumbs. You can change the separator and the prefix text.
Now go to any page of your website and place a text module. Now place this shortcode in the text module:
You can style the breadcrumb text with the text module settings in the design tab.
Breadcrumb With Rank Math
To enable breadcrumbs in Rank Math go to Rank Math > General Settings and enable the breadcrumbs function.
Here you will find more options for your breadcrumbs. You can change the separator character and the homepage label text.
When the breadcrumb is enabled go to any of your pages and place a text module. In the text module place this shortcode:
You can style the breadcrumb text further with the settings from the text module.
Breadcrumb With NavXT Plugin
Start with installing and activating Breadcrumb NavXT plugin.
This plugin does not work with a shortcode but we can do this with a widget and place it anywhere on your site. First, go to Appearance > Widgets and create a new sidebar.
If you do not see the newly created sidebar refresh the page. Place the Breadcrumb NavXT widget in this sidebar.
Go to any of your pages and place the sidebar module. In the widget area choose your just created sidebar.
Breadcrumb navXT comes with tons of options which you can find in Settings > Breadcrumb NavXT.
And that is it for this tutorial, 3 ways to add breadcrumbs to your Divi website. If you run into any problems please let me know in the comments.