Get started with the Responsive Tabs plugin

Installing the plugin

If you have any trouble installing this PRO plugin, see this article for help.

Create a new tab set

  • Go to the Tabs sets tab in your WordPress admin panel and click Add New.
  • When editing your first tab, simply scroll down the page and click the Add Item button.
  • After you’re done editing your tabs, save and copy-paste the shortcode into any post/page.

Find the shortcode

  • Click on the Tabs sets tab in your WordPress admin menu.
  • Your shortcode should be in the list on the right.

This is for PRO users only. You can create a link that will trigger a specific tab by adding a hash (#my-tab) after your page URL.

You can find your tab’s hash by using your browser’s built-in inspecting tool. Simply right-click on the tab you want you link to open and choose “Inspect” (Chrome) or “Inspect Element” (Firefox).

The inspector window will open, with focus on the tab you selected. Your hash is what’s in the data-tab=”” attribute. 

For example, if my inspector shows the following:

image_1083.png

A link that opens this specific tab would be:

http://mysite.com/mypage/#tab-set-1-tab-1

Fields

  • TITLE – a title for each tab.
  • CONTENT – content for each tab, can be text/image/anything.
  • [PRO] ICON (from Font Awesome Free icons) – an icon for each tab (see icon list).
  • [PRO] TAB TYPE – turn any tab into a link that will send your visitors to a specific URL (these tabs do not have content).

Settings

  • MAX. MOBILE WIDTH – When the window’s width goes below this number (i.e. on mobile devices), the tab set will switch to accordion mode.
  • COLOR – the color used to style the tabs (content border and button background).
  • INACTIVE TABS BACKGROUND – choose between transparent and light grey. By default, tab labels are transparent, which becomes unreadable on dark background websites, this feature can be used to fix this.
  • [PRO] TAB BORDERS – choose between sharp (classic) and rounded borders.
  • [PRO] TAB ARROWS – add an arrow below the currently selected tab.
  • [PRO] CONTAINER BACKGROUND – choose from two greys, white, transparent and “lighter than main color”.
  • [PRO] COMPACT MODE – this allows you to reduces the space inside your tabs’ labels, which can help make all your tabs fit in a single line.

Get more help

If you need more help, please submit a request, we’ll help you.

Related Articles