Wix Editor: Customizing Breadcrumbs on Your Mobile Site
Updated: 6 days ago
Breadcrumbs are a method of site navigation that displays a trail on your site. Depending on what you choose to display, visitors can see both the current page, as well as the homepage of your site. If your visitors click on a subpage, the main page is also displayed on the trail.
After you've added breadcrumbs to your site from the desktop editor, you can customize them for your mobile site. This lets you create a unique experience for visitors on mobile devices and doesn't affect your desktop site.
Important:
Breadcrumbs are not available to add as a mobile-only element. You can only add them from the desktop editor.
Setting up breadcrumbs on your mobile site
Use the settings panel to choose what you would like to display on your breadcrumbs trail on the mobile version of your site.
If you show the homepage, you can also choose whether to display it as text or an icon.
To change the settings of your breadcrumbs:
Click the breadcrumbs element in the mobile editor.
Click the Settings icon
.
Use the options to choose how you would like the trail to be displayed:
What items do breadcrumbs show?: Choose which items are displayed on the trail:
Full trail: Show the entire trail leading to the current page.
Hide homepage: Hide the homepage from the trail.
Hide current page: Hide the page the visitor is currently on from the trail.
Previous page: Display a V-shape icon (<) on the trail, as well as the site's homepage.
Display 'Homepage' as: Choose how you want your homepage to appear in the trail:
Text: The name of your homepage appears in the breadcrumbs.
Icon: An icon representing your homepage appears in the breadcrumbs.
Adjusting the layout of breadcrumbs on mobile
Depending on what you choose to show on the trail, you can adjust the horizontal and vertical spacing to fit smaller screens for your mobile visitors.
To change the spacing of your breadcrumbs:
Click the breadcrumbs element in your mobile editor.
Click the Layout icon
.
Drag the relevant slider(s) to change the horizontal or vertical spacing between items.
Note:
Options shown depend on what you choose to display on the trail.
Customizing the design of your breadcrumbs trail on mobile
Adjust and edit the design of your trail. You can customize the background, separators, and items to look exactly as you want, and encourage your mobile visitors to keep exploring your site.
To customize your breadcrumb trail:
Click the breadcrumbs element in the mobile editor.
Click the Design icon
.
Select what part of the trail you want to design from the dropdown menu:
Background
Click Background in the dropdown menu, and use the options to adjust the design:
Background Fills: Choose a color for your trail background, and set its opacity.
Borders: Add a border to your trail background, and change the color, width and spacing.
Corners: Make the corners of the trail background square, or more circular.
Shadow: Add and adjust a shadow on your trail to give it a cool 3D effect.
Separators
Click Separators from the dropdown menu.
Click the Show text toggle to enable separators between trail items.
Choose how you want to customize the separator:
Style: Apply one of your saved text styles to the separator.
Fonts: Choose a font from the dropdown menu for the separator.
Font size: Set how big or small you want the item separator to be.
Formatting: Add different formatting options to your separator, such as bold, underline, and strikethrough.
Color and Alignment: Choose the colors for your separator, and set the text direction and alignment.
Spacing: Make the spacing between the characters and lines bigger or smaller.
Items
Click Items in the dropdown menu, and use the options to make them look the way you want:
Items state: Select which mode you would like to adjust the items for:
Regular: How the items look before a visitor interacts with them.
Hover: How the items look when a visitor hovers their cursor over them.
Current page: How the item is displayed when it is the page the visitor is currently on.
Background Fills: Choose a color for your items, and set their opacity.
Text: Adjust the text for your trail items. You can choose and edit options such as the font, color, and alignment to suit your site's look and theme.
Borders: Add and adjust a border on your items. You can change the color, width and spacing to make them stand out on your page.
Corners: Make the corners of the trail items square, or more circular.
Shadow: Add and adjust a shadow on your items to give them a cool 3D effect.
Layout: Adjust the padding around your items to make the space around them smaller or bigger.
This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!
Comments