Home / Widgets

Tab Widget

Customer Success Team

Last updated on Mar 22, 2024

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:

  1. Go to the Visual Editor from Channels on the Dashboard Left Panel.

  2. Navigate to the Widgets list on the Visual Editor Left Panel.

  3. Type the widget name in the search bar, or expand the Navigation grouping and select the Tab widget.

  4. 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 the widget to activate the Property Panel where you can customize its Styles, Content, and Settings according to your preferences.

To configure the Tab widget:

  1. Go to Styles to make the necessary configuration of principal styling features (see Global Styles).

  2. Go to Content to make the necessary configuration of widget content, specifically:

  • add new tabs;

  • reorder the tabs;

  • rename and delete the tabs.

3. Go to Settings to modify the visibility of the widget on your website. Specifically, 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 the 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, specifically you can:

    • 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.

💡 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.