ou have seen this pattern on hundreds of SaaS and eCommerce sites: a row of overlapping circular profile photos — five to eight faces — with text alongside reading “Trusted by 2,500+ businesses” or “Join 14,000 site owners.” It is one of the most effective trust signals in web design, and it is surprisingly difficult to implement well in WordPress.
This article covers why avatar stacks work, the practical options for adding them to your site, and how to handle the common problem of not having enough real customer photos.
Why Avatar Stacks Work
An avatar stack combines three psychological triggers in a single compact element.
Human faces create connection. People are hardwired to pay attention to faces. Eye-tracking studies consistently show that visitors look at faces before almost any other page element. A row of faces immediately signals “real people use this.”
The overlapping layout implies volume. The visual overlap creates the impression of a crowd — more people than are actually shown. Five overlapping avatars suggest a much larger group standing behind them.
The accompanying number provides concrete proof. “Trusted by 2,500+ businesses” transforms the visual impression into a verifiable claim. The number anchors the trust signal with evidence.
Together, these three elements answer the visitor’s implicit question — “Have other people used this, and are they real?” — in under a second.
Where Avatar Stacks Belong
Homepage hero section. This is the most common and effective placement. The avatar stack sits near your headline or call to action, establishing credibility before the visitor makes any decision about whether to explore further.
Above signup forms. On email signup, free trial, or demo request pages, an avatar stack with “Join 3,200+ subscribers” directly addresses the hesitation of submitting personal information.
Pricing pages. Near the buy button, an avatar stack reinforces that other people have already made this purchase decision and are still around.
Landing pages. Any page with a single conversion goal benefits from an avatar stack placed close to the call to action.
Avatar stacks are less useful on blog posts, documentation pages, or deep content pages where the visitor’s goal is information rather than a conversion decision.
Method 1: Use a Social Proof Plugin
The fastest route. Several WordPress plugins include avatar stack widgets that you can place via shortcode or block. The best implementations let you:
- Upload or generate avatar images
- Control the number of visible avatars
- Set the overlap amount and avatar size
- Add customisable trust text alongside
- Choose circular or rounded frames
This is the recommended approach for most site owners. A dedicated plugin handles the CSS complexity of overlapping images, responsive behaviour on mobile, and consistent styling across browsers — all things that are tedious to build manually.
When choosing a plugin, look for one that offers static avatar displays rather than only live notification popups. You want an always-visible trust element, not a temporary animation.
Method 2: Build It With Your Page Builder
If you use Elementor, Kadence, Bricks, or similar, you can construct an avatar stack from image elements and CSS.
The basic approach: create a horizontal container, add circular image elements inside it, and use negative margins to overlap them. Add a text element alongside for the trust copy.
In Elementor, for example:
- Create a Flex container set to horizontal direction
- Add Image widgets inside it, each set to a fixed width and height with border-radius: 50% to make them circular
- Apply a negative left margin (around -10 to -15 pixels) to each image after the first to create the overlap
- Add a border to each image (2-3 pixels, white or your background colour) so the overlap looks clean
- Add a Heading or Text widget after the images for your trust text
This works but requires manual responsive adjustments for different screen sizes. On mobile, you may need to reduce avatar sizes or show fewer avatars to prevent the layout from breaking.
Method 3: Custom CSS
For developers, a lightweight avatar stack can be built with HTML and a few lines of CSS. The key properties are:
- Flexbox for horizontal layout
- Fixed dimensions with border-radius: 50% for circular images
- Negative margin-left for overlapping
- A white border on each image to create separation
- Object-fit: cover to handle images of different aspect ratios
This approach adds zero plugin overhead and loads fastest, but you maintain the code yourself and need to ensure it works across all screen sizes.
The Avatar Problem: Where Do the Photos Come From?
This is where most site owners get stuck. An avatar stack needs five to eight portrait photos, and most businesses do not have a library of customer headshots to pull from.
Here are your options, from most authentic to most practical.
Real Customer Photos
The gold standard. If you have customers who have provided profile photos — through their account, Gravatar, social media, or direct communication — ask permission to use them. Even three or four real photos mixed with other approaches creates authenticity.
How to ask: A simple email works. “We are updating our website and would love to feature you as one of our customers. Would you be happy for us to use your profile photo alongside a trust badge on our homepage?”
Most customers are flattered and say yes.
Gravatar Images
If your customers have WordPress accounts or have interacted with your site through comments, they may have Gravatar images associated with their email addresses. These are already semi-public and can be retrieved via the Gravatar API.
AI-Generated Avatars
When you do not have real customer photos, AI-generated avatars are a practical alternative. Services like Generated Photos and This Person Does Not Exist create realistic portrait images that do not belong to any real person.
The advantage is that AI avatars look natural and diverse without using generic stock photos that visitors recognise from a dozen other websites. The disadvantage is that they are not real customers, which raises a question of honesty.
The ethical approach: use AI avatars as a visual element representing your customer base, not as fake testimonials attributed to specific people. An avatar stack with AI-generated faces alongside “Trusted by 500+ site owners” is representing a real customer count with illustrative imagery. That is fundamentally different from creating fake customer profiles with made-up names and quotes.
Stock Photos
The weakest option. Generic stock photos are recognisable — visitors have seen the same smiling faces on countless other websites. They signal “this business does not have real customers to show” rather than building trust.
If you use stock photos, at least choose images that look natural rather than posed, and avoid the five or six most overused stock portraits that appear on every SaaS landing page.
Illustrated or Abstract Avatars
Some sites use illustrated avatars — cartoon-style portraits or abstract shapes with initials. These are honest (they do not pretend to be real photos) and can look polished when well-designed. Services like Boring Avatars and DiceBear generate unique illustrated avatars programmatically.
This approach works best for brands with a playful or design-forward identity. For professional services or enterprise products, photographic avatars typically perform better.
Getting the Details Right
Five to eight avatars is the sweet spot. Fewer than five looks sparse. More than eight creates visual clutter and does not add proportionally more trust.
Diversity matters. Your avatar stack should reflect the diversity of your actual customer base. A row of identical-looking faces undermines the “many different people trust this” message.
Size appropriately. Avatars in a stack are typically 32 to 48 pixels in diameter on desktop and slightly smaller on mobile. They should be noticeable without dominating the layout.
White borders create clean separation. A 2-3 pixel white (or background-coloured) border on each avatar prevents the overlapping images from blending into each other.
Pair with specific numbers. “Trusted by 2,500+ businesses” is stronger than “Trusted by thousands.” The specific number does the persuasion work — the avatars are the visual hook that draws attention to it.
The Bottom Line
An avatar stack is one of the most space-efficient trust signals you can add to your site. It communicates social proof in under a second, takes up a single line of space, and works at every scale — from 50 customers to 50,000.
The hardest part is sourcing the images. Start with real customer photos where possible, supplement with AI-generated avatars if needed, and pair the visual element with an honest, specific customer count. The combination of human faces and concrete numbers is consistently one of the highest-converting trust patterns on the web.
For more on where to place trust elements for maximum impact, read Where to Place Social Proof on Your Website.
For the best tools to add avatar stacks and other social proof to WordPress, see our Best Social Proof Plugins for WordPress (2026) — The Complete Guide.