Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Widgets
  8. Image Stack

Image Stack

How to use Image Stack Widget of Sky Addons for Elementor

The Sky Addons Image Stack widget creates an overlapping face-pile of avatars — the social proof pattern used by SaaS landing pages to communicate “X people trust us.” Stack images or icons manually with a repeater, or pull in WP Users, WooCommerce customers, EDD customers, or post authors dynamically. A configurable “+N” overflow counter appears when items exceed a visible limit, and an optional Social Proof block beside the stack shows an animated count-up number and a star rating. Rich Tippy tooltips show each person’s name and role on hover. This documentation covers every setting from source to style.

Features:

  1. Manual or Dynamic Source: Build the stack by hand using a repeater (images or icons, name, role, link, online indicator), or connect it to WP Users, WooCommerce Customers, EDD Customers, or Post Authors for automatic, live data.
  2. Overflow Counter: Set a Max Visible number — remaining avatars collapse into a “+N” bubble. Clicking the bubble can expand the hidden avatars in place, or link to a page.
  3. Social Proof Block: A star rating and animated count-up text line (e.g. “Trusted by 2,000+ makers”) positioned right, left, or below the stack.
  4. Rich Tippy Tooltips: Hover any avatar to see a tooltip card with the person’s avatar thumbnail, name, and role. Fully styled from the Tooltip style section.
  5. Avatar Ring Styles: Solid border (default), two-colour gradient ring, or an animated spinning gradient ring — great for Instagram-story-style social proof.
  6. Online Presence Indicator: Enable a coloured dot on individual items to signal active/online status.
  7. Scroll Reveal Entrance: Avatars stagger into view as the section scrolls into the viewport — CSS scroll-driven, no JS overhead.
  8. Lift on Hover: Hovered avatars rise smoothly with a configurable lift distance and scale — pure CSS transform, layout-stable.

Insert Image Stack Widget

  1. Open your page in Elementor and click the + icon to add a new section.
  2. Search for Image Stack in the widget panel and drag it onto the canvas.
  3. The widget renders immediately with four placeholder avatars and a Social Proof block using the default “Trusted by 2,000+ makers” text.

Configure the Stack

The Stack section is the primary content control.

  • Source — Default (Repeater): add items manually. Dynamic: pull from a live data source.
  • Items (Repeater) — visible when Source is set to Default. Each item has:
    • Media Type — Image or Icon.
    • Image — choose from the media library (shown when Media Type is Image).
    • Icon — pick an icon from the icon library (shown when Media Type is Icon).
    • Name — used as the tooltip title and image alt text.
    • Role / Subtitle — second line in the tooltip card. Leave empty for a name-only tooltip.
    • Link — optional URL to wrap the avatar.
    • Online Indicator — toggles a presence dot on the avatar corner.
  • Dynamic Source — visible when Source is Dynamic. Options:
    • WP Users — pulls registered users’ avatars. Filter by User Roles, exclude the logged-in user, order by Most Recent / Random / Name, and choose the tooltip subtitle (WP Role, User Bio, or None). Optionally link avatars to author archive pages.
    • WooCommerce Customers — pulls customers from recent orders using Gravatar. Choose Full Name or First + Last Initial (privacy-aware) name format.
    • EDD Customers — same as WooCommerce Customers but for Easy Digital Downloads.
    • Post Authors — unique authors of published posts from a chosen post type, with optional author archive links.
  • Number of People — max items to fetch from the dynamic source (1–50).
  • Cache Duration — how long dynamic data is stored before re-fetching: No Cache, 1 Hour, 6 Hours, 12 Hours (default), 1 Day, 3 Days, 1 Week.
  • Alignment — left, centre, or right alignment of the face pile.

Configure the Overflow Counter

The Overflow Counter section controls the “+N” bubble shown when items exceed Max Visible.

  • Max Visible — number of avatars shown before the “+N” bubble appears. Set to 0 to show all.
  • Counter Prefix — text prepended to the hidden count (default: “+”).
  • Counter Link — optional URL to navigate to when clicking the counter bubble.
  • Counter Tooltip — tooltip text shown on hover over the bubble (only available when Click to Reveal Rest is off).
  • Click to Reveal Rest — when enabled, clicking the “+N” bubble expands and animates the hidden avatars into the pile in place, without any page navigation.

Configure Social Proof

The Social Proof section adds a rating and text block alongside the face pile.

  • Position — where the proof block appears relative to the stack: Right, Left, or Below.
  • Rating — toggle star display. Set Rating Value (0–5, decimal supported) and optionally show the numeric Score Number next to the stars.
  • Proof Text — toggle the text line. Configure:
    • Prefix Text — e.g. “Trusted by “
    • Animated Number — toggle a count-up animation. Set Count Start, Count End, Thousands Separator, and Duration.
    • Suffix Text — e.g. “+ makers”

Configure Settings

The Settings section controls widget-level interactions and animations.

  • Tooltip Placement — where Tippy tooltips appear: Top, Bottom, Left, or Right.
  • Lift on Hover — raises the hovered avatar upward on hover without shifting surrounding items.
  • Hover Speed — transition duration for the lift and scale effect (in seconds or ms).
  • Scroll Reveal — avatars stagger into view as the widget enters the viewport (CSS scroll-driven animation, modern browsers).

Style the Widget

All style sections are in the Style tab.

  • Faces — Normal tab: Avatar Size, Icon Size, Icon Color, background, border, border radius, Overlap (negative margin between avatars), box shadow.
  • Faces — Avatar Ring: Choose Solid (uses the border colour from the border group control), Gradient Ring (two colours), or Animated Gradient (spinning ring). Set Ring Color 1, Ring Color 2, Ring Thickness, and Ring Spin Speed.
  • Faces — Online Dot: Dot colour and size for the presence indicator.
  • Faces — Hover tab: Icon colour, background, border colour, box shadow on hover. Lift Distance and Scale for the hover lift effect.
  • Overflow Counter: Text colour, background, typography for the “+N” bubble.
  • Social Proof: Gap between stack and proof block. Rating stars filled/empty colours and size. Score number colour and typography. Proof text colour and typography. Animated number colour and typography.
  • Tooltip: Max width, name/role colours, avatar size inside the tooltip, background, arrow colour, border, border radius, padding, typography, box shadow.

Save and Preview

Click Update in Elementor to save. Open the page in a new browser tab and hover an avatar to confirm the tooltip appears. If you used Scroll Reveal, scroll the page to verify the entrance animation triggers. For dynamic sources, check that the expected user avatars are loading.

Best Practices

  • Place the widget near a CTA button — “Join 2,000+ makers → Get Started” converts better when the face pile is directly above the button.
  • Keep Max Visible at 5–7 avatars. The “+N” counter tells a stronger story than showing 30 faces at once.
  • Use the Animated Gradient Ring style sparingly — powerful on hero sections, distracting if overused.
  • For WooCommerce / EDD sources, use First + Last Initial name format to protect customer privacy while still showing real names.
  • Enable Scroll Reveal on hero sections for a modern “the team is joining in” effect on first view.

Troubleshooting

  • Tooltips not appearing — confirm the Tippy.js library is loading. Check for JS errors in the browser console. The tooltip only renders if Name or Role has a value for that item.
  • Dynamic source shows no avatars — WP Users need a Gravatar set, or a custom avatar plugin. WooCommerce/EDD sources need at least one completed order. Clear the cache by setting Cache Duration to No Cache temporarily.
  • Scroll Reveal not triggering — the animation uses CSS scroll-driven animations, which require a modern browser (Chrome 115+, Firefox 110+, Safari 17+). Older browsers skip it gracefully.
  • Click to Reveal Rest not expanding — ensure the widget’s JS is loading. Check for JS errors in the browser console.

Frequently Asked Questions

Can I mix images and icons in the same stack?

Yes. In the repeater (manual source), each item has its own Media Type toggle — set some to Image and others to Icon. This is useful when a few team members don’t have photos yet.

How do I control the overlap distance between avatars?

In Style → Faces → Normal, use the Overlap slider. Higher values bring avatars closer together; lower values spread them apart. The widget uses a CSS variable so the layout stays clean at all values.

Does the dynamic source update automatically?

Yes. Dynamic data is cached using WordPress transients. When the cache expires, the next page load fetches fresh data. Set Cache Duration to match how often your user/customer list changes — weekly is usually sufficient for most sites.

Can I use the animated count-up number without the star rating?

Yes. In the Social Proof section, toggle Rating off and keep Proof Text on. The animated number and text line will display without any stars.

Is the widget accessible?

Yes. The wrapper has a role="group" and an aria-label announcing the member count. Images include alt text from the Name field. The overflow counter uses role="button" and aria-expanded when Click to Reveal Rest is enabled. Star ratings include an aria-label with the numeric value.

Related Documentation

  • Team Member — full team member cards with bio and social links.
  • Team Member Carousel — team member cards in a swipeable carousel.
  • Testimonial — static testimonial cards for social proof copy.
  • Review — star-rated review cards with avatar and review text.

Conclusion

The Image Stack widget delivers the most compelling social proof element available in Sky Addons — overlapping avatars, an animated count, a star rating, and rich hover tooltips, all driven by live data or a hand-crafted repeater. Configure the source, tweak the overflow counter, set up the Social Proof block, enable Scroll Reveal, and style every detail from the panel. The result is a trust-building element that communicates real community or customer momentum in a single glance.

How can we help?