Wix Editor: Adjusting and Customizing Tabs for Your Mobile Site
Updated: 6 days ago
Tabs are an advanced way to organize and categorize your content. Tabs that you add on desktop automatically appear on your mobile site, and you can adjust them as needed to suit smaller screens.
Note:
Tabs are a desktop element, which means you can't add mobile-only tabs.
Hiding tabs from your mobile site
If you don't want to display tabs on your mobile site, you can easily hide them. After you hide a tab element, you can access and show it again from the Hidden on Mobile panel.
To hide tabs from your mobile site:
Click the tab element in your mobile editor.
Click the Hide Element icon
.
Adjusting the layout of tabs on mobile
Edit the layout of tabs on your mobile site so they suit smaller screens. You can change the spacing and direction to structure your tabs, and choose how mobile visitors view tabs that don't fit in the top menu.
To adjust the layout of tabs on your mobile site:
Click the tab element in your mobile editor.
Click the Layout icon
.
Choose how you want to adjust your tab's layout:
Tab distribution: Choose how much you want the tab menu to stretch:
Default: The menu does not fit the width of the box.
Stretch: The menu fits the width of the entire box.
Spacing between tabs: Make the spacing between tab items bigger or smaller.
Spacing between tabs and container: Make the space between the menu and the content boxes bigger or smaller.
Horizontal padding: Adjust the padding on the left and right of the menu items.
Vertical padding: Adjust the padding on the top and bottom of the items.
Overflow tabs: Select how to display items that don't fit in the top menu:
Scroll: Visitors can scroll through the menu to see all of the items.
Wrap: Another line is added to fit all of the items. You can then use the slider to make the spacing between rows bigger or smaller.
Tab direction: Display items in the top menu from left to right, or vice versa.
Text alignment: Select an option to set whether the text is aligned to the Left, Center, or Right.
Customizing the design of tabs on mobile
Change the design of the tab element so it fits your mobile site's look. The changes you make don't affect the desktop site, so you can change options like the text and fill color to create a tailored experience for your mobile visitors.
To edit the design of tabs:
Click the tab element in your mobile editor.
Click the Design icon
.
Select an option under What do you want to design? and customize it with the available options.
Tab container
Select Tab container from the drop-down and adjust it with the following options:
Background Fills
: Choose a menu background to suit your page, and adjust its visibility. You can add multiple layers and design each one separately to create unique, eye-catching backgrounds.
Borders
: Add borders to the menu background to create a contrast against your site page. Choose a design and color, and set the width to make it as big or as small as you need.
Corners
: Choose how you want to corners of your menu to look. You can adjust each corner differently, and make them rounder or more square.
Shadows
: Add shadows to your menu background for a cool 3D effect. You can set the size, visibility, angle, and more to give it more impact.
Layout
: Adjust the padding around your tab menu to make it larger or smaller. You can enable or disable the Lock icon
to adjust each side separately, or make them match.
Tabs
Customize your tab menu items (tabs). You can adjust the design separately for each state; regular, hover, and selected.
Select Tabs from the drop-down.
Click a state.
Choose how you want to customize the tab items for that state:
Background Fills
: Choose the color of the item background to suit your page and menu, and adjust its visibility. You can add multiple layers and design each one separately to create unique, eye-catching backgrounds.
Text
: Customize your item text with settings such as font, size, and spacing. You can also add formatting like bold and italics, and choose the color.
Borders
: Add borders to your menu items to make them stand out. Choose a design and color, and set the width to make it as big or as small as you need.
Corners
: Choose how you want to corners of your items to look. You can adjust each corner differently, and make them rounder or more square.
Shadows
: Add shadows to your items for a cool 3D effect. You can set the size, visibility, angle, and more to give it impact.
Scroll button
If you add a scroll button from the tabs layout panel, you can customize its look for both the regular and hover state.
Select Scroll button from the drop-down.
Click a state (e.g. Regular, Hover).
Choose how you want to customize the button for that state:
Background Fills
: Choose the color and opacity of the scroll button background to make it stand out. You can add multiple layers and design each one separately to create unique, eye-catching backgrounds.
Borders
: Add borders to the scroll button to create an eye-catching contrast. Choose a design and color, and set the width to make it as big or as small as you need.
Corners
: Choose how you want to corners of your scroll button to look. You can adjust each corner differently, and make them rounder or more square.
Shadows
: Add shadows to your button for a cool 3D effect. You can set the size, visibility, angle, and more to give it as much impact as you want.
Icon
: Design the scroll button's icon to make it stand out on the tabs menu, and encourage visitors to see what other content your site has to offer.
Layout
: Adjust the padding around the scroll button to make it bigger or smaller. You can enable or disable the Lock icon
to adjust each side separately, or make them match.
Containers
Edit the design of your tab container box to look exactly how you want. You can add image backgrounds, create a 3D effect with shadows, and more.
Click Containers from the drop-down and choose how you want to customize it:
Background Fills
: Choose a background for your container box, and adjust the opacity to make it more or less visible. You can add multiple layers and design each one separately to create unique, eye-catching backgrounds.
Borders
: Add borders to the box to make it stand out on your page. Choose a design and color, and set the width to make it as big or as small as you need.
Corners
: Choose how you want to corners of your tab box to look. You can adjust each corner differently, and make them rounder or more square.
Shadows
: Add shadows to your tab box for a cool 3D effect. You can set the size, visibility, angle, and more to give it more impact.
Layout
: Set the padding around the container to make it larger or smaller. You can enable or disable the Lock icon
to adjust each side separately, or make them match.
This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!
Comments