Tabs

In this article you will find the unique information about Tabs shortcode. If you want to learn about some more general issues like using a shortcode etc. See the list bellow or browse the general section.

Examples Of Use:

You can see a beautiful use of Tabs on our pre-made template: Banana.

Detailed shortcode description

Bellow you will find a table with all of the shortcodes features and fields. On the right you will find a description for each field/section. All of this settings are available in shortcodes popup, it will be displayed once you create a new shortcode or hit the edit (pencil icon) button.

GeneralDecor LineContentTab Button

Option	Description
Main Preset	Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More »
Tabs position	Select tabs position.
Active Item	Define which section should be opened by default.
Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Padding	It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Margin	It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Enter Animation	Enter Animation allow to specify an appear effect for shortcode. Learn More »
Custom Class	Add your custom class to the element. Mostly used for custom CSS/JS.

Option	Description
Decor Line	Check to enable deco line. Enabling it will display a line between tabs buttons and content.
Color	Choose default line color.
Active Color	Choose active tab line color.
Line Width	Choose line thickness.
Line Gap	Choose gap between line and tabs buttons.

Option	Description
Content – Typography	Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Content – Padding	It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »

Option	Description
Main Preset	Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More »
Typography	Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Padding	It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Title Color	If you want to change the title color after hover choose a different one from the color picker below.
Icon Color	If you want to change the icon color after hover choose a different one from the color picker below.
Hover – Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Hover Effect	Select background hover animation style: Fade: simple fade in effect; Slide In: slide background in from selected side; Expand: expand background from selected position.
Custom Offset	Define custom offset for expanded background size. Offset might be different dependent on the button size.
Hover – Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Custom Class	Add your custom class to the element. Mostly used for custom CSS/JS.
Margin	It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »