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

Elementor Tabs Widget
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.
    • 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.
Elementor Template as a Content to Show in Tabs Widget for Elementor
Elementor Template as a Content to SHow in Elementor Tabs Widget
Text Editor as a Content to Show in Elementor Tabs Widget
Text Editor as a Content to Show in Elementor Tabs Widget

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
Tabs Widget Additional Settings in Tabs Widget for Elementor
Tabs Widget Additional Settings for Elementor Tabs Widget
Elementor Tabs Widget Arrow Pointer Horizontal Style
Elementor Tabs Widget Arrow Pointer Horizontal Style
Arrow Pointer Vertical Style in Tabs Widget for Elementor
Elementor Tabs Widget Arrow Pointer Vertical Style
Elementor Tabs Widget Circled Horizontal Style
Elementor Tabs Widget Circled Horizontal Style
Tabs Widget for Elementor Flipped Vertical Style
Elementor Tabs Widget Flipped Vertical Style
Elementor Tabs Widget Folded Horizontal Style
Elementor Tabs Widget Folded Horizontal Style
  • 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).
Elementor Tabs Widget Carousel Option
Elementor Tabs Widget Carousel Option

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.
Tabs Widget for Elementor Tabs Customization Options
Elementor Tabs Widget Tabs Customization Options

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.
Icon Customization Options for Elementor Tabs Widget
Icon Customization Options for Elementor Tabs Widget

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 %.
Tabs Title Styling Settings for Elementor Tabs Widget
Tabs Title Styling Settings for Elementor Tabs Widget

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 %.
Tabs Description Styling Settings for Elementor Tabs Widget
Tabs Description Styling Settings for Elementor Tabs Widget

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.
Container Customization Settings for Elementor Tabs Widget
Container Customization Settings for Elementor Tabs Widget

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.