---
title: "Cascading Image Widget: Settings Overview"
url: https://theplusaddons.com/docs/cascading-image-widget-settings-overview/
date: 2024-05-13
modified: 2026-04-09
author: "Aditya Sharma"
description: "Are you looking to add images creatively in Elementor? With the Cascading Image widget from The Plus Addons for Elementor, you can add images in a cascading layout. This allows..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/Cascading-Image-Widget_-Settings-Overview-1024x536.jpg
word_count: 1099
---

# Cascading Image Widget: Settings Overview

## Key Takeaways

- Cascading Image widget from The Plus Addons for Elementor allows users to add images in a cascading layout.
- The Plus Addons for Elementor requires the PRO version to access the Cascading Image widget.
- Users can create an image cascading slide show using the Cascading Image widget.
- The Cascading Image widget supports multiple content types including images, text content, and Lottie files.

Are you looking to add images creatively in Elementor? With the Cascading Image widget from The Plus Addons for Elementor, you can add images in a cascading layout.

This allows users to add a unique and eye-catching element to their websites, making them stand out from the competition.

### Check the Live Widget Demo

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-image-cascading/)

## Required Setup

- [Elementor FREE Plugin ](http://wordpress.org/plugins/elementor/)installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Cascading Image widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Cascading Image and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=lnPIIOvAWhY

## How to Activate the Cascading Image Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/05/cascading-image.png)

## Key Features

- **Multiple Content Type **- You can add cascading effects on image, text content and Lottie files.

- **Slide Show **- You can easily [create an image cascading slide show](https://theplusaddons.com/docs//create-image-cascading-slide-show-in-elementor/).

- **Image Mask** - You can easily [add a mask on images of the image cascade.](https://theplusaddons.com/docs//add-mask-on-images-in-elementor-image-cascading-widget/)

- **Popup** - You can [add a popup on images of the image cascade](https://theplusaddons.com/docs//add-a-popup-in-elementor-image-cascading-widget/).

- **Multiple Effects** - You can add multiple effects like scrolling effect, parallax effect and more on images of the image cascade.

- **Image Animation** - You can easily [add animation to the image](https://theplusaddons.com/docs/add-image-animation-in-elementor-image-cascading-widget/).

## How to Use the Cascading Image Widget?

Add the Cascading Image widget to the page. 

### Image Cascading

> *Note: By clicking on the **Import Presets** button, you can import a ready-made design and customize it as per your requirements.*

In the **Add Multiple Cascading Sections** you have to add content. Here you’ll find one repeater item; by default, open it.

From the **Layer Position** section, you can position and set the width of the content for desktop, tablet and mobile separately.

**Left (Auto / %)** - From here, you can position the content from left.

**Right (Auto / %)** - From here, you can position the content from right.

**Top (Auto / %)** - From here, you can position the content from the top.

**Bottom (Auto / %)** - From here, you can position the content from the bottom.

**Width** - From here, you can set the width of the element.

Set the width and position of the content as per your requirements.

To set different positions for tablet and mobile, enable the **Responsive Values** toggle from the **Tablet** and **Mobile** tabs, respectively.

Then, from the **Layer Type** dropdown, you have to select the content type. Here you’ll find three options - 

- **Image** - From here, you can add an image to create an image cascading effect.

- **Text Content** - From here, you can [add text content](https://theplusaddons.com/docs//add-text-content-in-elementor-image-cascading-widget/).

- **Lottie** - From here, you can [add Lottie Files](https://theplusaddons.com/docs//add-lottiefiles-in-the-elementor-image-cascading-widget/).

You’ll see different settings for each option, select the option as per your requirement. Let’s select Image here.

In the **Image Select** section, you have to add your image.

Then from the **Image Resolution** dropdown, you can set the image size.

From the **Extra Options** section, you can add different effects.

> *Note: Most of these options work similarly to the global options available for the other widgets of The Plus Addons for Elementor.*

**Continues Effect** - From here, you can add different continuous animation effects like pulse, floating, tossing, rotating and more to the content (image and text content).

**Mask Image Shape** - From here, you can add an image mask to the content (image and text content).

**Magic Scroll** - From here, you can [add a scrolling effect to the content](https://theplusaddons.com/docs/magic-scroll-effect-in-elementor/) (image and text content).

**Tooltip** - From here, you can [add a tooltip to the content](https://theplusaddons.com/docs/global-tooltips-settings-overview/) (image, text content and Lottie).

**Special Effect** - From here, you can [add special overlay effects to the content](https://theplusaddons.com/docs//swiper-color-overlay-effects-in-elementor/) (image and text content).

**Parallax Move** - From here, you can [add a mouse move parallax effect to the content](https://theplusaddons.com/docs/mouse-cursor-parallax-effects-in-elementor/) (image and text content).

**On Hover Tilt** - From here, you can add a hover tilt effect to the content (image and text content).

**Link /Popup** - From here, you can add or link to additional content from the content (image and text content). Here you’ll find two options - 

- **Link** - With this option, you can add an external link to the content.

- **Popup** - With this option, you can add a popup to the content.

From the Normal/Hover tab you can add different CSS effects to the Image content type for normal and hover states. 

In the **Normal** tab, you’ll find the following options - 

**Overlay Background** - From here, you can add a background overlay color to the image.

**Box Shadow** - From here, you add a box shadow to the image.

**Opacity** - From here, you add an opacity to the image.

**Transform CSS** - From here, you add a custom [CSS transform property](https://www.w3schools.com/cssref/css3_pr_transform.php) to the image.

**Border Radius** - From here, you add a border radius to the image.

Then in the **Hover** tab, you’ll find the same options for the hover state.

From the **Responsive Visibility** toggle, you can select to show or hide the image for responsive devices separately.

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

### Image Animation

By enabling the **Enable Animation** toggle, you can [add animation to the image](https://theplusaddons.com/docs/add-image-animation-in-elementor-image-cascading-widget/).

![](https://theplusaddons.com/wp-content/uploads/2024/05/cascading-image-image-animation.png)

### Styling

From the **Minimum Height** section, you have to set a minimum height for the widget. 

![](https://theplusaddons.com/wp-content/uploads/2024/05/cascading-image-styling-new.png)

> *Note: The scrolling effect and elements position will be based on this minimum height.*

From the **Slide Show** toggle, you can add a slide show to the image cascade.

You can hide the overflow of the content for responsive devices separately from Overflow Hidden (Desktop), Overflow Hidden (Tablet) and Overflow Hidden (Mobile) toggles.

## How to Style the Cascading Image Widget?

If you are using the Lottie as the content then you’ll find the styling options under the Style tab.

![](https://theplusaddons.com/wp-content/uploads/2024/05/cascading-image-style-1.png)

**Lottie** - From here, you can style the Lottie Files.

- **Width** - From here, you can set the width of the LottieFiles.

- **Height** - From here, you can set the height of the LottieFiles.

- **Speed** - From here, you can control the LottieFiles animation speed.

- **Loop Animation** - From here, you can play the LottieFiles animation in a loop.

- **Hover Animation** - From here, you can play the LottieFiles animation on mouse hover.

- **CSS Filters** - From here, you can add different CSS filters to the LottieFiles for normal and hover states.

Advanced options remain common for all our widgets, you can explore all its options from here.

[View Advanced Tab Tutorial](https://docs.posimyth.com/tpae/advanced-tab/?_gl=1*1ddxxa0*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjQ1OTY0My40MzcuMS4xNzE2NDU5NzMyLjYwLjAuMA..)

## Frequently Asked Questions

**Q: What are the key features of the Cascading Image Widget?**
A: The Cascading Image Widget from The Plus Addons for Elementor offers multiple content types, allowing you to add cascading effects on images, text content, and Lottie files. You can create an image cascading slideshow, add image masks, popups, and various effects like scrolling and parallax. This versatility makes it suitable for enhancing visual appeal and interactivity on your website.

**Q: How do I activate the Cascading Image Widget?**
A: Activating the Cascading Image Widget involves navigating to The Plus Addons u2192 Widgets, searching for the widget name, and turning on the toggle. Ensure you have both the Elementor FREE Plugin and the PRO version of The Plus Addons for Elementor installed and activated, as this is a premium widget.

**Q: Can I use the Cascading Image Widget for a slideshow?**
A: Yes, the Cascading Image Widget allows you to easily create an image cascading slideshow. This feature can be particularly useful for displaying multiple images in a dynamic format, capturing user attention and enhancing the overall design of your site.

**Q: What common mistakes should I avoid when setting up the Cascading Image Widget?**
A: A common mistake is neglecting to set the minimum height for the widget, which affects the scrolling effect and element positioning. Make sure to adjust the minimum height to ensure your cascading images display correctly across different devices and maintain the intended visual effect.

**Q: What styling options are available for the Lottie files in the Cascading Image Widget?**
A: When using Lottie files with the Cascading Image Widget, you can control various styling options such as width, height, animation speed, and whether to loop the animation. Additionally, hover animations can be set to trigger when users interact with the Lottie files, adding an engaging layer to your content.

**Q: Does the Cascading Image Widget support mobile responsiveness?**
A: Yes, the Cascading Image Widget supports mobile responsiveness. You can set different positions and widths for desktop, tablet, and mobile devices separately by enabling the Responsive Values toggle. This ensures your cascading images look great on all screen sizes, enhancing user experience.