Adding Site-wide Breadcrumbs in Divi

My Divi Breadcrumbs Module plugin adds a new module to the Divi Builder, which makes it easy to add automatically generated breadcrumbs within your Divi Builder layouts.

I've just released an update (version 1.0.5) to the plugin, which allows you to easily add breadcrumbs throughout your site, without the need for additional coding or plugins. This works in both Divi and Extra.

Adding Site-wide Breadcrumbs using the Divi Breadcrumbs Module

Step 1: Create a section with a breadcrumbs module

First create a new draft page, which we'll use to set up the module. Give it a title (e.g. "My sample page"). Enable the Divi Builder and add a breadcrumbs module to the initially blank section, like so:

Step 2: Style the breadcrumbs

Now you can style the breadcrumbs module to your liking, by using the module settings.

If you'd like to give your breadcrumbs a background color, I recommend setting the background color in the section settings so that it fills the full width of the page.

You may also find it useful to adjust the top and bottom margin and padding amounts in the section and row settings to make the breadcrumbs take up less vertical space.

You can use the "preview" button to view how your breadcrumbs will look.

Step 3: Save the section to the library

When you're happy with the look of your breadcrumbs, right click on the section and select the "Save to Library" option:

Give the section a "Template Name" that you'll recognize (such as "Site-wide Breadcrumbs"), and click Save. The section with your breadcrumbs module will now have been saved to the Divi Library.

Step 4: Configure the section to be displayed globally

Now, from your WordPress Dashboard, go to "Divi > Theme Options > Navigation" (or "Extra > Theme Options > Navigation > General Settings"). There you'll find two options added by the Divi Breadcrumbs Module:

The first option is called "Add breadcrumbs section from library below header". It has a drop-down menu that should now include the name you just gave to the section you saved to the Divi Library in the step above (e.g. "Site-wide Breadcrumbs"). The drop-down menu will also contain the names of any other sections in your library which contain breadcrumbs modules. Select the name of the section you wish to display site-wide.

The second option is called "Show breadcrumbs section on homepage" and controls whether or not your site-wide breadcrumbs will be displayed on the homepage. Set this to Enabled, if you'd like to have the breadcrumbs shown on your homepage.

Once you're happy with your choice, click "Save Changes". That's it, you should now see breadcrumbs displayed throughout your site, just below the header, like so:

Troubleshooting

If you find that the breadcrumbs do not show up under the header after enabling them in the theme options as described above, please first try clearing the caches of any performance plugins you have installed on your site.

If that doesn't help, it may be that output buffering is not enabled on your server. Output buffering is a feature of PHP which is used to add the breadcrumbs to the page. You can enable output buffering by following these instructions or by asking your web host to do it on your behalf.

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

Submit a Comment

Your email address will not be published. Required fields are marked *