---
title: "Animated Service Boxes Widget: Settings Overview"
url: https://theplusaddons.com/docs/animated-service-boxes-widget-settings-overview/
date: 2024-05-28
modified: 2026-04-09
author: "Aditya Sharma"
description: "With the Animated Service Boxes widget from The Plus Addons for Elementor, you can add different types of animated content sections like image accordion, service box, portfolio section, info banner..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/Animated-Service-Boxes-Widget_-Settings-Overview-1024x536.jpg
word_count: 1026
---

# Animated Service Boxes Widget: Settings Overview

## Key Takeaways

- Animated Service Boxes widget from The Plus Addons for Elementor allows users to create image accordions, sliding boxes, article boxes, info banners, and more.
- The widget requires the PRO version of The Plus Addons for Elementor and the Elementor FREE Plugin to be installed and activated.
- Users can select from eight service box types including Fancy Box and Portfolio when adding the Animated Service Boxes widget to a page.
- The widget offers styling options for title, subtitle, description, icon, and button, allowing customization of typography, color, and other styles.

With the Animated Service Boxes widget from The Plus Addons for Elementor, you can add different types of animated content sections like image accordion, service box, portfolio section, info banner and more.

### Check the Live Widget Demo

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/)

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Animated Service Boxes widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Animated Service Boxes and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=EZDOPlaO_2Y

## How to Activate the Animated Service Boxes Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/05/animated-service-boxes-1.png)

## Key Features

- **Image Accordion **- You can easily [create an image accordion (vertical and horizontal).](https://theplusaddons.com/docs//create-an-image-accordion-in-elementor/)

- **Sliding Boxes **- You can [create a sliding box effect](https://theplusaddons.com/docs//create-sliding-box-effect-in-elementor/).

- **Article Box** - You can[ create an article box (like a post)](https://theplusaddons.com/docs//add-an-article-box-in-elementor/).

- **Info Banner** - You can easily [create an info banner](https://theplusaddons.com/docs//add-an-info-banner-in-elementor/).

- **Hover Section** - You can easily [change the background image on hover](https://theplusaddons.com/docs//change-background-image-on-hover-in-elementor/).

- **Fancy Box** - You can add a fancy box to show content.

- **Service Elements** - You can [easily add an animated service box](https://theplusaddons.com/docs//create-an-expandable-service-box-in-elementor/).

- **Portfolio** - You can [add unique portfolio sections](https://theplusaddons.com/docs//create-a-unique-portfolio-section-in-elementor/).

## How to Use the Animated Service Boxes in Elementor?

Add the Animated Service Boxes widget to a page.

### Animated Service Boxes 

From the **Main Style** dropdown, you can select the service box type. Here you’ll find eight options - 

- **Image Accordion **- With this option, you can create an image accordion.

- **Sliding Box **- With this option, you can create a sliding box effect.

- **Article Box** - With this option, you can create an article box.

- **Info Banner** - With this option, you can create an info banner.

- **Hover Section** - With this option, you can change the background image on hover.

- **Fancy Box** - With this option, you can add a fancy box to show content.

- **Service Elements** - With this option, you can add an animated service box.

- **Portfolio** - With this option, you can add unique portfolio sections.

You’ll see different options based on your selection, let’s select Fancy Box here.

From the **Style** dropdown, you can select a style.

Then from the **Image Resolution** dropdown, you can select the image size.

By enabling the **Button** toggle you can add a button to the service box.

When enabled you can select a button style from the **Button Style** dropdown.

Then in the **Animated Service Boxes** section, you have to add the content for the service box. By default, you’ll find three items, open one item.

In the **Title** field, you can add the service box title.

From the **Select Icon** dropdown, you can select the image type for the service box. Here you’ll find four options - 

- **None** - This will not add any image to the service box.

- **Icon** – With this option, you can add an icon to the service box.

- **Image** - With this option, you can add an image to the service box.

- **Lottie** – With this option, you can [add a Lottie file to the service box](https://theplusaddons.com/docs//lottiefiles-animation-with-the-animated-service-box-in-elementor/). 

In the **Sub Title** field, you can add a subtitle to the service box.

You can add a description to the service box in the **Description** field.

From the **Featured Image** section, you can add a background image to the service box.

In the **Button Text** field, you can add the button text of the service box. 

Then in the **Button Link** field, you can add a link to the button.

> *Note: Make sure the Button toggle is enabled to make the Button Text and Button Link fields work.*

Following this process you can edit the other service box items.

You can click on the **+Add Item** button to add more service box items.

### Layout

From here, you can add custom [CSS Transform](https://www.w3schools.com/cssref/css3_pr_transform.php) to the service box for normal and hover states.

![](https://theplusaddons.com/wp-content/uploads/2024/05/animated-service-boxes-layout.png)

### Columns Manage

From here, you can manage the number of service boxes in a row for desktop, tablet and mobile separately.

![](https://theplusaddons.com/wp-content/uploads/2024/05/animated-service-boxes-columns-manage.png)

From the **Columns Gap/Space Between** section, you can manage the gap between the items.

## How to Style the Animated Service Boxes Widget?

To style the Animated Service Boxes, you’ll find all the options in the Style tab.

> *Note: You’ll find different styling options for different types of service boxes.*

**Title** - From here, you can manage the service box title typography, color, text shadow and other styles. You can also change the title HTML tag as well from here.

![](https://theplusaddons.com/wp-content/uploads/2024/05/animated-service-boxes-style.png)

**Sub Title** - From here, you can manage the service box sub title typography, color and HTML tag.

**Description** - From here, you can manage the service box description text style.

**Icon** - You’ll see this option only when the Image/Icon toggle is enabled from the Content tab. From here, you can manage the service box icon style.

**Lottie** - From here, you can manage the Lottie file style.

**Listing** - You’ll see this tab when the Services Elements is selected. From here, you can style the service box listing typography, color and margin.

**Button** - You’ll see this option only when the Button toggle is enabled from the Content tab. From here, you can manage the service box button style.

**Content Background** - From here, you can manage the service box content area padding, border radius and hover overlay background.

**Outer Content** - You’ll see this tab when the Article Box is selected. From here, you can style the service box border, box shadow etc.

**Content Background Back** - You’ll see this tab when the Info Banner is selected. From here, you can manage the back of the content background overlay color, and background.

**On Scroll View Animation** -  This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport. You can learn more about this from here.

[Learn more about On Scroll View Animation](https://theplusaddons.com/docs//on-scroll-view-animation/)

Advanced options remain common for all our widgets, you can explore all its options from here.

[View Advanced Tab Tutorial](https://docs.posimyth.com/tpae/advanced-tab/?_gl=1*1ddxxa0*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjQ1OTY0My40MzcuMS4xNzE2NDU5NzMyLjYwLjAuMA..)

## Frequently Asked Questions

**Q: What do most people get wrong when using the Animated Service Boxes widget?**
A: Many users overlook the necessity to activate the Animated Service Boxes widget after installing The Plus Addons for Elementor. This step is crucial; without activation, the widget won't appear in Elementor. To activate it, navigate to The Plus Addons u2192 Widgets, search for Animated Service Boxes, and turn on the toggle.

**Q: Can I use the Animated Service Boxes widget for an info banner?**
A: Yes, the Animated Service Boxes widget from The Plus Addons for Elementor allows you to create an info banner. This feature is part of the widget's key capabilities, which also include options like image accordion and sliding boxes. This versatility makes it suitable for various content presentation styles.

**Q: What settings work best for styling the Animated Service Boxes?**
A: When styling the Animated Service Boxes, focus on the Title, Sub Title, and Description sections to manage typography and colors effectively. Each type of service box offers unique styling options, so itu2019s essential to select the appropriate type first. This ensures you can leverage all available styling features, enhancing the visual appeal of your service boxes.

**Q: Does the Animated Service Boxes widget support Lottie files?**
A: Yes, the Animated Service Boxes widget supports adding Lottie files as an image option. This feature allows for dynamic animations within your service boxes, enhancing user engagement. To use this, select the Lottie option from the Select Icon dropdown while adding content to your service box.

**Q: Are there any limitations with the Animated Service Boxes widget?**
A: One limitation of the Animated Service Boxes widget is that it requires the PRO version of The Plus Addons for Elementor. Users with only the free version will not have access to this widget. Additionally, it is specifically designed to work only with Elementor, excluding other page builders.

**Q: How can I manage the layout of service boxes for different devices?**
A: The Animated Service Boxes widget allows you to manage the number of service boxes displayed in a row separately for desktop, tablet, and mobile. This feature is beneficial for optimizing the presentation on various devices, ensuring a responsive design. Adjusting these settings can significantly enhance user experience across platforms.