Why Use the Tabs Widget on Your Website

When visitors are comparing your services or pricing, too much text on one screen leads to confusion and lost sales. The Tabs Widget lets you display complex, related content — like tiered pricing plans or different service offerings — in organized, compact, clickable sections. Instead of forcing visitors to scroll through a long page, the Tabs Widget groups your content into labeled tabs that visitors can click through at their own pace, making it easier for them to find what they need and take action.

The Tabs Widget helps your website work harder for your business by:

• Saving screen space: Present multiple categories of content — such as Services, Plans, or Team Bios — in a single clean area without requiring the visitor to scroll endlessly.

• Driving focused engagement: Encourage visitors to actively click and compare different options, leading to deeper engagement with your offerings.

• Supporting rich content: Add images, titles, descriptions, and a customizable Call-to-Action button within each individual tab to make every section compelling.

How to Set Up the Tabs Widget

1. Add the Tabs Widget to any page on your website. To learn how to add a widget to your website, see How to Add Widgets to Your Website.

   The screenshot below shows the Tabs Widget being added to a website page. The widget appears as a placeholder block with labeled tab sections. No content has been added to the tabs yet at this stage.

   

2. After placing the Tabs Widget on the page, the Content Editor will open automatically on the right side of the screen.

   The screenshot below shows the Content Editor panel that appears after the Tabs Widget is placed. The panel displays fields for editing tab labels, titles, descriptions, images, and button settings. No design options are shown in the Content Editor — those are available in the Design Editor covered in Step 4.

   

3. In the Content Editor, add or remove tabs and drag them to reorder them. For each tab, you can edit the tab label, title, description, image, and Call-to-Action button.

   The screenshot below shows the Content Editor with multiple tabs added. Each tab entry shows its label field at the top, followed by fields for title, description, image upload, and button text and link. Controls to add, remove, and reorder tabs appear at the bottom of the tab list.

   

4. Click the Design Editor tab to customize the visual appearance of the Tabs Widget. In the Design Editor, select from several pre-designed layouts. Click All Tabs to customize the style of unselected tabs, reverse the tab direction, and control the tab layout on mobile devices. Click Selected Tab & Hover to customize the text style and background color of the active tab. Text style, button style, and image style controls are also available in this section.

   The screenshot below shows the Design Editor panel for the Tabs Widget. The panel displays layout options at the top, followed by the All Tabs section and the Selected Tab & Hover section. Each section contains style controls for text, background, and borders. No content editing options appear in the Design Editor — those are in the Content Editor covered in Steps 2 and 3.

   

Tabs Widget Limitations and Considerations

• Customizing the Selected Tab & Hover design does not affect the All Tabs design. The two style sections are independent and must be configured separately.

• You can add as many tabs as needed, but the space available for each tab label shrinks with each new tab added. For best readability, keep tab labels short and limit the number of tabs to what fits comfortably on the screen.

• The Tabs Widget offers two layout options for mobile display: tabs and accordion. When the tabs layout is selected for mobile, visitors can navigate between tabs by swiping. The accordion layout stacks tab content vertically, which can be easier to read on smaller screens.

Frequently Asked Questions

What does this article cover?

This article covers how to add and configure the Tabs Widget on your website, including content editing, design customization, and mobile layout options. This article does not cover adding other widget types. To learn how to add any widget to your website, see How to Add Widgets to Your Website.

Can I add a Call-to-Action button to every tab?

Yes. Each individual tab in the Tabs Widget has its own Call-to-Action button that can be configured independently with its own text and link destination.

How does the Tabs Widget display on mobile devices?

The Tabs Widget offers two mobile layout options: tabs and accordion. Select the mobile layout that best fits your content in the Design Editor under the All Tabs section. The tabs layout allows visitors to swipe between tabs on mobile. The accordion layout stacks the tab content vertically for easier reading on small screens.

Will changing the Selected Tab style also change the All Tabs style?

No. The Selected Tab & Hover style and the All Tabs style are independent. Changes made to one section do not affect the other. Configure each section separately in the Design Editor.