How to Add Breadcrumbs in Elementor

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 Yoast SEO -> Settings on your WordPress dashboard. On the Advanced settings category, select Breadcrumbs.

Scroll down until you find the Enable breadcrumbs for your theme option. Make sure this option is enabled.

Before clicking the settings screen, 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 Post tab. Click the Edit button to edit it.

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 settings 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 option 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 template (or update if you edit an existing template) to apply the breadcrumbs.

This page may contain affiliate links, which help support our project. Learn more.

Your websites deserve a better home

Find the fastest WordPress hosting services. Curated by our experienced team.

6 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

Haven’t used Elementor Pro yet?