Looking to add a dynamic and interactive element to your Elementor website? The Stacking Cards Widget is the perfect tool to create stunning scroll effects that captivate your visitors. These content cards stack seamlessly as users scroll, offering a visually engaging and smooth user experience. In this step-by-step guide, we’ll walk you through how to create stacking cards in Elementor, helping you elevate your website’s design and functionality effortlessly.
Popular Use Cases for using Stacking Cards in an Elementor Website
Storytelling Sequences
Engage your audience with an interactive narrative or brand journey. Stacking cards create a visually stunning scroll experience, seamlessly revealing your story step by step for maximum impact and engagement.
Portfolio Showcases
Showcase your creative work with stacking cards, adding a modern, interactive edge. Perfect for designs, photography, or art, this approach ensures your portfolio stands out and captivates viewers effortlessly.
Product Features
Highlight product features or benefits in visually appealing, stacked sections. This format combines functionality with elegance, offering an engaging and dynamic way to present key details to potential customers.
Step-by-Step Tutorials
Simplify tutorials by using stacking cards to break down each step clearly. This format keeps users focused, providing an intuitive and visually appealing guide for complex processes or instructions.
Event Timelines
Present schedules, milestones, or histories in a scrollable timeline format. Stacking cards add clarity and interactivity, transforming chronological information into an engaging and sleek visual experience.
FAQs or Tips
Organize FAQs or tips with stacking cards for a fresh, scrollable presentation. This method enhances accessibility, making your content easy to navigate while maintaining a clean, modern look.
Step #1: Install and activate Unlimited Elements
Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Stacking Cards widget.
Then follow these steps:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
Once activated, you’ll need to enter your license key.
Now that you have the plugin installed, it’s time to start using the Stacking Cards widget.
Step #2: Adding the Stacking Cards widget to your Elementor website
To add the stacking cards, install the Stacking Cards widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Stacking Cards"
Hover over the widget and click install
Step #3: Add Stacking Cards widget to your Elementor page
Now, in the Elementor editor, Find the Stacking Cards widget and drag it to the desired part of your page.
Choose the Items Source
Choose the Items Source from the dropdown. We can select Posts, Woo products, ACF repeater fields, JSON or CSV files, gallery, terms, users, menu items, and more. For our guide, we’ll use static data and leverage the items repeater to add our content.
General Settings
Sticky Position Top Space
Adjust the top space for sticky positioning to ensure proper alignment.
Card Gap
Set the gap between each card to create a balanced layout.
Card Top Offset
Modify the top offset of the cards for better spacing and design flow.
Enable Scroll Motion
Activate the "Scroll Motion" option to add a dynamic motion effect while scrolling.
Hover Transition Duration (ms)
Specify the "Hover Transition Duration" in milliseconds for smoother interactions.
Item Image Size
Choose the "Item Image Size" according to your layout.
RTL
Enable the "RTL" (Right-to-Left) option if your layout requires it.
Layout Settings
Show Title
Turn on the "Show Title" option to display a title on the card.
Title HTML Tag
Select the HTML tag for the title based on its semantic importance.
Show Description
Enable the "Show Description" option to include a descriptive text.
Show Button
Enable the "Show Button" option to add a button.
Button Text
Enter the desired text for the button.
Button Hover Style
Choose a hover style for the button to enhance interactivity.
Show Image
Enable the "Show Image" option to display an image within the card.
Show Graphic Element
Select the graphic element type: "Icon," "Image," or "Text."
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Stacking Cards Items
Content Options
Title
Input the title for the first card.
Description
Enter a description for the card to provide more context.
Link
Add a link to the card if needed.
Image
Choose an image to display in front of the card content.
Image Size
Select the image size that suits your design layout.
Show Button
Turn on the "Show Button" option to add an actionable button.
Graphic Element Options
Graphic Image
Select an image if "Image" is chosen as the graphic element.
Graphic Icon
Choose an icon if "Icon" is selected as the graphic element.
Graphic Text
Input the text if "Text" is selected as the graphic element.
Background Options
Background Type
Choose the background type: either a "Color" or an "Image."
Background Color
Select a background color that complements your design.
Now proceed to add content for the remaining cards and style them to match your overall design layout.
Wrapping it Up!
By following these simple steps, you’ve successfully created stacking cards in Elementor, enhancing your website with a highly interactive and professional design. This feature not only improves user engagement but also adds a unique visual appeal to your site. Start experimenting with different layouts and content to make your stacking cards truly stand out and leave a lasting impression on your visitors.
