How to use Divi breadcrumbs module on your site

Dec 4, 2019 | Divi Resources

How to use Divi Breadcrumbs module on your site

Breadcrumbs are very important for both user and search engine perspective. It helps the user to navigate the website through pages, smooth and easy. As well as it also helps the search engine to index the website’s pages in the server depository in an organized way. So, whenever a query hits the server depository, the page with related content would appear in the search result with breadcrumbs. It improves user interaction with the website, and boosts SEO, too.

Therefore, if you want to add breadcrumbs to your Divi theme website, then this article is what you looking for. In this blog post, we’ll take a look at new plugin called Divi Plus. And will learn how we can create Divi breadcrumbs using this powerful Divi plugin.

Divi plus has 7 unique Divi modules. All can be use to create beautiful website segments, which are essential in day to day website designing. And its Divi Breadcrumbs module to create beautiful breadcrumbs in Divi theme website.

Adding Divi breadcrumbs module on a web page

To move forward in this post, first, you’ve to purchase the plugin. And then install it in your plugins library.

Make sure you activate the plugin because sometimes we forget to activate it and then get anxious. I do it many times.

Step 1

After installing and activating the plugin, go to all pages tab and select the page where you want to add Divi breadcrumbs.

Pages in dashboard

Opening of the page, select use Divi Builder. And then choose build on the front end for better designing experience. After that choose Build From Scratch.

Build from scratch in Divi

Step 2

Insert new row, and choose DP Breadcrumb module.

Divi Plus breadcrumb module

The breadcrumb will appear on your web-page. Now, it’s time for some customization. Make sure you’ve assigned parent and child for all the pages on your website.  Because if not, then it can nag the module to display breadcrumb on the web-page.

Creating Divi Breadcrumbs

Step 1

From two layout options choose layout 1.

Layout 1 in breadcrumb layout

After choosing layout, tap on Design tab.

Step 2

In Breadcrumb Styling, set color of Breadcrumb Background to #840018. And then, check “Different Background for last item” as “YES”.

Check “Different Background for last item” as “YES"

Set color for last item Background to #00A5A2.

Step 3

In Home Link styling menu, check both “USE Home Link Icon” and “Hide Home Text” as “YES”.

Home Link Icon: See screenshot

Set Home Link Icon Color to: #00A5A2

Divi breadcrumbs design settings

Step 4: Text Settings

Global Text Settings-

Text Alignment: Left

Global Text Size: 18px

Divi breadcrumbs global text settings
Text Text settings-

Text Font: Nunito

Font Weight: Semi Bold

Text Color: FFFFFF

Letter Spacing: 1px

Text Shadow: See screenshot

Text Shadow Color: 000000

Divi breadcrumbs text settings
Link Text Settings:

Keep all the settings same as the text. And leave other settings as the way they were and your breadcrumb is ready.

Divi breadcrumbs link text settings

Creating Divi Plus Breadcrumbs using layout 2

Divi Breadcrumbs with text separator
Divi breadcrumbs with text separator

Separator Type: Text Separator

Separator Text: “|”

Font Size: 25px

Separator color: #30C419

Text Settings-

Font: Nunito

Text Font Weight: Semi Bold

Text Text Color: #E02B20

Letter spacing: 1px

Text settings

Text Shadow: See Screenshot

Shadow Color: #770019

Text shadow settings
Link Text Settings-

Link Font: ASAP

Font Weight: Regular

Link Text Color: #0C71C3

Link Text Shadow: See Screenshot

Shadow Color: #000000

Link text settings

Divi Breadcrumb with Text separator is ready.

Divi Plus breadcrumbs with text separator
Divi Breadcrumbs with Icon separator
Choosing icon separator as separator type

Separator Type: Icon Separator

Separator Icon: See Screenshot

Separator icon

Icon Size: 16px

Separator color: #FF0221

Divi breadcrumbs with icon separator

Do more with filter option

With Filter option in Divi module, you can create multiple color combinations for your Divi Plus Breadcrumb. It’s easy and most recommended if you want more than one design of your breadcrumb.

Divi breadcrumbs layout 1

More Divi breadcrumbs example

Divi breadcrumbs layout 2
Divi breadcrumbs layout 3
Divi breadcrumbs layout 4
Divi breadcrumbs layout 5

Final thoughts on Divi Plus Breadcrumbs

Divi Plus Breadcrumb module is a fast and easy way to create breadcrumbs in your Divi theme. And with this module, you will not need any other plugin to create breadcrumbs like Yoast SEO. This single module takes care of everything related to breadcrumbs and how they’ll appear on the search result.

If you’ve already used this module of Divi Plus, then write your views in the comment section. Moreover, don’t forget check out its other Divi modules like, Divi text module, before and after image slider, fancy headings, separator and fancy text.

Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

1 Comment

  1. Joan Margau

    Thanks for this tutorial, really appreciate the steps to setting it up, makes it a whole lot easier to figure out.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment

  1. Joan Margau

    Thanks for this tutorial, really appreciate the steps to setting it up, makes it a whole lot easier to figure out.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Set Up a Knowledge Base or Wiki Site With WordPress and Divi

How to Set Up a Knowledge Base or Wiki Site With WordPress and Divi

If you have developed a software or SaaS, it's needed you provide your customers with a guide on how to use it. If you don't, the chances are you'd get many support tickets just only for the use of it. To overcome this situation, you can create a knowledge base or...

Divi Travel Agency Child Theme to Showcase Your Travel Services

Divi Travel Agency Child Theme to Showcase Your Travel Services

Travel Agencies, holiday planners, and other tour-travel businesses need something unique to provide an awesome online virtual experience of their travel services. If you also belong to the same business niche running your website on WordPress with Divi, this Travel...

Top Divi Website Examples to Inspire Your Design in 2024

Top Divi Website Examples to Inspire Your Design in 2024

Divi is a renowned name in the web design industry that offers unmatched flexibility to open your creativity.  It doesn’t matter how experienced you are with Divi, finding inspirational design ideas from top Divi websites can be a game-changer. To clarify it more...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts