Code by Day | Explore By Weekend

How To Show Yoast SEO Breadcrumbs In Divi Tutorial by Pee Aye Creative

How To Show Yoast SEO Breadcrumbs In Divi

In this tutorial I will show you how to display breadcrumbs in a Divi module anywhere on your website for free using the Yoast SEO plugin.

Add Yoast Breadcrumbs Anywhere In A Divi Module or Theme Builder

Here’s how to show breadcrumbs to any page of your Divi website using a text module. The breadcrumbs are provided by the Yoast SEO plugin, but the shortcode is somewhat of a secret hidden feature.  Not only can show the breadcrumbs anywhere you want (including in the Theme Builder), you can even style the breadcrumb links directly in the Divi Builder with the text module settings!

To learn more about why you should use breadcrumbs and how to configure them in Yoast, check out the official Yoast documentation

#1. Enable Breadcrumbs In Yoast

First of all, we need to enable the Yoast breadcrumbs. To do this, go to SEO>Search Appearance. In the tabs that appear, look for Breadcrumbs and select that. Then under the Breadcrumbs Settings turn on the toggle to Enable Breadcrumbs.

Enable breadcrumbs in Divi

There are also some other settings that you may want to check out. I’m not an authority on that, but again, refer to this Yoast documentation article if you have any questions.

Yoast Breadcrumb settings in Divi

#2. Add The Breadcrumbs Shortcode Anywhere In Divi 

The next step is the one that made me get just a little excited. I discovered that Yoast has an unadvertised shortcode for their breadcrumbs. When I heard that, I knew I had to try putting it in a Divi module. And sure enough, you can add and style the Yoast SEO breadcrumbs in Divi very easily in the Text module.

Go ahead and copy the following shortcode:

[wpseo_breadcrumb]

Next, add a Text module to your Divi layout. The Text module kind of doubles as an HTML module, so it works great. And yes, you could use the Code module, but you lose all the styling options that you get in the Text module.

Paste the shortcode into the Text module. The breadcrumbs will appear.

This would be perfect in a Theme Builder template! Watch the video to see how we are using this here on our site!

#3. Style The Breadcrumbs With Divi

The advantage of adding shortcodes to a text module rather than a code module is the settings that you get to style the text. This is certainly limited to a degree, but for simple styling this is pretty nice.

You can also style the breadcrumbs with CSS of course. If you do, I recommend adding a custom class to the text module so that your CSS styles only affect the breadcrumbs. You could use a class like “pa-breadcrumb-links” and put it in the Text module Advanced tab in the CSS Class field. Then in your child theme or Divi Theme Options you can add your CSS code. Below are a couple of snippets to get you started.

.pa-breadcrumb-links a {
  font-size: 32px;
}

The first snippet styles the links, but this last snippet specifcally styles the last item in the breadcrumbs, which would be the current page.

.breadcrumb_last {
  color: red;
}
0
Last updated Nov 3, 2020 @ 10:07 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart