The Tab widget allows you to organize and display multiple sets of content or functionalities within a single window while saving space and maintaining an organized layout. A typical tab widget consists of a horizontal or vertical bar containing distinct tabs representing CTA’s, often placed at the top or along one side of a window. When a tab is selected, its associated content is displayed in the main area of the widget, while the other tabs remain visible but inactive. The Tab widget allows users to easily navigate between different sections without the need for separate windows.
Adding a Tab Widget
To add a Tab widget:
- Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the Navigation grouping and select the Tab widget.
- Drag and drop the Tab widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Tab Widget
Once you have added the Tab widget, click it to activate the Property Panel, where you can customize its Styles, Content, and Settings according to your preferences.
To configure the Tab widget:
- Go to Styles to configure the principal styling features (see Global Styles).
- Go to Content to make the necessary configuration of widget content:
- Click + Add Tab to add new tabs.
- Click and hold the tab on the left side, then move it to the desired position to reorder the added tabs.
- Click the Dotted Menu and select the corresponding option to rename and delete the tabs.
3. Go to Settings and expand Visibility to modify the visibility of the widget on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).
Modifying the Tab Widget Properties
Once you have configured the Tab widget, you can modify the corresponding properties inside the Tab widget. This allows you to define the appearance and functionality of the widget on your website.
The following properties are available:
- Tab Items allows you to set the state of an item and to choose how the item is displayed on your website (only the label, only the icon, label with left or right icon).
- Tab Item allows you to modify the individual entries displayed within a Tab widget:
- Modify the principal styling features from the Property Panel (see Global Styles).
- Choose how the item is displayed on your website (only the label, only the icon, label with left or right icon).
- Add or change the icon near the tab item that best suits your website design.
- Tab Container allows you to add any widget in the corresponding container and modify the styling and design according to your preferences (see Essential Widgets > Container).
- Label allows you to modify the text inside the tab item. The label provides a brief description or name for the action or feature associated with the item.
Icon allows you to change the icon next to the tab item according to your preferences. To do so:
- Click Change Icon.
- Go to General Icons and select the corresponding icon from the list.
- Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.