In this article, you will learn about the Tabs element and how to use it.
About Tabs element
The Tabs element is designed to present content in separate tabs in order to increase the conversion rate. You can use the Tabs element to show various elements as the tab’s content either independently for each tab or together in one tab.
You can check more details in the video tutorial below.
Access the Tabs element
Step 1: Click on the Plus icon which is the Add element function
Step 2: Click on the Tabs element in the dropdown menu
Step 3: Drag and drop the element you want into the page editor and then start using it.
The Tabs element comes with multiple variations covering most of your needs. But we will continue to add more variations to help you save time.
Drag a variation to the layout and see how it can be configured.
Tabs element configuration
The Tabs element comes with plenty of parameters allowing you to fine-tune content appearance to reach the best possible conversion rate.
Select the element in the layout to see its parameters.
Note that you need to drag and drop elements into the content box of the Tab. For example, Paragraph, Product Variant, Product Image, etc. However, not all elements can be added here.
The parameters in the General and Styling tabs are specific for this element. Read about them in this article.
General configuration
| CONTENT | |
| Tab items: Add/Duplicate/Remove new tabs to the element. |  |
| Default Active Item: The tabs will be seen first when seen on the live page. |  |
| Headers Position: 4 positions for the header such as Top; Left; Button; and Right. |  |
| Set Menu Full Width: Make your Tab Menu is full-width in the line |  |
| Horizontal Alignment: Move the position of the Tab Header Menu to Left, Center or Right. |  |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.
Styling configuration
You can check more information about the Styling tab
Tab Header settings
To edit a tab header of the Tabs element, choose one tab header separately.
You can Duplicate/Delete/Copy style/Paste style for each tab header in the toolbar right above it here.
| CONTENT | |
| Tab items: Add/Duplicate/Remove new tabs to the element. |  |
| Header Text: Change the name of the tab header |  |
Icon:
|  |
| Anchor Text: Add link label or link text is the visible, clickable text in an HTML hyperlink for Tab Header. This feature only works on the live page! |  |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.
Styling configuration
You can choose one of three styling states for Tab Header: Normal state, Mouse over state, and Active/Selected state.
You can check more information about the Styling tab.
Previous article
