How to Add Breadcrumbs to Divi

by | Aug 7, 2019 | Tips & Tricks | 0 comments

Breadcrumbs are an efficient method of marking your path. Drop a breadcrumb every few steps and you’ll easily be able to go back the way you came. For websites, breadcrumbs list the pages and categories as horizontal navigation to show where you are within the navigation structure. The best way to add them to Divi is with a plugin called Divi Breadcrumbs Module.

Since it’s a Divi module, you have access to all of the expected design features to create unlimited designs to fit any Divi website. Divi Breadcrumbs Module adds its own breadcrumbs to Divi, so it doesn’t depend on other plugins such as Yoast SEO or WooCommerce to create them. It works great from the backend or frontend builders.

Divi Breadcrumbs Module is a popular extension for Divi and was featured on the Elegant Themes blog in an article titled Divi Plugin Highlight – Divi Breadcrumbs Module.

In this article, we’ll take a look at its features and strengths. But first, let’s see the benefits of breadcrumbs.

Why You Want Breadcrumbs

Besides just looking nice, there are several good reasons to add breadcrumbs to your website.

Breadcrumbs Improve the User Experience

Breadcrumbs are great for enhancing the user experience of your website. It adds a navigation structure that creates contextual awareness. The links within the navigation structure are clickable. This means users can navigate through the structure any way they want without having to hit the back button or modifying the URL in the address bar. This also keeps them on your site longer because they’re more likely to explore.

Breadcrumbs Improve SEO

It also improves your site’s SEO because it adds a structural element that search engines like. It can also help reduce your bounce rate. When users land on a page organically they’re less likely to leave your website if the page or article wasn’t what they were looking for. Instead, they might click on the breadcrumbs to see more articles for that category.

Adding Breadcrumbs to Divi with the Divi Breadcrumbs Module

Divi Breadcrumbs Module is a new module that’s added to the Divi Builder. It works with the classic backend builder, the new backend builder, and the visual builder.

The module can be placed anywhere you want within your Divi layouts. Breadcrumbs are usually near the top of the page. They work great just under the header menu. It’s a good idea to place them where they’re the most useful to your readers. Of course, this doesn’t mean you can’t experiment and see what kind of designs you can come up with.

Divi Breadcrumbs Module Content Tab Settings

The content tab includes Breadcrumbs Navigation Settings and the standard Background and Admin Label settings.

Breadcrumbs Navigation Settings let you hide the Home page, add your own text for the Home page, choose the separator from 12 different designs, and hide the current page. The 12 separators include arrows, dashes, dots, stars, lines, and more.

The Background settings let you adjust the background like any Divi module. Give it a solid color, gradient, image, or video. You have access to all of the image and video adjustments and effects like any Divi module.

Divi Breadcrumbs Module Design Tab

The Design Tab provides styling options for the Breadcrumbs Text, Separator Text, and Breadcrumbs Links Text. Each has its own settings that let you choose the font, font weight, style, alignment, color, size, letter spacing, line height, and shadow. You can adjust the font for the current page, links, and separators independently of the other text in the string of breadcrumbs.

It also includes the standard settings for Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation. These are the standard design customizations for Divi modules and allow you to add shadows to the module, skew, rotate, filter the colors and text, blend, animate the module, etc.

This is great for customizing the look of the breadcrumbs to match your site’s styling. Adjust colors, sizes, and lots more.

Divi Breadcrumbs Module Advanced Tab

The Advanced tab provides the common fields for CSS ID & Classes, Custom CSS, Visibility, and Transitions. Each includes the standard fields found in most Divi modules. For example, Visibility adds the three device types, horizontal and vertical overflow, and Z Axis. Transitions adds duration, delay, and speed curve.

The Custom CSS tab adds new elements to target specific portions of the module with CSS. The new elements include Breadcrumbs, Active Breadcrumb, Breadcrumb Links, Breadcrumb Link Hover, and Separators. This opens up the styling possibilities of every element of the breadcrumbs.

Ending Thoughts

Divi Breadcrumbs Module is highly intuitive. If you can use Divi you can use Divi Breadcrumbs Module. Since the design features let you target the links, separators, and current page individually, there’s practically no limit to your design options.

On top of the ability to design your breadcrumbs, it also improves your user experience and SEO. With all of these benefits, Divi Breadcrumbs Module is an excellent choice for any Divi website. You can see the plugin in the Divi Cake shop.

We want to hear from you. Have you tried Divi Breadcrumbs Module? Let us know what you think about it in the comments.


Submit a Comment

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

Featured Divi Products


Recommended Hosting

Pin It on Pinterest