(NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information.)

The Tabs shortcode lets you set up boxes with different tabbed areas for your content.

You can have either horizontal or vertical tabs. Here's an example of each.

Horizontal Tabs

TAB 1 CONTENT: Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis. per tellus quis est gravida vitae massa lobortis bibendum, tempus aenean facilisis litora fringilla bibendum augue donec nulla, per conubia tincidunt ullamcorper nullam leo semper.
TAB 2 CONTENT: Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis. per tellus quis est gravida vitae massa lobortis bibendum, tempus aenean facilisis litora fringilla bibendum augue donec nulla, per conubia tincidunt ullamcorper nullam leo semper.
TAB 3 CONTENT: Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis. per tellus quis est gravida vitae massa lobortis bibendum, tempus aenean facilisis litora fringilla bibendum augue donec nulla, per conubia tincidunt ullamcorper nullam leo semper.

 

Vertical Tabs

TAB 1 CONTENT: Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis. per tellus quis est gravida vitae massa lobortis bibendum, tempus aenean facilisis litora fringilla bibendum augue donec nulla, per conubia tincidunt ullamcorper nullam leo semper.
TAB 2 CONTENT: Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis. per tellus quis est gravida vitae massa lobortis bibendum, tempus aenean facilisis litora fringilla bibendum augue donec nulla, per conubia tincidunt ullamcorper nullam leo semper.
TAB 3 CONTENT: Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis. per tellus quis est gravida vitae massa lobortis bibendum, tempus aenean facilisis litora fringilla bibendum augue donec nulla, per conubia tincidunt ullamcorper nullam leo semper.

 

This is a partial look at the settings.

tab-settings

 

This is a sample shortcode.

 

These are the properties:

  • layout = use one of these: horizontal, vertical
  • justified = yes, no
  • backgroundcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • inactivecolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • title = add a tab title here
  • It is possible to add text, lists and regular html within the tab content area, however it is known that jQuery-driven shortcodes will likely cause problems and will not function as expected so are best avoided.