Support Articles

Stay Connected

Tabs Widget

The Tabs widget is an excellent way of displaying content efficiently on your site. Visitors can click between tabs (rather than scroll through text) to view related content. Tabs are a great way of showing content such as Services, Plans or Team members in compact, connected sections.


Each tab can contain a label, title, description, image and button, and each of these elements can be fully customized.


To add the widget:


  1. In the left panel, click Widgets.
  2. Click and drag the Tabs widget into your site.


To learn more about adding widgets to your site, see Add Widgets.


Content Editor


To access the content editor:


  1. Right-click the widget, and click Edit Content.
  2. To add a new tab, click Add Tab.
  3. To edit the tab label, title, description, image, and button, click the tab.
    To display images on the tabs, click the 
    Show image toggle.


Design Editor


To access the design editor:


  1. Right-click the widget, and click Edit Design.
  2. Click the layout to select a different layout for the tabs.
  3. Click All Tabs to customize the style of unselected tabs, reverse the tab direction, and control the tab layout on mobile.
  4. Click Selected Tab & Hover to customize the text style and background. This does not affect the All Tabs design.
  5. Click to change the Description Style, Button Style, and Image Style.


Note


  • 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.


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


What's

Snappin

Related Articles

By Eddie Cruz 24 Aug, 2021
Expand the capabilities of the website builder with custom HTML. This widget allows you to embed custom code into your site, and can be used to embed third-party widgets such as videos, contact forms, and more. While adding custom code can extend your site's functionality, we recommend you only add code from a trusted source. Only add code if you know exactly what it does and how to troubleshoot it if it does not work. To learn more about using HTML in Developer Mode, see Developer Mode.
By Eddie Cruz 24 Aug, 2021
The editor's interface has three main predefined sections: The top navigation bar, the left panel, and the content area. Each of these predefined sections plays an important role in letting you make your site as awesome as possible.
By Eddie Cruz 24 Aug, 2021
This widget makes it easy for website visitors to send you money using PayPal. You can use the PayPal button both for gathering donations and for selling products.
Share by: