How to easily add Breadcrumbs in Divi

Breadcrumbs can dramatically improve SEO and make your site easier to navigate. So why not add it to our favorite Theme (Divi)? A new addition to our module will let you add Breadcrumbs to your site quickly and easily!

In this article, we’ll learn how to use the Breadcrumbs Module, you can always find more info about each option from the Documentation.

Let’s Get Started

First of all, open up any page using Divi Builder and choose a place where you want to put the Breadcrumbs. And simply insert the Module.

Once you’ve added the Module, you’ll need to set it how you want to show it. You can enable the option “Show Custom Home” and set a custom Text for the Home Link. You can also Show/Hide the Home Icon If you like and do more here.

 So that’s it for the Content Options, let’s move to the Design tab and design the Breadcrumbs. In the Alignment panel, you can set an alignment for the Breadcrumbs, enable the responsive option If you want a different alignment for mobile devices.

In the Items Panel, you can design the Link in the Breadcrumbs, you can add a background color, Padding, Corner Radius, Box Shadow, and much more. Here are the changes we made here.

  • Item Font – Montserrat
  • Item Font Weight – Semi Bold
  • Item Text Color – rgba(0,0,0,0.53)
  • Item Text Size – 20px

So now you can move to the next Panel which is Home Icon, here you can change Home Icon color and size. Here’s what we did here:

  • Home Icon Color – #0072ff
  • Home Icon Text Size – 30px

You can also design the separator by opening the “Separator Panel” and do the changes you like but for our example, the separator already looks cool, so we’ll move the Current Panel and this is where you can make custom changes to the Current Link. Even though we’ve many options in the Current Panel to design the current link, but we’ll go with a basic thing and make the font bold and change its color (#0072ff) for the current link.

So that’s it, that’s how easily you can add Breadcrumbs to Divi, Breadcrumbs are always useful in helping your visitors to locate where they actually are on your site, so don’t make it difficult for your customers to browse your site and add breadcrumbs to your site now.

We hope you’ll found this article and Module helpful, please let us know what you think about this in the comments section below.

Have a great day!

How to access the Divi Supreme Breadcrumbs Module

To use the Divi Supreme Breadcrumbs Module, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today, and don’t forget to share your experience with the Divi Supreme Breadcrumbs Module in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 18 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

2 Comments

  1. Megan Ferrell

    Is there a hook or filter that will allow me to change the Home URL?

    Reply
    • Divi Supreme

      In the latest version of Divi Supreme Pro, we have added the option for you to change the URL of the Home link 🙂

      Reply

Submit a Comment

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


Divi Supreme