How To Add Divi Breadcrumbs To Your Website

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.

Yoast SEO breadcrumbs settings

Now go to any page of your website and place a text module. Now place this shortcode in the text module:

[wpseo_breadcrumb]
Placing Yoast SEO breadcrumb shortcode in Divi

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.

Rank Math breadcrumbs settings

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:

[rank_math_breadcrumb]
Placing Rank Math breadcrumb shortcode in Divi

You can style the breadcrumb text further with the settings from the text module.

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.

Place the breadcrumb NavXT widget

Go to any of your pages and place the sidebar module. In the widget area choose your just created sidebar.

Placing the widget with breadcrumb NavXT

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.

2 thoughts on “How To Add Divi Breadcrumbs To Your Website”

  1. Hello Sir, thanks for your valuable divi breadcrumb blog post and it’s really good to see.

    But can you explain where we can add it in global header sub section like it will repeat for all pages ?

    Regards
    Suffian Ahmed

    Reply
    • Hi Suffian,

      Site-wide would probably not working, because your home page is likely different structured than your subpages and your posts.

      For example for posts, you could create a custom template in Divi > Theme builder and incorporate the breadcrumbs in the design and use that for all your posts.

      You can also try the site-wide options in the plugins to see if that would work.

      Reply

Leave a Comment

9 Shares
Share8
Pin1
Tweet