Tabs

Introduction

The Tabs Widget organizes content into interactive sections, allowing users to switch between them easily without clutter. It’s ideal for displaying organized information like product details or FAQs.

Note: Before using the Tabs Widget, ensure that you have the Animation Addons plugin installed and activated on your WordPress site.

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 a Button widget ?

To activate the Progress Bar widget, navigate to:
Animation Addons → Elements from your WordPress dashboard.
Then, find the Tabs Widget in the list of available widgets and toggle it on to enable the widget. Once enabled, click Save Settings to finalize the activation.

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 One Page Nav Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

In the Elementor Editor, click the ‘+’ icon to add a section. Search for the “Progress Bar”, then drag and drop it into the desired section of the page. Configure the widget settings under the available tabs to customize it as needed.

Here’s the interface where you can configure the settings and customize the Testimonial Widget across various tabs. 

Configuring Tabs Widget : A Step-by-Step Guide

Once the One Page Nav widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

You will find two options: Tabs and Settings.

Tabs 

• Choose a title you want to display, an icon, and a content type. Insert an image you like and want to describe, then provide the information in a paragraph.

• Similarly, customize the remaining sections, and you can add more tab titles using the “Add More” option. Make all necessary adjustments and apply the same changes to observe the difference.

• I have set the direction as before and the alignment to start. This suits my design, which is why I selected it.

Settings

• The icon should be placed consistently in one position to enhance the overall design, making it more visually appealing and cohesive. So, I have adjusted it according to my preference.

Style Settings

Now, it’s time to enhance your Tabs and Content by styling them.

• I have configured every step exactly as I wanted to achieve the desired look for my design, including background type, typography, border type, and padding.

Content

• I did not modify the content settings since my design does not require any changes to them.

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!