Tabs Element
The Tabs Element groups related content into panels that share one place on the page. Visitors switch between the panels by clicking the tab titles, so a lot of information fits into a small area without a long scroll. Each panel can hold any content, from text to images and other elements.
Typical uses are product details, specifications and downloads side by side, step-by-step instructions, or different versions of the same content. Tabs can run horizontally or vertically, carry icons, stick to the top while the visitor scrolls and change into an accordion, toggles or a carousel on phones.
In this article: How To Use · Element Options · Tab Options · Tips · Related Elements · Example
How To Use The Tabs Element
Add the Tabs Element to a column and create one Tab per panel. For each Tab enter a Tab Title and the Tab Content, which can hold text, images and other elements. The first tab is open when the page loads.
On the General tab choose the Design (Classic or Clean), the Layout (Horizontal or Vertical), whether to Justify Tabs across the full width and the Tabs Alignment. An Icon set here appears on every tab unless a Tab chooses its own. On the Design tab set the Tabs Title Tag, typography, paddings, border radius and colors.
Sticky Tabs keeps the tab titles at the top of the screen while the visitor scrolls through long content; Sticky Tabs Offset takes a value or a CSS selector, for example of a fixed header. On the Mobile tab, Mobile Mode turns the tabs into an accordion, toggles or a carousel on small screens; the carousel is only used when the tabs do not fit the screen width.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Tabs. Change them there to style every Tabs at once.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this tabs element. |
| Design | Choose a design for the element. |
| Layout | Choose the layout of the element. |
| Justify Tabs | Choose to get tabs stretched over full element width. |
| Tabs Alignment | Choose tabs alignment. |
| Sticky Tabs | Turn on to have the tabs navigation stick on scroll. Useful for long content. |
| Sticky Tabs Offset | Controls how far the top of the column is offset from top of viewport when sticky. Use either a unit of measurement, or a CSS selector. |
| Icon | Global setting for all tabs, this can be overridden individually. Click an icon to select, click again to deselect. |
| Icon Position | Choose the position of the icon on the tab. Icons can be selected in the general tab for the same icon on all tabs, or in each child item for individual tab icons. |
| Tabs Icon Size | Set the size of the icon. In pixels, for example 13px. Icons can be selected in the general tab for the same icon on all tabs, or in each child item for individual tab icons. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Tabs Title Tag | Choose HTML tag of the tabs title, either div or the heading tag, h1-h6. |
| Tabs Title Typography | Controls the tabs title text typography. |
| Tabs Title Padding | Controls the padding of tabs title, In pixels or percentage, for example 10px or 10%. |
| Tabs Content Padding | Controls the padding of tabs content, In pixels or percentage, for example 10px or 10%. |
| Tabs Title Border Radius | Controls the border radius of tabs title, In pixels or percentage, for example 10px or 10%. |
| Border Color | Controls the color of the outer tab border. |
| Background Color | Controls the background inactive tab color. |
| Tabs Title Color | Controls the color of the tabs title. |
| Icon Color | Set the color of the icon. |
Mobile
| Heading | Description |
|---|---|
| Mobile Mode | Choose the tabs mode for mobile devices. Carousel will be come active only, if tabs don’t fit the device screen width. The breakpoint can be controlled from the Global Options. |
| Sticky Tabs | Set tabs to sticky for carousel mode on mobile, useful for long content. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tab Options
Each Tab has its own title and content, and can override the icon and icon color set on the General tab of the element.
General
| Heading | Description |
|---|---|
| Tab Title | Title of the tab. |
| Icon | Click an icon to select, click again to deselect. |
| Icon Color | Set the color of tabs icon. |
| Tab Content | Add content for the tab. |
Tips
- Give every tab a short, unique title. The title is also used to build the tab’s link ID, so two tabs with the same title on one page get the same ID.
- Choose the Tabs Title Tag by meaning. The default is H4; pick a heading level that fits the page structure, or DIV when the titles are not real headings.
- Content in closed tabs is still part of the page, so search engines can read it. Put the most important information in the first tab anyway, because many visitors never open the others.
- Sticky Tabs is most useful when each panel is long. For short panels it only takes space.
- Settings left on Default follow the Tabs section of Global Options, including the mobile mode (accordion unless changed there).