How to Add Breadcrumbs in WordPress Elementor

Breadcrumbs are a secondary navigation option that allows website users to easily understand the relation between the location that they are on the website and where that is compared to the structure of the website. For instance, if they are on a product page, the user will be able to see what category they are in and the shop group.

The term has been borrowed, understandably, from the tale of Hansel and Gretel.

Breadcrumbs can be used for numerous reasons. The user can click on the category and then they are taken to that page. So it can be a great way for the customer to move around your website.

At the same time it can help your website with SEO and search engines can understand your website’s structure better. Therefore, you can build a stronger website.

Breadcrumbs are normally included in numerous WordPress themes. There are numerous ways that you can add them with plugins as well which aren’t related to Elementor. Therefore, you can build a strong website. Many of the breadcrumb plugins are free, so you can easily add one.

However, that doesn’t mean that you need to add another plugin to get it going. Though you could use Yoast SEO to help you. So here are the best instructions for adding breadcrumbs to your Elementor website.

The first thing that you need to do is install and set up Yoast SEO and Elementor on your website. To add a new website, you need to go to the Plugin section and then click on ‘Add New’. Then you need to type in Yoast SEO in the search bar, and then you can install and activate. You can also do this for Elementor.

Once Yoast SEO is installed, you need to enable breadcrumbs in its settings. From your WordPress dashboard, go to SEO → Search Appearance, then click the Breadcrumbs tab at the top of the page. Toggle the Enable Breadcrumbs option to on.

You will also see options here to customize your breadcrumb separator character, the label for your homepage link, and how the breadcrumbs display for categories, tags, and custom post types. Set these to match your site’s structure and save the settings before moving on.

Now you need to create a page template that will display the breadcrumbs. In your WordPress dashboard, go to Templates → Theme Builder. Click the Single Page tab, then click Add New Single Page.

You will be prompted to choose a starter template or start from scratch. Pick any template that fits your site layout. Once it loads in the Elementor editor, you can start placing your widgets — including the breadcrumbs widget you will add in the next step.

Before publishing the template, you will need to set a Display Condition so Elementor knows which pages this template applies to. Click the Publish button, then choose the display condition (for example: “All Singular” to apply to all posts and pages).

Note: the Breadcrumbs widget is available in Elementor Pro only. If you are using the free version of Elementor, you will need to upgrade or use a separate breadcrumb plugin instead.

With Elementor Pro active, open the template you created in Step 3. In the Elementor widget panel, search for Breadcrumbs. Drag the widget to the position where you want the breadcrumbs to appear — typically just below the page header or at the top of the content area.

Once placed, you can style the breadcrumbs using the widget’s Style tab to adjust typography, color, and spacing to match your site design. Save the template when finished.