Help Center
Finding the perfect answer...
    Help Center
  1. Studio, Partners & Enterprise
  2. Wix Studio
  3. Using the Wix Studio Editor
  4. Adding elements in the Studio Editor
    5. Studio Editor: Adding and Customizing Tabs

Studio Editor: Adding and Customizing Tabs

7 min read
Use the tabs element to organize and group related content on a page. This element displays multiple sections of content in a compact manner, making it easy for your client's site visitors to find the information they need. 
A GIF showing the tabs element on a live site. The cursor is clicking each tab in the menu to open the content.
In this article, learn how to:

Adding the tabs element to a page

Add as many tab elements as needed to organize the site content. After choosing a preset and dragging it onto the page, you can then customize the content and add elements. 

To add tabs:

  1. Click Add Elements  on the left side of the editor.
  2. Click Layout Tools.
  3. Click Tabs.
  4. Select a design and drag it onto the page.
  5. Customize the content of the tabs:
    1. Click the Tabs element you just added.
    2. Click Manage Tabs.
    3. Select the tab you want to work on. 
    4. Edit the tab's content: 
      • Add more elements.
      • Edit existing elements.
      • Adjust the grid to the desired layout.
A screenshot of the Add elements panel. Tabs have been selected from Layout tools, and the cursor is hovering over a design.

Managing tabs

Use the Manage Tabs panel to add, duplicate, rename or delete tabs. This panel also allows you to navigate between tabs to preview and edit them as needed.  

To manage tabs:

  1. Click the tabs element.
  2. Click Manage Tabs.
  3. Hover over the relevant tab and click the More Actions icon .
  4. Choose what you want to do with the tab: Rename, Delete or Duplicate.
A screenshot of the Manage Tabs panel on the canvas. The More Actions menu is open, displaying the options.
Want to add a blank tab?
Click Add Tab at the bottom of the panel.

Designing tabs

Customize the tabs element so it matches the style of the page. You can design the tab menu, the tabs themselves, and the container that displays the content. You can also add a transition effect that plays when visitors click between tabs.

To design the tabs:

  1. Click the tabs element. 
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot showing where to find the Inspector panel in the Studio Editor. The cursor is hovering over the icon to open it.
  1. Click the Design tab .
  2. Choose the part you want to design from the drop-down:
    • Tab container: This container shows the tab menu.
    • Tabs: These are the tabs appearing on the menu. Select the state you want to customize (Regular, Hover, or Selected).
    • Container: This is the container that shows the content of each tab.
  3. Use the available design options:
    • Background fills: Apply a color, gradient or image background. You can add multiple background layers and adjust their opacity. 
    • Borders: Add borders to create a contrast against the site page. Choose a design and color, and set the width.
    • Corners: Choose how you want to corners to look. You can adjust each corner differently, and make them rounder or more square.
    • Shadows: Add shadows for a cool 3D effect. You can set the size, visibility, angle, and more to give it more impact.
    • Layout: Adjust the padding to make it larger or smaller. You can enable or disable the Lock icon  to adjust each side separately, or make them match.
    • Text: Style and format the tab names appearing on the menu. You can change the font, size, color and more. 
A screenshot of the Design tab in the Inspector. The cursor is hovering over the background fills option.
Note:
The available options depend on the part you choose to design (i.e. Tabs container, Tabs or Container). 

To add a transition effect:

  1. Click the tabs in your editor.
  2. Click the Settings icon .
  3. Choose a transition effect from the panel, and adjust it the way you want:
    • Crossfade: The tabs fade in and out when visitors click between them. 
      • Transition duration: Use the slider to set how long the transition plays for.
    • Float: Tabs float in when visitors click them. 
      • Transition direction: Select whether tabs enter from below or above.
      • Transition duration: Use the slider to set how long the transition plays for.
The tabs settings panel in the Studio editor. The Float option is selected, and the cursor is changing the duration.

Choosing a default tab

The default tab the tab that is automatically opened on the live site. You can change it to whichever should appear first for your client's content and site needs. 
Tip:
In the Manage Tabs panel, you can see a checkmark icon next to the current default tab.
A screenshot showing the checkmark icon that appears next to the default tab in the Manage Tabs panel

To set the default tab:

  1. Click the tabs element.
  2. Click Manage Tabs.
  3. Hover over the relevant tab and click the More Actions icon .
  4. Click Set as default.
A screenshot showing how to set the default tab from the Manage Tabs panel.

Adjusting the tab layout

Customize the layout, spacing and padding of tabs element. If there are a large amount of tabs, you can also decide how to display them in the menu (Scroll or Wrap). 

To adjust the tab layout:

  1. Click the tabs element.
  2. Click the Layout icon .
  3. Adjust the layout using the available options:
    • Tab distribution: Decide how much the tab menu should stretch:
      • Default: The menu does not stretch to fit the width of the element. You can then align the tabs to the left, center, or right.
      • Stretch: The menu stretches to fit the width of the element. You can align the text on the menu to the left, center, or right.
    • Space between tabs: Drag the slider to change the spacing between the tabs on the menu.
    • Space between tabs & container: Change the space between the menu and the container that shows the content of each tab.
    • Horizontal padding: Adjust the padding on the left and right of the menu tabs.
    • Vertical padding: Adjust the padding on the top and bottom of the menu tabs.
    • Overflow tabs: Select how to display to display tabs that don't fit in the menu:
      • Scroll: Site visitors can scroll through the menu to see more tabs.
      • Wrap: Another row is added to fit the other tabs. You can then use the slider to adjust the space between the rows.
    • Tab direction: Display tabs on the menu from left to right, or vice versa.
A screenshot showing the Tab Layout panel. The cursor is hovering over the space between tabs option.

Did this help?

|
In this article
  • Adding the tabs element to a page
  • Managing tabs
  • Designing tabs
  • To design the tabs:
  • To add a transition effect:
  • Choosing a default tab
  • Adjusting the tab layout

Related content

Studio Editor: Working with an Advanced CSS Grid

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched