Plain Tabs Example

  • Plain Example
  • Tab 1
  • Tab 2
  • Tab 3
Example of Skin 1 with minimum fields, just setting the tab name.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Icon Tabs Example

  • Icon Example
  • No Icon
  • Primary
  • Accent
Example of skin1 with adding icon.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Icons with Description

  • Iconwith description
  • No Iconbut description
  • Primarywith description
  • Accentwith description
This is tab 1 content
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Only Description Example

  • Descriptionextra details / text
  • Tab 1description 1
  • Tab 2description 2
  • Tab 3description 3
Example of skin 1 with adding a ‘desc’ field within the shortcode.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Rollover Color Example

  • Text Color Only
  • Custom
  • Primary
  • Accent
Example of Skin 1 with minimum fields, just setting the tab name.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Rollover Icon Example

  • Icon Color Only
  • No Icon
  • Primary
  • Accent
Example of skin1 with adding icon.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Content Container Padding Example

  • No Padding
  • Custom
  • Primary
  • Accent
There is no left & right padding within the content container.
50px padding from left and right for content.
This is tab 2 content..
This is tab 3 content..

Content Container Border Example

  • Only Top Border
  • Bottom Only
  • Custom
  • Full Border
Set individual content container border top, right, bottom and left.
This is tab 2 content with no icon..
Removing bottom border only.
Example of full border around the content container.

Individual Tab Colors

  • Text Color Only
  • Custom
  • Primary
  • Accent
Example of Skin 1 with minimum fields, just setting the tab name.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Active Top Line Colors

  • Icon Color Only
  • No Icon
  • Primary
  • Accent
Example of skin1 with adding icon.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Active Tab Colors

  • Text Color Only
  • Custom
  • Primary
  • Accent
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Content Container Color

  • CONTENT BG COLOR
  • No Icon
  • Primary
  • Accent
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.
  • TRANSPARENCY
  • No Icon
  • Content
  • Padding
Content Container border is set to 0. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tab 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tab 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ullamco laboris nisi ut aliquip ex ea commodo consequat.

Horizontal Tabs Skin 2

Buy Alona !
The only difference in Skin 2, is that it has a predefined border around all tabs. You can use all other options like Skin 1. We have many examples for Skin 1, just copy and paste the above examples and change variable skin=”1″ to skin=”2″. Few examples of Skin 2.

Plain Tabs Example

  • Plain Example
  • Tab 1
  • Tab 2
  • Tab 3
Example of Skin 2 with minimum fields, just setting the tab name.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Icon Tabs Example

  • Icon Example
  • No Icon
  • Primary
  • Accent
Example of skin 2 with adding icon.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Icons with Description

  • Iconwith description
  • No Iconbut description
  • Primarywith description
  • Accentwith description
This is tab 1 content
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Only Description Example

  • Descriptionextra details / text
  • Tab 1description 1
  • Tab 2description 2
  • Tab 3description 3
Example of skin 2 with adding a ‘desc’ field within the shortcode.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Rollover Color Example

  • Text Color Only
  • Custom
  • Primary
  • Accent
Example of Skin 2 with minimum fields, just setting the tab name.
This is tab 2 content..
This is tab 2 content..
This is tab 3 content..

Rollover Icon Example

  • Icon Color Only
  • No Icon
  • Primary
  • Accent
Example of skin 2 with adding icon.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Horizontal Tab Skin 3

Buy Alona !
This skin is slightly different with margins between tabs and round corners. All other options seen in skin 1 can be fully utilized. Copy Skin 1 example and change variable skin=”1″ to skin=”3″. Below are few examples.

Plain Tabs Example

  • Plain Example
  • Tab 1
  • Tab 2
  • Tab 3
Example of Skin 3 with minimum fields, just setting the tab name.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Icon Tabs Example

  • Icon Example
  • No Icon
  • Primary
  • Accent
Example of skin1 with adding icon.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Icons with Description

  • Icondescription 1
  • No Icondescription 2
  • Primarydescription 3
  • Accentdescription 4
This is tab 1 content
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Only Description Example

  • Descriptionextra details / text
  • Tab 1description 1
  • Tab 2description 2
  • Tab 3description 3
Example of skin 1 with adding a ‘desc’ field within the shortcode.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Rollover Color Example

  • Text Color Only
  • Custom
  • Primary
  • Accent
Example of Skin 1 with minimum fields, just setting the tab name.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Rollover Icon Example

  • Icon Color Only
  • No Icon
  • Primary
  • Accent
Example of skin1 with adding icon.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Content Container Padding Example

  • No Padding
  • Custom
  • Primary
  • Accent
There is no left & right padding within the content container.
50px padding from left and right for content.
This is tab 2 content..
This is tab 3 content..

Content Container Border Example

  • Top Border
  • Top, Bottom
  • Custom
  • Full Border
Set individual content container border top, right, bottom and left.
This is tab 2 content with no icon..
Removing bottom border only.
Example of full border around the content container.

Individual Tab Colors

  • Text Color Only
  • Custom
  • Primary
  • Accent
Example of Skin 1 with minimum fields, just setting the tab name.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Active Top Line Colors

  • Icon Color Only
  • No Icon
  • Primary
  • Accent
Example of skin1 with adding icon.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.

Active Tab Colors

  • Text Color Only
  • Custom
  • Primary
  • Accent
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is tab 1 content..
This is tab 2 content..
This is tab 3 content..

Content Container Color

  • CONTENT BG COLOR
  • No Icon
  • Primary
  • Accent
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is tab 2 content with no icon..
Setting icon color as primary color defined in theme settings.
Setting icon color as accent color defined in theme settings.
Scalable Multipurpose Theme Improve quality of your website by using its powerful features.