---
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-09-21
lang: en
author: "Aditya Sharma"
description: "A sliding box sits as a plain image until someone hovers it. Then it widens, the image moves aside and the text slides into the space next to it. The..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-Sliding-Box-Effect-in-Elementor_-1024x536.jpg
word_count: 840
---

# How to Create Sliding Box Effect in Elementor?

## 

- Animated Service Boxes ships only in The Plus Addons for Elementor Pro, and the free plugin has no equivalent widget.
- Sliding Boxes uses one image, one title, one description per box, and it needs no custom CSS.
- Active Slide in Content > Animated Service Boxes sets which box is open on load, with 1 as the default and All Equal meaning none.
- The open box takes space from the others, the image scales to scale(1.1), and the text slides in beside the image instead of fading in.

A sliding box sits as a plain image until someone hovers it. Then it widens, the image moves aside and the text slides into the space next to it.

The **Animated Service Boxes** widget does this with its **Sliding Boxes** layout — one image, one title, one description per box, and no custom CSS.

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — **Animated Service Boxes** ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and the free plugin has no equivalent widget.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Animated Service Boxes** and turn its toggle on.- **Prerequisite:** the images you want to show, already in the Media Library. Every item has its own **Featured Image**; with none set, Elementor's grey placeholder is used.- **Nothing else to switch on:** no extension and no site-wide setting is needed for this widget.

## Build the sliding boxes

- Edit the page with Elementor and drag in the **Animated Service Boxes** widget.- In **Content > Animated Service Boxes**, set **Main Style** to **Sliding Boxes**.- Set **Active Slide** to the box that should already be open when the page loads. The options are **All Equal** and then **1** to **20**; the default, **1**, opens the first box.

- Open the **Animated Service Boxes** list — it starts with three items. For each one set the **Featured Image** and fill in the **Title**, **Sub Title** and **Description**. Those three are what slides into view.- Optional: turn **Button** on, pick a **Button Style**, and set each item's **Button Text** and **Button Link**. The two fields have no effect while the switch is off.- In **Content > Columns Manage**, set **Tablet Column** and **Mobile Column**, and add a **Columns Gap/Space Between** if the boxes are too tight.

![Sliding Boxes: hovering the middle box widens it and slides its text in beside the image](https://theplusaddons.com/wp-content/uploads/2026/09/animatedservice-result-sliding.webp)

Use **+ Add Item** for more boxes, and **Content > Layout** to set the **Offset** of the text and the box **Height**.

## Settings for this layout

| Setting | Where | What it does | Default |
| ------- | ----- | ------------ | ------- |
| **Active Slide** | Content > Animated Service Boxes | Which box is open on load. **All Equal** means none. | **1** |
| **Image Resolution** | Content > Animated Service Boxes | The image size each Featured Image is loaded at. | **Full** |
| **Button** / **Button Style** | Content > Animated Service Boxes | Adds a per-item button and picks one of three button designs. | **Hide** / **Style 1** |
| **Tablet Column** | Content > Columns Manage | Boxes per row on tablet: **Column 1** to **Column 3**. | **Column 2** |
| **Mobile Column** | Content > Columns Manage | Boxes per row on mobile: **Column 1** to **Column 3**. | **Column 1** |

## How It Behaves

- **The open box takes the space from the others.** On load the three boxes measured 525, 263 and 263 pixels wide, with box 1 open. Hovering box 2 changed that to 253, 505 and 253 — box 2 opened and the other two gave up the width.- **The open box's image scales up slightly.** The active box's image sits at `scale(1.1)` and drops back to `scale(1)` when the pointer leaves.- **The text slides in, it is not faded in.** The Title, Sub Title and Description of the hovered box appear in the panel that opens beside its image; the other boxes keep theirs hidden.

## Limitations

- **Sliding Boxes has no Style control.** Unlike Image Accordion or Article Box, this layout ships a single design, so there is no **Style 1** / **Style 2** picker to look for.- **There is no Desktop Column setting.** **Columns Manage** for this layout offers tablet and mobile only; the desktop row is worked out from the boxes themselves.- **Active Slide Width(0-15) is not available here.** That field belongs to the Image Accordion layout; how far a sliding box opens is not adjustable.- **No icons or Lottie files.** The **Image/Icon** switch is hidden for this layout, so each box can only use its Featured Image.

## Not verified

So you know exactly what has and has not been checked:

- **Image Resolution.** Only the default **Full** was used; no other size was measured.- **Button Style 2 and Style 3.** Only the default **Style 1** button was rendered.- **The Style tab.** No styling control was exercised, so this doc names the sections that exist and does not describe what each one does.- **Responsive behaviour.** Nothing was measured at tablet or mobile width for this layout; every measurement here is from a 1200 px viewport.

## Troubleshooting

### Nothing slides when I hover

The effect runs on the published page, not in the editor preview. Save, open the live URL and clear any page cache first.

### I cannot find the Style dropdown

There isn't one for Sliding Boxes. Only Image Accordion, Article Box, Info Banner, Services Element and Portfolio have a **Style** picker.

### My Button Text is ignored

Turn **Button** on in **Content > Animated Service Boxes**. While it is off, both **Button Text** and **Button Link** are inert.

### The boxes are cramped on tablet

Lower **Tablet Column** to **Column 1**, or add spacing with **Columns Gap/Space Between**.

## Related Docs

- [Animated Service Boxes Widget: Settings Overview](https://theplusaddons.com/docs/animated-service-boxes-widget-settings-overview/)- [How to Create an Image Accordion in Elementor?](https://theplusaddons.com/docs/create-an-image-accordion-in-elementor/)- [How to Add an Article Box in Elementor?](https://theplusaddons.com/docs/add-an-article-box-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before creating a sliding box effect in Elementor?**
A: The setup depends on Elementor free plus the Pro version of The Plus Addons for Elementor, because Animated Service Boxes ships only in The Plus Addons for Elementor Pro. Each box also needs its own Featured Image in the Media Library, plus a Title, Sub Title, and Description. If a Featured Image is missing, Elementor falls back to a grey placeholder, so the layout still renders but looks unfinished.

**Q: Why does nothing slide when I hover the boxes?**
A: The hover animation runs on the published page, not inside the editor preview. That means a live URL is the real test, not the canvas view. Save the page first, then open the published page and clear any page cache if the effect still looks stuck. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this live-page behavior for the Sliding Boxes layout.

**Q: How do I make one sliding box open by default?**
A: Use Active Slide in Content > Animated Service Boxes. That setting controls which box is already open when the page loads, and the default value is 1, which opens the first box. The page also notes that All Equal means none are open on load, so this setting is what decides the initial visual focus.

**Q: Can I use buttons inside each sliding box?**
A: Buttons are optional and controlled per item. Turn Button on first, then choose a Button Style and set each item’s Button Text and Button Link. When Button is off, those two fields do nothing, so missing button text usually means the switch was never enabled. The page shows Style 1 as the default button design.

**Q: Why can't I find a Style dropdown for Sliding Boxes?**
A: Sliding Boxes does not have a Style control at all. That layout ships as a single design, so there is no Style 1 or Style 2 picker like you get in Image Accordion or Article Box. The Plus Addons for Elementor keeps this layout fixed, which matters if you were expecting to swap designs instead of just configuring content and spacing.

**Q: How do I stop sliding boxes from looking cramped on tablet?**
A: Tablet spacing is handled in Content > Columns Manage, where Tablet Column can be lowered to Column 1 or spacing can be increased with Columns Gap/Space Between. That matters because there is no Desktop Column setting for this layout, so tablet and mobile are the only responsive controls exposed here. The same section also lets you set Mobile Column separately.