Wix Editor: Managing and Customizing Your Tabs
13 min read
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.
In this article, learn how to:
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 in your Editor.
- Click Manage Tabs.
- Select how you want to manage the tab items:
Add a new tab
Rename tabs
.
Duplicate a tab
Change the order of tabs
Set your default item
Delete a tab
Changing your tab's 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 in your Editor.
- Click the Layout icon
.
- Choose how you want to adjust your tab's layout:
- Tab menu is: Choose how much you want the tab menu to stretch:
- Justified: The menu does not fit the width of the box. You can then choose whether to align the menu items to the left, center, or right of the box.
- Stretched: The menu fits the width of the entire box. You can align the menu content to the left, center, or right of the box.
- Spacing between tabs: Make the spacing between tab items bigger or smaller.
- Spacing between tabs and box: 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.
- How to display tabs that don't fit: Select how to display 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.
- Display items from: Display items in the top menu from left to right, or vice versa.
- Tab menu is: Choose how much you want the tab menu to stretch:
Customizing the design of tabs
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 in your Editor.
- Click the Design icon
.
- Select an option under What do you want to design? and customize it with the available options:
Tab menu
: 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.
: 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.
: Choose how you want to corners of your menu to look. You can adjust each corner differently, and make them rounder or more square.
: 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.
: 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 item text with settings such as font, size, and spacing. You can also add formatting like bold and italics, and choose the color.
to give the items the same look for every state.Scroll button
: 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.
Box
Did this help?
|