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.
Breadcrumbs are commonly added to the single posts in dynamic websites such as blogs or news portals. 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.
The Bottom Line
Elementor has a deep integration with Yoast. You can optimize your design for SEO using the settings which you can access via the settings panel. You can also utilize the breadcrumbs feature of Yoast to add extra navigation on your website.
Not only does it helps search engine better understand your URL structure, adding breadcrumbs can also improve user experience (UX) of your website.
6 thoughts on “How to Add Breadcrumbs in Elementor”
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.
Is there any way to do this without having to purchase the pro?
Hi Safiye,
The Breadcrumbs widget is only available on Elementor Pro
Hi, you don’t need Elementor Pro, just use the Yoast Breadcrumbs shortcode Home › Elementor › How to Add Breadcrumbs in Elementor in a text block.
Sorry the Shortcode didn’t display, try this [#wpseo_breadcrumb#] and remove the # characters