The Tabs widget helps you organize content on your website, allowing visitors to find what they need without navigating to different pages. This widget features multiple panels that users can easily switch between to access the information they want within the same window.
In this article, we will learn how to add and customize the Tabs widget on your website.
How to Add a Tabs Widget
To add a Tabs Widget:
1. Navigate to Website → Design → Edit Website.
2. Choose the page you want to edit from the Pages Manager.
3. Click on the +Add section to add a pre-built Tabs section (that already includes tabs widgets) or click on the + icon /+Add Widget if you want to individually add a Tabs widget as an element in your existing sections.
Customizing the Tabs Widget/Section
Once you've added the Tabs widget, you can customize its appearance and behavior by clicking Edit Tabs.
Here’s a breakdown of the options available in the right-hand editing panel:
- Appearance: You can display and switch the tabs' layout and choose among many templates.
- Tabs order: Rearrange the tabs or add more if needed.
- Tab appearance: Customize the text and background colors of the tabs.
- Active tab appearance: Set distinct colors for the text and background of the active tab (the tab that is currently selected).
- Tabs layout: Add icons to the tabs, change their alignment, or expand the button size.
- Container: Assign different widgets to each tab. By enabling the "dynamic height" option, all tabs will adjust to match the height of the largest widget for consistent appearance.
Once you've added the Tabs widget (or Tabs section), you can begin editing the content of each tab through the editing sideform. Click on a tab to modify its content, such as adding text or other elements.