Tabs element

1719 views Linh 1

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.
To use the Tabs element, choose Add element on the sidebar menu > ADVANCED > choose the Tabs element and then drag and drop it into the page editor.
Note that you can search for this element by using the search function instead of finding it in the sidebar.

PageFly with the Tabs element helps you to build your Shopify store more easily

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.

pagefly-tabs-element

The parameters in the General and Styling tabs are specific for this element. Read about them in this article.

General tab’s parameters
1.CONTENT
  • Tab items: You can add new tabs to the element. 

You can duplicate or delete the item with two corresponding icons next to each tab item’s name.

The order of tab’s items can be moved easily by dragging and dropping the 3 dots icon on the left of the tab item’s name.

You can drag and drop other elements into each tab.

  • Default Active Item: Choose one of the tabs to make it default (to be seen first) when see on the live page. 
  • Header position: There are 4 positions (they are displayed as the arrows) for you to choose for the header such as Top; Left; Button; and Right.
    • Left: if you choose this option, the tab headers will be moved to the left of the tab content. There is an option for you to adjust the vertical alignment with 3 choices: Top, Middle, and Bottom. 
    • Right: if you choose this option, the tab headers will be moved to the right of the tab content. There is an option for you to adjust the vertical alignment with 3 choices: Top, Middle, and Bottom.
    • Top: if you choose this option, the tab headers will be moved to the top. There is an option for you to adjust the horizontal alignment with 3 choices: Top, Middle, and Bottom. You can also set a full width for the menu if you want. 
    • Bottom: if you choose this option, the tab headers will be moved to the bottom. There is an option for you to adjust the horizontal alignment with 3 choices: Top, Middle, and Bottom. You can also set a full width for the menu if you want.
2.ATTRIBUTESThis is a parameter that all elements have. You can read more here.
3. VISIBILITYThis is a parameter that all elements have. You can read more here.
4. ANIMATIONThis is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. OVERALLYou can read about the OVERALL parameter here.
2. SPACINGYou can read about the SPACING parameter here.
3. TYPOGRAPHYYou can read about the TYPOGRAPHY parameter here.
4. BACKGROUNDYou can read about the BACKGROUND parameter here.
5. BORDERYou can read about the BORDER parameter here.
6. DISPLAYYou can read about the DISPLAY parameter here.
7. CUSTOM CSSYou can read about the CUSTOM CSS parameter here.

Was this helpful?

Start your free 14-day trial
of PageFly

.myshopify.com
Don’t have Shopify store yet? Create store
×