Tabs Widget

Create any number of tabs that will look great inside any sized column. On smaller screens the tabs buttons stack up and are easy to use. Further customization is possible with the use of icons for each tab.

DEMO


Admin Label : The name you add here will appear in the page builder under the widget name. This helps with easy identification of the contents of the widget.

ID : Should be unique on the page. Must begin with alphabets[A-Za-z]. Should not contain spaces. Does not appear on the front-end. For simplicity, you can give the id’s values such as tab-1, tab-2 etc. You can also give it a more meaningful id.

Note : This is useful to deeplink tabs. Suppose you have a tab with id  tabs then you can use a link your-url/#tabs-3 to open the third tab.


Tabs

This is a repeater field. You can add as many as you like.

Title : This will appear on the tab.

Open by deafult : Checking this option will keep the tab open when you page is loaded. This should only be selected for one of the tabs. It will apply to the first tab by default.

Icon : This will add an icon to the tab. This is an optional field.

Content : You can use the editor to add the tabs content.


Styling

Orientation : The tabs can be placed on top (Horizontal) or the left (Vertical).

Mobile View : Choose to display only icons or have full width tabs for mobile view.

Theme : You can choose from box, flat, underline, overline & minimal.

Icon Location : This defines the location of the icon.

Tab Background Color : The title background color.

Content Background Color : The content background color

Basic Color : The title color.

Highlight Color : The title color on hover and when the tab is open.