---
title: "How to Create Sliding Box Effect in Elementor?"
url: https://theplusaddons.com/docs/create-sliding-box-effect-in-elementor/
date: 2024-05-29
modified: 2026-04-09
author: "Aditya Sharma"
description: "Are you looking to create a beautiful content sliding box effect in Elementor? This effect allows an image to slide in or out to show the content when you hover..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-Sliding-Box-Effect-in-Elementor_-1024x536.jpg
word_count: 399
---

# How to Create Sliding Box Effect in Elementor?

## Key Takeaways

- The Plus Addons for Elementor includes the Animated Service Boxes widget for creating a sliding box effect.
- Users can select a predefined style and manage the number of sliding boxes in a row for tablet and mobile separately.
- The Animated Service Boxes widget allows users to add titles, subtitles, descriptions, and images for each sliding box.

Are you looking to create a beautiful content sliding box effect in Elementor? This effect allows an image to slide in or out to show the content when you hover over it. This unique design can add an interactive touch to your website and improve the user experience.

With the Animated Service Boxes widget from The Plus Addons for Elementor, you can easily create a sliding box effect 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 **Sliding Boxes** from the **Main Style** dropdown.

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

Then from the **Active Slide** section, you can select a particular slide to be active by default or make all the slides equal.

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

By enabling the **Button** toggle you can add a button to the sliding boxes.

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

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

3. Add the title, subtitle and description in the **Title**, **Sub Title** and **Description **fields as required.

4. Then in the **Featured Image** section, you have to add an image for the sliding boxes.

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 sliding boxes.

From the **Layout** tab, you can manage the vertical alignment of the text content.

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

This is how easily you can create beautiful sliding content boxes.

***Read Further***: *[How to Add an Article Box in Elementor?](https://theplusaddons.com/docs//add-an-article-box-in-elementor/)*

## Frequently Asked Questions

**Q: What should I do if the sliding box effect isn't working?**
A: If the sliding box effect isn't functioning, ensure that the Animated Service Boxes widget from The Plus Addons for Elementor is installed and activated. Without this plugin, the sliding effect won't be available. Additionally, check that you've selected 'Sliding Boxes' from the Main Style dropdown, as this is crucial for enabling the effect.

**Q: Can I use the sliding box effect for displaying images and text together?**
A: The sliding box effect is ideal for showcasing both images and text. When you hover over the box, the image slides to reveal the content, enhancing user interaction. This feature is particularly useful for highlighting services or products on your website, making it engaging for visitors.

**Q: What is the best way to manage the layout of sliding boxes on mobile devices?**
A: To optimize the layout of sliding boxes for mobile devices, use the Columns Manage tab. This allows you to specify the number of boxes displayed in a row and adjust the gap between items. Proper management ensures that the sliding boxes remain visually appealing and functional on smaller screens.

**Q: How can I customize the content within each sliding box?**
A: You can customize the content of each sliding box by editing the Title, Subtitle, and Description fields in the Animated Service Boxes section. Each box starts with three items by default, and you can add more by clicking the +Add Item button. This flexibility allows you to tailor the content to fit your website's needs.

**Q: What happens if I forget to enable the Button toggle?**
A: If the Button toggle is not enabled, the Button Text and Button Link fields will not function. This means that users won't be able to interact with a button in the sliding boxes, which could limit engagement. Always ensure this toggle is activated if you want to include a call-to-action button.

**Q: Is there a way to set a default active slide in the sliding box effect?**
A: Yes, you can set a default active slide by selecting an option from the Active Slide section. This allows you to control which slide is shown first when the page loads, helping to direct user attention to specific content right away. It's a useful feature for highlighting key messages or offers.