The Stacking Cards widget for Elementor is a dynamic and visually engaging tool that is used to create a sleek scrolling effect, where cards dynamically stack or unstack as users scroll. It’s a perfect choice for storytelling, portfolios, or showcasing highlights. This widget adds a touch of interactivity and elegance to your designs, making your content visually compelling and user-friendly.
Let’s look at each of the options in the Stacking Cards widget for Elementor below.
Elementor Stacking Cards Video Tutorial
Add a Stacking Cards Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Stacking Cards”
- Hover over the widget in the search results and click install
- Add the “Stacking Cards” widget to any Elementor Page
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.
To know more about multi source, Click here.
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.
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
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.
Stacking Cards Widget Styling
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.
Scroll Motion Styling
Set the scroll motion transform origin, greyscale, and rotation.
Card Styling
Style the card width, height, background color, box shadow, border radius, border, and padding.
Content Styling
You can set the content width, padding, content, and background color.
Graphic Element Styling
Here, you can set the graphic element width, height, icon size, background, border radius, box shadow, and border.
Title Styling
You can set the typography, color, text shadow and gap of title element.
Description Styling
Set the description typography, color, text shadow, and gap.
Button Styling
Style the button width, alignment, padding, typography, text color, background color, border radius, box shadow and border.
Image Styling
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.
