How to Add and Customize Tabs on Your Website

Tabs are a great way to organize content into categories while keeping the page clean and structured. This is useful for FAQs, pricing tables, product details, or services.

1. Adding the Tabs Element

1. Open the Elements Panel on the left.
2. Scroll to Tabs under "Basic Elements."
3. Click, hold, and drag it to your preferred section on the page.

2. Editing Tabs & Adding Content

Renaming and Organizing Tabs

• Click on a tab label to rename it.
• To reorder tabs, use the arrow keys in the options toolbar.
• Duplicate tabs to create a copy with the same content.

Adding Content Inside Tabs

Tabs allow you to insert any type of content inside them. You can add:

Text & Headings – Add descriptions, features, or details.

Images & Videos – Display media related to each tab.

Buttons & Links – Include calls to action or navigation links.

Columns & Icons – Structure your tab content for a better layout.

Each tab works like a container, so you can build inside it as you would with any other section on your page.

3. Customizing Tab Design

Tab Orientation

• Horizontal (default) – Tabs appear in a row at the top.
• Vertical – Tabs appear as a list on the left or right side.

Tab Styles

• Standard Tabs – Default layout with borders.
• Detached Tabs – Tabs appear slightly separated from the content.
• Underline Style – A simple line appears under the active tab.

Icons for Tabs

• You can add an icon next to each tab for a visual cue.
• Choose between placing the icon on top, left, or right of the text.

Spacing & Alignment

• Adjust tab spacing between labels.
• Set alignment for vertical tabs (left or right).

Styling Options

• Change typography for tab labels.
• Customize background colors, text colors, borders, and shadows.
• Adjust hover effects (change tab color on hover).
• Set active state colors to highlight the selected tab.

4. Mobile & Tablet Responsiveness

Tabs automatically adjust for smaller screens:

• On tablets, they may stack in an accordion-style dropdown.
• On mobile, tabs usually convert into a collapsible menu.

Tip: Always preview and adjust tab settings for different screen sizes.

Why Use Tabs?

Saves space – No need to scroll endlessly.

Improves user experience – Easy navigation between sections.

Keeps information structured – Organizes content neatly.

Enhances design – Provides a modern and interactive layout.

With tabs, you can make your content more accessible and visually appealing while maintaining a clean, professional website layout.