Services Tabs

Before setting up the Service Tabs widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Service Tabs widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Services Tabs widget displays services in a tabbed layout for easy navigation and better user experience.

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 the Service Tabs Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Service Tabs Widget from the list.
• Toggle the switch to enable it.
• That’s it! The Service Tabs Widget is now ready to use on your website.

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 Service Tabs Widget in Animation Addons

• In the Elementor panel, search for the “Service Tabs Widget.”
• Drag and drop the widget into the section where you want to display your services.
• Use the available options in the Elementor panel to customize the tabs, such as titles, icons, content, and layout to match your site’s style and service offerings.

Your Service Tabs Widget is now ready to use! Here’s the interface where you can configure the settings and customize each tab to showcase your services in a clean, organized, and interactive layout.

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

Under the Content section of the Service Tabs Widget, you’ll find several key configuration options to customize each tab effectively:

• Style: Choose between two available layout styles – Style One and Style Two – based on your design preference.
• Tabs Items:
  
  • Tab Number: Define the number of tabs you want to display.
  • Tab Title: Add a title for each tab to clearly represent the content.
  • Add Media: Insert rich content using either the Visual editor or Code view for advanced customization.

• Paragraph: Add descriptive text to provide context or details.
• Choose Image: Upload or select an image that complements your tab content.
• Link Option: Add a clickable link to direct users to more information or a specific page.

Once all your tabs are set up, make sure to adjust the image resolution to match your overall design theme for a polished and cohesive look.

Button

In the Button section of the Service Tabs Widget, you can fully personalize the appearance and behavior of your button to match your website’s style:

• Style Selection: Choose from 7 unique button styles to suit your design preference.
• Hover Effects: Select from 7 different hover styles to enhance interactivity.
• Text: Add your desired button label/text.
• Icon: You can either upload a custom icon or choose one from the icon library.

• Icon Position: Decide whether the icon appears before or after the text.
• Direction: Arrange the button layout in a horizontal (row) or vertical (column) orientation.
• Icon Spacing: Adjust the space between the icon and text for better visual balance.

These settings allow you to create a visually appealing and highly functional button that complements your service tabs seamlessly.

Settings

In the final part of the Content section, you’ll find the Settings panel, which allows you to manage how your Service Tabs display across different screen sizes.

You’ll have two Breakpoint categories available:

• Mobile Portrait: Targets screens below 767px, ensuring your content looks great on smaller mobile devices.
• Tablet Portrait: Targets screens up to 1024px, providing optimal layout for tablet users.

These settings help maintain a responsive and user-friendly experience across all devices by automatically adjusting the tab layout based on screen size.

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

• You can adjust the tab width according to these settings to ensure optimal display across different devices.

Image

• In the image section, you’ll find customization options such as margin, border type, and box shadow, allowing you to adjust the tab width as needed for a refined design.

Tab Title

Tab Number

• Function: This field likely auto-generates or displays the number of the tab in order (e.g., Tab 1, Tab 2).
• Customization: There might not be much to change here unless it’s manually editable depending on the widget you’re using.

Color

• Purpose: Changes the color of the tab number or title text.
• Options: Clicking the color box opens the color picker, allowing you to choose a solid color, gradient, or even set it to transparent.

Typography

• Purpose: Lets you customize the font styling for the tab number or title.
• Options: Includes font family, size, weight (boldness), transform (uppercase/lowercase), style (italic/normal), decoration (underline, etc.), line-height, and letter-spacing.

Space (Slider)

• Function: Adjusts the spacing (likely the gap between the tab number/title and the tab content or between tabs themselves).
• Customization: Use the slider or manually input a number in the box to the right.

Title

• Function: Input field where you enter the actual name/title of the tab (e.g., “Cleaning Services,” “Pricing,” etc.).
• Tabs: There are two states:
  
  • Normal: Controls how the title looks normally.
  • Hover/Active: Controls how the title looks when hovered over or currently selected.

Color (under Title state)

• Function: Customize the color of the tab title based on the state selected (Normal or Hover/Active).
• Interaction: Clicking opens the color picker for both text and background options.

Typography (under Title state)

• Purpose: Customize font details specifically for the title under Normal or Hover/Active state.
• Options: Font family, size, weight, style, spacing, etc.

Border Type

• Function: Lets you apply borders around the tab title.
• Options: Choices may include none, solid, dashed, dotted, double, or groove.

Padding

• Function: Adds spacing inside the tab title area (between the content and the border).
• Values: Editable fields for Top, Right, Bottom, and Left.

Margin

• Function: Adds spacing outside the tab title area (between this tab and surrounding elements).
• Values: Editable fields for Top, Right, Bottom, and Left.

Content

• Color:
  Adjust the text color, background color, and active tab color to match your brand’s palette and improve readability.
  
• Padding:
  Control the space inside each tab element, ensuring your content has enough breathing room and a clean layout.
  
• Typography:
  Customize font family, size, weight, line height, and letter spacing to maintain consistency with your site’s overall text style.
  
• Margin:
  Set the space outside the tab elements, allowing you to control the distance between tabs and other elements on the page.

These options provide complete flexibility to fine-tune the appearance of your tabs, ensuring they look polished and consistent with the rest of your design.

Button

Button Margin

• What it does: Adds space outside the button.
• Input Fields: You can set values for Top, Right, Bottom, and Left independently.
• Link Icon (🔗): Click to apply the same margin to all sides simultaneously.

Typography

• Purpose: Adjusts the font style of the button text.
• Options: Includes settings like font family, size, weight (boldness), style (italic/normal), decoration (underline), line height, and letter spacing.
• Open Settings: Click the pencil/edit icon to reveal these options.

Icon Size

• What it does: If your button includes an icon, this slider controls its size.
• Adjust: Use the slider or type the value manually in px (pixels).

State Tabs: Normal | Hover

• Normal Tab: Style your button in its default state.
• Hover Tab: Change how the button looks when the user hovers their mouse over it.

You can toggle between them to apply different settings for each state.

 Text Color

• Purpose: Changes the color of the text on the button.
• Color Picker: Click to choose a color. You can use solid colors, gradients, or even transparent options.

Background Type

• Purpose: Set the background color or gradient of the button.
• Options:
  
  • Classic: Solid color or image background.
  • Gradient: Smooth color transitions.
    
• Click the color panel to reveal the picker or image upload tool.

Border Type

• Purpose: Determines the type of border around the button.
• Options: Default, solid, dotted, dashed, double, groove, ridge, etc.

Border Radius

• What it does: Controls the roundness of the button corners.
• Values: You can set custom radius values for Top, Right, Bottom, and Left.
• Linked editing: Use the chain icon to keep all corners uniform.

Padding

• Purpose: Adds space inside the button (between the border and the text/icon).
• Input Fields: Customize padding for Top, Right, Bottom, and Left sides separately.

Box Shadow

• Purpose: Adds a shadow around the button for a lifted or 3D effect.
• Settings (when expanded): Control shadow color, blur, spread, position (horizontal/vertical), and more.
• Click the edit icon (✏️) to configure shadow properties.

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!