How to Add Elementor Breadcrumbs: An Easy Guide

Adding breadcrumbs is a very effective way to make your website SEO friendly. If you know the proper usage of breadcrumbs, it will become easier for visitors to navigate your website more frequently than before. The more time they spend on your website, the more bounce rates will significantly decrease. On top of that, breadcrumbs increase the time that visitors want to spend on your website. 

However, the perfect usage of breadcrumbs offers your website a well-organized look in order that you won’t feel any hassle at all decorating your website. So, you can realize the importance of using breadcrumbs, and we assume you will also implement this technique on your website. That’s why in today’s article, we will show how to add Elementor breadcrumbs to the Elementor page builder. So let’s get the ball rolling!

What are Website Breadcrumbs?

Breadcrumbs work as a guiding pathway to let users know their exact location when they browse any website. It eradicates users’ fear of getting lost. There are three types of breadcrumbs.

1. Path based breadcrumb

This type of breadcrumb is commonly used to indicate a user’s steps to land on the current page. Usually, these breadcrumbs are used when visitors need to fill out a form that covers two or more pages. The links on the pages assure visitors about the right direction.

2. Location based breadcrumb

Location-based breadcrumbs have the power to make a direct impact on visitors’ browsing experience. This type of breadcrumbs is for visitors to perform the navigation process efficiently. Besides, it helps them clearly understand their exact location on the website and the website’s hierarchy. Usually, websites with two levels of content use this breadcrumb.

3. Attribute based breadcrumb 

Attribute-based breadcrumbs are frequently used for eCommerce websites where a single product page is accessible through different paths. This kind of breadcrumb doesn’t have the nature to follow a single route all the time. Instead, you can use it to explain a particular page’s attribute. 

Factors You Need to Consider When Using Breadcrumb

There are certain factors that you should consider before you start using Elementor breadcrumbs to the Elementor page builder.

1. Make it consistent

It’s wise to make the design and structure of the breadcrumb compatible with your website’s existing design and theme. This point is crucial because capricious usage of breadcrumbs can easily confuse visitors, which is a wrong signal for your website’s growth. 

2. Don’t make breadcrumbs too long

The main reason behind using a breadcrumb is to make navigation easier. That’s why it shouldn’t be designed in a way that obscures other page design elements of your website. Besides, don’t design it in a very eye-catching way that attracts visitors more than the different interface elements.

3. Stop adding the current page in the navigation

You shouldn’t add the current page link to breadcrumb navigation. It’s a very wrong idea because it confuses readers, which can make them confused about your website and create an awful impression about your website. 

4. Use separator

Ensure there is no extra gap between different breadcrumb levels; otherwise, visitors will find it challenging to navigate. Various types of designs like forwarding slashes, arrows, greater than character, and more are helpful enough for visitors to recognize breadcrumb levels easily. 

5. Don’t make it look exaggerated

Make sure not to use any fancy things with a breadcrumb like bright colors, fonts, or bizarre separators because they hamper the purpose of using breadcrumb navigation. Just keep it simple and ensure visitors can quickly locate it. 

How to Add Elementor Breadcrumbs to Your Website

Now, we are going to implement the process of adding breadcrumbs to the Elementor page builder. Scroll down and investigate the process. Make sure you are using Elementor as the website builder. Here, we will show how to add Elementor breadcrumbs using a dedicated plugin to serve this purpose. Let’s begin the process. 

Step 1: Install the plugin

First, you will need to install a plugin named ‘Breadcrumb’. To do this, go to Plugins ➤ Add New. You will land on the WordPress plugin repository page. Now write the plugin’s name on the Search Plugins box.

Next, click on Install Now to install breadcrumb on your website.

Once you have installed the plugin, click on Activate to make the plugin active on your website.

Step 2: Copy a shortcode from the plugin 

Now, you will need to copy a shortcode from the Breadcrumb plugin. To do this, click on Breadcrumb located on the Admin Menu panel. This action will take you to the Breadcrumb Settings page. Next, click on Help and Support.

You are now on the Help and Support option. From here, copy the shortcode [breadcrumb] under ‘Get shortcode’. You have nothing else to do here. 

Step 3: Add the copied shortcode for breadcrumb to a page 

Next, you will paste the copied shortcode of breadcrumb on a page. To do this, go to the Elementor page Editor and write Shortcode in the Search Widget bar. 

Up next, drag the ‘Shortcode’ to Drag widget here. 

After dragging and dropping the Shortcode widget, paste the shortcode named ‘breadcrumb’ in the Box below you copied in the previous step. Once you have pasted it, now click on Apply to update the change to the page.

You can see that the BreadCrumb widget has been added to the page.

To Wrap Things Up

Using breadcrumbs gives you an excellent chance to make your website more user-friendly, which is ultimately a good sign to elevate your website’s user experience. Thereon, if you have good command over how to add Elementor breadcrumbs, you will be able to add this functionality to the Elementor page builder.

Considering this fact, in this practical guide, we have tried to show you an easy process on how to add Elementor breadcrumbs using a specialized plugin. We are hopeful that this article will be helpful for you. If you have more to share, feel free to raise your voice in the comments section.

If you liked this post, don’t forget to subscribe to our blog so that we can notify you once any post is published. Finally, you can also follow wpWax on Facebook, Twitter, and LinkedIn for more exciting news, offers, and product updates.