Testimonials are vital for social proof, but static grids of reviews can clutter a homepage. A carousel is the standard solution, allowing you to showcase many happy clients in a compact space.
To solve this, use Div Render Container Slider for Elementor to build a custom testimonial slider using native containers.
Step 1: Designing the Testimonial Card
Create a parent Container. Inside, add a child Container to serve as your first testimonial card. Style this child container with a background color (e.g., light gray or white with a shadow) and some padding.
Inside the card, add standard Elementor widgets:
- Icon Widget: Add a quote icon to signal it’s a review.
- Text Editor: Add the review text.
- Image Box or Inner Container: Add the client’s photo and name.
Duplicate this child container for as many testimonials as you have.
Step 2: Activating Slider Mode
Select the parent Container and toggle Enable Slider Mode to “Yes”.
Step 3: Configuring the Carousel
Navigate to the Slider Settings:
- Slides Per View: Set to
3for Desktop (standard view),2for Tablet, and1for Mobile. - Pagination: Enable
Bullets(Dots) so users can see how many reviews there are. - Autoplay: Set to
Yeswith a delay of roughly5000ms. This ensures the testimonials cycle automatically, catching the user’s eye.
Pro Tips for Testimonials
- Equal Height: Testimonials often vary in length. Elementor Containers usually handle equal height well, but you can set a
Min Heighton your child containers to ensure alignment. - Loop: Enable
Loopso the reviews cycle endlessly.