The Image Cascading widget from The Plus Addons for Elementor stacks images, text and Lottie animations on top of each other in one block, each one placed exactly where you want it.
Because every layer is positioned separately for desktop, tablet and mobile, you can build overlapping hero images, collages and photo stacks without writing any 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 — Image Cascading ships only in the Pro version of The Plus Addons for Elementor. The widget file is not in the free plugin at all, so it does not appear in the widget list without Pro.
- Widget to enable: Image Cascading, under The Plus Addons > Widgets. Search for it and turn the toggle on, then reload the Elementor editor.
- Where the settings are: drop the Image Cascading widget on the page. The Content tab holds three sections — Image Cascading (the layers), Image Animation and Styling.
- How it is built: each item in the Add Multiple Cascading Sections repeater is one layer. Layers are absolutely positioned inside the widget, so they can overlap.
How the Widget Is Built
Everything starts in the Image Cascading section of the Content tab. The Add Multiple Cascading Sections repeater holds one item per layer, and + Add Item adds another. A new widget starts with one item already in place.
The Import Presets button at the top of the section drops in a ready-made arrangement you can then edit.
Layer Position
Each item opens on a Layer Position block with Desktop, Tablet and Mobile tabs. The four position controls are switches: Left (Auto / %), Right (Auto / %), Top (Auto / %) and Bottom (Auto / %). Switch one to % and a slider appears for that edge; leave it on Auto and the edge is not set.
| Setting | What it does | Default |
|---|---|---|
| Left (Auto / %) | Reveals a Left slider, -100 to 100 %. | % (on) |
| Right (Auto / %) | Reveals a Right slider. | Auto (off) |
| Top (Auto / %) | Reveals a Top slider. | % (on) |
| Bottom (Auto / %) | Reveals a Bottom slider. | Auto (off) |
| Width | Sets the layer’s maximum width. | Empty (the layer’s natural width) |
| Responsive Values | On the Tablet and Mobile tabs. Until you turn it on, those devices reuse the desktop position. | Off |
Layer Type
Layer Type decides what the layer contains. The rest of the item’s settings change with it.
- Image — pick the file in Image Select and the size in Image Resolution.
- Text Content — type the text in Text Content and style it with Text Typography, Text Color, Text Hover Color, Text Background, Border Radius and Text Shadow. Full steps
- Lottie — paste a JSON URL in Lottie URL. Full steps
Extra Options
Below the content settings, the Extra Options block adds effects to the layer. They are the same effects other The Plus Addons widgets offer.
| Setting | What it does | Default |
|---|---|---|
| Continues Effect | A looping animation on the layer: Pulse, Floating, Tossing, Rotating, Kenburns Scale and more. | None |
| Mask Image Shape | Clips the layer to a PNG or SVG shape. Full steps | Off |
| Magic Scroll | Moves, fades, scales or rotates the layer as the page scrolls. | Off |
| Tooltip | Shows a tooltip when the visitor hovers the layer. | Off |
| Special Effect | A two-colour reveal overlay on the layer. | Off |
| Parallax Move | The layer drifts with the mouse pointer. | Off |
| On Hover Tilt | A 3D tilt while the pointer is over the layer. | Off |
| Link /Popup | Link opens a URL, Popup opens embedded content in a lightbox. Full steps | Empty |
Image layers also carry Normal and Hover tabs with Overlay Background, Opacity, Transform css and Border Radius, and a Responsive Visibility switch that can hide the layer on Desktop, Tablet or Mobile.
Image Animation
The Image Animation section animates the layer images with GSAP. Turn on Enable Animation, then pick Basic or Global in Animation, a Trigger Type of On Load, On Scroll or On Hover, and set Transform Effects and Animation Controls. Full steps.
Styling
The Styling section holds the settings for the widget as a whole.
| Setting | What it does | Default |
|---|---|---|
| Minimum Height | The height of the widget box. Layer positions in % are measured against it, so set this first. | Empty |
| Slide Show | Brings layers to the front one at a time. Full steps | Off |
| SlideShow Type | On Click or Autoplay. | On Click |
| Autoplay Duration | Milliseconds between slides. | 4000 |
| Overflow Hidden (Desktop / Tablet / Mobile) | Meant to clip layers that stick out of the widget. | Off |
The Result
Three image layers with Width 42 % and Left / Top set to 5/8, 28/26 and 50/44 % produced this cascade on the published page:
Limitations
- A Lottie layer only plays if it is the first item in Add Multiple Cascading Sections. In any later position the player script is never loaded and nothing is drawn. We saw this on two otherwise identical test pages in 6.5.0.
- Overflow Hidden (Desktop), (Tablet) and (Mobile) do nothing on a page built with Elementor containers. The script that applies them looks for an old-style
sectionwrapper, and a container page has none. Clip the overflow on the parent container instead, under Advanced > Layout > Overflow. - Layers are absolutely positioned, so the widget does not grow to fit them. If a layer is cut off, raise Minimum Height.
- Percentages are measured against the widget box, so a layer that sits nicely on desktop can land in the wrong place on a phone. Turn on Responsive Values and set the tablet and mobile positions yourself.
Troubleshooting
The widget is empty on the page
Set a Minimum Height in Styling. With no height the box collapses and the absolutely positioned layers have nothing to sit in.
The layers all sit on top of each other
Each item needs its own Left and Top values. A new item copies the defaults, so change them before adding the next one.
A layer disappears on mobile
Check Responsive Visibility on that item, and the Mobile tab of Layer Position.
