How to Add Breadcrumbs in Elementor

Updated: February 10, 2022

Many believe that breadcrumbs have a good impact on search engine optimization. That is why many website owners want to add breadcrumbs to their websites. In Elementor, you can add breadcrumbs to your website using the Breadcrumbs widget.

In dynamic websites such as blogs or news portals, breadcrumbs are commonly added to the single posts. In Elementor itself, you can add breadcrumbs to any part of your website. Be it pages, single post templates to archive pages. In this post, we will show you how to add breadcrumbs to the single post template.

Install Yoast

The Breadcrumbs widget is not available in Elementor by default. To get this widget, you need to install the Yoast plugin first. Go to the Plugins -> Add New to install the plugin. Once installed and activated, go to SEO -> Search Appearance.

In the Search Appearance page, go to the Breadcrumbs tab and enable breadcrumbs by sliding the button.

Don’t forget to click the Save Changes button on the bottom side to apply the change. Before clicking the button, you can also make the settings to set how your breadcrumbs will look like. You can set things like the separator, taxonomy to show and so on.

Adding Breadcrumbs

We already have a single post template created with Elementor and want to use it as an example. You can visit this post to learn how to create a custom single post template in WordPress with Elementor. To edit an existing single post template, you can go to Templates -> Theme Builder.

Find your single post template on the Single tab. Hover your mouse over it and click Edit.

You will be directed to the Elementor editor. Drag the Breadcrumbs widget to the part where you want to add it.

Once the Breadcrumbs widget is added, you can go to the left panel to customize it. The first setting you want to make probably is the alignment.

To set more advanced customization, you can go to the Style tab. You can click the pencil icon on the Typography section to set the font style and font size. While to set the font color you can click the color selector on the Text Color section.

Publish your page (or update if you edit an existing template) to apply the breadcrumbs.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

4 thoughts on “How to Add Breadcrumbs in Elementor”

  1. Hi,
    I am working with Rank Math. YOAST didn’t do the job and is too expensive.
    is there any way to display a Breadcrumb using Elementor Pro with Rank Math?
    alternatively- can i install Yoast side by side with Rank Math- will it rise a problem?

    • The Rank Math plugin has the breadcrumb feature in it and Elementor is quite compatible with it. Just install the SEO plugin and go over to the page builder and add it to the template you’vedesigned already.

      Meanwhile, this guide is really great.


Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.