Create tabbed content panels with customizable titles, content, initial tab, and design settings.
Requirements
To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Tabs Widget.
The Tabs Widget is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
Settings
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. This setting is added by the SiteOrigin Premium Tabs Addon.
Title Icon Image
If you’d like to add a custom icon or image, you can use the Title icon image setting. This setting is added by the SiteOrigin Premium Tabs Addon.
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.
If you’d like to process shortcodes in the content field, select the Layout builder option (part of the Tabs Addon in SiteOrigin Premium) and insert a SiteOrigin Editor, which will output the shortcode.
Content
Use the editor to add the tab’s content.
Initially Selected Tab
Use this field to select which tab will be open on the first load—1 for the first tab, 2 for the second tab, etc.
Add Tab Anchor ID in the URL
Enable this setting if you’d like to link to a tab on the page in question. Available as part of SiteOrigin Premium Anchor ID Addon.
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 containing 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
Select the alignment of the tabs relative to the tab content. Choose between left, center, or right. Available as part of SiteOrigin Premium.
Tabs Position
Select the position of the tabs relative to the tab content. Choose between Top, Right, Bottom, or Left. 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 icon’s location 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.
Advanced Customizations
Adjust Scroll To Offset
Navigate to PluginsSiteOrigin WidgetsTabs: Settings to enable the Scroll Top setting. When opening a tab, the Scroll Top setting will scroll the user to the top of the tab. The scroll offset from the top of the page is 90px. The siteorigin_widgets_tabs_scrollto_offset filter can be used to adjust the offset.
add_filter( 'siteorigin_widgets_tabs_scrollto_offset', function( $offset ) {
return 150;
} );
Google Analytics Event Tracking
Tracking tab clicks is possible using Google Analytics or the tracking software of your choice. To do so, you’ll need to insert and edit the following script to make this possible:
<script>
jQuery( '.sow-tabs-panel' ).on( 'show', function() {
if ( jQuery( this ).find( '> :hidden' ) ) {
// Add Event Tracking here.
}
} );
</script>
Add your event tracking function below the comment // Add Event Tracking here.. Insert Headers and Footers plugin is one of the methods you could use to insert the above script.