---
title: "How to Create an Expandable Service Box in Elementor?"
url: https://theplusaddons.com/docs/create-an-expandable-service-box-in-elementor/
date: 2024-05-29
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to add expandable service boxes to showcase some information? Expandable service boxes are a great way to showcase multiple services or products in a compact and organized..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-an-Expandable-Service-Box-in-Elementor_-1024x536.jpg
word_count: 421
---

# How to Create an Expandable Service Box in Elementor?

## Key Takeaways

- Animated Service Boxes widget from The Plus Addons for Elementor allows users to create expandable service boxes in Elementor.
- Users can manage the number of items in a row for desktop, tablet, and mobile separately using the Columns Manage tab.
- The widget enables adding multiple service items separated by a separator (|) in the List Content section.

Do you want to add expandable service boxes to showcase some information? Expandable service boxes are a great way to showcase multiple services or products in a compact and organized manner.

With the Animated Service Boxes widget from The Plus Addons for Elementor, you can easily create expandable service boxes in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Animated Service Boxes widget, [click here](https://theplusaddons.com/docs//animated-service-boxes-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

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

To do this, add the Animated Service Boxes widget to a page and follow the steps -

1. Select **Services Element** from the **Main Style** dropdown.

2. Then select the **Style 1** from the **Style** section.

> *Note: With Style 2 all items will always be visible.*

You can select the image size from the **Image Resolution** dropdown.

You can add a button to the hover sections by enabling the **Button** toggle.

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

Then by enabling the **Image/Icon** toggle, you can add different image types to the service box.

2. In the **Animated Service Boxes** section, you have to add the content for the hover section. By default, you’ll find three items, open one item.

3. You can add a title in the **Title** field. 

Then from the **Select Icon** dropdown, you can add an icon, image or Lottie file to the service box.

> *Note: Make sure the Image/Icon toggle is enabled to show the icon, image or Lottie file.*

As required, you can add a subtitle and description in the **Sub Title** and **Description** fields.

4. Then in the **List Content** section, you have to list service items. You can add multiple items separated by a separator (|) like this Small | Medium | Large.

You can edit the button text and URL from the **Button Text** and **Button Link **fields respectively.

> *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 items.

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

From the **Columns Manage** tab, you can manage the number of items in a row for desktop, tablet and mobile separately. You can also manage the gap between the items as well.

Now when you hover over the service box it will expand to show the list of items.

## Frequently Asked Questions

**Q: What if my expandable service box isn't showing up in Elementor?**
A: If your expandable service box isn't showing, ensure that the Animated Service Boxes widget from The Plus Addons for Elementor is installed and activated. This widget is essential for creating expandable service boxes, and without it, you won't have access to the necessary features. Verify your installation to avoid any issues.

**Q: Can I use expandable service boxes to display multiple services on my site?**
A: Expandable service boxes are ideal for showcasing multiple services or products in a compact format. This layout allows users to hover and reveal additional information, making it easier to organize content without overwhelming the viewer. Utilizing the Animated Service Boxes widget from The Plus Addons for Elementor enhances this functionality.

**Q: What settings work best for creating an effective expandable service box?**
A: When creating an expandable service box, using Style 1 from the Style section is recommended for a clean look. Additionally, enabling the Button toggle allows you to add a call-to-action button, which can drive user engagement. Make sure to list service items clearly using the List Content section, separating them with a '|' for better readability.

**Q: What happens if I don't enable the Image/Icon toggle?**
A: If you don't enable the Image/Icon toggle, any icons, images, or Lottie files you wish to display in the service box will not appear. This means your service box may lack visual appeal and could miss an opportunity to engage users. Always ensure this toggle is activated if you want to enhance the visual aspect of your expandable service box.

**Q: How can I manage the layout of my service boxes for different devices?**
A: You can manage the layout of your service boxes for desktop, tablet, and mobile devices separately using the Columns Manage tab. This feature allows you to specify the number of items displayed in a row and the gap between them, ensuring your design is responsive and visually appealing across devices. Proper management is crucial for a good user experience.

**Q: What should I do if I want to add more service boxes?**
A: To add more service boxes, simply click the +Add Item button in the Animated Service Boxes section. This feature allows you to expand your offerings easily. Remember to fill in the necessary details for each new box, including titles, icons, and descriptions, to maintain consistency and clarity in your presentation.