Possible Configurations
Tabs are a versatile way to organize and present content in a structured manner on web pages. They allow users to navigate between different sections or categories of information seamlessly, enhancing user experience by reducing clutter and simplifying content presentation.
With tabs, you can effectively showcase various types of content such as articles, product features, or service offerings, enabling users to quickly access the information they need. Whether used individually or in combination with other elements, tabs provide a visually appealing and intuitive interface for users to interact with your website content.
Example using 90% width
Example of orientation set to Vertical, width 90%, color blue, and height set to Auto.
This example also uses the container settings to set a 2px orange border on top and bottom, and to add padding all around.
Utilizing Tabs on Your Page
Tabs provide an effective way to organize and present content on your webpage. By integrating tabs into your design, you can create a structured layout that allows users to easily navigate between different sections of information.
Whether you're showcasing product features, displaying service offerings, or presenting FAQ sections, tabs offer a visually appealing and user-friendly solution. With simple HTML, CSS, and JavaScript implementation, you can incorporate tabs into your website and enhance the overall user experience.
Multiple Tabs on the Same Page
Yes, you can have multiple tabs on the same page. Incorporating multiple tabs allows you to organize and present various types of content within a single webpage. Each tab functions independently, enabling users to access different sets of information without leaving the page. Whether you're dividing content by topic, category, or any other criteria, multiple tabs provide a convenient way to manage and display diverse information effectively.
Tabs Compatibility with Mobile Devices
Tabs are fully compatible with mobile devices and responsive web design principles. When implemented correctly, tabs can adapt to different screen sizes and orientations, ensuring a seamless user experience across various devices.
By using CSS media queries and responsive design techniques, you can optimize the layout and styling of tabs for smaller screens.
Whether users are accessing your website on smartphones or tablets, tabs provide an intuitive navigation solution that enhances usability and accessibility.
Integration with Simple Content
The Tabs component in this example was configured with color set to green, orientation set to none (defaults to horizontal), height set to 320px.
You can also create Tabs and place them within a Simple Content element.
To do this is very simple:
- Add a Simple Content element.
- Create two or more columns, with one of them being of type "Region".
- For this Region column, set the ID to "internal-placement-1".
- Add an Tabs element as usual.
- In the Target Placement configuration of the Tabs, choose the destination "Internal Placement 1".
Tabs with Simple Content
Utilizing Tabs on Your Page
Tabs provide an effective way to organize and present content on your webpage. By integrating tabs into your design, you can create a structured layout that allows users to easily navigate between different sections of information.
Whether you're showcasing product features, displaying service offerings, or presenting FAQ sections, tabs offer a visually appealing and user-friendly solution. With simple HTML, CSS, and JavaScript implementation, you can incorporate tabs into your website and enhance the overall user experience.
Multiple Tabs on the Same Page
Yes, you can have multiple tabs on the same page. Incorporating multiple tabs allows you to organize and present various types of content within a single webpage. Each tab functions independently, enabling users to access different sets of information without leaving the page. Whether you're dividing content by topic, category, or any other criteria, multiple tabs provide a convenient way to manage and display diverse information effectively.
Tabs Compatibility with Mobile Devices
Tabs are fully compatible with mobile devices and responsive web design principles. When implemented correctly, tabs can adapt to different screen sizes and orientations, ensuring a seamless user experience across various devices.
By using CSS media queries and responsive design techniques, you can optimize the layout and styling of tabs for smaller screens.
Whether users are accessing your website on smartphones or tablets, tabs provide an intuitive navigation solution that enhances usability and accessibility.
Configurations
Component configuration:
- Title
- If title should be displayed on the page
- An introduction text to be displayed before the tabs
- Orientation (horizontal or vertical)
- Height:
- Auto: the content of the tabs will determine it's height
- Height in px or vh: the tab will have the desired fixed height and will scroll if needed
- Component width as a percentage of the total width available for the component
- Placement (inline, top of the page content, bottom of page content, etc.)
- Color Style
- Container Settings
Container Settings
Container settings allows the configuration of the container housing the component. It allows the following settings:
- Padding (in px): top, right, bottom, left. Defaults to 0px for all.
- Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
- Border (in px): top, right, bottom, left. Defaults to 0px for all.
- Border Radius (in px): defaults to 0px.
- Border Color
- Background
- Color
- Text Color
- Extend text color to items or not
- Opacity (%)
- Blur (in px)
- Media (image / video)
- Parallax Effect (for Image only)
Items Configuration
- Title
- Description (internal use only)
- Body (tab content)
- Custom CSS Class