How to add tabs to your website

Tabs let you organise content into clearly labelled sections, keeping your pages tidy and easy to navigate. Rather than asking visitors to scroll through a long page, tabs let them jump straight to what they need.

Adding the tabs element

1. Drag the Tabs element from the Advanced menu onto your page.

2. Adjust the default width and margin, or leave the element to size itself automatically. Placing the tabs block inside an existing Layout often gives you more control over positioning.

3. In the configuration panel on the right, set the background colour for the tab items. Adjust the Default, Hover, and Active states separately to control how each tab looks in each situation.

4. Each tab panel appears as a separate entry in your Page Structure tree. Select a panel there to edit its contents - you can add any content you like inside a tab, including additional layouts and blocks.

5. Each tab panel can be configured in the same way as a Layout. You also have the extra option of setting a title and icon for the tab.

6. To add more tabs, click New Item in the configuration panel. This inserts a blank tab panel that you can then populate and style.

Finished result

Once you have styled your tabs and nested content inside each panel, the result is a clean, polished tabbed section that keeps your page organised.