Tabs

The Tabs addon in SiteOrigin Premium adds additional functionality and style settings to the Tabs widget. These extra settings allow you to take full control over the widget.

View the Tabs addon demos.

Requirements

To make use of this addon, go to PluginsSiteOrigin Widgets and ensure the SiteOrigin Tabs widget is activated. Next, go to SiteOriginPremium Addons and activate the Tabs addon.

Usage

The below settings are those added by the SiteOrigin Premium Tabs addon. To view the complete documentation for the Tabs widget, please, see the Widgets Bundle documentation page.

The following additional settings will be added to the Tabs widget when you activate the Tabs addon:

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. The following preset designs are available: Flat, Wire, Rounded 01 and Rounded 01. View a demo of these presets.

Tabs

Title icon
Optionally select an icon to be displayed next to the tabs panel title.

Title icon image
If you’d like to add a custom icon or image you can make use of the Title icon image setting.

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.

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.

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.

Design

Tabs Container

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.

Padding
Set the padding for the top, right, bottom and left sides of the tabs container.

Tabs alignment
Set the tabs alignment to the left, center or right.

Tabs position
Set the tabs position to top, right, bottom or left.

Tabs

Icon location
If an icon has been added to a tab, set the location of the icon to left, right or center.

Font
Set the tab font family.

Font size
Set the tab font size.

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.

Padding
Set the top, right, bottom and left padding.

Margin
Set the top, right, bottom and left margin.

Panels

Font
Set the panel font family.

Font size
Set the panel font size.

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.

Padding
Set the top, right, bottom and left padding.