Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Testimonial Wall — Free Website Section Template
Testimonials · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Testimonial Wall — Free Masonry Testimonials Section Template
Testimonial Wall is the "wall of love" layout that SaaS and creator products use to show lots of social proof at once. A heading and a rating summary pill sit above a masonry wall of quote cards: short quotes and long ones fit together without gaps, so every testimonial reads naturally at its real length.
Quotes of any length
The wall uses CSS columns, so a one-line quote and a five-line story sit side by side without awkward empty space. Every few cards get a faint brand tint, which keeps a big wall from looking repetitive.
Up to twelve testimonials
Each card has the quote, the person's name, their role and company, an optional photo and optional five-star rating (switch stars off for the whole section). Add, duplicate, reorder and remove testimonials; upload real customer photos, which are resized in your browser and kept on your device, or leave the photo empty to hide it.
Responsive and animated
Three columns on desktop, two on tablets and one on phones. The heading reveals with GSAP SplitText and the cards stagger in as the section scrolls into view.
Export it
Download HTML or a ZIP with your photos, copy a React or Vue component, or fork it into My Code. For a slider instead of a wall, use the Testimonial Carousel.
Why use it
Why Use the Testimonial Wall
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading and testimonials in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
It uses CSS multi-column layout (columns: 3 300px) with break-inside: avoid on each card, so cards flow down each column and pack tightly whatever their length. No JavaScript is needed.
Yes. Leave a testimonial’s photo empty to hide it, and switch Star ratings off to remove the stars from every card.
Six to nine works well on a homepage. Up to twelve fit; for more, link to a dedicated reviews page.
Yes. The single HTML file embeds uploaded photos and the ZIP puts them in an images folder.
It saves an editable copy of your Testimonial Wall in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.