Learn how to use the Advanced Tabs widget to organize complex content into tabbed sections with more advanced customization options.
The Advanced Tabs widget allows site visitors to click between tabs (rather than scroll through text) to view related content. A benefit to using the Advanced Tabs widget is that each tab can be designed independently to give you more flexibility and control. You can add multiple inner columns and rearrange them, and add any widget you would like.
To add the Advanced Tabs widget:
- In the side panel, click Add, then click Elements.
- Search for Advanced Tabs, then drag and drop the widget onto the canvas.
Click a tab on the Advanced Tabs widget to open the floating menu, then click Content. From the content menu, you can do the following:
- Rename, duplicate, or delete a tab. Click the three-dot icon next to the desired tab and select either Rename, Duplicate, or Delete.
- Add a new tab. To add a new tab, click + Add tab.
- Reorganize tabs. Drag and drop the tabs into the desired order.
Click a tab on the Advanced Tabs widget to open the floating menu, then click Design.
In the design panel, expand the Tab Default State and Tab Hover & Selected States sections. From here, you can customize the text style, background, and tab direction for the tabs. The design selections apply to the tabs themselves, but not to the content you add inside the tabs (inner columns and widgets).
By default, each tab contains an inner column that you can add additional inner columns or widgets to. The inner column design is set by the design panel. If you click the inner column or an element inside of it, you can make design changes to that particular element. This allows you to customize the design of each tab independently.