Tabs element

This element is available on all PageFly plans

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.

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 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.ATTRIBUTES This is a parameter that all elements have. You can read more here.
3. VISIBILITY This is a parameter that all elements have. You can read more here.
4. ANIMATION This is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. OVERALL You can read about the OVERALL parameter here.
2. SPACING You can read about the SPACING parameter here.
3. TYPOGRAPHY You can read about the TYPOGRAPHY parameter here.
4. BACKGROUND You can read about the BACKGROUND parameter here.
5. BORDER You can read about the BORDER parameter here.
6. DISPLAY You can read about the DISPLAY parameter here.
7. CUSTOM CSS You can read about the CUSTOM CSS parameter here.

Tab Header settings

To edit a tab header of the Tabs element, choose one tab header separately.

tab header

General tab’s parameters
1.CONTENT
  • Tab items: You can duplicate or even delete the tab you want by choosing the corresponding icon in order: duplicate; delete
  • You can also add a new tab by clicking on the Add New Item button.

  • Button Text: You can change the name of the tab header here.
  • Show Icon: Enable this option if you want to show an icon for the tab header. And to change the icon, you need to click on the icon.

  • Anchor Text: You can input the anchor text for the tab header here.
2.ATTRIBUTES This is a parameter that all elements have. You can read more here.
3. VISIBILITY This is a parameter that all elements have. You can read more here.
4. ANIMATION This is a parameter that all elements have. You can read more here.
Styling tab’s parameters

Button State: You can choose one of three button states to style for it such as Normal, Hover, and Selected.

1. OVERALL You can read about the OVERALL parameter here.
2. SPACING You can read about the SPACING parameter here.
3. TYPOGRAPHY You can read about the TYPOGRAPHY parameter here.
4. BACKGROUND You can read about the BACKGROUND parameter here.
5. BORDER You can read about the BORDER parameter here.
6. DISPLAY You can read about the DISPLAY parameter here.
7. CUSTOM CSS You can read about the CUSTOM CSS parameter here.

You can check the video tutorial below

Was this helpful?

Try out all PageFly features with Free plan

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

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages