Advanced Tab
Tabs are an excellent way to organize content on your site in a user-friendly manner. With the JupiterX Tabs widget, you can efficiently create structured, tabbed content. Here's how to use the Content tab to set up and customize your tabs.
Content Tab
Tabs
Create and manage the tabs that users will interact with:
- Add Tab: To introduce a new tab, click the "+ Add Tab" button. A new tab will be added to your layout.
- Edit Tab Items: To customize the content within a tab:
- Click on a tab item to reveal its editable fields.
- Title: Give your tab a title that will be displayed on the tab header.
- Icon: Add visual flair to your tab by selecting an icon, either from the provided library or by uploading your own.
- Content Type: Choose to add content directly or to source it from a template.
- CSS ID: Use this to add a specific identifier for CSS customizations or scripting hooks if needed.
Removing or rearranging your tabs is straightforward:
- To delete a tab, click the "X" icon on the tab you wish to remove.
- To reorder tabs, simply drag and drop them into place using the six-dotted icon.
Additional Settings
Fine-tune the tabs' behavior and look to enhance the audience's interaction:
- Direction: Decide if your tabs should stack horizontally or vertically and choose their placement relative to the content.
- Switch on Hover: Opt for users to switch tabs on mouse hover rather than click.
- Justify: Enable this feature if you want your tabs to stretch and fill the horizontal space.
- Align Title: Align the titles within the tabs to the start, center, or end according to your design needs.
- Horizontal Scroll: Turn on horizontal scrolling for tabs that exceed the container's width – a practical feature for maintaining a clean layout.
- Breakpoint: Establish the screen width at which the tabs will adapt to a vertical layout, ensuring that your content is optimized for mobile devices.
Style Tab
Tabs
Control the presentation and spacing of your tabs:
- Gap Between Tabs: Adjust this setting to space out your tabs nicely within their container.
- Distance from Content: Determine the ideal separation between your tabs and their associated content.
Apply various styles to your tabs for different states for better user interaction:
- Background Type: Set a solid color, gradient, or image as your tabs' background for Normal, Hover, and Active states.
- Border Type: Frame your tabs with a border style that suits your design—solid, dashed, or none.
- Shadow: Add depth and dimension to your tabs with a shadow effect.
- Border Radius: Soften or sharpen the corners of your tabs with a border radius.
- Padding: Use padding to ensure the content within your tabs is comfortably spaced from the edges.
Titles
Fine-tune the text of your tabs for a polished look:
- Typography: Customize the font, size, weight, and spacing of your tab titles.
- Color: Select the color for the titles in Normal, Hover, and Active states to maintain readability and engagement.
- Shadow: Consider adding a text shadow to highlight active tabs or for stylistic preferences.
- Stroke: Add a stroke to your text if it complements your design for an added effect.
Icon
Icons can provide a quick visual cue—make sure they're perfectly integrated:
- Position: Decide where the icon should sit in relation to the title—above, below, left, or right.
- Size: Choose an appropriate size for your icons so they're easily noticeable without overwhelming the text.
- Spacing: Manage the distance between the icon and the title for a balanced composition.
- Color: Define icon colors that subtly shift as you change between Normal, Hover, and Active tabs.
Content
The content area is where your detailed information will live:
- Background Type: Set a complementary background for the content area—color, gradient, or image.
- Border Type: Contour the content area with a selected border style.
- Border Radius: Adjust the corners of the content box to flow with the rest of your tab design.
- Padding: Implement padding to ensure the content has room to breathe and doesn't feel cramped.