About Tabs Element
The Tabs Element, one of the five layout elements from PageFly, is a versatile feature designed to organize and present content in a clean and navigable format. By dividing information into separate tabs, it makes content easy for user to access and navigate between sections
This element is particularly beneficial for pages with a lot of content, as it helps reduce clutter and improve user experience by keeping the page organized and easy to navigate.
Refer to this video tutorial:
How To Access The Tabs Element
- Step 1: Click on the Elements icon > In the PageFly tab choose the Tabs element
- Step 2: Drag and drop the desired Tabs variant you want into the 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.
How To Configure The Tabs Element
Tabs element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
Select the element in the layout to view its settings.
Note that in order to add content to Tabs element, you need to drag and drop elements into the Tab content of each tab. You can add Heading, Paragraph elements, Product variant, Product details elements…
General Settings
Tabs Element Settings
Select the whole Tabs element and navigate to the General tab, plenty of parameters that let you adjust the Tabs element will be shown.
Tab items:
|
 |
| Default active item: Choose which tab will be displayed first when the page loads. |  |
| Headers position: Adjust the tab headers’ position |  |
Header Layout: Choose the layout type for the tab headers. There are 3 types available:
Note: You can select a different header layout for each device type |
 |
| Menu Max Width: You can designate the header’s maximum width when you set the header position to Left or Right. The available range is from 0px to 886px. |  |
| Set Menu Full Width: Enable this option if you want your Tab Menu to fill the entire line
Note: This option only applies to the header positions at the top and bottom |
 |
| Horizontal Alignment: Adjust the horizontal alignment of the Tab Header Menu to Left, Center, or Right
Note: This option only works when the Tab Header Menu is not set to full width |
  |
Tabs Header Settings
In order to edit particular tab header in the Tab, select the desired tab header individually > General tab
Tab items:
|
 |
| Header text: Change the name of the tab header. |  |
| Show icon: Enable this option to show an icon in the Tab Header |  |
| Anchor text: Add link label or link text, which is the visible, clickable text in an HTML hyperlink for the Tab Header.
Note: This feature only works on the live page |
 |
For more detailed information on ATTRIBUTES, VISIBILITY, and ANIMATION parameters, refer to this General settings guide.
Styling Settings
In the Styling tab, you can style the tab header in 3 different states:
- Normal State: This is the default appearance of the tab when it is not being interacted with.
- Mouse Over State: This state is activated when a user hovers their mouse over the tab. You can add interactive effects to enhance the user experience.
- Active/Selected State: This state shows which tab is currently active or selected, helping users identify which tab they are viewing.
Additionally, you may modify a range of parameters in the Styling tab, such as spacing, borders, typography, colors, and more, to guarantee that the Tabs element matches the overall layout of your page.
You can check more information about the Styling tab here.
Common Issues
Tabs Not Displaying Correctly on Mobile
You can ensure that the Tabs element is responsive by using the responsive design tools in PageFly. In the Styling tab, remember to adjust the layout, font sizes, and spacing specifically for mobile devices. Preview the page on different screen sizes to ensure that the tabs function properly and look good on all devices
Content Within Tabs Overlapping or Misaligned
Don’t forget to check the content within each tab to ensure that elements are properly aligned and spaced. Use the Styling tab to adjust padding, margins, and alignment settings. If necessary, simplify the content within each tab to ensure a clean and organized presentation.
Version Update
4.15.0
The tab element in version 4.15.0 includes significant updates:
- Optimized Tab element code to reduce layout shift and improve loading speed on the live preview.
- Added 2 new layouts for headers, bringing the total to 3 layouts: Wrap, Scrolling, and Dropdown.
- Introduced a ‘Menu width’ parameter to configure the width of Tab headers when in Left & Right positions.
- Implemented Auto-scroll functionality with Dropdown layout in the live preview: When the tab element is positioned at the bottom of the page and a user clicks on the dropdown button, the tab element will automatically scroll upwards to fully display the menu for selection.
Frequently Asked Questions
1. How can I make sure my Tabs element is user-friendly?
To ensure your Tabs element is user-friendly, use clear and concise labels for each tab that accurately describe the content inside. Keep the number of tabs manageable, ideally between 3 to 5, to avoid overwhelming your customer. Ensure the tabs are easy to read and visually distinct by using appropriate fonts and colors.
2. What types of content work best within Tabs?
Tabs are ideal for organizing content that can be grouped into related categories, such as product details, FAQs, or technical specifications. Avoid placing essential information within tabs, as users might miss it. Instead, use tabs for supplementary information that enhances the main content.
3. What are some best practices for styling the Tabs element?
Best practices for styling the Tabs element include using consistent fonts and colors that align with your brand. Make sure the active tab is visually distinct from inactive tabs to help users understand which tab they are viewing. Use adequate spacing and padding to ensure the content within each tab is easily readable and not cramped.
Previous article
