Widget Pro Guidelines

Breadcrumb Widget

Estimated reading: 2 minutes 63 views

Help visitors know where they are and easily move between pages without confusion using Breadcrumb Widget.

Follow the step-by-step instructions:

1. Go to Menu RTMKit Pro.

2. Then, you’ll see the Breadcrumb Widget appear.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor 

7. Drop it on the selected area.

8. There are 3 breadcrumb styles available that you can use to match your desired design.

  • Style 1
  • Style 2
  • Style 3

9. Setting Breadcrumb :

  • Click Content → Breadcrumbs Bar.
  • Select your style and enable or disable the icon and separator depending on your design needs.

10. Wrapper Style (used to customize the wrapper style) :

  • Click Style → Wrapper.
  • Next, let’s move to the style tab, under the Wrapper section, you can adjust alignment, background color, spacing, border type, border radius, padding, and margin.

11. Separator Style (used to customize the separator style) :

  • Click Style → Separator.
  • Choose a separator style: with text or with icon. If you choose the with icon option, pick your preferred icon, set its color and size, and adjust its vertical and horizontal alignment.

12. Content Style (used to customize the content style) :

  • Click Style → Content.
  • Pick an icon and customize how it looks by changing the size, spacing, and vertical position.
  • Then, head over to text styling to customize typography, border type, border color, border width, border radius, padding, icon color, text color, and background color.
  • To add some interaction, set hover colors for the icon, text, and background.

13. Done customizing? Don’t forget to click Publish.

Share this Doc

Breadcrumb Widget

Or copy link

CONTENTS