How to Create a Stunning Stacked Cards Scroll Effect in Elementor Pro
Want to elevate your Elementor website with a sleek, eye-catching scroll effect? In this tutorial, you’ll learn how to build a beautiful stacked cards effect using only Elementor Pro and its native settings—no third-party plugins or custom code required!
This design not only works beautifully on desktop but is also fully responsive on mobile. Once you master this technique, you can apply the same effect to images, widgets, or any container within your Elementor projects.
Let’s get started!
📥 Prefer to Skip Ahead?
If you’d rather skip the step-by-step tutorial and start building right away, download the layout I use in this video. It’s free and ready to import into your Elementor website.
🧱 Step 1: Set Up the Structure
- Add a New Section: Start by creating a new Flexbox container on the page where you want the effect.
- Set Vertical Layout: Choose vertical direction for the container.
- Rename Elements: Name the main container “Stacking Cards” and add a nested container called “Stacking Wrapper.”
- Add Heading: Inside the wrapper, insert a centered heading (e.g., “Beautiful Stacking Cards”).
🃏 Step 2: Create the Cards
- Add Multiple Containers: Each container will represent a card. You can add as many as you like—4 is a great starting point.
- Style the Cards:
- Give them a background color.
- Add border radius or padding if desired.
- Set a minimum height (e.g., 350px) for consistency.
- Add Content: Inside each card, insert a heading, some text, and maybe a button or image for visual variety.
🔢 Step 3: Set Z-Index Values
To stack the cards correctly:
- Assign increasing Z-Index values to each card: 1, 2, 3, 4, etc.
- This will layer the cards visually from bottom to top.
🧲 Step 4: Add Sticky Motion Effects
Make the elements stick as you scroll:
- Select each card and go to the Advanced > Motion Effects settings.
- Enable Sticky: Top and set a custom Sticky Offset for each card:
- Card 1: 100px
- Card 2: 120px
- Card 3: 140px
- Card 4: 160px
- Do the same for the main heading (e.g., 30px offset).
🎯 Step 5: Add Content Below to Enable Scrolling
To visualize the effect:
- Add a new section below your stacking cards.
- Include dummy content such as a video, image, or text block.
- Apply a background color to distinguish it visually.
🛠 Prevent Cards from Overlapping the Next Section
You have two options:
Option 1: “Stay in Column” (Simple but Less Dynamic)
Enable “Stay in Column” in the Motion Effects settings for each card. This will prevent overlapping, but removes the stacking animation.
Option 2: Use a Fade Out Scrolling Effect (Recommended)
- Select the Stacking Wrapper.
- Go to Advanced > Motion Effects > Scrolling Effects.
- Choose Transparency > Fade Out.
- Set the Viewport range from 70–100% (or 80–100%).
- Enable “Viewport” as the trigger.
Now, as you scroll past the stacking cards, they’ll fade out smoothly and reveal the section below.
✨ Final Result
You now have a gorgeous stacking cards scroll effect that’s:
- Easy to build
- Fully responsive
- Visually engaging
Feel free to enhance it with different shapes, designs, images, or interactivity!
📦 Download the Layout
Want to save time? Click here to download the complete layout I used in the tutorial. Import it directly into your Elementor Pro site and customize it as you like.
🎥 Watch More Tutorials
Enjoyed this effect? Check out these other popular Elementor tutorials on WP Roads.
🙌 Let’s Connect!
If you found this tutorial helpful:
- Subscribe to WP Roads on YouTube
- Hit the 👍 button
- Share your version of this effect in the comments!
Happy Elementor designing! 🚀
