Create Testimonial Thumbnail Slider in Elementor

Tired of dull testimonial sections that don’t convert?
If your current layout looks like plain text blocks and fails to grab attention, it’s time for an upgrade.
In this tutorial, we’ll show you how to replace boring testimonial layouts with a sleek, modern Testimonial Thumbnail Slider in Elementor using the Thumbnail Slider Widget.

What are Testimonials? 

Imagine landing on a website and seeing real people praising a product you were unsure about. Suddenly, that hesitation starts to fade. That’s the power of testimonials. They are highly persuasive, which increases conversions.

Why We Ditched Traditional Testimonials (And You Should Too)

Here’s the hard truth: They’re easy to skip, forgettable to read, and rarely spark engagement.

  • Static quote boxes
  • Bland text
  • Tiny arrows to slide through feedback you can’t preview
  • No previews, no personality

That’s exactly why we’re using clickable thumbnail sliders where each testimonial includes a customer’s photo, which serves as a clickable thumbnail.
When clicked, the full testimonial appears. It’s stylish, interactive, and makes browsing feedback effortless.
They don’t have to click arrows. They can visually choose whose experience they want to explore by clicking on the thumbnails.
That’s why it’s time to build a testimonial thumbnail slider in Elementor, which is a fresh approach to showcasing social proof.

Key Takeaways

  1. Explore the limitations of traditional, static testimonials and their limited impact.
  2. Create modern, interactive testimonial sliders featuring clickable thumbnails and customizable layouts.
  3. Customize transitions, autoplay, spacing, arrows, and pagination for smooth navigation.
  4. Style every part of your testimonial thumbnail slider in Elementor to match your brand’s personality.

Steps to add a Testimonial Thumbnail Slider in Elementor

Let’s start creating a stunning testimonial thumbnail slider in Elementor using the Thumbnail Slider Widget.

Install and Activate the Following Plugins

Create and Edit Page in Elementor 

  • First things first, decide where and on which page you want to showcase your testimonials.
  • Once selected, Edit with Elementor

Add the Thumbnail Slider Widget

The Thumbnail Slider widget makes it easy to create a professional testimonial thumbnail slider in Elementor without writing any code.

  • Search the widget 
  • Drag and drop it from the widget panel
Thumbnail Slider Widget in Elementor
Drag the Thumbnail Slider Widget in Elementor

Start Customizing the Testimonial Thumbnail Slider in Elementor

Begin by heading to the Content tab. This is where you’ll find all the essential settings to customize how your thumbnails and testimonials appear and behave.

Adjust the position of the Thumbnails

In the General Settings panel, you can change the overall layout of the thumbnails.

Thumbnails are the Clickable Avatars or the Images of the people.

  • Customize the position of the Thumbnail (Inside, Top, Bottom).
  • Align thumbnails horizontally, and set the container width.

Note: The “Inside Thumbnail Position” feature is only available in the Pro Version.

  • Tweak the vertical offset to adjust the placement of thumbnails within the slide, available only with the “Inside Thumbnail Position” option.
General Setting of Thumbnail Slider
Adjust the position of the Thumbnails

Update the Content of Each Testimonial

Slides Settings allows you to update the content of each testimonial.

Each testimonial can have its own unique, customizable background image.
And you can pair it with a separate thumbnail (such as a customer’s face or avatar) that users can click on.
Just Toggle ON Custom Thumbnail Image, which enables users to choose which story to explore, making testimonials more interactive, engaging, and trust-building.

Add a Custom Thumbnail for each Testimonial
Add a Custom Thumbnail for each Testimonial

You can easily add the customer’s name under the Heading, their feedback in the Description, and even customize the button text (like “Read Full Story”) to link to a full testimonial page.

Easily Enable Custom Style to unlock complete design control over each testimonial, from colors and fonts to layout and positioning, so every story feels impossible to ignore.

Change the Look of Thumbnails

The Thumbnails Settings let you customize the appearance of your thumbnails.

With the Thumbs Per View option, you can choose how many thumbnails appear on screen at once, replacing the outdated arrow-only design. 
Fine-tune the space between each thumbnail to achieve the perfect balance. If your slider has more thumbnails than can fit in one view, simply enable Arrows for easy navigation.
You can also adjust image settings and tweak the thumbnail ratio to ensure every face looks crisp and aligned.

Change the look of Thumbnails
Change the look of Thumbnails in Elementor

Control How Testimonials Move on Your Page

With the Slider Options control, you can control how Testimonials move on Your Page.

Make your testimonials feel alive, let them slide in smoothly, pause when hovered, and loop endlessly to keep the story flowing. 
Add arrows or visual cues so users always know where they are. With autoplay, transitions, and keyboard control, you’re not just displaying reviews, you’re creating an experience.

Slider Options Control How Testimonials Move on Your Page
Slider Options Control How Testimonials Move on Your Page

Style Your Testimonial Thumbnail Slider in Elementor

Now that we have completed the testimonials, it’s your turn to make them unforgettable.
Head over to the Style tab of the Thumbnail Slider widget. 

Here, you have complete control over how everything looks from the slides and headings to buttons, navigation arrows, and even the thumbnails themselves.

Take a few minutes to explore each style panel, get creative, keep it consistent with your website’s look, and preview the result live to see how it feels to your visitors.

Style Your Testimonials Thumbnail Slider in Elementor
Style Your Testimonials Thumbnail Slider in Elementor

Have questions or want to explore more features? Dive into our full Thumbnail Slider Widget documentation.

Final Preview of Testimonial Thumbnail Slider in Elementor:

Testimonial Thumbnail Slider in Elementor that we just created.

Now that we’ve designed the testimonial slider, it’s time to make your testimonials dynamic and auto-updating. Dive into our guide on building a Dynamic Testimonial Slider in Elementor without the manual hassle.

Build Your Testimonial Thumbnail Slider in Elementor Today

By following these steps, you have designed a fully customizable testimonial thumbnail slider in Elementor that looks stunning and performs even better.
It’s time to ditch boring testimonials. Use the Thumbnail Slider widget to create a section that not only looks great but truly connects with your visitors.

And remember this widget isn’t just for testimonials. With this widget, you’re not limited to testimonials; our Thumbnail Slider Widget demo shows the endless creative possibilities.

Frequently Asked Questions

Can users click on the thumbnails to view specific testimonials?

 Yes! Thumbnails are fully clickable, allowing users to jump directly to the testimonial they want to read, thereby improving engagement and usability.

How do I display different backgrounds for each testimonial?

By enabling the “Custom Style” option, you can set a unique background image, color, and layout for each testimonial slide.

Can I change the position of the thumbnails?

 Absolutely. You can place thumbnails at the top, bottom, or even inside the main slide, with advanced options such as vertical offset and alignment.

Will the testimonial thumbnail slider be responsive on mobile devices?

Yes, the Thumbnail Slider is responsive by default. You can also fine-tune its appearance on tablets and phones using Elementor’s responsive controls.

Leave a Reply

Your email address will not be published. Required fields are marked *