How to Create Stacking Cards in Elementor

You can create a stacking cards effect in Elementor by using an addon like ElementsKit that lets you build overlapping, scroll-based card layouts with a simple drag-and-drop interface. This removes the need for custom code and allows you to implement advanced scroll interactions in just a few steps.

Modern websites are no longer just about static layouts. Users expect motion, interaction, and guided experiences that make content easier to consume. Stacking cards solves this by revealing content one by one as users scroll.

In this blog, you will learn exactly how to create stacking cards in Elementor in minutes without coding expertise.

What is the Stacking Cards effect in Elementor?

Stacking cards in Elementor is an effect where multiple cards overlap and scroll on top of each other when a user scrolls.

Why add stacking cards in Elementor?

Stacking cards increases visual representation of your website content by placing multiple card contents one after another. This is a modern and unique way to keep your visitors engaged on your website.

Here are the significance of displaying stacking cards in Elementor:

• Stacking cards improves the visual storytelling of your website.
• It boosts user interaction and engagement.
• This encourages users to scroll more and reduces bounce rates.
• Elementor stacked card works best for product showcases, SaaS features, and portfolios.
• This supports conversion-focused layouts by guiding users toward CTAs.
• You can highlight key features or benefits in a structured sequence.
• Completely customizable with motion effects and styling controls.

How to create stacking cards in Elementor

The prerequisite for adding stacking cards animation is to install and activate an Elementor add-on that includes this option. ElementsKit Elementor Addon empowers 2 million users with 90+ advanced widgets, 20+ modules, and 1,000+ professional templates. It lets you add stacking cards with drag-and-drop interaction. So, first, add the following tools to your website:

• Elementor (free)
• ElementsKit (Free & Pro)

Now, follow the steps below to learn how to create stacking cards in Elementor:

Step 1: Enable the Stacked Cards widget

First, you have to enable the Stacked Cards widget of ElementsKit. For that, navigate to your WordPress dashboard and visit ElementsKit → Widgets. Then, scroll down until you find the Stacked Cards widget.

Now, turn on the toggle button of Stacked Cards widget and scroll up to press the “Save Changes” button.

Step 2: Drag-and-drop the Stacked Cards widget

In this step, you need to add Elementor Stacking Cards either to a new or existing page or post. To add Stacked Cards to a new page, click the “Add Page” tab under Pages, and you will be redirected to a new page.

Now, give a suitable title and press the “Edit with Elementor” button. Therefore, you will be taken to the Elementor editor.

Here, in the Elementor editor, search for the “Stacked Cards” widget and drag-and-drop it to the “+” icon. This will add a default Stacked Cards that can be further customized according to your preferences.

Step 3: Edit content of the Elementor stacking card

In this step, you have to edit the card items by expanding each card. For example, click the “Card #1” and customize the following areas:

• Background Type: Select background type from Classic or Gradient.
• Content Type: Choose content type from the dropdown menu.
• Title: Add a suitable title for the card # 1.
• Title Tag: Pick a tag from the dropdown options.
• Choose Icon: Select an icon for your card.
• Description: Enter description for your Stacked Cards.
• Show button: Turn on the toggle button to show stacked cards in Elementor.
• Show button icon: Select button icon from the library or upload SVG.

Similarly, customize other card # 2 and Card # 3. Also, add more card items by pressing the “+ Add Item” button.

Further, you have to expand the Settings tab and adjust the following items, such as:

• Card Style
• Transform
• Translate
• Translate Animation
• Opacity
• Filter
• Card Direction From (Top/Bottom)
• Card Direction From (Left/Right)
• Card Start From
• Card End Form
• Show Marker

Step 4: Customize style of the stacked card

In the fourth step, you have to adjust height, alignment, background, width, border type, border radius, box shadow, padding, etc. for your Wrapper, Cards, Icon/Image, Title, Description, Button, and Media.

Step 5: Publish Stacked Card scroll effect

Finally, after wrapping up all customizations, press the “Publish” button to make your Elementor Stacked Card scrolling effect live.

FAQs

Wrapping up

So that’s how stacking cards works and can be added to your WordPress websites, which not only increases engagement but also has a positive impact on conversion. When this is used correctly, it becomes a structured storytelling tool and highlights key messages, boosts engagement, and guides users to conversion. Using tools like ElementsKit, you can add a fully customizable Stacking card animation without a single line of code. Not only stacking card but also adding advanced accordion, image masking, cross-domain copy paste, etc. possible with Elementskit. So, try stacking cards and experiment with different layouts to see what works best for your site.