The breadcrumbs widget is a simple and lightweight WordPress plugin for Elementor to set up breadcrumbs anywhere on your website pages and thus improves the user experience on your website. The tool not only allows you to add and configure the elements of breadcrumbs in a few moments but also supports the Schema Markup for getting a rich snippet in the search results.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
In the Content section, you can manage the basic settings of the breadcrumbs widget such as items for display, alignment, separator, etc
General
- Custom breadcrumbs – the toggle to enable/disable the custom breadcrumbs section to will be able to add custom items with links for breadcrumbs of the current page.
- Enable rich snippet – the toggle to enable/disable the Rich Snippets option. The function adds schema markup automatically for your breadcrumbs to display advanced results in Google Search. Read more about the Rich Result.
- Displaying items – a field where you can add or remove elements of breadcrumbs such as homepage, child pages, parent pages.
- Parent pages nested level- select the nesting level of the pages you want to display.
- Hide on – the option allows you to hide breadcrumbs on certain post types. It useful if the breadcrumbs are used in the Elementor templates throughout the site.
- Breadcrumbs alignment – manage the title alignment (left, center, right, space around, space between).
- Show separator – the toggle to enable/disable the separator of the breadcrumbs. When this option is enabled, there are two types of separator available: Text(a field for entering text or character) and Icon(allows you to choose an icon from the icons library or upload your own SVG).
- Custom homepage title – the toggle to enable/disable custom homepage title. When the option is disabled, the site name is displayed as the title of the homepage.
- Show current page – the toggle to enable/disable the display of the current page title.
Custom breadcrumbs
The section is available if the Custom breadcrumbs toggle is enabled. The block allows adding, removing, or duplicating the items.
To add a new element, click “Add Item” and fill all the necessary fields:
- Name – enter the title of the item
- Link – paste the link for the current item
- Is active – the toggle to enable/disable the active link of the current item
- Show Icon – the toggle to enable/disable the icon for the current item. If the option is enabled, it allows you to select an icon from the Font Awesome library and specify the position.
Style tab
On the style tab, you can manage the element styles of the breadcrumbs items like item colors in different states, size, typography, borders, padding/margin, etc.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Space between items – the setting allows managing the spacing of the items in different units(px, %).
- Icon size – specify the icon size of the item in different units(px, %) for desktops, tablets, or phones.
- Icon spacing – specify the spacing between the item title and icon in different units(px, %, em) for desktops, tablets or phones
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER/ACTIVE
The breadcrumbs icon styles settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Hover transition duration – specify the speed of animation transition in seconds using the slider.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
