📖 Overview
The Testimonials block displays customer quotes and testimonials. When multiple testimonials are added, they are displayed in a Swiper slider with navigation controls. Each testimonial renders the Testimonial component.
✏️ Content Options
Testimonials are managed via a repeater field. Use the “Add Testimonial” button to add as many testimonials as needed.
| Field |
Type |
Required |
Description |
| Manual or Stored? |
Select |
No |
Choose to manually enter testimonial details or select from stored Testimonial posts |
Manual Mode
| Field |
Type |
Required |
Description |
| Company Logo |
Image |
No |
Logo displayed above the quote |
| Quote |
Textarea |
No |
The testimonial quote text |
| Cite Image |
Image |
No |
Photo of the person giving the testimonial |
| Cite |
Text |
No |
Name of the person giving the testimonial |
| Cite Job Title |
Text |
No |
Job title of the person |
| Cite Company |
Text |
No |
Company name of the person |
Stored Mode
| Field |
Type |
Required |
Description |
| Testimonial to use |
Post Object |
Yes |
Select a testimonial from the Testimonials post type |
🎨 CSS Variables
The following CSS variables can be configured to customise the block’s appearance:
| Variable |
Default Value |
--block-testimonials-max-width |
750px |
--block-testimonials-nav-spacing |
var(--spacing-m) |
Testimonial Component CSS Variables
Each testimonial uses the Testimonial component, which has the following CSS variables:
| Variable |
Default Value |
--component-testimonial-quote-spacing |
var(--spacing-s) |
--component-testimonial-quote-gap |
var(--spacing-xxs) |
--component-testimonial-quote-logo-width |
120px |
--component-testimonial-cite-img-width |
50px |
--component-testimonial-quote-icon-size |
var(--icon-lrg) |