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

Stacked Icons for Elementor

The Stacked Icons widget for Elementor allows you to create stylish, overlapping icon designs with interactive effects. With customizable hover expansions, tooltips, and clickable links, this widget enhances user engagement while maintaining a sleek and modern look. Whether you’re showcasing features, services, or steps in a process, the Stacked Icons Widget helps you present information in an eye-catching and intuitive way.

Let’s look at each of the options in the Stacked Icons widget for Elementor below.

Add a Stacked Icons Widget to Elementor

This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Stacked Icons”
  3. Hover over the widget in the search results and click install
  4. Add the “Stacked Icons” widget to any Elementor Page

Source Settings

The Stacked Icons 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.

1

Items

You can use the item repeater field as item source.

2

Posts

Display WordPress posts dynamically in stacked icons, including custom post types and fields for maximum flexibility.

3

WooCommerce Products

Use this to showcase WooCommerce product images, names, prices, and descriptions in the stacked icons.

4

Meta Field

Use Meta as an item source for your stacked icons to dynamically display and manage content from your Meta data.

5

JSON or CSV

Load your stacked icons with data from JSON or CSV files to easily manage and display structured content.

6

Gallery

You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.

7

Terms

Use Terms as a source for your stacked icons to dynamically display and manage taxonomy terms from your WordPress site.

8

Users

You can use WordPress Users as an item source for your stacked icons to display and manage dynamic content from your site’s user data.

9

Menu

Use your WordPress Menu as a source for the stacked icons to dynamically display and manage menu items in a visually engaging layout.

10

RSS

Fetch and display items from an RSS feed. This is perfect for showcasing updates or content from external blogs.

11

API Integrations

Integrate an API into your stacked icons to dynamically fetch and display data from external systems or services.

General Settings

1

Alignment

Set the alignment of icons.

  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

Select appropriate size of item image from given options. This options ensure that the image fits appropriately for different layouts and design requirements.

  1. Full
  2. Large (max width 1024)
  3. Medium Large (max width 768)
  4. Medium (max width 300)
  5. Thumbnail (150x150)
  6. 1536x1536 (max width 1536)
  7. 2048x2048 (max width 2048)
  8. WooCommerce Thumbnail (300x300)
  9. WooCommerce Single (max width 600)
  10. WooCommerce Gallery Thumbnail (100x100)
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

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.

1

Enable Remote Connection

Use remote control widgets to create advanced creative layouts.

2

Widget Name for Connection

This name will be used to connect and controls this widget by other 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.

Items Setting

Manage the items of the stacked icons using the repeater field.

  1. Add new items
  2. Duplicate items
  3. Delete items
  4. Reorder Items
  5. Edit Items
1

Title

Type text for title.

2

Link

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

3

Image

Choose an image to display.

4

Override Colors

It allows you to apply specific colors, overriding the default color scheme to match your design preferences.

Stacked Icons 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 Icon Styling

Set the icon container size, icon size, hover gap, background color, icon color, border, and box shadow.

Tooltip Styling

You can set the tooltip color, background, border radius, typography, and padding.

Stacked Icons Design Examples For Elementor

Here are some live use cases for the Stacked Icons Widget.

Stacked icons with hotels.

Stacked icons with post carousel.

We hope this guide has helped you understand how to use the Stacked Icons Widget to enhance your Elementor website. With its dynamic stacking effects and interactive options, you can create visually compelling icon layouts that make your content more engaging. If you need further assistance or want to explore more creative possibilities, feel free to reach out or browse our collection of Elementor widgets!

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!