BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Stacked Cards Widget for Elementor Pro

Cards that pin and pile up as the page scrolls.

Overview

What Stacked Cards does

Stacked Cards shows a set of cards that pin near the top of the screen while the page scrolls, so each new card slides over the one before it and they pile up like a deck. Cards hold a small label, title, text, image and button, or a saved template. Use it for process steps, features and services.

Live demo

See it in action

Step 01

Plan

We start with your goals and map out what needs to be built, in what order.

Step 02

Design

Every page is designed around your content, then refined until it feels right.

Step 03

Launch

We test on real devices, go live and keep an eye on how things perform.

Features

What it can do

  • Each card pins while scrolling and the next one slides over it.

  • Covered cards can shrink and darken as the next card moves over them.

  • The edge of earlier cards can stay visible above the newer ones.

  • Cards hold a small label, title, text, image and button.

  • Any card can show a saved template instead.

  • Image on the right, on the left, alternating or on top.

  • Own background and text color for every card.

  • The effect can be switched off on phones to show a normal list.

Use cases

When to use it

Process steps

Show Step 01, Step 02 and Step 03 as cards that pile up while the visitor scrolls.

Feature tour

Give each feature a card with an image and a button to its own page.

Services overview

Use a different card background per service so each one stands out as it slides in.

Custom layouts

Set a card to Saved template to place any Elementor design inside the stack.

Setup

How to set it up

What you need: Nothing extra for image and text cards. Template cards need a saved Elementor template.

  1. Drag Stacked Cards onto the page.

  2. In Cards, edit each card: set Small Label, Title, Text and Image, and add Button Text and Button Link if wanted.

  3. Pick a Card Background for each card and choose the Image Position.

  4. In Stacking, set Distance From the Top of the Screen so the cards clear a sticky header.

  5. Adjust Edge of Earlier Cards Left Showing, Space Between Cards, Shrink Covered Cards and Darken Covered Cards.

  6. Check that the containers around the widget have Overflow set to Default, then style the cards in the Style tab.

FAQ

Questions and answers

Why do the cards not pin?

A container around the widget has Overflow set to Hidden. Set Overflow to Default on the containers around the widget.

Can a card hold my own Elementor design?

Yes. Set the card’s Content to Saved template and choose a Template.

The cards hide behind the sticky header. What can I do?

Increase Distance From the Top of the Screen until the cards pin below the header.

Can the effect be turned off on phones?

Yes. Switch on Normal List on Phones and the cards show as a normal list on small screens.

Bright Addons Pro

Get Stacked Cards with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.