Fancy Testimonial: 2 Proven Layouts That Make Reviews Read

October 16, 2026
·
Shahidul Islam
Fancy testimonial widget for Elementor showing the wave avatar layout

Most testimonial sections get skipped. Three cards in a row, three grey portraits, three paragraphs of praise that all sound the same, and the visitor’s eye slides straight past to the next section. The content is fine. The shape is the problem: a row of equal cards reads as decoration, so nobody stops.

The fancy testimonial widget changes the shape. Instead of parking every review in its own box, it puts the people first, as a run of avatars, and gives one review at a time the whole width of the section. You see a crowd, then you read a single voice. That is closer to how word of mouth actually works.

Fancy testimonial wave layout in Elementor with avatars on a curve
Wave Path: the avatars ride a drawn curve above the review.

Where a fancy testimonial section earns its place

  • Agency and studio sites. Ten client faces above one detailed quote says more about your book of work than ten logos.
  • SaaS pricing pages. A row of customer avatars just under the plans answers “who else pays for this” without another section.
  • Course and coaching pages. Student photos carry the outcome; the review underneath carries the detail.
  • Local service sites. Plumbers, clinics, trades: faces from the same town beat five stars from nowhere.
  • Product launch pages. Early access users, shown as a wall, make a new product look already used.
  • Recruitment pages. Current staff as avatars, one honest quote at a time, reads better than a careers blurb.

Two layouts, and when to pick each

The layout control offers exactly two, and they solve different problems.

Wave PathCluster Wall
Avatarsride a drawn sine curve, with node dotsstrict grid, every second column dropped
Best forsix to twelve reviewstwenty or more reviews
Review sitsbelow the curve, arrows either sidebeside or under one large featured avatar
Reads asa journey through customersa crowd that already bought
Extra controlsavatars per view, wave depth, path linewall columns, column stagger, featured size

Wave Path suits a considered service where each client matters. Cluster Wall suits volume, where the point is how many there are. Both run on the same content, so switching is one control, not a rebuild.

Fancy testimonial cluster wall layout with a staggered grid of avatars
Cluster Wall: a staggered wall of faces above one featured review.

The features that decide it

Two content sources, one widget. Write the reviews by hand in the repeater, or set Source to Dynamic Posts and pull them from a query. On the dynamic path the post title becomes the name, the first category becomes the designation, the excerpt becomes the review and the featured image becomes the avatar. A testimonial custom post type works with no mapping code.

A rating that comes from your data. Each repeater row carries a 0 to 5 rating. On the dynamic path, point Rating Custom Field at the meta key that already holds the score and every post brings its own stars.

A Read More link that keeps the layout still. Reviews are trimmed to a word limit on the front end, not on the server, so the link has something to reveal. Long reviews and short ones sit in the same height, and a visitor who wants the detail can have it.

Click any avatar to jump to that review. Every avatar is a button. The active one gets a halo drawn on its own box, so the ring stays concentric no matter what size the avatar is.

Dynamic tags on every field that can take one. Image, name, designation, review, rating, the rating meta key, the word limit and both Read More labels all accept dynamic tags, which is what makes the widget usable inside a loop template.

Two fancy testimonial treatments side by side on light and dark sections
Node dots mark every avatar on the path line.

How to build it in six steps

  1. Drop the widget in, and leave Source on Default Repeater while you rough the section out.
  2. Fill three rows only: image, name, designation, review, rating. Three is enough to judge the shape.
  3. Pick the layout. Wave Path for a handful of reviews, Cluster Wall once you have twenty.
  4. Set Avatar Size and, on Wave Path, Avatars Per View. Seven reads as a crowd, three reads as a shortlist.
  5. Set the Review Length in words. Sixteen is about two lines, which is where the Read More link stops feeling like a trick.
  6. Switch Source to Dynamic Posts and point the Query tab at your testimonial post type once the design is settled.

Build the layout against three fake reviews, then swap in the real query. Designing against live content is how sections end up shaped around whoever happened to write the longest paragraph.

Fancy testimonial widget shown on desktop and on a phone
On a narrow column the review stacks under the avatar.

What changes on the page

A testimonial row that reads as decoration gets skimmed. A fancy testimonial section gets a stop, because a face at readable size is a person and a grid of small boxes is furniture. The practical gain is attention: one review at a time means the copy actually gets read, and the avatars carry the volume that a single review cannot.

There is a second gain that is easy to miss. Because the widget holds one review at a time, you can afford longer reviews. The three card layout punishes anyone who wrote more than forty words. This one rewards them.

Getting the fancy testimonial right

  • Keep the wall column count even. The control offers 4, 6, 8, 10 and 12 for a reason: the stagger marks every second column, and an odd count flips that pattern on each new row into a diagonal.
  • Use real photographs. The layout puts faces at a size where a stock portrait is obvious.
  • Set the wall spacing wider than you think. The stagger is a transform and reserves no space, so the row gap has to pay for it.
  • Do not trim the excerpt twice. If your theme already shortens excerpts, the Read More link will have nothing left to reveal.
  • Check the widget in a narrow column. The stacked state is driven by container queries, so it triggers on a narrow desktop column too, not only on phones.
Fancy testimonial in Elementor: Cluster wall reading as a contact sheet of customers
Ten columns wide, every second column dropped by one stagger.

Choosing which reviews to show

The widget will render whatever you give it, so the selection is still your job. Three rules have served me well.

Pick reviews that name a result, not a feeling. “They were great to work with” is a sentence about the writer. “Our client hand off used to take a week of training, now it takes a twenty minute call” is a sentence about you. The second one is also longer, which the fancy testimonial layout can carry and a three card row cannot.

Mix the designations. Six founders in a row reads as one customer type. A founder, a CTO, a marketing lead and an ecommerce manager reads as a product that survives contact with different departments. On the dynamic path, the first category becomes the designation, so the category names you already use decide how varied the section looks.

Order them deliberately. The widget shows the first item first, and most visitors read one review and move on. Put your strongest review in position one and treat the rest as proof of volume. If your query sorts by date, the newest review is not automatically the best one, so consider a manual order or a pinned first row.

One more practical note on the avatars. Because the layout sizes faces well above the usual card thumbnail, a 96 pixel image will look soft. Upload avatars at roughly twice the avatar size you set, and crop them square before upload rather than relying on the browser to do it.

Fancy testimonial: common questions

Is the fancy testimonial widget free?

Yes. It lives in the free Sky Addons plugin. It was built in Pro and moved into the core plugin before release, the same way the Table widget was.

Do I need Elementor Pro for it?

No. It needs Elementor and the free Sky Addons plugin, nothing else.

Can it pull reviews from a custom post type?

Yes. Set Source to Dynamic Posts and use the Query tab. Title becomes the name, the first category becomes the designation, the excerpt becomes the review and the featured image becomes the avatar.

Does it load an animation library?

No. There is no GSAP and no animation library at all. The only motion is the slide transition and a CSS transition on the active avatar.

Does it work on phones?

Yes. The review stacks under the avatar when the widget runs out of width, and the featured alignment is responsive, so it centres on tablet and mobile by default.

Worth the swap

A testimonial section is not a content problem, it is a shape problem. Put the faces in front and give one review the room to be read, and the same words start working. The fancy testimonial widget does that with two layouts, no animation library and no Pro licence.

See it running on the fancy testimonial demo, read the documentation, and compare it with the testimonial widget if you want plain cards instead. For the difference between a blog feed and a review feed, the post list widget covers the other half. Check what else is included on the free versus Pro page and the pricing page. If you want the reasoning behind rating markup, Schema.org publishes the Review type and Google documents its review snippet rules.

Written by
Shahidul Islam
Writes about the work behind the widgets — what shipped, why, and what it cost.
Share
In this post

More from the journal

Fancy Testimonial: 2 Proven Layouts That Make Reviews Read

Fancy Testimonial: 2 Proven Layouts That Make Reviews Read

The fancy testimonial widget gives Elementor two avatar layouts, a rating, a word limited review and a Read More link. Free, and no extra plugin.
Team Member for Elementor: A People Page That Does Not Need a Plugin

Team Member for Elementor: A People Page That Does Not Need a Plugin

Build a team member card in Elementor with a photo, role, short bio, social links and a button, in six styles that all share the same controls.
Luster Grid for Elementor: Titles That Sit on the Image, Not Under It

Luster Grid for Elementor: Titles That Sit on the Image, Not Under It

A luster grid puts the title and category on the image itself, with overlay colour, row height and two typography scales all set inside Elementor.

Comments are closed.