Tabs Widget

To use the Tabs widget, ensure its enabled in the Widgets Bundle dashboard at PluginsSiteOrigin Widgets. The Tabs widget can be inserted into any theme widget area at AppearanceWidgets or any page or post using Page Builder.

Once the Tabs widget has been inserted into your theme widget area or page/post using Page Builder, hover over it and click the Edit link to begin. You’ll find the following fields available:

Presets:
The presets dropdown offers various templates for the Tabs widget. Please, note that using a preset will override some or all of the current form values. Available as part of SiteOrigin Premium. The following preset designs are available: Flat, Wire, Rounded 01 and Rounded 01. View a demo of these presets.

Title:
Enter a title for the widget, it’ll display above the tabs.

Tabs:

Click the Add link to add your first tab.

Title:
Set the tab title.

Title icon:
Set a title icon. Available as part of SiteOrigin Premium.

Content type:
By default, a Text field will be available for your item content. If you’re using SiteOrigin Premium and have the Tabs module enabled you’ll also be able to select a Layout builder. A Layout builder is an instance of Page Builder, this means you build a layout consisting of columns and rows and add any widget you’d like, within the item content area.

Content:
Use the editor to add the tab’s content.

Initially selected tab:
Use this field to select which tab will be open on first load. 1 for the first tab, 2 for the second tab and so on. Available as part of SiteOrigin Premium.

Use anchor tags in the URL:
Enable this setting if you’d like to be able to link to a tab on the page in question. Available as part of SiteOrigin Premium.

Design

Here you’ll find all the design related settings for the tabs widget you’re currently editing.

Tabs Container

These settings apply to the container that holds both the tab header and tab content (panel).

Background color:
Set the tab container background color.

Border color:
Set the tab container border color.

Border width:
Set the tab container border width and choose the measurement value. px is the default value. If you’re using SiteOrigin Premium you’ll be able to set the border width individually for the top, right, bottom and left borders.

Border radius:
Set the border radius for the top left, top right, bottom right and bottom left corners, individually. Available as part of SiteOrigin Premium.

Padding:
Set the padding for the top, right, bottom and left sides of the tabs container. Available as part of SiteOrigin Premium.

Tabs alignment:
Set the tabs alignment to the left, center or right. Available as part of SiteOrigin Premium.

Tabs

Background color:
Set the tab background color.

Background hover color:
Set the tab background hover color.

Title color:
Set the tab title text color.

Title hover color:
Set the tab title text color on hover.

Icon location:
If an icon has been added to a tab, set the location of the icon to left, right or center. Available as part of SiteOrigin Premium.

Font:
Set the tab font family. Available as part of SiteOrigin Premium.

Font size:
Set the tab font size. Available as part of SiteOrigin Premium.

Border color:
Set the tab border color.

Border hover color:
Set the tab border color on hover.

Border width:
Set the tab border width. If you’re using SiteOrigin Premium you’ll be able to set the border width individually for the top, right, bottom and left borders.

Border hover width:
Set the tab border width on hover. If you’re using SiteOrigin Premium you’ll be able to set the border width individually for the top, right, bottom and left borders.

Border radius:
Set the top left, top right, bottom left and bottom right border radius. Available as part of SiteOrigin Premium.

Padding:
Set the top, right, bottom and left padding. Available as part of SiteOrigin Premium.

Margin:
Set the top, right, bottom and left margin. Available as part of SiteOrigin Premium.

Panels

This is the content area.

Background color:
Set the panel background color.

Font:
Set the panel font family. Available as part of SiteOrigin Premium.

Font size:
Set the panel font size. Available as part of SiteOrigin Premium.

Font color:
Set the panel font color.

Border color:
Set the panel border color.

Border width:
Set the panel border width. If you’re using SiteOrigin Premium you’ll be able to set the border width individually for the top, right, bottom and left borders.

Border radius:
Set the top left, top right, bottom left and bottom right border radius. Available as part of SiteOrigin Premium.

Padding:
Set the top, right, bottom and left padding. Available as part of SiteOrigin Premium.