Tabs

About Tabs ElementClick to copy

The Tabs Element, one of the four layout elements from PageFly, is designed to present content in separate tabs to increase the conversion rate. You can use the Tabs element to show various elements as the tab’s content, independently for each tab or in one tab.

How To Access The Tabs ElementClick to copy

  • Step 1: Click on the Add element icon
  • Step 2: Click on the Tabs element in the catalog
  • Step 3: Drag and drop the variations you want into the page editor and 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 canvas and see how it can be configured.

The Tabs Element

Configure The Tabs ElementClick to copy

The Tabs element has plenty of parameters allowing you to fine-tune content appearance to reach the best possible conversion rate.

The Tabs Element

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 Tabs Element

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

Tabs Element SettingsClick to copy

Tab items: Add/Duplicate/Remove new tabs to the element.The Tabs Element
Default active item: The tab will be seen first when showing on the live page.Tabs element
Headers position: 4 positions for the headers such as Top; Left; Button; and Right.The Tabs Element
Set menu full width: Make your Tab Menu full-width in the lineThe Tabs Element
Vertical alignment: Move the position of the Tab Header Menu to Left, Center or Right.The Tabs Element

You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here. You can also check more information about the Styling tab here.

Tabs Header SettingsClick to copy

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

Tab items: Add/Duplicate/Remove new tabs to the element.The Tabs Element
Header text: Change the name of the tab headerThe Tabs Element
Show icon: Add icon into the Tab HeaderThe Tabs Element
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!

The Tabs Element

You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here.

In the Styling tab, you can choose one of three styling states for Tab Header: Normal state, Mouse over state, and Active/Selected state.

The Tabs Element

You can check more information about the Styling tab here.

Frequently Asked QuestionsClick to copy

What Is Tabs Element?Click to copy

PageFly Tabs is an element that helps to break down the contents into separate tabs, which helps to increase the conversion rate.

Can I Style The Tabs?Click to copy

Of course, you can. You can style each state separately, simply by hovering and each of them: the Normal state, Mouse over state, and Active – Selected state, then check out PageFly Element Styling to style your elements better!

Navigate this category

PreviousPrevious article

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us