Testimonial
A customer quote with name, role, photo and rating.
The Testimonial widget shows what a customer said, with their name, role and photo, and an optional star rating and quotation mark. The photo can sit above the quote, next to the name, or in a column beside the quote. For several testimonials that visitors swipe through, use Testimonial Carousel.
Add a testimonial
Insert it
Open Insert in the left panel, find Testimonial under Basic (or type
testimonialin Search widgets) and click it or drag it onto the canvas.Write the quote
Type the Quote, Name and Role, or double-click them on the canvas.
Add a photo and rating
Choose a Photo, then turn on Star rating and set the Rating (0–5) if you have one.
Pick a layout
Choose Photo above, Photo next to name or Photo beside quote in Layout, and style the box on the Design tab.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). Text fields and the photo support dynamic tags, for example to build testimonials from a custom post type (see Dynamic tags).
Content tab
Testimonial
| Setting | What it does |
|---|---|
| Quote | What the customer said. Supports dynamic tags. |
| Name | The customer’s name. Supports dynamic tags. |
| Role | Their role, company or location. Supports dynamic tags. |
| Photo | A photo of the customer. Supports dynamic tags. |
| Resolution | The image size WordPress serves. Smaller files load faster; pick one at least as wide as the image is shown. Default: Thumbnail. Shown when Photo has a URL. |
| Name link | Links the name, for example to the customer’s website. Supports dynamic tags. |
| Star rating | Shows a star rating. |
| Rating (0–5) | The rating out of 5. Default: 5. Shown when Star rating is on. |
| Quotation mark | Shows a large quotation mark. |
| Layout | Puts the photo above the quote, next to the name, or in a column beside the quote. Options: Photo above, Photo next to name, Photo beside quote. Default: Photo next to name. |
| Stack on mobile | Moves the photo above the quote on small screens. On by default. Shown when Layout is Photo beside quote. |
| Alignment | Aligns the testimonial. Options: Left, Center, Right. Per device. |
Design tab
Box
| Setting | What it does |
|---|---|
| Background | Background of the testimonial box. |
| Padding | Space inside the box. Per device. |
| Border | Border of the box. |
| Border radius | Rounds the corners of the box. Per device. |
| Shadow | Shadow of the box. |
| Spacing between parts | Space between the photo, quote and name. Per device. |
Quote
| Setting | What it does |
|---|---|
| Typography | Text style or font, size, weight and spacing of the quote. |
| Color | Color of the quote. |
| Max width | Limits the line length of the quote. Per device. |
| Quotation mark › Color | Color of the quotation mark. Shown when Quotation mark is on. |
| Quotation mark › Size | Size of the quotation mark. Shown when Quotation mark is on. Per device. |
Name & role
| Setting | What it does |
|---|---|
| Name typography | Text style or font, size, weight and spacing of the name. |
| Name color | Color of the name. |
| Name link hover color | Color of the linked name on hover. Shown when Name link has a URL. |
| Role typography | Text style or font, size, weight and spacing of the role. |
| Role color | Color of the role. |
| Name to role spacing | Space between the name and the role. Per device. |
Photo
| Setting | What it does |
|---|---|
| Size | Size of the photo. Per device. |
| Border radius | Rounds the photo; 50% makes it a circle. Per device. |
| Border | Border of the photo. |
| Shadow | Shadow of the photo. |
| Spacing | Space between the photo and the text. Per device. |
Stars
This section shows when Star rating is on.
| Setting | What it does |
|---|---|
| Size | Size of the stars. Per device. |
| Spacing | Space between the stars. Per device. |
| Marked color | Color of the filled stars. |
| Unmarked color | Color of the empty stars. |
Shared Design sections
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
Behaviour sections
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Real words, real people. Use quotes you have permission to publish. A full name and a specific role make a testimonial believable.
- Short quotes. Two or three sentences are read; paragraphs are skipped. Use Design → Quote → Max width to keep lines comfortable.
- Photo on phones. With Photo beside quote, Stack on mobile moves the photo above the quote on small screens.
- Alt text. The photo's alt text comes from the media library; describe the person or leave it empty if the name is right beside it.