Kom godt i gang #

Display navigation links in your WordPress websites with Elementor Breadcrumbs Widget. Here’s a comprehensive article to explain every method in detail. Follow the step-by-step process to connect the Brødkrumme.

Add Breadcrumb Widget #

• Trin=>1: Gå til Elementskit-> Elementer-> Sørg for, at din Brødkrumme er Aktiv-> Gemme

• Trin=>2: Gå til Elementor=> Søg Brødkrumme=> Bare Træk og slip feltet.

• Nu kan du se din Brødkrumme widget.
• Step=>3: Now, enter the Content Tab from the widget settings. Here, you will find the following settings: 

Settings, #

• Home Icon– You can add a home icon for the breadcrumbs. You will see three different options:
  • Click this one for not showing any home icon.
  • The next one lets you upload an SVG icon from your device.

• And, clicking the third option will open up a popup with the icon library. 

• Select an icon and hit the “Indsæt”-knappen.

• Show Separator Icon: This toggle button is enabled by default. Disable this button if you do not want to show a separator between paths.
  • Separator Icon: From here, you can change the default separator icon and add a new one from the icon library. There’s also an option to upload an SVG icon. It works in the same way like “Home Icon”.

• Max Title Word Length: Define the maximum word length of the page or post title.
• Show Category Trail: 

Customize Breadcrumbs Widget #

Now, we’ll explore the customization options for the breadcrumb widget. Head to the Style Tab.

Style, #

• Tekst farve: Set a color to the breadcrumb step where users are currently active.
• Link farve: Add a different color to link-embedded text.
• Link Hover Color: Give color to the link-embedded text on the hover state.
• Typografi: Control all the factors within typography like font, size, color, line height, word spacing, etc.
• Alignments: Set the positioning of the breadcrumb to the left, right, or center.

Breadcrumb, #

• Polstring: Adjust the spacing between breadcrumb items and add additional space with the element border.  
• Margin: Set space surrounding the breadcrumb items.
• Box Shadow: Set the shadow effect around the breadcrumbs.
• Item Background: Give a background type between solid color and gradient for an item.
• Active Background: Add background color to an active background item.
• Border Options: Use these controls to adjust the border width, color, style, and roundness of the border.

Ikon, #

Home Icon, #

• Farve: Use the color picker to set the color for the home icon.
• Mellemrum mellem: Use the slider or enter a custom value to define the gap between the home icon and text.
• Størrelse: Set the size of the breadcrumb home icon.

Separator Icon, #

• Polstring: Set the spacing between breadcrumb text and separator icons.
• Størrelse: Determine the size of the separator icon by using the slider or entering a custom value in the field.
• Box Shadow: Use these controls to add shadow effects around the breadcrumb’s item border.
• Farve: Choose a color for the separator icon.
• Baggrund: Add a solid color or gradient background to the separator icon.
• Border Settings: Get all the features like adding border color, selecting border style, defining border thickness, etc to customize the border.

That’s it! Now, its your turn. Add a beautiful breadcrumb to your Elementor website.