Want to add a unique layered effect to your Elementor website? The Stacked Images Widget lets you create eye-catching overlapping images with hover expansion, interactive tooltips, and clickable custom links. This effect is perfect for showcasing team members, featured users, or even product highlights in a compact and visually appealing way. In this step-by-step guide, you’ll learn how to create and customize stacked images in Elementor effortlessly.
Popular Use Cases for using Stacked Images in an Elementor Website
Testimonial Sections
Stacked images are great for testimonials, displaying overlapping profile images of satisfied customers. This visually appealing layout builds trust and showcases positive feedback in an engaging, space-efficient way.
Team Member Showcase
Highlighting team members with stacked images keeps your design clean and professional. Overlapping circular profile pictures create a stylish introduction while saving space, making it ideal for "Meet the Team" sections.
Event or Conference Speakers
Promote event speakers using stacked images to highlight key personalities in a space-saving way. This layout offers a quick, visually engaging preview of guest speakers without cluttering your event page.
User or Community Engagement
Websites with active communities can use stacked images to showcase top contributors or recently active users. This design adds a dynamic touch and encourages participation while maintaining a visually compact structure.
Social Proof & Brand Partnerships
Stacked images help display brand partnerships, influencer collaborations, or media mentions in a compact format. This visually engaging method enhances credibility by showcasing trusted brands or endorsements in an organized, appealing manner.
Product Highlights & Features
Stacked images effectively showcase different product angles or variations in a small, visually appealing format. This method enhances product pages by displaying multiple views or complementary items without overwhelming the layout.
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 Stacked Images widget.
Then follow these steps:
Now that you have the plugin installed, it’s time to start using the Stacked Images widget.
Step #2: Adding the Horizontal Timeline widget to your Elementor website
To showcase stacked images, install the Stacked Images widget from the Unlimited Elements Widget library.
Step #3: Add Stacked Images widget to your Elementor page
Now, in the Elementor editor, Find the Stacked Images 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
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
Choose the "Item Image Size" according to your layout.
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
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.
Stacked Images Items
Step #4: Add the Testimonial Carousel Widget
Finally, to complete the design, let’s add the Testimonial Carousel widget and include the desired content. Ensure the number of testimonial items matches the number of items in the Stacked Images widget. Also, use the same connected widget settings as those in the Stacked Images widget.
Wrapping it Up!
With the Stacked Images Widget, you can transform static images into an engaging, interactive display that captures attention. Whether you’re designing testimonial sections, team showcases, or creative visual elements, this effect adds a unique and engaging touch to your website. Now that you know how to set it up in Elementor, start experimenting with different image arrangements to make your design stand out!