Wix Editor: Customizing Your Breadcrumbs Trail
4 min read
After adding and setting up your breadcrumbs trail, you can make it your own by customizing it to suit your site's look and theme.
Select presets, adjust the layout, and personalize the design to encourage visitors to keep clicking and exploring your site.
In this article, learn more about:
Important:
You need to enable Velo Dev Mode on your site in order to add and customize breadcrumbs. Velo allows you to use coding on your site to create custom functionalities and interactions. Learn more about Velo
Changing the layout of your breadcrumbs trail
Adjust the layout of your breadcrumbs trail to fit your site's alignment. You can change settings such as the separators, spacing, and direction of items.
To adjust the trail's layout:
- Click the breadcrumbs element in your editor.
- Click the Layout icon
.
- Adjust the layout using the available options:
- How are overflow items displayed?: Select how to display items that don't fit on the trail:
- Show all items: If items don't fit, another line is created on the trail.
- Collapse items: Items are displayed on one line only. If they don't fit, an ellipsis displays.
- Separators: Enable the toggle to show separators between trail items, then choose the icon you want to use: V-shape or Backslash.
- Vertical spacing: Drag the slider to change the spacing above and below the items.
- Horizontal spacing: Drag the slider to change the spacing between the items.
- Align items: Choose how items are aligned: Left, Center, or Right.
- Display breadcrumbs from: Choose the direction in which the items appear: Left to Right or Right to Left.
- How are overflow items displayed?: Select how to display items that don't fit on the trail:
Designing your breadcrumbs
Select another trail preset from the available options, or customize it further to create a clean, sophisticated way to display the hierarchy of your pages to visitors. Adjust the look of the whole trail with settings such as spacing, color, and size.
To customize the design:
- Click the breadcrumbs element in your editor.
- Click the Design icon
.
- Click Customize Design.
- Choose what you want to design from the dropdown menu:
Background
Separators
Items
Did this help?
|