Get started with the Responsive Tabs plugin

Install the plugin

Please refer to this article for information about WordPress PRO plugin installation.

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.

Link to a specific tab

This is for PRO users only. You can create a link that will trigger a specific tab by adding its hash (#my-tab) to 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 data-tab=""

For example, if my inspector shows the following:

A link that opens this specific tab would be:

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

Fields

  • Title – a title for each tab.
  • Content – content for each tab, can be text/image/anything.

PRO fields

  • Icon (from font-awesome) – an icon for each tab (icon list right here).
  • Link-only tab - makes the current tab act as an external link (no content, it goes straight to a site).

Settings

  • Breakpoint – breakpoint in pixels (you decide when the tabs should shrink into a drop-down).
  • Color – the color used to style the tabs (content border and button background).

PRO settings

  • Container borders – choose between sharp (classic) and rounded borders.
  • Container background – choose from two greys, white, transparent and “lighter than main color”.
  • Button style – Choose between none and “arrow”.

Useful links

Have more questions? Submit a request

Comments