In this guide, we will show you how to add a “Stacking Cards widget” to your Elementor website. The Stacking Cards widget allows you to create an engaging card layout with an interactive stacking effect, making your content visually dynamic and appealing. Perfect for showcasing team members, product highlights, or creative content, this widget helps you present information in a modern and stylish way that captures attention.
Let’s explore the customization options available in the “Stacking Cards widget” for Elementor below.
Elementor Stacking Cards Video Tutorial (Step by Step Guide)
Add a Free Stacking Cards Widget to Elementor
Add a Free Stacking Cards Widget to an Elementor Page
Elementor Stacking Cards Widget Source Settings
The Stacking Cards widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.
Items
You can use the item repeater field as item source.
WordPress Posts
Display WordPress posts dynamically in your stacking cards, including custom post types and fields for maximum flexibility.
Meta Field
Use Meta as an item source for your stacking cards to dynamically display and manage content from your Meta data.
JSON or CSV
Load the stacking cards with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for stacking cards to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your stacking cards to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the stacking cards to dynamically display and manage menu items in a visually engaging layout.
API Integrations
Integrate an API into your stacking cards to dynamically fetch and display data from external systems or services.
Elementor Stacking Cards Widget General Settings
Sticky Position Top Space
Set the top spacing for sticky position.
Card Gap
Set the gap between cards items.
Card Top Offset
Set the top offset for cards.
Enable Scroll Motion
Enable the scroll motion for cards.
Hover Transition Duration
Set the duration for hover transition.
Items Image Size
Select the items image size.
Full
Large
Medium Large
Medium
Thumbnail
1536*1536
2048*2048
RTL
Turn on for right to left websites.
Elementor Stacking Cards Widget Layout Settings
Show Title
Show or hide the title.
Title HTML Tag
Select the HTML tag for title.
H1
H2
H3
H4
H5
H6
div
span
p
Show Description
Show/hide the description.
Show Button
Show or hide the button.
Button Text
Type text to show in button.
Show Image
Show/hide the image.
Show Graphic Element
Select the graphic element to show in cards.
No
Icon
Image
Text
Graphic Element Image Size
Select the image size.
Full
Large
Medium Large
Medium
Thumbnail
1536*1536
2048*2048
Elementor Stacking Cards Widget Items Settings
Manage the items of the stacking cards using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set the heading for the stacking cards item.
Description
Type text for description.
Link
Type or paste URL to link with the button.
Link Type
Select the link type for grid item.
None
Regular Link
Lightbox
Button
Image
Choose an image to display.
Image Size
Select the items image size.
Full
Large
Medium Large
Medium
Thumbnail
1536*1536
2048*2048
Background Color
Set the background color.
Graphic Element
Set the graphic element image size, graphic icon, graphic text, and background color.
Elementor Stacking Cards Widget Styling Settings
A variety of styling options are available, giving you complete control over the widget’s design. Select colors that align with your website’s aesthetic. You can customize the text, icons, fonts, and layout to ensure the widget looks and functions exactly as you envision.
Elementor Stacking Cards Widget Scroll Motion Styling Settings
Set the scroll motion transform origin, greyscale, and rotation.
Elementor Stacking Cards Widget Card Styling Settings
Style the card width, height, background color, box shadow, border radius, border, and padding.
Elementor Stacking Cards Widget Content Styling Settings
You can set the content width, padding, content, and background color.
Elementor Stacking Cards Widget Graphic Element Styling Settings
Here, you can set the graphic element width, height, icon size, background, border radius, box shadow, and border.
Elementor Stacking Cards Widget Title Styling Settings
You can set the typography, color, text shadow and gap of title element.
Elementor Stacking Cards Widget Description Styling Settings
Set the description typography, color, text shadow, and gap.
Elementor Stacking Cards Widget Button Styling Settings
Style the button width, alignment, padding, typography, text color, background color, border radius, box shadow and border.
Elementor Stacking Cards Widget Image Styling Settings
You can set the image fit, positioning, and CSS filters.
Stacking Cards Design Examples For Elementor
Here are some live use cases for the Stacking Cards Widget.
Stacking cards with four cards.
Stacking cards for car features.
Thank you for discovering the Stacking Cards Widget for Elementor! With its dynamic scrolling effect and versatile use cases, we hope it becomes an invaluable tool in your design projects. If you need any help or have questions, don’t hesitate to reach out.
