Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Content Carousel - Featured Blog
Stacked Images - Featured Blog
ACF Repeater Field - Featured Blog

How to Create Stacked Images in Elementor [Step-by-Step]

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

1

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.

2

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.

3

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.

4

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.

5

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.

6

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:

1

Go to Plugins → Add New → Upload Plugin.

2

Choose the zip file you downloaded, upload, and then click Activate.

3

Once activated, you’ll need to enter your license key.

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. 

1

Go to Unlimited Elements in the WordPress Dashboard

2

Search for the "Stacked Images"

3

Hover over the widget and click install

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
1

Alignment

Set the alignment of images.

  1. Inherit: Inherits the alignment from its parent or global settings.
  2. Center: Aligns the item to the center.
  3. Left: Aligns the item to the left.
  4. Right: Aligns the item to the right.
2

Item Image Size

Choose the "Item Image Size" according to your layout.

3

Tooltip Direction

This setting allows you to define the direction from which the tooltip will appear when hovering over the corresponding element.

  1. None
  2. Top
  3. Bottom

Connected Widgets Settings

1

Enable Remote Connection

This enables the remote connection functionality for this widget.
2

Widget Name for Connection

Choose this to "Auto Detectable", so it will automatically detect the remote widgets.

3

Sync

You can connect two item-based widgets and sync them.
4

Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

Stacked Images Items

1

Title

Type text for title.

2

Image

Choose an image to display.

3

Image Size

Choose the image size according to your layout.

4

Link

Type or paste the URL to link with stacked image item.

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!

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!