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.

Divi Breadcrumbs step 1

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.

Divi Breadcrumbs 00

Step 2

Insert new row, and choose DP 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.

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”.

Divi Breadcrumbs step 4

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 step 5

Step 4: Text Settings

Global Text Settings-

Text Alignment: Left

Global Text Size: 18px

Text Text settings-

Text Font: Nunito

Font Weight: Semi Bold

Text Color: FFFFFF

Letter Spacing: 1px

Text Shadow: See screenshot

Text Shadow Color: 000000

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 1

Creating Divi Plus Breadcrumbs using layout 2

 

Divi Breadcrumbs with text separator
Divi Breadcrumbs step 7

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

Divi Breadcrumbs step 7A

Text Shadow: See Screenshot

Shadow Color: #770019

Link Text Settings-

Link Font: ASAP

Font Weight: Regular

Link Text Color: #0C71C3

Link Text Shadow: See Screenshot

Shadow Color: #000000

Divi Breadcrumb with Text separator is ready.

Divi Breadcrumbs 2

Divi Breadcrumbs with Icon separator

Separator Type: Icon Separator

Separator Icon: See Screenshot

Icon Size: 16px

Separator color: #FF0221

Divi Breadcrumbs 3

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 Plus Breadcrumbs Module

More Divi breadcrumbs example

 

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 create custom Divi contact form message pattern

How to create custom Divi contact form message pattern

For an online venture, a contact form works similarly to the visiting card of an offline business. Interested customers contact you whenever they want. And a contact form available on the website does the same. Interested users contact you whenever they want. If...

Divi Marketplace Guide: Plugins, Child Themes & Layouts

Divi Marketplace Guide: Plugins, Child Themes & Layouts

The new Divi Marketplace by the Elegant Themes has taken its share in the web development world. Now, Divi developers around the world can easily share their awesome products to hundreds of thousands of users. A much like independent PlayStore and AppStore for the...