Elementor Tabs Widget Documentation

Key Features of the Elementor Tabs Widget

• Customizable Tab Layout: Adjust the number of tabs, titles, and content displayed in a clean and structured manner.
• Multiple Tab Alignment: Control the alignment of tabs (left, center, or right) for a responsive, balanced look.
• Tab Positioning: Choose the position of the tabs—above or below the content.
• Tab Customization: Style the tab background, text, and hover effects with various options like gradient and solid color backgrounds.
• Content Styling: Customize the background, text color, and borders of the content area to match your website’s design.
• Responsive Design: Fully responsive, ensuring your tabs look great on any device.

What’s Needed?

To use the Elementor Tabs Widget, you need:

• Elementor Free Version: The basic version of the Elementor page builder.
• Vertex Addons for Elementor: This plugin includes the Tabs widget and other advanced features.

Install and Activate the Elementor Tabs Widget

To activate the Elementor Tabs Widget, follow the steps in our Widget Activation Guide.

How to Configure the Elementor Tabs Widget in Elementor

Once the widget is installed and activated, follow these steps to configure the Elementor Tabs Widget. You can customize the widget by adjusting settings in three main tabs: Content, Style, and Advanced.

Content Tab

In the Content tab, you will manage the tab items and their positioning.

1. Tabs:
   • Items: You can add, remove, or rearrange the tab items. Each item will have its title and associated content. Use the “Add Item” button to create a new tab. You can also drag and drop to reorder the tabs.
   • Title: Input the title for each tab. This is what will be displayed in the tab bar.
   • Content: Provide the content that will be displayed when a user clicks on each tab.
2. Tab Items:
   • Position: Decide whether to place the tabs above or below the content area.
   • Tabs Alignment: Choose the alignment of the tabs—left, center, or right—to match your page layout.
   • Spacing: Adjust the space between the tabs to ensure the content fits perfectly.

How to Style the Elementor Tabs Widget?

The Style tab allows you to adjust the appearance of the widget. Below are the main sections and styling options available.

Box Styling

1. Background Type: Select a background for the whole widget. You can choose between a Classic solid color or a Gradient background.
2. Margin: Adjust the space around the widget to control its positioning.
3. Padding: Customize the internal padding for a cleaner and more balanced design.
4. Border Type: Set a border style for the widget box (solid, dashed, dotted, etc.).
5. Border Radius: Round the corners of the widget container for a more modern look.
6. Box Shadow: Apply a shadow effect to give the widget a subtle depth and make it stand out.

Tab Bar Styling

1. Background Type: Choose the background for the tab bar. You can select a Classic or Gradient background.
2. Margin: Adjust the margin around the tab bar for better alignment with surrounding elements.
3. Padding: Set padding around the tab bar to ensure the tabs don’t feel crowded.
4. Border Type: Select a border style to define the edges of the tab bar.
5. Border Radius: Add rounded corners to the tab bar for a softer design.
6. Box Shadow: Add a shadow effect around the tab bar to create a sense of separation.

Tab Styling

Tabs have three distinct states: Normal, Hover, and Active. These options help you style the tabs according to their states.

1. Background Type: You can choose between Classic or Gradient for the background of the tabs in all states.
2. Padding: Adjust the padding inside the tabs to control the size of the clickable area.
3. Border Type: Define the border style for each tab in normal, hover, and active states.
4. Border Radius: Round the corners of the tabs for a modern, smooth look.
5. Box Shadow: Apply a shadow effect to the tabs for a more interactive appearance.

Tab Text Styling

Just like the tab background, the text inside the tabs can be styled for normal, hover, and active states.

1. Normal State:
   • Background Type: Choose between Classic or Gradient for the text background.
   • Text Color: Set the text color for the tab title.
   • Typography: Customize the font, size, weight, and style of the text.
   • Margin: Adjust the spacing around the tab text to position it better within the tab.
   • Padding: Control the internal padding of the text.
   • Border Type: Add a border around the text for a more defined look.
   • Border Radius: Round the corners of the tab text area for a softer appearance.
   • Box Shadow: Add a subtle shadow effect to make the tab text pop.
2. Hover and Active States:
   • Background Type: Choose a background style for the hover and active states (Classic or Gradient).
   • Text Color: Adjust the text color for when the tab is hovered or active.
   • Margin, Padding, Border Type, Border Radius: Customize these properties for the hover and active states, just as you did in the normal state.

Content Styling

1. Background Type: Select the background type for the content area of the tabs. You can opt for a Classic solid color or a Gradient background.
2. Text Color: Set the text color for the content inside the tabs.
3. Link Color: Customize the color of links inside the tab content.
4. Typography: Adjust the typography of the content text, such as the font, size, and weight.
5. Margin: Control the space around the content area for optimal positioning.
6. Padding: Adjust the padding inside the content area to make the content look well-spaced and structured.
7. Border Type: Choose a border style for the content area.
8. Border Radius: Round the corners of the content area to match the overall widget design.
9. Box Shadow: Add a shadow effect to the content area to separate it visually from the background.

Advanced Tab

The Advanced tab contains additional customization options that are common across all Vertex Addons widgets:

• Custom Margins and Padding: Further control the space around and within the widget.
• Z-Index: Adjust the stacking order of the widget, particularly useful if the widget overlaps with other elements.
• Custom CSS: Add custom CSS rules to personalize the widget’s appearance even more.
• Responsive Settings: Customize the visibility and appearance of the tabs on different devices (desktop, tablet, and mobile).

Final Outcome

After customizing your Elementor Tabs Widget, you will have a fully interactive and styled tabbed interface. Whether for displaying features, FAQs, or various sections of content, your tabs will be visually appealing and responsive, giving users an engaging experience on your site.