Tabs Widget

Tabs Widget

The Tabs widget is an excellent way to efficiently display content on your site. Visitors can view related content by clicking between tabs rather than scrolling through text. Tabs are an excellent way to display content like Services, Plans, or Team Members in small, connected sections.

Each tab can have its own label, title, description, image, and button, all of which can be fully customised.

To include the widget:

1. Click Widgets in the left panel.
2. Drag the Tabs widget into your website.

The Add Widgets contain information about adding widgets to your site.

Content Editor

To contact the content editor, follow these steps:

1. Select Edit Content by right-clicking the widget.
2. Click Add Tab to create a new tab.
3. Click the tab to edit the tab label, label heading type, title, description, image, and button. There are header tags available to help search engines identify your text. It is recommended that you use H3 as the Label Heading Type.
4. Click the Show image toggle to display images on the tabs.

Design Editor

To gain access to the design editor, follow these steps:

1. Right-click the widget and select Edit Design.
2. To change the layout of the tabs, click the layout button.
3. To customise the style of unselected tabs, reverse the tab direction, and control the tab layout on mobile, click All Tabs.
4. Click Selected Tab & Hover to change the text style and background. This has no effect on the design of All Tabs.
5. Click to change the Description Style, Button Style, and Image Style.

• You can have as many tabs as you want, but keep in mind that each new tab reduces the space available for each label.
• For mobile display, there are two layout options: tabs and accordion. Swiping controls the layout of the tabs.

See Widget Design. It contains information about design options that are not specific to this widget (for example, layout, style, or spacing).

Mobile View

For mobile display, there are two layout options: tabs and accordion. Swiping controls the layout of the tabs. However, not all mobile browsers support swiping behaviour, in which case the accordion view can be used on mobile.

To modify the Tabs widget for mobile use:

1. Click the device view in the top navigation bar to change the view to mobile. See Edit by Device for more information.
2. Right-click the widget and select Edit Design from the menu that appears.
3. Click All Tabs, then toggle the Display as an Accordion switch.