How to Add Breadcrumbs in Divi Builder

Updated: May 25, 2021

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 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 WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Divi.


How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.