Do you want to organize some content or elements within tags? The tab element in Thrive Architect allows you to organize related content or elements in categorized tags.
In this article, we’ll show you how to add the element, customize it, and understand how to use its options.
Adding the Tab Element to a Page or Post
To add a tab element to the page or post, open the page or post in the Thrive Architect editor and click the + (plus) icon in the right column.
After you click the plus icon, start typing “tab” in the search bar to find the Tab element in the menu.
When you see the Tabs element, drag and drop it on the page. A popup will appear, and you can select a template for displaying the tabs.
After selecting a template, you’ll see the tabs added to the page.
Once on the page, the tab element can be edited and styled further using the main options and settings in the left column.
Styling the Tab Element
After you see the tab element added to the page, styling options appear in the left column.
This is where you can edit almost everything about the Tab element you’ve included on the page.
Editing the Tabs Element Template
Once you select a tab template for a page, you can edit or change it through the main options.
When you click on the arrow beside the template name in the left column, a popup will appear where you can select a tab template to be applied.
Note: This will remove all the changes implemented to the current tab element on the page.
After clicking the arrow, you’ll see all the tab templates listed in a popup. You can select a template and click Replace Template to apply it to the current tab element.
Editing the Tab Items
When you add a tab element on a page, you can add all types of content or embed elements.
To edit tab items, click the Edit Tab Items button under Main Options.
When you click the button, you can edit the tab items in different states. You can edit the items in different states by clicking and selecting them in the State dropdown.
- Normal: The tab appearance in a normal state
- Hover: The tab appearance when it is hovered upon.
- Selected: The tab appearance when a tab item is selected.
After you select the state, you can proceed with styling that you want to apply for the selected state.
You can select the groups you want to edit in the dropdown.
- Grouped Tab Items: Manage styling for all the tab items.
- Grouped Tab Contents: Manage styling for all the tab contents.
- All Title(s): Manage styling for all titles in the tab element.
- All Paragraph(s): Manage styling for all paragraphs in the tab element.
When you select the grouping, you can continue editing the tab element on the right side of the screen.
After editing the tabs element, click the Done button on the floating panel.
Disabling or Enabling Grouped Styling
You may disable grouped styling for certain sections. To do so, click the lock icon beside the Group Styling dropdown.
For example, you select Grouped Tab Items and manage the styling. Then, you consider having a different styling for another tab item.
To disable grouped styling for a particular item, select the item in the right editor by clicking on it, then click the lock icon beside the Grouped styling dropdown.
Exiting Grouped Styling
After you finish editing all the grouped and ungrouped items and content in the tab element, you can click Exit Group Styling to exit this mode and return to the tab element’s main options.
Note: Please ensure you save the edits made in the Edit Tab Items mode.
You can read our document to learn more about group styling in Thrive Architect.
Using the Main Options for the Tab Element
Like any other Thrive Architect, the Tab element has a set of settings in the Main Options, which appear in the left column when you click it in the editor.
The Main Options allow you to:
- Set Colors for the Tab Element
- Select the Type of Tabs
- Set the Tab Alignment
- Wrap to Toggle View at Breakpoint
- Manage the Tab Size
- Manage the Spacing Between Tabs and Content
- Manage the Tabs’ Spacing
- Select the Default Tab to be Shown
- Add Hover Effect and Content Switch Animation for Tabs
- Enable Progress Styling
Set Colors for the Tab Element
Under the Main Options, you can set the colors for a tab element. This setting has two colors (the main and the second accent).
Select the Type of Tabs
The tab element in Thrive Architect lets you decide what type of tab to display. You can select either horizontal or vertical.
A horizontal tab type is one in which the tab items are placed horizontally.
A vertical tab type is one in which the tab items are placed vertically.
To change the tab type, click the Horizontal or Vertical option beside the Type option in the Main Options.
Set the Tab Alignment
The tab alignment setting for the tab element allows you to place the tab item on the left or right, according to your preference.
Wrap to Toggle View at Breakpoint
By default, when the tab element is viewed on mobile or tablet, the tabs are in line with each other, and the content of a selected tab appears below all the tabs. This makes it look broken when multiple tabs are combined.
Therefore, if you want the content of a tab to appear below the tab name and push the other tabs below, you’ll need to wrap to toggle view at breakpoint.
The Wrap to Toggle View at Breakpoint can be enabled by clicking the slider beside it. This can be further managed using the slider below to set the breakpoint to enable this setting.
Manage the Tab Size
The Tab size setting allows you to manage the size of the tabs in the Thrive Architect tab element.
You can choose between two elements, Relative or Fixed.
The Relative Tab size keeps the tabs aligned to the left or right as selected, assigning each one a length required to fit in the tab label. The maximum size slider below the setting allows you to select the maximum size you want the tabs to be extended to.
The fixed tab size lets you display all the tabs in a fixed size. This slider below this setting allows you to select a custom fixed size for each tab in the element.
Manage the Spacing Between Tabs and Content
The tab element in Thrive Architect lets you set the spacing between the tab and its content by using this setting.
You can manage the spacing between the tabs and the content by dragging the mark over the slider.
Manage the Tabs’ Spacing
The Spacing setting for the tabs element in Thrive Architect allows you to manage the tabs’ horizontal, vertical, and in-between spacing.
- Horizontal spacing: The spacing on the tabs’ left and right sides.
- Vertical spacing: The spacing on the tabs’ top and bottom.
- Between: The spacing between the tabs of the tabs element.
Each of these spacings can be adjusted using the slider.
Select the Default Tab to be Shown
The Default tab setting for the tab element allows you to select a tab that will remain open by default. To set a default tab, select one from the available dropdown.
Add Hover Effect and Content Switch Animation for Tabs
When you add tabs to the page, you can also add hover effects and animations to the tab content as needed.
The Hover effect will let you add effects to the tabs appearing when a user hovers over them. The available hover effects are as follows:
- None
- Underline
- Double line
- Brackets
- Thick underline
The Content Switch Animation setting allows you to add animation to the tab content that is displayed when you switch between tabs.
You can select a Content Switch Animation from the dropdown beside the setting.
Enable Progress Styling
As the name suggests, the Progress styling feature tracks a user’s progress in the tabs.
When this setting is enabled, the tabs you open after the first / default tab will continue having the same styling as the previous one. So, all the tabs that a user opens adopt the default tab styling.
To enable Progress styling, click the toggle button beside it.
Other Options for the Tabs Element
Under the Main Options, you’ll find many other options for setting up the tab element.
- Layout & Position
- Background Style
- Borders & Corners
- Scroll Behavior
- Shadow
- Responsive
- HTML Attributes
Besides the “Main Options”, you have a few more option sections available in the left sidebar. For example, you can customize the layout & position of the tabs, as well as the borders & corners, shadows, and so on:
If you need more information about the general options, check out our knowledge base articles about it.