Key Features of the Elementor Breadcrumb Widget
- Customizable Links and Text: Control colors, separators, and fonts to align with your branding.
- Disable Item Links: Choose whether breadcrumb items are clickable or static.
- Normal and Hover Styles: Customize styles for both normal and hover states for improved user experience.
- Box Design Options: Add background colors, borders, and shadows for a polished look.
- Mobile-Friendly: Designed for responsive display across all devices.
Requirements
To use the Elementor Breadcrumb Widget, you need:
- Elementor Free Version: For core page-building functionality.
- Vertex Addons for Elementor: To access advanced widgets like the Breadcrumb Widget.
Installing and Activating the Elementor Breadcrumb Widget
To activate the Elementor Breadcrumb Widget, follow the steps in our Widget Activation Guide.
Configuring the Elementor Breadcrumb Widget in Elementor
After activation, drag the Breadcrumb Widget into your Elementor layout. The settings will open on the left panel, structured under three main tabs: Content, Style, and Advanced. This guide explains how to use each option for a functional and visually appealing breadcrumb trail.
Content Tab
- Breadcrumb: Automatically generates a breadcrumb based on your page hierarchy. You can customize it to reflect different site structures if needed.
- Disable Item Link: Allows you to make any breadcrumb item non-clickable. This feature is especially helpful if you want to emphasize the current location without enabling navigation.
Styling the Elementor Breadcrumb Widget
The Style tab allows for customizing the visual appearance of your breadcrumb trail. This tab includes two sections: Normal and Hover, giving you the flexibility to define styles for both static and interactive states.
Normal Styling
- Text Color: Set a color for breadcrumb text.
- Link Color: Choose a distinct color for links within the breadcrumb to differentiate from non-linked items.
- Separator Color: Customize the separator color for easy readability.
- Typography: Adjust font size, weight, and family for consistent styling with your site’s design.
Hover Styling
The Hover section allows you to set styles that appear when users interact with breadcrumb links.
- Text Color: Choose a hover color for breadcrumb text.
- Link Color: Select a hover color for links to give interactive feedback when users hover.
Box Styling
Use the Box settings to add background colors, borders, and shadow effects to the breadcrumb container, making it stand out from other elements on the page.
- Background Color: Set a background color for the breadcrumb container.
- Alignment: Position the breadcrumb trail (left, center, or right) within the container.
- Border Type: Define a border style and set its color and width.
- Border Radius: Adjust the border radius to create rounded corners.
- Box Shadow: Add a shadow effect for added depth, enhancing visual appeal.
Advanced Tab
The Advanced tab includes Elementor’s default settings, where you can further customize spacing, positioning, and responsiveness to fine-tune the breadcrumb widget’s appearance and behavior.
Final Outcome
With the Elementor Breadcrumb Widget in Vertex Addons, you can create visually appealing and functional breadcrumb trails that improve navigation and SEO. This widget empowers you to design breadcrumbs that align perfectly with your site’s overall look and feel.
This documentation provides a complete guide to using and customizing the Elementor Breadcrumb Widget from Vertex Addons, helping users maximize the widget’s potential.
