Search
Close this search box.

How to Add Breadcrumbs in Divi Builder

Compared to other page builder plugins like Elementor and Brizy, the elements offered by Divi Builder tend to limit. Divi Builder has no built-in design element (module) to add breadcrumbs to a page. Well, it actually has one, but only for WooCommerce. So, how to add breadcrumbs to a regular page? You can add breadcrumbs to a regular page with the help of Breadcrumbs Divi Module.

Breadcrumbs Divi Module is a Divi Builder extension developed by LearnHowWP.com. It adds a new module called Breadcrumbs on the Divi Builder. You can then use the module when creating a page or theme builder template (i.e. single post template) using Divi Builder. The extension itself is released for free so that you can use it without needing to spend extra money. You can download the extension on the official plugin directory of WordPress.

How to Add Breadcrumbs in Divi Builder

Before getting started, make sure you have installed and activated the Breadcrumbs Divi Module extension on your WordPress site. Once the extension is installed and activated, create a new page (or edit an existing page) and edit it with Divi Builder. On the Divi Builder editor, click the plus grey icon on the canvas area to add a new module and select Breadcrumbs.

Customizing the Breadcrumbs

Once the Breadcrumbs module is added, you can customize it from the Breadcrumb settings panel which appears right after you add the module. First, you can set the prefix or suffix on the Text block under the Content tab.

Next, you can open the Icon block (also under the Content tab) to set the separator.

To set the color of the breadcrumbs, you can open the Breadcrumbs Styles block under the Design tab. From this block, you can set the link color, the separator color, as well as the current text color.

To set the typography of the breadcrumbs, you can open the Module Text block (also under the Design tab). From this block, you can set the font family, font style, and font size of the breadcrumbs.

To set the spacing of the breadcrumbs — be it the padding or the margin –, you can open the Spacing block under the Design tab.

Don’t forget to click the green checklist icon on the bottom-right corner of the settings panel to save the changes you made. You can publish/update your page once you are done editing it.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.