Tabs

4 min read Updated

The Tabs Widget puts content in panels behind a row of tabs. Visitors click a tab to show its panel. Use it to keep long pages short, for example to show services, pricing details or FAQs.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets and activate the Tabs Widget.

You can use the Tabs Widget anywhere:

Page Builder: Insert the widget in Page Builder by SiteOrigin, in the Classic Editor or in the Page Builder Layout Block.
Block Editor: Insert the SiteOrigin Tabs block. You will find it in the SiteOrigin category.
Theme and Plugin Widget Areas: Insert the widget into any theme or plugin widget area.

Settings

Title
An optional widget title above the tabs.

The Tabs widget form with the Tabs repeater

Tabs

Click Add to add a tab. Use the arrow to open a tab, the page icon to duplicate it, and the cross icon to delete it. Drag the tabs to change their order.

Title
The text on the tab.

Content
The panel content. Use the editor to add text, images and links. The widget does not run shortcodes in this field.

Visitors can also move between tabs with the left and right arrow keys.

Initially selected tab

The tab that is open when the page loads. Enter 1 for the first tab, 2 for the second tab, and so on. Default: 1. If the number is not a valid tab, the first tab opens.

Design

Tabs container

The container is the bar that holds the row of tabs.

Background color
The container background color. Default: #757575.

Border color
The container border color. It shows when Border width has a value.

Border width
The container border width. Leave it empty for no border.

Tabs

Background color
The tab background color. Leave it empty for no background.

Background hover color
The background color of a tab on hover and of the selected tab. Default: #f9f9f9.

Title color
The tab text color. Default: #fff.

Title hover color
The text color of a tab on hover and of the selected tab. Default: #2d2d2d.

Border color
The tab border color. It shows when Border width has a value. Default: #828282.

Border hover color
The border color of a tab on hover and of the selected tab. It shows when Border hover width has a value. Default: #f9f9f9.

Border width
The tab border width.

Border hover width
The border width of a tab on hover and of the selected tab.

Panels

A panel is the content area of a tab.

Background color
The panel background color. Default: #f9f9f9.

Font color
The panel text color.

Border color
The panel border color. It shows when Border width has a value.

Border width
The panel border width.

Three tabs on the front end with the first tab selected

Global Settings

Go to PluginsSiteOrigin Widgets and click Settings on the Tabs Widget.

Scroll top
When a visitor opens a tab, the page scrolls to the top of the Tabs Widget. Enabled by default. The scroll stops 90px below the top of the window, to leave room for a sticky menu. To change this offset, see Advanced Customizations below.

SiteOrigin Premium

The Tabs Addon in SiteOrigin Premium adds these settings:

  • Presets: Ready-made designs: Flat, Wire, Rounded 01 and Rounded 02. A preset replaces some or all of the current form values.
  • Title icon and Title icon image: An icon or your own image on each tab.
  • Content type: Choose Text or Layout builder. The Layout builder shows a Content builder field, where you build the panel with rows and widgets. It needs Page Builder by SiteOrigin. To run shortcodes in a panel, use a Layout builder with a SiteOrigin Editor Widget.
  • Tabs position: Top, Right, Bottom or Left. Right and Left give you vertical tabs. Tabs mobile position sets where vertical tabs go on small screens: Default, Above or Below.
  • Tabs alignment: Left, Right or Center for tabs at the top or bottom. Top, Bottom or Middle for vertical tabs.
  • Icon location: Left or Right of the tab title.
  • Fonts and font sizes for the tabs and the panels.
  • Border radius and padding for the container, the tabs and the panels, margin for the tabs, and a border width for each side.
  • A Responsive Breakpoint global setting. Default: 780px.

Premium vertical tabs with title icons

The Anchor ID Addon adds Add anchor ID in the URL and Anchor ID. With these, the URL changes when a visitor opens a tab, and you can link straight to a tab.

Advanced Customizations

Change the Scroll Offset

Use the siteorigin_widgets_tabs_scrollto_offset filter to change the 90px scroll offset. Add the code to your child theme functions.php file or a code snippets plugin.

add_filter( 'siteorigin_widgets_tabs_scrollto_offset', function( $offset ) {
	return 150;
} );

Track Tab Changes

The widget triggers a tab_change event when a visitor opens a different tab, with a click or with the arrow keys. This snippet listens for that event. Replace the comment with the tracking code of your analytics tool.

add_action( 'wp_enqueue_scripts', function() {
	wp_register_script( 'sow-tabs-tracking', false, array( 'jquery' ), false, true );
	wp_enqueue_script( 'sow-tabs-tracking' );
	wp_add_inline_script( 'sow-tabs-tracking', "
		jQuery( document ).on( 'tab_change', '.so-widget-sow-tabs', function( event, tab ) {
			var tabTitle = jQuery( tab ).text().trim();
			// Add your tracking code here. For example, with Google Analytics 4:
			// gtag( 'event', 'tab_click', { tab_title: tabTitle } );
		} );
	" );
} );