The Stacked Images widget for Elementor brings a dynamic overlap image effect to your website, complete with hover expansion, interactive tooltips, and clickable custom links. This powerful widget is perfect for adding engaging visual elements that capture attention and provide an interactive user experience. Whether you’re designing for portfolios, product showcases, or creative layouts, this widget offers a seamless way to elevate your website’s functionality and appeal.
Let’s look at each of the options in the Stacked Images widget for Elementor below.
Elementor Stacked Images Video Tutorial
Add a Stacked Images 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 “Stacked Images”
- Hover over the widget in the search results and click install
- Add the “Stacked Images” widget to any Elementor Page
Source Settings
The Stacked Images 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.
Posts
Display WordPress posts dynamically in overlay carousel, including custom post types and fields for maximum flexibility.
WooCommerce Products
Use this to showcase WooCommerce product images, names, prices, and descriptions in the carousel.
Meta Field
Use Meta as an item source for your overlay carousel to dynamically display and manage content from your Meta data.
JSON or CSV
Load your overlay carousel 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 your overlay carousel to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your overlay carousel to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the overlay carousel to dynamically display and manage menu items in a visually engaging layout.
RSS
Fetch and display items from an RSS feed. This is perfect for showcasing updates or content from external blogs.
API Integrations
Integrate an API into your overlay carousel to dynamically fetch and display data from external systems or services.
General Settings
Alignment
Set the alignment of images.
- Inherit: Inherits the alignment from its parent or global settings.
- Center: Aligns the item to the center.
- Left: Aligns the item to the left.
- Right: Aligns the item to the right.
Item Image Size
Select appropriate size of item image from given options. This options ensure that the image fits appropriately for different layouts and design requirements.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Tooltip Direction
This setting allows you to define the direction from which the tooltip will appear when hovering over the corresponding element.
- None
- Top
- Bottom
Connected Widgets Settings
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Setting
Manage the items of the stacked images using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Type text for title.
Image
Choose an image to display.
Image Size
Select appropriate size of image from given options.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Link
Type or paste the URL to link with stacked image item.
Stacked Images Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
Stacked Image Styling
Set the size, hover gap, overlay gap, border, border radius, box shadow and opacity of stacked image.
Tooltip Styling
You can set the tooltip color, background, border radius, typography, and padding.
Stacked Images Design Examples For Elementor
Here are some live use cases for the Stacked Images Widget.
Stacked images with testimonial carousel.
Team members as stacked images.
We hope this guide has helped you understand how to use the Stacked Images Widget for Elementor. This widget lets you add eye-catching effects to your designs and make your website stand out. If you need more help or want to explore other widgets, feel free to reach out or check out our collection for more ideas.
