Wix Editor: Managing and Customizing Your Tabs
Updated: 7 days ago
After adding tabs to your page, manage each individual tab and organize its content. Change the tab order as you wish, and customize the layout and design so it fits your site's theme.
Managing your tabs
Manage the tabs to set the order, placement, and name of the items. You can also add, duplicate, and delete items as needed to keep your content fresh.
To manage tabs:
Click the tabs element.
Click Manage Tabs.
Select how you want to manage the tab items:
Add a new tab
Add tabs to divide, organize, and build your content.
To add a new tab, click Add Tab at the bottom of the panel.
Rename tabs
Change the name of your tabs to match their content.
Hover over the relevant item in the panel.
Click the More Actions icon
.
Click Rename.
Enter the new name into the field.
Click Done.
Duplicate a tab
Duplicate a tab to copy its design and content. This is a great way to create multiple similar items, as the elements are carried over.
Select the relevant item in the panel.
Click Duplicate Tab at the bottom of the panel.
Change the order of tabs
Rearrange the order of your tab items in the top menu. You can choose to display them however you like, whether it's alphabetical order or by order of importance.
To change the order of tab items, simply click and drag the items into the order you want.
Set your default tab
Set the tab that is automatically displayed when a visitor opens the page that contains the tab.
Hover over the relevant item in the panel.
Click the More Actions icon
.
Click Set as default.
Delete a tab
If you don't need a tab item anymore, you can delete it at any time.
To delete a tab:
Hover over the relevant item in the panel.
Click the More Actions icon
.
Click Delete.
Changing your tabs' layout
Adjust the layout of your tabs to set the spacing, alignment, and more. Use the settings to fit your page structure, and create a clear layout for your visitors.
To customize the layout:
Click the tabs element.
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 stretch to fit the width of the box. Choose whether to align the menu items to the left, center, or right of the box.
Stretch: The menu stretches to fit the width of the entire box. You can align the menu content to the left, center, or right of the box.
Space between tabs: Make the spacing between tab items bigger or smaller.
Space between tabs & 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 the rest of the tabs.
Wrap: Another line is added to fit all of the tabs. You can then use the slider to make the spacing between rows bigger or smaller.
Tab direction: Select whether the tab reads left to right, or right to left.
Customizing the tabs' design
Adjust the tab's look to create a personal, eye-catching way to showcase content. You can customize different parts of the element separately, and choose settings such as the color, borders, and more.
To design the tabs:
Click the tabs.
Click the Design icon
.
Click Customize Design.
Select an option under What do you want to design? and customize it with the available options:
Tab container
Customize the container that shows your tab menu.
Select Tab container from the dropdown.
Choose how you want to customize the tab container:
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.
Shadow
: 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 the design of the tabs that appear on the tab menu. You can adjust the design separately for each state; regular, hover, and selected.
Select Tabs from the dropdown.
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.
Shadow
: Add shadows to your items for a cool 3D effect. You can set the size, visibility, angle, and more to give it impact.
Tip: Click the Apply design to other states icon
to give the items the same look for every state.
Scroll button
If you add a scroll button from the Tab Layout panel, you can customize its look for both the regular and hover state.
Select Scroll button from the drop-down.
Click a state.
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.
Shadow
: 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
Customize the design of the container that shows the tab content. You can add image backgrounds, create a 3D effect with shadows, and more.
Select Containers from the drop-down.
Choose how you want to customize the containers:
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 the corners of your tab box to look. You can adjust each corner differently, and make them rounder or more square.
Shadow
: 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