2 Easy Ways to Add Elementor Breadcrumbs to Your Website

Why consider adding breadcrumbs to your Elementor website

Breadcrumbs are important for both SEO and user experience because they appear in Google’s search results and help categorize information. By improving site structure and user navigation, breadcrumbs enhance user satisfaction and can extend the duration of visits.

Types of breadcrumbs:

1. Hierarchy-based breadcrumbs: Show the user’s location within the site hierarchy, e.g., Home > Blog > WordPress Guide.
2. Attribute-based breadcrumbs: Common on e-commerce sites, showing attributes like Home > Shoes > Men.
3. History-based breadcrumbs: Display the user’s navigation history on the site, e.g., Home > Previous Article > Current Page.

Benefits of using breadcrumbs:

• Enhances user experience: Makes navigation straightforward and intuitive by helping users locate their current location.
• Improves site ranking: Helps search engines understand the structure of your site.
• Adds SEO benefits: Enables better indexing by search engines.
• Reduces bounce rates: Keeps visitors engaged by simplifying navigation.
• Ensures proper navigation: Guides users through your site, improving the overall user journey.

4 best practices for using breadcrumbs

1. Keep your primary navigation menus

Breadcrumbs serve as a secondary navigation aid on websites, supplementing primary navigation menus rather than replacing them. While every website is unique, it’s generally not advisable to replace all of your primary navigation menus with breadcrumbs.

It’s important to acknowledge that user journeys on a website aren’t always linear or logical. If you rely exclusively on breadcrumbs for navigation, users might find it challenging to explore unrelated sections of your site effectively.

Moreover, visitors often land on pages directly through external links or search engines like Google, bypassing the intended navigational hierarchy. In such cases, breadcrumbs might not provide much context or utility, potentially leading to confusion.

In web design, breadcrumbs are best used as an additional navigational tool that complements the primary navigation. This dual-navigation approach allows visitors to navigate your site both hierarchical and nonhierarchical, enhancing the overall user experience.

2. Maintain consistent titles

To ensure clarity and consistency, it’s important to align the titles of your pages with the breadcrumb titles, especially when targeting specific SEO keywords. Consistency helps in maintaining a clear path for both users and search engines.

However, there are exceptions to consider. For example, if your breadcrumb trail contains repetitive keywords or phrases, this could be seen as over-optimization by search engines, potentially leading to an SEO penalty. Also, including the title of the current page in your breadcrumb trail is a common practice, but it’s important to display this as plain text without a hyperlink to avoid confusion and indicate that the user is already on that page.

If you’re utilizing Yoast SEO, you have the flexibility to modify the text in your breadcrumbs. This customization can include adding anchor text or prefixes to the breadcrumb path. Additionally, you have the option to alter the taxonomy used for generating breadcrumb trails. Any changes you make will automatically update in Elementor’s Breadcrumb widget, ensuring your site’s navigation is both precise and effective.

3. Follow the best practices in using breadcrumbs

When styling your breadcrumbs, adhering to design best practices enhances user interaction. Typically, the greater than symbol (>) is used to separate links in a breadcrumb trail, suggesting a hierarchical structure. However, in cases where your breadcrumbs represent a non-hierarchical path, and path-based breadcrumbs, this symbol may not accurately represent the relationship between pages and might clash with your website’s design.

For Yoast SEO users, you can customize the separator character by navigating to SEO > Search Appearance > Breadcrumbs in your dashboard. Here, you can replace the default separator with a symbol that better fits your site’s aesthetics, such as arrows (→), right angle quotation marks (»), or slashes (/).

Sizing and padding are also important for maintaining usability. Ensure there is ample space between links to prevent users from clicking the wrong one, but keep the breadcrumbs subtle enough not to distract from your primary navigation.

To fine-tune these aspects using Elementor, simply select the breadcrumb element in the canvas and adjust its properties under the Style tab. This allows you to achieve a balanced design that integrates seamlessly with your site’s overall look while maintaining functional and clear navigation.

4. Be consistent on where you place your breadcrumbs

Breadcrumb trails are typically placed at the top of a webpage, often directly beneath a horizontal navigation menu. This placement aligns with web design conventions, ensuring that visitors can easily locate and use the breadcrumbs for navigating your site.

Consistency in the placement of breadcrumbs across your website is important. Having the breadcrumb trail prominently displayed at the top of each page not only helps orient visitors quickly but also enhances the navigational flow. Inconsistent placement can lead to confusion and a poor user experience.

When using Elementor’s breadcrumbs widget, you have the flexibility to position the breadcrumbs precisely where you want them on your page using the drag-and-drop builder. However, even with this flexibility, it’s important to maintain consistent placement throughout your site to support easy and intuitive navigation for all users.

2 ways to add elementor breadcrumbs to your website

Method 1: Use Elementor Pro + Yoast SEO

Before we start, you’ll need to purchase and activate Elementor Pro for this tutorial. If you need help downloading Elementor on your WordPress site, check out our step-by-step guide.

Step 1: Install and setup Yoast SEO Plugin

To add breadcrumbs using Yoast SEO in Elementor, you first need to install the Yoast SEO plugin:

1. Install Yoast SEO Plugin:

• Navigate to Plugins -> Add New in your WordPress dashboard.
• Type Yoast SEO in the search bar.
• Click Install Now on the Yoast SEO plugin.
• After installation, click Activate to enable the plugin on your site.

2. Enable breadcrumbs in Yoast SEO:

Go to SEO > Settings > Advanced, click on Breadcrumbs, then set up your breadcrumbs

• Go to SEO -> Settings -> Advanced in your WordPress dashboard.
• Click on the Breadcrumbs tab.
• Here, you will find options to enable and configure your breadcrumbs settings. Make sure to enable breadcrumbs by toggling the appropriate option.

Once Yoast SEO is installed and breadcrumbs are enabled, you can use Elementor to place and style breadcrumbs on your pages for enhanced navigation and SEO.

Step 2: Create Elementor template

To create a page template in Elementor for adding breadcrumbs, follow these steps:

To create a page template for breadcrumbs in Elementor, follow these steps to set it up

1. Navigate to the theme builder:
   • Go to Elementor -> Create a page in your WordPress dashboard.
2. Create a new single page template:
   • Click on the Single Page tab.
   • Press the Add New Single Page button.
3. Name and create your template:
   • A modal popup will appear where you can enter the name for your new template.
   • After naming your template, click the Create Template button.
4. Choose and install a template:
   • You will be directed to a page with a variety of pre-made templates.
   • Select a template that suits your needs and click the Insert button to add it to your site.

This process sets up a basic structure where you can incorporate breadcrumbs into your page design, enhancing navigation and SEO.

Step 3: Add Elementor breadcrumbs widget

To add the Elementor Breadcrumbs widget to your newly created page template, follow these steps:

Find the Breadcrumbs widget then drag and drop it to the top of your page.

1. Access the Elementor editor:
   • Open the page template you created in Elementor by navigating to it and clicking Edit with Elementor.
2. Locate the breadcrumbs widget:
   • In the Elementor editor, go to the widgets panel on the left side. You can use the search bar to quickly find the Breadcrumbs widget.
3. Add the breadcrumbs widget:
   • Drag and drop the Breadcrumbs widget to a suitable location on your page. Typically, breadcrumbs are best placed at the top of the page, just below the header, where they are easily visible.

This integration of the breadcrumbs will enhance site navigation and contribute to a better user experience by allowing visitors to easily understand their location within your website’s structure.

Step 4: Customize your breadcrumbs

You have the flexibility to customize the breadcrumbs to fit the style of your website. Here’s how you can adjust the appearance of your breadcrumbs in Elementor:

Customize the look of your breadcrumbs in Elementor to match your website’s style

1. Content settings:
   • In the Elementor editor, select the Breadcrumbs widget you added to your page.
   • In the Content section, you can choose the Alignment (left, center, or right) and HTML Tag (such as p, div, nav, span) that best suits the structure and semantics of your page.
2. Style the breadcrumbs:
   • Switch to the Style tab to modify the aesthetics of your breadcrumbs.
   • Here, you can set the Typography, adjusting font family, size, weight, and other typography settings.
   • Customize the Text Colour to match your site’s colour scheme.
   • Adjust the Link Colour to make the breadcrumb links stand out or blend in with your overall design.
   • To modify how breadcrumb links appear when hovered over, you can set the Hover Colour. This adds an interactive element, enhancing user experience by providing visual feedback when links are hovered.

These settings give you the control to make your breadcrumbs both functional and visually integrated into your site’s design.

Method 2: Use Elementor’s free version and breadcrumb plugin

Elementor free version

You can add breadcrumbs to your site even without an Elementor Pro license by using the Yoast SEO plugin. Here’s how to do it:

Use Yoast SEO to add a shortcode to create breadcrumbs

1. Create a section: Decide where you want the breadcrumbs to appear on your page and create a section there.
2. Add the shortcode widget: Drag the Elementor Shortcode widget into the section you just created.
3. Insert the Yoast SEO breadcrumb shortcode: In the Shortcode widget, paste the following shortcode provided by Yoast SEO:

Copy code Home » 2 Easy Ways to Add Elementor Breadcrumbs to Your Website

This shortcode will generate the breadcrumbs.

By following these steps, you can easily display breadcrumbs on your website using the free version of Elementor and Yoast SEO.

Rank Math SEO free version

You can also display breadcrumbs on your website using the Rank Math SEO plugin. If you have a Rank Math Pro subscription, you can easily add breadcrumbs using their dedicated widget.

However, if you are using the free version of Rank Math, you’ll need to manually insert the breadcrumbs using a shortcode, similar to how you would with the Elementor and Yoast SEO plugins.

Here’s how to do it:

Use Rank Math to add a shortcode to create breadcrumbs

1. Create a section: Choose where on your page you want the breadcrumbs to appear and add a new section there.
2. Insert the shortcode widget: Drag the Elementor Shortcode widget into the section you’ve created.
3. Use the Rank Math breadcrumb shortcode: In the Shortcode widget, paste the following Rank Math breadcrumb shortcode:
   [rank_math_breadcrumb]
   This shortcode will generate the breadcrumbs for your page.

Ensure that the breadcrumbs are enabled in your Rank Math settings before using the shortcode to display them on your website.

Frequently asked questions

What are breadcrumbs in Elementor?

Breadcrumbs offer a navigational aid on websites, allowing users to understand their location within the site’s hierarchy without needing to check the URL structure. The Elementor Breadcrumbs widget facilitates adding breadcrumbs to your site’s pages or posts, along with an SEO plugin that supports breadcrumbs functionality.

How do I hide breadcrumbs in WordPress CSS?

To hide breadcrumbs on your WordPress site, you can simply use CSS. By adding the following CSS rule to your site’s custom CSS section or within your theme’s stylesheet, you can effectively hide the breadcrumbs:

.breadcrumbs-class {

   display: none;

}

Replace .breadcrumbs-class with the actual CSS class or ID used by your breadcrumb element. This method ensures the breadcrumbs are not visible while keeping the code on the page, which might be useful for SEO purposes.

How do I add breadcrumbs to WordPress without plugins?

WordPress does not include a built-in option for adding breadcrumbs, so you typically need to use a plugin or develop a custom breadcrumb function yourself. This involves coding a function in your theme’s functions.php file that dynamically generates breadcrumb paths.

Improve your website user experience with breadcrumbs

And there you have it—two straightforward methods to add breadcrumbs to your Elementor website. With your new breadcrumb navigation in place, your visitors can now enjoy a more streamlined browsing experience, and you can reap the benefits of improved site engagement and SEO, which search engines appreciate.

Now that you’ve added breadcrumbs to your Elementor website, enhancing both navigation and SEO, do you find that refining your website’s user experience is a continuous and complex task? If yes, we are here to assist! Allow us to take the reins on further improving your website’s user experience, so you can concentrate on what you love—whether that’s growing your business or creating content.

Our team at 1dea specializes in optimizing and expanding features like breadcrumbs to ensure your site not only meets but exceeds user expectations. Contact us today and let us help you make your website as navigable and user-friendly as possible, while you focus on other important aspects of your work.