Limited Time Offer: Dive into Divi's Anniversary Sale - Up to 70% OFF!

How to Add Breadcrumb on Your Divi Website

Written by Firman


There is no constructed design feature (module) in Divi Builder to apply breadcrumbs to a website page. It does, in fact, have one, but it’s exclusively for WooCommerce. So, how do you incorporate breadcrumbs into a standard web page? Breadcrumbs Divi Plugin can be used to create breadcrumbs to a standard page.’s Breadcrumbs Divi Module is a Divi Theme Builder addon. On the Divi Builder, it adds an extra module called Breadcrumbs. The module could then be used in Divi Builder to create a page or theme builder layout (i.e. single post layout). The extension is available for free, so you won’t have to pay anything more to use it. The extension is available for download from WordPress’s official plugin directory.

In Divi Builder, how can I add breadcrumb ?

Before you begin, make sure you have the Breadcrumbs Divi Module plugin loaded and enabled on your WordPress website. Make a new page (or update an old page) and modify this with Divi Builder that once extension is enabled and functional. To bring a new module to the Divi Builder editor, press the plus grey button on the canvas area and choose Breadcrumbs.

The Cyber Monday sale has officially begun! For a very limited time, Divi are offering our biggest discount of all time plus free bonus gifts and exclusive perks...and that's just the beginning! Once Cyber Monday is over, this crazy deal won't be back until next year Divi Theme Discount today!

Breadcrumb Customization

You may adjust the Breadcrumbs module from the Breadcrumb options menu, which displays immediately once you install the module. To begin, go to the Content tab and specify the prefix or suffix upon on Text block.

The divider can then be set by opening the Icon section (under the Contents section).

Under the Design tab, click the Breadcrumbs Formatting block to change the color of the breadcrumbs. You may change the link color, separator color, and current text color from this block.

Open the Module Text block to customize the breadcrumb typography (under the Design option). The font style, font family, and size of the breadcrumbs can all be changed from this element.

You may use the Spacing block in the Design tab to adjust the breadcrumb spacing, whether it’s margin or padding.

Remember to save your changes by clicking the green checkmark icon in the bottom right corner of settings window. Once you’ve finished modifying your page, you may publish or update it.

divi discount

You May Also Like…