Adding tabs

The Tabs element puts content into tabbed panels. Customers click a tab to switch panels, so related content shares one space. Use it for product details, specifications and delivery information. You add it in the page builder.

Considerations

• Tabs is in the Advance group. Basic mode hides that group, and search will not find it. Click Pro at the top of the page builder to switch modes.
• Each tab has its own panel. You fill a panel by dragging elements into it on the canvas.

Add the element

1. Open the page in the page builder.
2. If Basic is selected at the top, click Pro.
3. In the toolbox on the far left, click Elements.
4. Open the Advance group and find Tabs, or search for it.
5. Drag it onto the canvas and drop it where you want it. The settings panel opens on Editing Tabs.

Add and name tabs

1. With the element selected, open the Content tab.
2. Under Tabs, click Add Tab. A tab named New Tab appears.
3. In Label, type the name customers will see on the tab.
4. Drag the handle on a row to reorder. Hover over a row for Duplicate tab and Delete tab.

Fill a panel

1. On the canvas, click the tab you want to fill. Its panel reads Drag an element here.
2. Open Elements and drag an element into the panel.
3. Repeat for each tab.

Content settings

• Label: the text on the tab.
• Disabled: greys the tab out so customers cannot open it.
• Default Active Tab (Index): under Behavior, which tab is open when the page loads. 0 is the first tab.
• Animation Duration: how long the switch between panels takes, in milliseconds.

Design settings

Open the Design tab to change the look. Container and Content each set a Background Colour, Padding, Border Colour and Border Width. Layout sets the Variant, Orientation, Alignment and Tab Spacing. Header and Header Title style the tab strip and its text. Spacing sets the space around the element.

Related guides

• Adding an accordion
• Adding an FAQ
• Adding and arranging elements
• Using the element settings panel