The Tabs element allows you to organize content into multiple sections, each accessible by clicking on a tab in a menu. Here’s everything you need to know to set up and style tabs.
1. Adding the Tabs Element
Go to the Insert panel → Advanced and Interactive.
Drag the Tabs element into your base row.
2. Understanding the Structure
In the Layers panel, the Tabs element consists of:
Menu (top part): Holds the tab items (triggers).
Content (bottom part): Displays the content for the selected tab.
3. Styling the Menu
The Menu contains the tab items and their triggers.
Interactions
By default, tab items have two built-in interactions:
Active interaction – The selected tab shows a black 1px bottom border.
Hover interaction – Tabs that are not active show a black 1px bottom border at 30% opacity when hovered.
You can customize:
Text
Font
Colors
Border styles
4. Managing Content Items
Each Content section corresponds to a tab in the menu.
To add a new content item: Duplicate an existing one in the Layers panel.
To change the text label of a tab:
Select the tab item
Use the Right panel to edit its name
Example: Rename “Item 1” → “Dr. Andrew Huberman.”
5. Building Tab Content
Each tab’s content can be fully customized.
For example, to create a layout with text and an image:
Delete the default text element inside the content item.
Insert a two-column layout.
Left column: Add two text elements (e.g., a quote and a name).
Right column: Add an image.
Remove the default fixed width (600px) from the Tabs element so it expands to 100% width.
Clean up styling:
Remove unnecessary fill colors from the content and rows.
Set background colors on the base row instead if needed.
6. Duplicating for Multiple Tabs
Once the first tab is complete:
Duplicate the entire content item as many times as needed.
Update each duplicate with its own content.
Rename each tab in the menu to match (e.g., “Ellison Felix,” “Sir Lewis Hamilton”).
7. Adjusting Default Styles
You can refine the default tab item styles for a polished look:
Set inactive tab text to a lighter gray.
Keep the active tab text black.
This creates a clear visual distinction between active and inactive tabs.
Final Notes
With the Tabs element, you can:
Organize content neatly under separate sections.
Customize both the menu (tab triggers) and the content area.
Style the interactions so users have clear feedback when navigating.
That’s it! You now know how to set up and style a Tabs element from start to finish.