1. Home
  2. Docs
  3. Content Elements
  4. Tabs

Tabs EA Element

The Tabs element is a nice way to display multiple strings of content in a smart manner. It increases the readability where there is a very tiny space for any kind of important content. The Tabs Widget allows you to divide your content into tabs, either horizontally or vertically. Here in this tutorial, you’re going to learn how to use the Tabs element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Tabs Element

 

»Content

 

General Settings

⇒Layout: Set the layout of the tab content either horizontal or vertical.

⇒Enable Icon: Enable the Icon if you want to add an icon to the tab’s title.

⇒Icon Position: Set the icon position either stacked or inline.

 

Content Settings

⇒Set As Default: Choose which tab remains open when the page first load and set that particular item to be activated as default on the tabs.

⇒Icon Type: Set the icon type either icon or image. If you don’t like anything then select None.

⇒Icon: Select an icon from the list or search for your desired icon for the tab.

⇒Tab Title: Enter the title for each item

⇒Content-Type: Set the content type either as content or from the saved template.

⇒Tab Content: Enter the description for each item

⇒Add Item: Use the ‘+Add Item’ button to add more tabs to the list.


»Style

 

General Style

⇒Padding: Set the padding value for the top, right, bottom and left around the tabs for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the tabs for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the tabs for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the tabs’ border for both normal and hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the content for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Tab Style

⇒Typography: Set the typography options for the tab.

⇒Icon Size: Set the icon size for different dimensions.

⇒Icon Gap: Set the icon gap for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the tab for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the tab for different dimensions. You can link the values together or customize them individually.

⇒Tab Background Color: Customize the tab background color for Normal, Hover & Active view.

⇒Text Color: Customize the text color for Normal, Hover & Active view.

⇒Icon Color: Customize the icon color for Normal, Hover & Active view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the tab’s title for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the tab’s title for both normal and hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the title for different dimensions.

 

Content Style

⇒Background Color: Add a custom color to the tabs content background.

⇒Text Color: Add a custom color to the text of the content of the tabs.

⇒Typography: Set the typography options for the content.

⇒Padding: Set the padding value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the tab’s content for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the tab’s content for both normal and hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the content for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Caret Style

⇒Show Caret on Active Tab: Do you want to show the caret on the Active Tab? Then enable this option. Disable if you don’t want to show caret.

⇒Caret Size: Set the caret icon size in the active tab.

⇒Caret Color: Add a custom color to the caret icon in the normal mode.


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Tabs Element.


Was this article helpful to you? Yes No

How can we help?