When visitors are comparing your services or pricing, presenting too much text can lead to confusion and lost sales. The Tabs Widget is the ultimate tool for information architecture, allowing you to display complex, related content like tiered plans or different services in organized, compact, clickable sections.

This widget provides efficiency and clarity by:

• Saving Screen Space: Present multiple pages of content (Services, Plans, Team Bios) in a single, clean area without forcing the visitor to scroll endlessly.

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

• Rich Content Capability: Ensure every section is compelling by integrating images, titles, descriptions, and a customizable Call-to-Action button within each individual tab.

Guide

1. Add the Tabs widget anywhere on the page. To learn more about adding widgets to your website, see Adding Widgets.
   
2. Once the widget has been placed, the Content Editor will appear.
3. From here, you can add or remove tabs and switch their order. You can edit the tab label, title, description, image and button.
   
   
4. In the design editor, you can choose from several pre-designed layouts, and customize the style of the tabs. Click All Tabs to customize the style of unselected tabs, reverse the tab direction, and control the tab layout on mobile. Click Selected Tab & Hover to customize the text style and background. Controllers for the text style, button style and image style are here too. 
   

Considerations

• When you customize the “Selected Tab & Hover” design, this does not affect the “All Tabs” design.
• You can have as many tabs you want, but keep in mind that the space for each label is reduced with each new tab.
• There are 2 layout options for mobile display, tabs and accordion. The tabs layout can be controlled by swiping.