Elementor Tabs Widget Tutorial

Intro

Premium Tabs Widget for Elementor Page Builder allows you to add any information you want in separate tabs. You can add as many tabs as you need. Tabs saves space on your webpage, and also encourage interactions from your visitors. Tabs content can be added directly using text editor, or you can use an existing Elementor template.

Click here to check Premium Tabs Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Elementor Tabs Widget

Key Features – Elementor Tabs Widget

• Tabs
• Additional Settings

1. Tabs

In the Tabs settings you can add new tabs by clicking on the Add item button. For each tab you can then:

• Enable Icon: Enable or disable the tab icon.
• Icon Type: Select the icon types that match your needs.
  • Icon: Select one of many Font Awesome icons.
  • Image: Use a custom image in the table header.
  • Lottie Animation: You can add any Lottie animation.
    • Animation JSON URL: Insert the JSON URL.
    • Loop: Enable it will make the animation run forever.
    • Reverse: Enable it will make the animation run backward.
• Title: Select a title that will be displayed at the top of the tab.
• Content to Show: Add content to the tab either by:
  • Selecting an existing Elementor template.
    • You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
    • You can also select an existing Elemntor templates.
  • Using a Rich Text Editor. You can choose between editing the content visually, or with text and code. You can also include media such as images from the WordPress media library.
• Custom Navigation Element Selector: Use this to add an element selector to be used to navigate to this tab. For example #tab-1. Please refer to this article for information about this option.
• Default Tab Index: Set to -1 if you don’t any tab to be active by default.

2. Additional Settings

• Tabs Type: Select between Horizontal and Vertical tabs.
• Tabs Layout: Select between auto and fixed width tabs.
• Tabs Style: Select the tabs style between 4 tabs styles:
  • Arrow Pointer
  • Circled
  • Flipped
  • Folded

• Carousel Tabs: Enable/disable showing Tabs panels in a carousel. You will be able to control the following option if the Carousel is enabled.
• Apply Carousel Tabs On: Enable or disable carousel tabs on desktop, tablet or mobile devices.
• Tabs To Show: Select how many tabs to show.
• Slides’ Spacing: Use this option to change carousel tabs width in pixels (px).

• Accordion On Small Screens: Enable this option to improve responsive behavior by changing the tabs layout to act as an accordtion.
• Apply Accrodion On: Enable or disable accordion tabs on tablet or mobile devices.
• Animation Duration:

Style

1. Tab

In this setting you can edit the styles of the normal, hover and active tabs by selecting the buttons at the top of the settings.

• Background Color: Select the background color for the tabs.
• Border Type:Select between the following border types, as well as the width of the border on each side of the tab:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border radius: Can be declared using pixels, % or em. The higher the number, the more circular corners. You can also select the border color from the color picker.
• Box Shadow: You can add a shadow around the tab with this option. Adjust the color and the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset
• Margin: Set the space between the tabs.
• Padding: Set the space between the tab title and the edge of the tab.
• The margin and padding can be declared using pixels, % or em. You can link the values together, or only change the value for one side of the tab.

2. Icon

• Color: The color of the icon in the tab.
• Hover Color: The color of the icon on mouse hover.
• Active Color: The color of the icon in the active tab.
• Size: Select the icon size.
• Border: Select the border type, color, size, and radius.
• Icon Shadow: Add a shadow behind the icon. You can choose the color, position and effect.
• Margin and Padding: Adjust the margin and padding in pixels, em or %. Margin is the space between the icon and the text and the container. Padding is the space between the icon and the border.

3. Title

• Color: Select the text color of the tab titles.
• Hover Color: Select the text color of the tab titles on mouse hover.
• Active Color: Select the text color of the title for the active tab.
• Typography: Adjust the font settings.
• Border Type: Select borde type, color, size, and radius.
• Shadow: Add a shadow behind the text. You can choose the color, position, and effect.
• Margin and padding: Adjust the margin and padding in pixels, em or %.

4. Description

In the Description section you can add styles for the tab content:

• Color: Select a text color for the tab description.
• Typography: Adjust the font settings.
• Background Color: Select a background color for the description.
• Border Type: Select borde type, color, and size.
• Border Radius: Select border-radius.
• Shadow: Add a shadow behind the text. You can choose the color, position, and effect.
• Box Shadow: Add a box shadow around the tab description. You can choose the color, position, and effect.
• Margin and Padding: Adjust the margin and padding in pixels, em or %.

5. Container

The container settings are applied to the container around the tabs and the tab content.

• Background Color: Select a background color for the container.
• Border Type: Select border type, color, and size.
• Border Radius: Select border-radius.
• Box Shadow: Add a shadow around the container.
• Margin and Padding: Adjust the margin and padding in pixels, em or %. -Margin is the space between the container and the rest of the page content. Padding is the space between the container edge and the tab.