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:
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.
Displaying modules between the header and breadcrumbs
If you'd like to add a some other module(s) between the header and the breadcrumbs module. There are a couple of possibilities within the plugin's current capabilities, depending on which pages you want to display the module on.
If you display the module on all pages, you could add it to the section which has been made site-wide (i.e. the section saved to the library which also contains the breadcrumbs module).
If you want to display the module on the homepage only, you can disable the "Divi > Theme Options > Navigation > General Settings > Show Breadcrumbs section on homepage" option. Then on the homepage just add a separate breadcrumbs module into the page below that module.
If you want the module shown on another page, or subset of pages, you could use CSS to hide the site-wide section on those pages only, and again add a separate breadcrumbs module into these pages below your module. If this sounds like what you need, let me know where you want to display the slider (i.e. which pages) and I should be able to figure out the CSS you'll need.
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin