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.
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 (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.
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 toscale(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.
