PageFly Tabs Element | Guide To Organize SEO Contents Better

1. About Tabs ElementClick to copy

1.1. What is PageFly Tabs Element?Click 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.

Check out: PageFly Layout Element

1.2. Access the Tabs ElementClick to copy

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

2. Tabs Element ConfigurationClick to copy

The Tabs element has 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.

tab element

Note that you need to drag and drop elements into the content box of the Tab. For example, ParagraphProduct VariantProduct Image, etc. However, not all elements can be added here.

tab element

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

2.1. Tabs Element General SettingsClick to copy


2.1.1. Tab ItemsClick to copy

Add/Duplicate/Remove new tabs to the element.

tab element

2.1.2. Default Active ItemClick to copy

The tabs will be seen first when seen on the live page.

tab element

2.1.3. Headers PositionClick to copy

4 positions for the header such as Top; Left; Button; and Right.

tab element

2.1.4. Set Menu Full WidthClick to copy

Make your Tab Menu is full-width in the line


2.1.5. Horizontal AlignmentClick to copy

Move the position of the Tab Header Menu to Left, Center or Right.

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

2.2. Tabs Elements Styling SettingsClick to copy

You can check more information about the Styling tab here

2.2.1. Tab Header General SettingsClick to copy

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.

tab element


2.2.2. Tab itemsClick to copy

Tab items: Add/Duplicate/Remove new tabs to the element.


2.2.3. Header TextClick to copy

Header Text: Change the name of the tab header


2.2.4. Edit IconsClick to copy


Show icon: Add icon into the Tab Header

Icon Position: Set the position of the icon inside the Tab Header

2.2.5. Edit Anchor TextClick to copy

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, and ANIMATION parameters here

2.2.6. Tab State Styling ConfigurationClick to copy

You can choose one of three styling states for Tab Header: Normal stateMouse over state, and Active/Selected state.


You can check more information about the Styling tab here

3. Key TakeawaysClick to copy

‘Tabs’ is an essential element to help sellers organise their stores better, so the contents would be easier to read, leading to a higher conversion rate.

4. Frequently Asked QuestionsClick to copy

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

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

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now