Content Controls
These controls let you manage the content within each tab of the Product Tabs element. Customize the description, additional information, and reviews tabs by setting icons and titles for each, providing a clear, user-friendly interface for your product information.
- Description – Customize the Description tab of your product.
- Icon – Choose an icon to represent the description tab.
- Title – Set a title for the description tab to label it clearly.
- Additional Information – Configure the Additional Information tab.
- Icon – Select an icon to denote additional information about the product.
- Title – Provide a title for the additional information tab.
- Reviews – Set up the Reviews tab.
- Icon – Choose an icon to represent the reviews section.
- Title – Add a title to the reviews tab for easy identification.
Design Controls
Tabs
Design controls provide you with the ability to customize the appearance and layout of the product tabs. Adjust orientations, styles, positions, and spacings to create a visually appealing and functional tab layout that aligns with your site’s design.
- Vertical – Toggle between a vertical or horizontal layout for your tabs.
- Horizontal At – Specify at which screen size the tabs switch to a horizontal layout. This option is available only when Vertical is enabled.
- Style – Choose a style for your tabs such as bar, pills, or separators.
- Position – Select the position of the tabs when in vertical orientation, or choose a position style when in horizontal orientation.
- Space Between – Adjust the space between individual tabs. This option is available based on the selected position and style.
- Space After – Set the space after the tabs, providing breathing room before the next content element.
- Bar – Customize the bar style tabs, including separator color, radius, and shadow. This control is available when Bar style is selected.
- Pill Radius – Adjust the radius for pill-style tabs. This option is available when Pill style is selected.
- Separator – Style the separators in tab style, including color and width. Available when Tab style is selected.
- Text – Customize the typography of the tab text, including color options for hover and active states.
- Background – Set background colors for inactive, hover, and active tab states.
- Underline – Adjust the underline feature for tabs, including color, width, and radius. This control is available unless Pill style is selected.
- Padding – Define the vertical and horizontal padding for your tabs for consistent spacing.
- Icon – Customize the icon settings including size, nudge adjustments, and spacing after the icon.
- Responsive – Configure how your tabs behave on different devices, including toggling a dropdown view and adjusting dropdown styles.
- Transition Effect – Set the speed and style of the transition when switching between tabs.
Spacing
Spacing controls help you manage the overall layout of your product tabs, ensuring they are well-integrated into your page design. Adjust the margins and spacings to maintain visual balance and clarity.
- Container – Adjust the top and bottom margins of the entire tab container for optimal positioning.
- Below Tabs – Set the space below the tabs, creating separation from subsequent content.
Advanced
The Advanced section offers additional customization options for the Product Tabs Element, providing enhanced control over its functionality and integration with your site. Here, you can fine-tune settings related to behavior, responsiveness, and advanced styling options. This section is ideal for making detailed adjustments that go beyond the standard design configurations.
