Horizontal Tabs

[fullwidth top=”50″ bottom=”50″]

[column type=”one_half”]
[title]Plain Tabs Example[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”1″]
[tab title=”Plain Example”]
Example of Skin 1 with minimum fields, just setting the tab name.
[/tab]
[tab title=”Tab 1″]
This is tab 1 content..
[/tab]
[tab title=”Tab 2″]
This is tab 2 content..
[/tab]
[tab title=”Tab 3″]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Icon Tabs Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”1″]
[tab title=”Icon Example” icon=”fa-laptop”]
Example of skin1 with adding icon.
[/tab]
[tab title=”No Icon”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent”]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Icons with Description[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”1″]
[tab title=”Icon” icon=”fa-laptop” desc=”with description”]
This is tab 1 content
[/tab]
[tab title=”No Icon” desc=”but description”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” desc=”with description”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent” desc=”with description”]
Setting icon color as accent color defined in theme settings.
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Only Description Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”1″]
[tab title=”Description” desc=”extra details / text”]
Example of skin 1 with adding a ‘desc’ field within the shortcode.
[/tab]
[tab title=”Tab 1″ desc=”description 1″]
This is tab 1 content..
[/tab]
[tab title=”Tab 2″ desc=”description 2″]
This is tab 2 content..
[/tab]
[tab title=”Tab 3″ desc=”description 3″]
This is tab 3 content..
[/tab]
[/tabs]
[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Rollover Color Example[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”1″]
[tab title=”Text Color Only” textovercolor=”accent”]
Example of Skin 1 with minimum fields, just setting the tab name.
[/tab]
[tab title=”Custom” bgovercolor=”#2283c7″ textovercolor=”#ffffff”]
This is tab 1 content..
[/tab]
[tab title=”Primary” bgovercolor=”primary” textovercolor=”#ffffff”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgovercolor=”accent” textovercolor=”#ffffff”]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Rollover Icon Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”1″]
[tab title=”Icon Color Only” icon=”fa-laptop” iconovercolor=”accent” bgcolor=”#f9f9f9″]
Example of skin1 with adding icon.
[/tab]
[tab title=”No Icon” bgcolor=”#f9f9f9″ bgovercolor=”#2283c7″ textovercolor=”#ffffff”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#f9f9f9″ bgovercolor=”primary” textovercolor=”#ffffff”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent” iconovercolor=”primary” bgcolor=”#f9f9f9″ bgovercolor=”accent” textovercolor=”#ffffff”]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Content Container Padding Example[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”1″]
[tab title=”No Padding” textovercolor=”accent” contentpaddingleft=”no” contentpaddingright=”no” contentborderleft=”no” contentborderright=”no” contentborderbottom=”no”]
There is no left & right padding within the content container.
[/tab]
[tab title=”Custom” bgovercolor=”#2283c7″ textovercolor=”#ffffff” contentpaddingleft=”50px” contentpaddingright=”50px”]
50px padding from left and right for content.
[/tab]
[tab title=”Primary” bgovercolor=”primary” textovercolor=”#ffffff” contentpaddingleft=”no” contentpaddingright=”no” contentborderleft=”no” contentborderright=”no” contentborderbottom=”no”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgovercolor=”accent” textovercolor=”#ffffff” contentpaddingleft=”no” contentpaddingright=”no” contentborderleft=”no” contentborderright=”no” contentborderbottom=”no”]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Content Container Border Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”1″]
[tab title=”Only Top Border” icon=”fa-laptop” iconovercolor=”accent” bgcolor=”#f9f9f9″ contentborderleft=”no” contentborderright=”no” contentborderbottom=”no”]
Set individual content container border top, right, bottom and left.
[/tab]
[tab title=”Bottom Only” bgcolor=”#f9f9f9″ bgovercolor=”#2283c7″ textovercolor=”#ffffff” contentborderleft=”no” contentborderright=”no” contentbordertop=”no”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Custom” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#f9f9f9″ bgovercolor=”primary” textovercolor=”#ffffff” contentborderbottom=”no”]
Removing bottom border only.
[/tab]
[tab title=”Full Border” icon=”fa-flask” iconcolor=”accent” iconovercolor=”primary” bgcolor=”#f9f9f9″ bgovercolor=”accent” textovercolor=”#ffffff”]
Example of full border around the content container.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Individual Tab Colors[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”1″]
[tab title=”Text Color Only” textovercolor=”accent” bgcolor=”#f9f9f9″]
Example of Skin 1 with minimum fields, just setting the tab name.
[/tab]
[tab title=”Custom” bgcolor=”#efefef” bgovercolor=”#2283c7″ textovercolor=”#ffffff”]
This is tab 1 content..
[/tab]
[tab title=”Primary” bgcolor=”#e5e5e6″ bgovercolor=”primary” textovercolor=”#ffffff”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgcolor=”#d6d5d6″ bgovercolor=”accent” textovercolor=”#ffffff”]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Active Top Line Colors[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”1″]
[tab title=”Icon Color Only” icon=”fa-laptop” iconovercolor=”accent” textcolor=”#ffffff” bgcolor=”#497b92″ activetopcolor=”#497b92″]
Example of skin1 with adding icon.
[/tab]
[tab title=”No Icon” bgcolor=”#b3b432″ bgovercolor=”#2283c7″ textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#b3b432″]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#eb7f24″ bgovercolor=”primary” textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#eb7f24″]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”#961a1f” iconovercolor=”#ffffff” bgcolor=”#cc4831″ bgovercolor=”#993223″ textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#cc4831″]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Active Tab Colors[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”1″]
[tab title=”Text Color Only” textovercolor=”accent” bgcolor=”#f9f9f9″ activetextcolor=”#ffffff” activebgcolor=”accent” activetopcolor=”primary”]
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]
[tab title=”Custom” bgcolor=”#efefef” bgovercolor=”#2283c7″ textovercolor=”#ffffff” activetextcolor=”#ffffff” activebgcolor=”#225ec8″ activetopcolor=”accent”]
This is tab 1 content..
[/tab]
[tab title=”Primary” bgcolor=”#e5e5e6″ bgovercolor=”primary” textovercolor=”#ffffff” activetextcolor=”#ffffff” activebgcolor=”accent” activetopcolor=”accent”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgcolor=”#d6d5d6″ bgovercolor=”accent” textovercolor=”#ffffff” activetextcolor=”#ffffff” activebgcolor=”primary” activetopcolor=”primary”]
This is tab 3 content..
[/tab]

[/tabs]

[/column]

[column type=”one_half” last=”1″]
[title]Content Container Color[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”1″]
[tab title=”CONTENT BG COLOR” icon=”fa-laptop” iconovercolor=”accent” textcolor=”#ffffff” bgcolor=”#497b92″ activetopcolor=”#497b92″ activebgcolor=”#497b92″ activetextcolor=”#FFFFFF” activecontentbgcolor=”#497b92″ activecontenttextcolor=”#8ac8e5″]
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]
[tab title=”No Icon” bgcolor=”#b3b432″ bgovercolor=”#60611d” textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#b3b432″ activebgcolor=”#b3b432″ activetextcolor=”#FFFFFF” activecontentbgcolor=”#b3b432″ activecontenttextcolor=”#ffffff”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#eb7f24″ bgovercolor=”primary” textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”accent” activebgcolor=”primary” activeiconcolor=”#b3b432″ activetextcolor=”#b3b432″ activecontentbgcolor=”primary” activecontenttextcolor=”#ffffff”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”#961a1f” iconovercolor=”#ffffff” bgcolor=”#cc4831″ bgovercolor=”#993223″ textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#cc4831″]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[/fullwidth]
[separator marginTop=”30″]
[fullwidth bgimage=”http://globalmusiclink.com/website/wp-content/uploads/2016/02/bg_polygon_black.jpg” bgpattern=”” top=”70″ bottom=”70″ bgcolor=”#000″ bgtransparency=”40″]

[tabs style=”1″ skin=”1″ transparency=”60″ contentborder=”no”]
[tab title=”TRANSPARENCY” icon=”fa-laptop” iconovercolor=”accent” textcolor=”#ffffff” bgcolor=”#000000″ activetopcolor=”#efefef” activebgcolor=”#000000″ activetextcolor=”#FFFFFF” activecontentbgcolor=”#000000″ activecontenttextcolor=”#efefef”]
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]
[tab title=”No Icon” bgcolor=”#b3b432″ bgovercolor=”#60611d” textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#b3b432″ activebgcolor=”#b3b432″ activetextcolor=”#FFFFFF” activecontentbgcolor=”#b3b432″ activecontenttextcolor=”#ffffff”]
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]
[tab title=”Content” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#eb7f24″ bgovercolor=”primary” textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”accent” activebgcolor=”primary” activeiconcolor=”#b3b432″ activetextcolor=”#b3b432″ activecontentbgcolor=”primary” activecontenttextcolor=”#ffffff”]
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]
[tab title=”Padding” icon=”fa-flask” activebgcolor=”#ffffff” iconcolor=”#961a1f” iconovercolor=”#ffffff” bgcolor=”#cc4831″ bgovercolor=”#993223″ textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#cc4831″ activecontenttextcolor=”#efefef” contentpaddingleft=”no” contentpaddingright=”no”]
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.
[/tab]
[/tabs]

[/fullwidth]

[fullwidth]

[separator marginTop=”70″]

[fancybox title=”Horizontal Tabs Skin 2″ shadow=”2″ line=”left” button=”Buy Alona !” bggradstart=”#fafafa” bggradend=”#FFFFFF”]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.[/fancybox]

[separator marginTop=”50″]

[column type=”one_half”]
[title]Plain Tabs Example[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”2″]
[tab title=”Plain Example” activebgcolor=”#f8f8f8″ activecontentbgcolor=”#f8f8f8″]
Example of Skin 2 with minimum fields, just setting the tab name.
[/tab]
[tab title=”Tab 1″ activebgcolor=”#f8f8f8″ activecontentbgcolor=”#f8f8f8″]
This is tab 1 content..
[/tab]
[tab title=”Tab 2″ activebgcolor=”#f8f8f8″ activecontentbgcolor=”#f8f8f8″]
This is tab 2 content..
[/tab]
[tab title=”Tab 3″ activebgcolor=”#f8f8f8″ activecontentbgcolor=”#f8f8f8″]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Icon Tabs Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”2″]
[tab title=”Icon Example” icon=”fa-laptop” bgcolor=”#f8f8f8″ activebgcolor=”#FFFFFF” activecontentbgcolor=”#FFFFFF”]
Example of skin 2 with adding icon.
[/tab]
[tab title=”No Icon” bgcolor=”#f8f8f8″ activebgcolor=”#FFFFFF” activecontentbgcolor=”#FFFFFF”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” bgcolor=”#f8f8f8″ activebgcolor=”#FFFFFF” activecontentbgcolor=”#FFFFFF”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent” bgcolor=”#f8f8f8″ activebgcolor=”#FFFFFF” activecontentbgcolor=”#FFFFFF”]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Icons with Description[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”2″]
[tab title=”Icon” icon=”fa-laptop” desc=”with description” bgcolor=”#f8f8f8″ activebgcolor=”#FFFFFF” activecontentbgcolor=”#FFFFFF”]
This is tab 1 content
[/tab]
[tab title=”No Icon” desc=”but description” bgcolor=”#f8f8f8″ activebgcolor=”#FFFFFF” activecontentbgcolor=”#FFFFFF”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” desc=”with description” bgcolor=”#f8f8f8″ activebgcolor=”#FFFFFF” activecontentbgcolor=”#FFFFFF”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent” desc=”with description” bgcolor=”#f8f8f8″ activebgcolor=”#FFFFFF” activecontentbgcolor=”#FFFFFF”]
Setting icon color as accent color defined in theme settings.
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Only Description Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”2″]
[tab title=”Description” desc=”extra details / text” activebgcolor=”#f8f8f8″ activecontentbgcolor=”#f8f8f8″]
Example of skin 2 with adding a ‘desc’ field within the shortcode.
[/tab]
[tab title=”Tab 1″ desc=”description 1″ activebgcolor=”#f8f8f8″ activecontentbgcolor=”#f8f8f8″]
This is tab 1 content..
[/tab]
[tab title=”Tab 2″ desc=”description 2″ activebgcolor=”#f8f8f8″ activecontentbgcolor=”#f8f8f8″]
This is tab 2 content..
[/tab]
[tab title=”Tab 3″ desc=”description 3″ activebgcolor=”#f8f8f8″ activecontentbgcolor=”#f8f8f8″]
This is tab 3 content..
[/tab]
[/tabs]
[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Rollover Color Example[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”2″]
[tab title=”Text Color Only” textovercolor=”accent”]
Example of Skin 2 with minimum fields, just setting the tab name.
[/tab]
[tab title=”Custom” bgovercolor=”#2283c7″ textovercolor=”#ffffff”]
This is tab 2 content..
[/tab]
[tab title=”Primary” bgovercolor=”primary” textovercolor=”#ffffff”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgovercolor=”accent” textovercolor=”#ffffff”]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Rollover Icon Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”2″]
[tab title=”Icon Color Only” icon=”fa-laptop” iconovercolor=”accent” bgcolor=”#f9f9f9″]
Example of skin 2 with adding icon.
[/tab]
[tab title=”No Icon” bgcolor=”#f9f9f9″ bgovercolor=”#2283c7″ textovercolor=”#ffffff”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#f9f9f9″ bgovercolor=”primary” textovercolor=”#ffffff”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent” iconovercolor=”primary” bgcolor=”#f9f9f9″ bgovercolor=”accent” textovercolor=”#ffffff”]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″]

[fancybox title=”Horizontal Tab Skin 3″ shadow=”2″ line=”left” button=”Buy Alona !” bggradstart=”#fafafa” bggradend=”#FFFFFF”]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.[/fancybox]

[separator marginTop=”50″]

[column type=”one_half”]
[title]Plain Tabs Example[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”3″]
[tab title=”Plain Example”]
Example of Skin 3 with minimum fields, just setting the tab name.
[/tab]
[tab title=”Tab 1″]
This is tab 1 content..
[/tab]
[tab title=”Tab 2″]
This is tab 2 content..
[/tab]
[tab title=”Tab 3″]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Icon Tabs Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”3″]
[tab title=”Icon Example” icon=”fa-laptop”]
Example of skin1 with adding icon.
[/tab]
[tab title=”No Icon”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent”]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Icons with Description[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”3″]
[tab title=”Icon” icon=”fa-laptop” desc=”description 1″]
This is tab 1 content
[/tab]
[tab title=”No Icon” desc=”description 2″]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” desc=”description 3″]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent” desc=”description 4″]
Setting icon color as accent color defined in theme settings.
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Only Description Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”3″]
[tab title=”Description” desc=”extra details / text”]
Example of skin 1 with adding a ‘desc’ field within the shortcode.
[/tab]
[tab title=”Tab 1″ desc=”description 1″]
This is tab 1 content..
[/tab]
[tab title=”Tab 2″ desc=”description 2″]
This is tab 2 content..
[/tab]
[tab title=”Tab 3″ desc=”description 3″]
This is tab 3 content..
[/tab]
[/tabs]
[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Rollover Color Example[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”3″]
[tab title=”Text Color Only” textovercolor=”accent”]
Example of Skin 1 with minimum fields, just setting the tab name.
[/tab]
[tab title=”Custom” bgovercolor=”#2283c7″ textovercolor=”#ffffff”]
This is tab 1 content..
[/tab]
[tab title=”Primary” bgovercolor=”primary” textovercolor=”#ffffff”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgovercolor=”accent” textovercolor=”#ffffff”]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Rollover Icon Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”3″]
[tab title=”Icon Color Only” icon=”fa-laptop” iconovercolor=”accent” bgcolor=”#f9f9f9″]
Example of skin1 with adding icon.
[/tab]
[tab title=”No Icon” bgcolor=”#f9f9f9″ bgovercolor=”#2283c7″ textovercolor=”#ffffff”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#f9f9f9″ bgovercolor=”primary” textovercolor=”#ffffff”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”accent” iconovercolor=”primary” bgcolor=”#f9f9f9″ bgovercolor=”accent” textovercolor=”#ffffff”]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Content Container Padding Example[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”3″]
[tab title=”No Padding” textovercolor=”accent” contentpaddingleft=”no” contentpaddingright=”no” contentborderleft=”no” contentborderright=”no” contentborderbottom=”no”]
There is no left & right padding within the content container.
[/tab]
[tab title=”Custom” bgovercolor=”#2283c7″ textovercolor=”#ffffff” contentpaddingleft=”50px” contentpaddingright=”50px”]
50px padding from left and right for content.
[/tab]
[tab title=”Primary” bgovercolor=”primary” textovercolor=”#ffffff” contentpaddingleft=”no” contentpaddingright=”no” contentborderleft=”no” contentborderright=”no” contentborderbottom=”no”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgovercolor=”accent” textovercolor=”#ffffff” contentpaddingleft=”no” contentpaddingright=”no” contentborderleft=”no” contentborderright=”no” contentborderbottom=”no”]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Content Container Border Example[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”3″]
[tab title=”Top Border” icon=”fa-laptop” iconovercolor=”accent” bgcolor=”#f9f9f9″ contentborderleft=”no” contentborderright=”no” contentborderbottom=”no”]
Set individual content container border top, right, bottom and left.
[/tab]
[tab title=”Top, Bottom” bgcolor=”#f9f9f9″ bgovercolor=”#2283c7″ textovercolor=”#ffffff” contentborderleft=”no” contentborderright=”no”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Custom” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#f9f9f9″ bgovercolor=”primary” textovercolor=”#ffffff” contentborderbottom=”no”]
Removing bottom border only.
[/tab]
[tab title=”Full Border” icon=”fa-flask” iconcolor=”accent” iconovercolor=”primary” bgcolor=”#f9f9f9″ bgovercolor=”accent” textovercolor=”#ffffff”]
Example of full border around the content container.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Individual Tab Colors[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”3″]
[tab title=”Text Color Only” textovercolor=”accent” bgcolor=”#f9f9f9″]
Example of Skin 1 with minimum fields, just setting the tab name.
[/tab]
[tab title=”Custom” bgcolor=”#efefef” bgovercolor=”#2283c7″ textovercolor=”#ffffff”]
This is tab 1 content..
[/tab]
[tab title=”Primary” bgcolor=”#e5e5e6″ bgovercolor=”primary” textovercolor=”#ffffff”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgcolor=”#d6d5d6″ bgovercolor=”accent” textovercolor=”#ffffff”]
This is tab 3 content..
[/tab]

[/tabs]
[/column]

[column type=”one_half” last=”1″]
[title]Active Top Line Colors[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”3″]
[tab title=”Icon Color Only” icon=”fa-laptop” iconovercolor=”accent” textcolor=”#ffffff” bgcolor=”#497b92″ activetopcolor=”#497b92″]
Example of skin1 with adding icon.
[/tab]
[tab title=”No Icon” bgcolor=”#b3b432″ bgovercolor=”#2283c7″ textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#b3b432″]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#eb7f24″ bgovercolor=”primary” textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#eb7f24″]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”#961a1f” iconovercolor=”#ffffff” bgcolor=”#cc4831″ bgovercolor=”#993223″ textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#cc4831″]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[separator marginTop=”40″ marginBottom=”40″ style=”2″]

[column type=”one_half”]
[title]Active Tab Colors[/title]
[separator marginTop=”20″]

[tabs style=”1″ skin=”3″]
[tab title=”Text Color Only” textovercolor=”accent” bgcolor=”#f9f9f9″ activetextcolor=”#ffffff” activebgcolor=”accent” activetopcolor=”primary”]
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]
[tab title=”Custom” bgcolor=”#efefef” bgovercolor=”#2283c7″ textovercolor=”#ffffff” activetextcolor=”#ffffff” activebgcolor=”#225ec8″ activetopcolor=”accent”]
This is tab 1 content..
[/tab]
[tab title=”Primary” bgcolor=”#e5e5e6″ bgovercolor=”primary” textovercolor=”#ffffff” activetextcolor=”#ffffff” activebgcolor=”accent” activetopcolor=”accent”]
This is tab 2 content..
[/tab]
[tab title=”Accent” bgcolor=”#d6d5d6″ bgovercolor=”accent” textovercolor=”#ffffff” activetextcolor=”#ffffff” activebgcolor=”primary” activetopcolor=”primary”]
This is tab 3 content..
[/tab]

[/tabs]

[/column]

[column type=”one_half” last=”1″]
[title]Content Container Color[/title]
[separator marginTop=”20″]
[tabs style=”1″ skin=”3″]
[tab title=”CONTENT BG COLOR” icon=”fa-laptop” iconovercolor=”accent” textcolor=”#ffffff” bgcolor=”#497b92″ activetopcolor=”#497b92″ activebgcolor=”#497b92″ activetextcolor=”#FFFFFF” activecontentbgcolor=”#497b92″ activecontenttextcolor=”#8ac8e5″]
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]
[tab title=”No Icon” bgcolor=”#b3b432″ bgovercolor=”#60611d” textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#b3b432″ activebgcolor=”#b3b432″ activetextcolor=”#FFFFFF” activecontentbgcolor=”#b3b432″ activecontenttextcolor=”#ffffff”]
This is tab 2 content with no icon..
[/tab]
[tab title=”Primary” icon=”fa-cog” iconcolor=”primary” iconovercolor=”accent” bgcolor=”#eb7f24″ bgovercolor=”primary” textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”accent” activebgcolor=”primary” activeiconcolor=”#b3b432″ activetextcolor=”#b3b432″ activecontentbgcolor=”primary” activecontenttextcolor=”#ffffff”]
Setting icon color as primary color defined in theme settings.
[/tab]
[tab title=”Accent” icon=”fa-flask” iconcolor=”#961a1f” iconovercolor=”#ffffff” bgcolor=”#cc4831″ bgovercolor=”#993223″ textcolor=”#ffffff” textovercolor=”#ffffff” activetopcolor=”#cc4831″]
Setting icon color as accent color defined in theme settings.
[/tab]
[/tabs]

[/column]

[/fullwidth]
[separator marginTop=”40″]

[raindrops bgcolor=”#ffffff” flip=”1″]
[fullwidth top=”82″ bottom=”65″ scrolltype=”scroll” bgpattern=”7″ bgcolor=”accent” bgtransparency=”65″ bgimage=”http://globalmusiclink.com/website/wp-content/uploads/2016/02/picjumbo.com_HNCK56ff44.jpg”]
[column type=”three_fourth”]
[separator marginTop=”5″]
[text google_font=”” fontfamily=”Raleway” fontweight=”300″ textshadow=”” fontsize=”32″ lineheight=”38″ color=”#fff”]Scalable Multipurpose Theme[/text]
[text google_font=”” fontfamily=”Raleway” fontweight=”” textshadow=”” fontsize=”22″ lineheight=”32″ color=”#fff”]Improve quality of your website by using its powerful features.[/text]
[/column]
[column type=”one_fourth” last=”1″ align=”right”]
[separator margintop=”13″]
[button link=”#” size=”xlarge” shape=”round” hovereffect=”bounce-to-right” bgcolor=”” bgovercolor=”#fff” bgtransparency=”30″ bordertransparency=”80″ textcolor=”#FFFFFF” textovercolor=”#FFFFFF” textshadow=”” fontweight=”300″ fontfamily=”Raleway” border=”2″ bordercolor=”#fff” borderovercolor=”” bggradstart=”” bggradend=”” icon=”” iconposition=”” target=”_blank”]Explore Features[/button]
[/column]
[/fullwidth]