About Tabs Element
The Tabs Element, one of the four 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 allows users to access and switch between different sections effortlessly.
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: In the PageFly editor, click on the Elements button on the left menu.
- Step 2: Look for the PageFly tab > Click on the Tabs element in the dropdown menu, under the Basic section.
- Step 3: Drag and drop the desired Tabs variant into the page editor. Now you can start configuring the element.
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.
How To Configure The Tabs Element
The Tabs element in PageFly comes with various parameters that allow you to effectively organize and present content on your page.
To start configuring, click on the Tabs element you’ve added, then:
- Go to the General tab to adjust general configurations such as adding, removing and renaming tabs, etc.
- Switch to the Styling tab for Styling configurations to customize the appearance, including font size, color, spacing, and more.
Note that to add content to Tabs, you need to drag and drop elements into the content box of each tab. For example, you can add Paragraphs, Product Variants, Product Images, and more. Note that not all elements can be added here, so choose compatible elements to enhance your tab content.
General Configurations
Tabs Element Settings
Select the whole Tabs element and navigate to the General tab to configure:
Tab items:
|
 |
| Default active item: Choose which tab will be displayed first when the page loads. |  |
| Headers position: Set the position of the tab headers (Top, Left, Bottom, or Right). |  |
Header Layout: Choose the layout type for the tab headers. There are 3 types available:
Note: The header layout can be chosen specifically for each device type. |
 |
| Menu Max Width: When setting the Header position to Left or Right, you can specify the maximum width for the header. The available range is from 0px to 886px. |  |
| Set Menu Full Width: Enable this option to make your Tab Menu span the full width of the line (only applicable for Top and Bottom header positions). |  |
| Horizontal Alignment: Adjust the horizontal alignment of the Tab Header Menu to Left, Center, or Right (this option only works when the Tab Header Menu is not set to full width). |  |
Tabs Header Settings
To edit a specific tab header within the Tabs element, select the desired tab header separately and navigate to the General tab:
| Tab headers: Add, duplicate, or remove tabs within the element. |  |
| Header text: Change the name of the tab header. |  |
| Show icon: Add an icon to 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.
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 Configurations
In the Styling tab, you can choose one of three styling states for Tab Header:
- 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, allowing you to add interactive effects to enhance the user experience.
- Active/Selected State: This state is for the currently active or selected tab, helping users identify which tab they are viewing.
Additionally, you can adjust various styling options such as spacing, borders, fonts, colors, and more to ensure the Tabs element aligns with your overall page design.
You can check more information about the Styling tab here.
Common Cases
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, don’t forget 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 across 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 users. 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, customer reviews, 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
