Services Tabs

Introduction

The Services Tabs widget allows you to display multiple service offerings in an organized, tabbed layout. It helps users navigate through your services easily, enhancing user experience and site interaction.

Key Use Cases for the Services Tabs Widget in Elementor:

• Use the Services Tabs widget to showcase different services in an organized, tabbed format. 
• Customize the design and content to enhance user experience and make it easier for visitors to explore your offerings.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate a Services Tabs widget ?

To activate the Progress Bar widget, navigate to:
Animation Addons → Elements from your WordPress dashboard.
Then, find the Services Tabs 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 “Services Tabs” .
4. Drag the Services Tabs widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Services Tabs 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.

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

Configuring Services Tabs Widget : A Step-by-Step Guide

Once the Services Tabs 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, Button and Settings.

Tab

• 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.

Settings

• I set the first option as a breakpoint to ensure the design adjusts properly across different screen sizes.

Style Settings

Now, it’s time to enhance your Tabs, Image, Tab Title, and content by styling them to match your design preferences and improve the overall user experience.

Tabs

• Adjust the tabs width to 27, or customize it according to your preference. 

Image

• Customize the image section by adjusting the image margin, border type, border width, border color, and adding a box shadow to enhance its appearance.

Tab Title

Adjust the tab title by setting the tab number, title text, and border type to match your design preferences. 

Content

Let’s work with the color, padding, and margin to fine-tune the design and ensure it aligns with your style and layout preferences.

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 Services 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!