How to Add Breadcrumbs in Divi Builder

Updated: January 12, 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 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 WP Pagebuilders.

Leave a Reply

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

Pin It on Pinterest

Share This

Share This

Share this post with your friends!