Tabs
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
The , 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:
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.
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...
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:
- Add new tab items by clicking on the Add new items button.
- Duplicate or remove tabs within the Tab element by using the two buttons next to each tab item.
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: - Wrap - Scrolling - Dropdown
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
Horizontal Alignment: Adjust the horizontal alignment of the Tab Header Menu to Left, Center, or Right
Tabs Header Settings
In order to edit particular tab header in the Tab, select the desired tab header individually > General tab
| Tab items: - Add new tab items by clicking on the Add new items button. - Duplicate or remove tabs within the Tab element by using the two buttons next to each tab item. |
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.
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 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
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.
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.
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.
For more detailed information on ATTRIBUTES, VISIBILITY, and ANIMATION parameters, refer to this .
You can check more information about the Styling tab .
