Select Page
Topic Progress:

Introduction

In this video we show you how to add some custom css to make new effects in your Divi Breadcrumb Module.

We have made everything really easy by providing a screencast and the CSS Snippet used.

Follow along with this video from our youtube channel and you can replicate the common UI pattern for a Divi Breadcrumb Module.

The Screencast

The CSS Code

If you would like to copy the code mentioned in the screencast you can grab it from here from the GIST link or get it from the embed code below from the GIST we created.

Written Tutorial of Screencast

In this tutorial we show you how to add some custom css to style your Divi Breadcrumb Module.

When you install the Breadcrumbs Module there are some nuances that you need to know about.

Changing Link Color

In this example, we have a web page and the breadcrumb only shows the end of the breadcrumb, … > Contact, and not the starting point. It’s not that it’s not there, but it’s because the link colour of the text is the same as the background colour on the page.

What the Default Breadcrumb looks like

What the Default Breadcrumb looks like

Detail view of what the Default Breadcrumb

Detail view of what the Default Breadcrumb

To fix this, we need to write some custom CSS.

This is the look we want to achieve:

The result we are looking for, a background and easy to read

The result we are looking for, a background and easy to read

Change Breadcrumb Separator

Notice here the text is white, is slightly bolder and has some background shading behind it. The breadcrumb separator is also different – it uses a forward slash instead of arrows. I’m going to show you how to make these edits.

The first thing you need to do is edit the Yoast SEO settings, to be able to change the breadcrumbs separator. To do that, go to the Theme Customiser from your Dashboard.

Using the Theme Customiser for our Breadcrumb

Using the Theme Customiser for our Breadcrumb

Once the Theme Customiser is open, go to the Yoast SEO Settings. These settings allow you to change the breadcrumbs separator.

Yoast SEO Breadcrumb Option

Yoast SEO Breadcrumb Option

Change the separator to a forward slash (or whatever you like), and then click “Save and Publish”.

Yoast SEO Breadcrumb Seperator

Yoast SEO Breadcrumb Seperator

That’s that part of the styling done.

Text And Background Colour

Next you need to put some CSS into the page to deal with the text and background colour issue.

The CSS Code

If you would like to copy the code you can grab it from here from the GIST link or get it from the embed code below from the GIST we created.

First of all what I have done is set up a #breadcrumbs span, and a #breadcrumbs span a. That is for the breadcrumbs area to have it’s font weight and colour changed.

Entering the CSS for the Breadcrumb

Entering the CSS for the Breadcrumb

Second is the first-child item, because the overall breadcrumbs area is wrapped in a span tag. I have put a background colour on that to suit this particular example, but you can change that to match your requirements. Then I have added some more padding around the item.

Using first child for the CSS

Using first child for the CSS

If you want to use this snippet, you can change the colour of the font and the background to get a nice effect quite quickly.

Now you need to know where to paste the code. From the dashboard, go to Divi > Theme Options and click the “General” tab. Scroll down to the bottom of the page and paste the snippet in the “Custom CSS” box.

Saving the CSS in Divi Theme Options

Saving the CSS in Divi Theme Options

Click “Save Changes”.

Now when you go back to your page and refresh it you will have the desired effect. And that’s it!

The Final Result of the Breadcrumb Header

The Final Result of the Breadcrumb Header

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation