Tabs
Accessible tabs whose panels can hold any widgets.
The Tabs widget shows one panel at a time, with a row of tabs to switch between them. Each panel is a container, so it can hold any widgets. Tabs work well for alternatives visitors compare, such as services, plans or product details. On small screens the same widget can turn into an accordion.
Add tabs
Insert the widget
Open Insert in the left panel, find Tabs under Layout (or type
tabsin Search widgets) and click it or drag it onto the canvas. It starts with three tabs.Name the tabs
In Content → Tabs, click a tab and type its Title; add an Icon if you like. Add item adds a tab; drag the handle to reorder, or use Duplicate item and Delete item. The panels follow.
Fill the panels
Drop widgets into the open panel on the canvas. To edit another tab, select its panel (or anything inside it) in Layers: that tab opens on the canvas.
Pick the layout
Choose Horizontal, Vertical or Accordion in Layout. Switch to Mobile in the top bar and choose Accordion there to stack the tabs on phones.
Link to a tab
Turn on Deep linking and give a tab an Anchor, such as pricing. A link to /your-page#pricing then opens that tab, and the address changes when a visitor picks a tab, so they can share it.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing).
Content tab
| Setting | What it does |
|---|---|
| Tabs | The list of tabs. Each tab has a title here and a panel (a container) on the canvas. Add item, drag to reorder, Duplicate item and Delete item keep the panels in step. |
| Initially open tab | Number of the tab that is open when the page loads (1 = the first tab). Default: 1. |
| Layout | Horizontal tabs above the content, Vertical tabs beside it, or Accordion (stacked, collapsible). Set a different layout on mobile, for example Accordion. Options: Horizontal, Vertical, Accordion. Default: Horizontal. Per device. |
| Tabs alignment | Lines the tabs up at the start, center or end, or stretches them to fill the row. Options: Start, Center, End, Stretch. Per device. |
| Title alignment | Aligns the text inside each tab. Options: Left, Center, Right. Per device. |
| Icon position | Puts tab icons before, above or after the text. Options: Before, Above, After. |
| Accordion icon | Icon on the accordion headers (in the Accordion layout). It turns upside down when the item is open. |
| Panel transition | How a panel appears when its tab is chosen. Visitors who prefer reduced motion get no animation. Options: None, Fade, Fade and slide up. Default: Fade. |
| Deep linking | Opens the tab named in the address (#anchor) and updates the address when a visitor picks a tab, so tabs can be linked and shared. |
| Accessible name | Optional name of the tab list for screen readers, for example “Plans”. |
| Setting | What it does |
|---|---|
| Title | Text of the tab. |
| Icon | An optional icon on the tab. |
| Anchor | A name for deep links: with Deep linking on, /page#pricing opens this tab. Letters, numbers, - and _ only. |
Design tab
| Setting | What it does |
|---|---|
| Typography | Text style of the tab titles. |
| Space between tabs | Space between the tabs. Per device. |
| Distance to content | Space between the tabs and the content. Per device. |
| Tab list width | Width of the tab list in the Vertical layout. Per device. |
| Padding | Space inside each tab. Per device. |
| Border radius | Rounds the corners of each tab. Per device. |
| Normal › Text color | Text color of the tabs. |
| Normal › Background | Background of the tabs. |
| Normal › Border | Border of the tabs. |
| Normal › Shadow | Shadow of the tabs. |
| Hover › Text color | Text color of a tab on hover. |
| Hover › Background | Background of a tab on hover. |
| Hover › Border color | Border color of a tab on hover. |
| Active › Text color | Text color of the open tab. |
| Active › Background | Background of the open tab. |
| Active › Border color | Border color of the open tab. |
| Active › Shadow | Shadow of the open tab. |
| Active indicator › Show indicator | A line under the open tab (beside it in the Vertical layout). On by default. |
| Active indicator › Indicator color | Color of the indicator line. Shown when Show indicator is on. |
| Active indicator › Indicator thickness | Thickness of the indicator line. Shown when Show indicator is on. |
| Active indicator › Divider line color | Color of the line between the tabs and the content. |
| Active indicator › Divider line width | Thickness of the line between the tabs and the content. 0 hides it. |
| Tab list › Background | Background of the whole tab list. |
| Tab list › Padding | Space inside the tab list. Per device. |
| Tab list › Border radius | Rounds the corners of the tab list. Per device. |
| Setting | What it does |
|---|---|
| Size | Size of the tab icons. Per device. |
| Spacing | Space between a tab icon and its text. |
| Color | Color of the tab icons. |
| Active color | Color of the open tab’s icon. |
| Setting | What it does |
|---|---|
| Background | Background of the panels. |
| Border | Border of the panels. |
| Border radius | Rounds the corners of the panels. Per device. |
| Padding | Space inside the panels. Per device. |
| Shadow | Shadow of the panels. |
| Setting | What it does |
|---|---|
| Space between items | Space between the items in the Accordion layout. Per device. |
| Icon color | Color of the accordion icon. |
Used on breakpoints where the layout is "Accordion". Headers reuse the tab typography and colors.
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Keyboard and screen readers. The tabs follow the standard tabs pattern: arrow keys move between tabs, Home and End jump to the first and last. Fill in Accessible name when the page has more than one tab list.
- Short titles. Two or three words per tab keep the row on one line; long rows wrap or overflow on phones.
- Hidden content. Visitors only see the open panel. Put essential information in the first tab.
- Motion. Panel transition fades or slides panels in; visitors who prefer reduced motion get no animation.