Advanced Tabs Widget

The Advanced Tabs widget gives you far more control over styling, spacing, and layout than the classic tabs widget. It’s perfect for FAQs, toggle content, or multi-section displays where you want a clean, interactive experience—and it looks polished right out of the box.

Preview: https://demo.wocode.com/advanced-tabs

Setup

WIDGET PLACEMENT AND SIZING

• Drop the widget into your site and place it in a row or column where you want the Advanced Tabs widget to appear.

WIDGET CONTENT PANEL

The widget's content panel offers several options for managing its tabs.

• Tabs: These are the individual tabs within the widget. Click the three dots next to a tab to rename, duplicate, or delete it.

  
  
• + Add Tab: Use this button to create new tabs as needed.

DESIGN SETTINGS

The Design panel offers a wide range of customization options for nearly every element of the widget. Most settings are clearly labeled by function and are self-explanatory, so we won’t cover each one individually here, except for two key sections:

• Tab Default State: Controls the widget’s appearance before any user interaction.
• Tab Hover & Selected State: Controls how the widget looks when hovered over or actively selected.

Adding/Modifying Content

Each tab functions like a column, allowing you to add and edit content in the same way. You can drag new content or widgets into a tab and rearrange items within it just as you would in a standard column layout.