Tabs

Before setting up the Tabs Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Tabs Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Tabs Widget lets you display segmented content in interactive, easy-to-navigate sections.

Key Use Cases for the One Page Nav Widget in Elementor:

• Use the Tabs Widget to organize content into separate, easy-to-navigate sections within a page. 
• Customize the design and tab labels to provide a clear, interactive experience, allowing users to switch between different content seamlessly.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Tabs Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Tabs Widget in the list.
• Toggle it on to enable the widget.

Now, the Tabs Widget is ready to use!

How to Add the One Page Nav Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Tabs”.
4. Drag the Tabs widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Tabs Widget in Animation Addons

• In the Elementor panel, search for the “Tabs Widget.”
• Drag and drop the widget into the desired section.
• Customize the tab settings using the available options in the Elementor panel.

Your Tabs Widget is now ready to use! Here’s the interface where you can configure the settings and personalize the tabs for a clean and interactive user experience.

Configuring Tabs Widget in Animation Addons: A Step-by-Step Guide

The Tabs Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to personalize your tabs and optimize the layout for a seamless user experience.

Content Settings

You will find two options: Tabs and Settings.

Tabs Section (under the Content tab):

In the Tabs section, you’ll find the Tab Items subsection, which allows you to configure the content for each individual tab. The available settings include:

• Tab Title – Set a label for the tab.
• Icon – Choose an icon to visually represent the tab.
• Title – Add a title that appears inside the content area.
• Content Type – Select between two options:
  
  • Content – Use the built-in editor to create and display custom content.
  • Saved Templates – Insert a pre-designed Elementor template as the tab content.

When Content is selected, the following additional configuration options will appear:

• Add Media – Upload or insert images, videos, or custom code for enhanced visual presentation.
• Paragraph – Enter descriptive text or supporting content using the rich text editor.

These features allow you to structure your content in a clear, organized format—ideal for FAQs, service descriptions, or product details.

• Direction (Tab Content Placement):

The Direction setting allows you to define the placement of the tab content in relation to the tab labels. You can choose from the following options:

• Above – Displays the tab content above the tab labels.
• Below – Places the tab content beneath the tab labels (commonly used layout).
• Before – Positions the tab content to the left of the tab labels.
• After – Places the tab content to the right of the tab labels.

This feature helps you design the layout of your Tabs Widget to best match your page structure and visual preferences.

• Alignment – Controls the position of the tabs (Start, Center, End & Stretch).

This setting determines how the tabs are aligned within the widget’s container. You can choose from the following options:

• Start – Aligns all tab items to the left side (default for left-to-right languages).
• Center – Places the tab items in the center of the container, creating a balanced look.
• End – Aligns all tab items to the right side of the container.
• Stretch – Expands all tab items evenly to fill the entire width of the container, ensuring equal space between each tab.

This control is useful for adjusting the visual alignment of your tabs based on your design needs or layout preferences.

Settings (Under the Content Tab)

After configuring the Tabs section, you’ll move on to the Settings panel. This section offers additional customization options to fine-tune the appearance and behavior of your tabs. Here’s what you’ll find:

• Title Alignment
  Choose how your tab titles should align within the widget. Options include:
  
  • Left
  • Center
  • Right

This helps you match the tab alignment with your overall design layout.

• Icon Position
  Decide where the icon will appear in relation to the tab title. You can place it before or after the text for better visual hierarchy.
  
• Icon Gap
  Set the spacing between the icon and the title text. This ensures that your design remains clean and easy to read.
  
• Breakpoint
  Define how the tab layout behaves on different devices. The available breakpoints are:
  
  • Mobile Portrait (>767px) – Adjusts the layout specifically for mobile devices in portrait orientation.
  • Tablet Portrait (>1024px) – Optimizes the layout for tablets in portrait mode.

These settings provide responsive control and allow you to create a seamless viewing experience across various devices.

Style Settings

In the Content section under Style, you’ll find the following options:

Style

Background Type

Set the background of the tab items. You can choose between:

• Solid color
• Gradient
• Image background

Border Radius

Adjust the roundness of the tab corners. A higher radius results in more rounded edges, while a lower value gives a sharper, boxed look.

Gap Between Tabs

Control the space between each individual tab. Proper spacing improves readability and maintains a clean layout.

Distance from Content

Define the spacing between the tab headers and the content area. This ensures clear separation and visual balance between the navigation and its associated content.

Typography Subsection

Within this subsection, you can fine-tune how the text and icons inside the tabs appear:

🔸 Icon Size

Set the size of the icon used within the tab titles. Larger icons draw more attention, while smaller ones create a minimal look.

🔸 Text Color

Choose the color of the tab title text. This should complement your site’s color scheme while ensuring good readability.

🔸 Background Type

This controls the background of the text area or tab title, separate from the main background. It adds layering and contrast to the tab design.

Additional Styling Options

Border Type and Radius

Define the border style (solid, dashed, dotted, etc.) and radius to shape the outer frame of the tab content or tab titles. This helps reinforce structure in your design.

🔹 Padding

Adjust the inner spacing around the content inside each tab. Proper padding ensures that text and visuals do not appear cramped and enhances user experience.

These style options are designed to give you full control over the look and feel of your tabbed content, helping you create engaging, responsive, and brand-aligned sections on your Elementor-powered website.

Content

Background Type 

The Background Type setting in the Style tab allows users to customize the visual appearance of the content area within the Tabs widget. This option is essential for enhancing the overall design and user experience of your section.

Available Background Types:

1. Default: Keeps the default styling provided by your theme or Elementor.
2. None: Removes any background styling, resulting in a transparent background.
   Solid: Applies a single solid color as the background. You can choose any color using the color picker.
3. Double: Creates a double border effect around the content area, offering a more decorative look.
4. Dotted: Applies a dotted border around the content area for a stylized, subtle effect.
5. Dashed: Similar to dotted, but with dashed lines, giving a segmented appearance to the border.
6. Groove: Adds a 3D grooved border style, providing depth and visual interest.

Border Type

• Choose the style of border around the tab content.
• Options include None, Solid, Double, Dotted, Dashed, Groove, and more.

Border Radius

• Customize the curvature of the content box’s corners.
• You can enter different values for Top, Right, Bottom, and Left to create rounded or sharp corners.

Padding

• Controls the space inside the content box (between the content and the border).
• Set padding values individually for Top, Right, Bottom, and Left to manage spacing effectively.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Tabs widget in Elementor to create customizable, interactive tabbed content on your website.

For any further assistance or inquiries, feel free to contact our support team!