Tabs

Enhance site navigation and engagement by enriching Tabs Widgets with new styles and functionalities for intuitive content organization.

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.

Add tab anchor id in the URL
Enable this setting if you’d like to be able to link to a tab on the page in question.

The Add tab anchor id in the URL setting will allow you to link to specific panels that will open on load. This setting works by adding a modified version of the opened panel titles to the URL as they’re opened and removing them as they’re closed.

As the anchor id can differ from the original titles, the easiest way to generate the link with anchor id is to view the page with your Tabs on it and then open the panels you want to be open on load.

It’s also possible to link across multiple instances of the SiteOrigin Tabs and SiteOrigin Accordion Widgets as long the Add tab anchor id in the URL setting is enabled for those widgets. This means that you could open a Tabs Widget inside of SiteOrigin Accordion on load that’s normally not open. of the SiteOrigin Tabs and SiteOrigin Accordion Widgets as long the Add tab anchor id in the URL setting is enabled for those widgets.

Linking across multiple widgets is more complicated however as only anchor ids from one widget at a time will appear in the URL. You’ll need to generate the URL containing anchor ids for one widget, and then do the same for another – be sure to note the generated URL. Then you’ll need to merge the URLs together. Take for example the following generated URLs with anchor ids:

https://so.local/#about
https://so.local/#contact,map

In this example, I want to open the About Tab, and then open the Contact and Map Panels. The URL to do this is:

https://so.local/#about,contact,map

The initial hash is required to identify a series of anchor ids. There can only be a single hash in the URL.
Each anchor id is comma-separated. You should order the anchors in the order you wish for them to open in.

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.