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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Stacked Icons”
- Hover over the widget in the search results and click install
- 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.
Items
You can use the item repeater field as item source.
Posts
Display WordPress posts dynamically in stacked icons, including custom post types and fields for maximum flexibility.
WooCommerce Products
Use this to showcase WooCommerce product images, names, prices, and descriptions in the stacked icons.
Meta Field
Use Meta as an item source for your stacked icons to dynamically display and manage content from your Meta data.
JSON or CSV
Load your stacked icons 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 stacked icons to dynamically display and manage taxonomy terms from your WordPress site.
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.
Menu
Use your WordPress Menu as a source for the stacked icons 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 stacked icons to dynamically fetch and display data from external systems or services.
General Settings
Alignment
Set the alignment of icons.
- 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 icons using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
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!
