[New Element] Add Product, Blog & Web Page Breadcrumbs in Elementor Websites

Breadcrumbs can be very useful for guiding your website’s visitors and telling them their exact location within your site. If your website is created using Elementor, Essential Addons Breadcrumbs can be one of the best options. Thanks to this handy widget, you can now easily place product, blog and web page breadcrumbs in Elementor. This blog will show you how to add this element to your site for various use cases.

Breadcrumbs is one of the many Content Elements that Essential Addons offers. Apart from adding your breadcrumbs, you can customize it with multiple content, styling and advanced options. Let us explore this useful element without any further delay.

Step-by-Step Guide: How to Configure Essential Addons Breadcrumbs

With Essential Addons Breadcrumbs, you can place clickable link trails in your Elementor website’s pages, blog posts and WooCommerce product pages. Now, we will show you how to add and customize the element in each of these post types. Follow the steps listed below.

Note: To use Essential Addons Breadcrumbs, you need to install & activate Essential Addons and Elementor on your website.

Step 1: Enable the Breadcrumbs Element

Go to your WordPress admin dashboard. Then, select the Essential Addons plugin in the left side panel. Navigate to ‘Elements’ → ‘Content Elements’. Toggle to turn on the ‘Breadcrumbs’ element from the list. Hit the ‘Save Settings’ button to proceed.

Step 2: Place the Breadcrumbs when Editing with Elementor

Now, it is time to add the Breadcrumbs. First, open a page or blog post while editing with Elementor. Hit the ‘+’ button where you want the element to show on the front end. Then, look up the Essential Addons Breadcrumbs element under the ‘Widgets’ search panel. Simply click on the element or drag and drop the breadcrumbs where required.

Step 3: Personalize the Breadcrumbs As Needed

Looking forward to customizing the breadcrumbs further? With versatile content, styling and advanced customization options, you can personalize the breadcrumbs the way you want. Let us find out how to configure the advanced customization settings for the breadcrumbs.

Content Settings

From the ‘Content’ tab under the ‘Edit Breadcrumbs’ section in the left side panel, you can customize everything related to the content used in the breadcrumbs. Here, you get to change the label for home. Also, you can hide or display prefixes and alter their type. Plus, customize the Prefix Type and Separator Type by choosing from text or image (custom icon upload) options.

Styling Options

Get a host of styling options such as Alignment, Background Color, Border Type, Border Radius, Padding, Link Color, Text Color and Typography in the ‘Style’ tab. Also, you can set the separator’s color and spacing values according to your preferences. If you want to change the color, size, margin and other properties of the Prefix, you can do that as well.

Advanced Customizations

For advanced customizations, you have the ‘Advanced’ tab. Here, you get to customize the ‘Margin’, ‘Padding’, ‘Width’ and other advanced options for the element’s layout. Furthermore, you have all the other handy features that come with Essential Addons. From Content Protection to Conditional Display, add what you need to the Breadcrumbs element.

Once you are done with all the customizations, this is what the Essential Addons Breadcrumbs will look like on a page:

Similarly, you can add the Breadcrumbs element to a blog post. As you can see below, the blog’s readers can click and navigate to any location in the link trail.

How to Place Essential Addons Breadcrumbs in WooCommerce Product Pages?

To customize the breadcrumbs in your WooCommerce product pages, you need to have Elementor PRO installed and activated on your website. However, there is a way to work around this if you are looking for a free method. With Essential Addons and Templately plugins, you can do just that!

Go to the ‘Theme Builder’ option under Templately in the left side panel of your website’s wp-admin dashboard. Next, hit the ‘Add New Template’ button. Choose the ‘Elementor’ option. From the template type dropdown, select the ‘Product Single’ option. Afterward, click on the ‘Create Template’ button.

Proceed to edit the newly created template. Now, you can add the breadcrumbs element to the template and customize it according to the previously shown steps. After this, the element will be visible on all your single WooCommerce products based on your customizations.

The element will also fetch the details of individual product pages and display them accordingly. So, here is a preview of what it will look like:

Essential Addons: The Number 1 Addon for Elementor

Breadcrumbs are very useful when it comes to guiding your website’s visitors. Thanks to clickable link trails, web visitors can easily navigate through your website. Plus, the element tells the exact location of the visitor within your website. The advantage of using Essential Addons for Elementor is that you can place the element on any WooCommerce product page, blog post or page. Also, you can customize it according to your preferences without using any PRO plugin.

But Breadcrumbs is just one of the many elements from Essential Addons. With 100+ diverse elements, Essential Addons stands out as the most powerful Elementor addon and one of the most essential WordPress plugins. From Content & Marketing Elements to Creative Elements and more, Essential Addons offers all the elements you need. If you have not explored all the versatile elements, check out the demo.

Make Web Navigation Easier: Add Product, Blog & Page Breadcrumbs Using Essential Addons

Clickable link trails or breadcrumbs make navigation smoother and let web visitors find their exact location within your website. With Essential Addons Breadcrumbs, you can guide visitors on any WooCommerce product page, blog post or regular page. Plus, you can customize the element as you prefer. So, boost your website’s navigation experience using this super useful element.

We hope you have found this blog helpful. Subscribe to our blogs for more blogs like this one. And join our Facebook community so that you do not miss any important updates. Wishing you an amazing web design & creation journey!