Tabs Shortcode

Last Updated on

The tabs shortcode is one of the Jupiter shortcodes that allows you to show a tabbed-based view of your content. You can also select the style and set the tab orientation as you wish.

In this article, we’ll explain how to configure the tabs shortcode.

To see the Tabs shortcode in action, check out the demo page.

Tabs shortcode - demo

In this article


Displaying the Tabs Shortcode

To add the shortcode:

1
Add a new page or edit an existing page.
2
From the Visual Composer screen, click on the + button.

Tabs shortcode - visual composer screen

3
In the Add Element pop-up screen, search for Tabs and click on it to be added to the page.

Tabs shortcode - add element

4
When the shortcode is added, a new pop-up screen called Tabs Settings will open that allows you the ability to configure the shortcode settings.

Tabs shortcode - Tabs settings

5
Configure the settings as required. More settings are explained in the next sections.
SettingDescription
Title Adds a title for the tabs.
Mobile Friendly Tabs? Use this option to decide whether this shortcode can be viewed when visiting the site from mobile devices. Our recommendation is to change the shortcode behavior and stack all shortcode text as normal content. Available options are: Yes Please! and No!
6
Click on Save Changes and publish or update the page to check the result.

Configuring the Tabs Settings

After you’ve added the tabs shortcode, a pop-up window will appear where you can configure the  options. Below is a detailed description of each option for the tabs shortcode.

Configuring Each Tab Separately

Each tab has a pencil icon to show the options related to the tab. Options included for each individual tab are as follows:

SettingDescription
Title  Sets the title of the tab. This option is different from the main shortcode title setting. It is for each individual tab and can be set for each one separately.
Add Icon Class Name (optional) Adds the icon class name that you want to have in the tab section of the shortcode next to the title. To see a graphical representation of the icons and a reference to their class names, go to Main Dashboard Menu > Jupiter > Icons Library.

Configuring the Tabs Styling

To select the style or set the background color of the tabs you’ll need edit the following options. Each option has a description which you can find below:

SettingDescription
Style Sets the style of the tab shown on the website. Available options are: Default and Simple.
Orientation Sets the orientation of the tabs shortcode presentation. This option works only for the Default style. Available options are: Horizontal and Vertical.
Container Background Color Sets the container background color of the shortcode which contains the main content for each tab.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket