People module

Testimonials block

What your customers say: quotes with name, role, photo and star rating, in a grid or a carousel.

Overview

Testimonials shows customer quotes as cards. Each has the quote, the person’s name and role or company, an optional photo and an optional 1–5 star rating. Show them as a grid, or as a carousel with arrows, dots and optional autoplay.

At a glance

Block name: wpbb/testimonials
Module: People
Find it by searching: Testimonials
Loads JavaScript on the site: No

When and why to use it

Social proof on landing pages and pricing pages.
Client feedback on service pages.
A rotating quote strip on the homepage.

Example scenarios

Landing page: three cards, Grid, Card style, stars on.
Homepage strip: Carousel showing 2 at a time, Tint cards, centred, autoplay off.

How to add the Testimonials block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Testimonials in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Testimonials in the results. The block appears with three empty testimonial cards.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Quote, name and role

What it does: Type each testimonial directly into its card.
What to enter or choose: Text; bold and italic allowed in the quote.
Default: 3 sample items
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always.
Example: “Setup took minutes.” — Daniel Okafor, Founder.
Result: Cards without a quote are not shown on the site.

Settings panel: Testimonials

One entry per testimonial; Add testimonial adds another (up to 24). Reorder with the arrows.

Quote

What it does: What they said.
What to enter or choose: One to three sentences work best.
How to use it: Type into the box. Line breaks are kept where the block allows them.
When to use it: Always.
Example: “The best block plugin we have used.”
Result: The card’s main text.

Name

What it does: Who said it.
What to enter or choose: A name.
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Recommended — named quotes are more believable.
Example: “Amira Khan”.
Result: Shown under the quote.

Role or company

What it does: Their title or company.
What to enter or choose: Short text.
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Northfield Studio”.
Result: Grey text under the name.

Photo

What it does: Their picture.
What to enter or choose: Any image; shown as a small circle.
How to use it: Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
When to use it: Optional.
Example: A headshot.
Result: Shown beside the name.

Rating (stars)

What it does: Star rating for this testimonial.
What to enter or choose: A number from 0 to 5.
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: If you collected ratings. 0 hides the stars.
Example: 5.
Result: Gold stars above the quote; screen readers hear “Rated 5 out of 5 stars”.

Settings panel: Layout

Layout

What it does: All cards at once, or a scrolling row.
What to enter or choose: One of: Grid, Carousel.
Default: Grid
How to use it: Click one of the buttons in the group.
When to use it: Grid for 2–6 quotes; Carousel for many.
Example: Carousel for more than three.
Result: The carousel can be swiped and scrolled even without JavaScript. In the editor it is shown as a grid.

Columns (desktop)Desktop

What it does: Cards per row (or visible at once in a carousel).
What to enter or choose: A number from 1 to 4.
Default: 3
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 3.
Result: Cards resize to fit.

TabletTablet

What it does: Cards per row below 1024px.
What to enter or choose: A number from 1 to 3.
Default: 2
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 2.
Result: Applies up to 1023px wide.

MobileMobile

What it does: Cards per row below 600px.
What to enter or choose: A number from 1 to 2.
Default: 1
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 1.
Result: Applies up to 599px wide.

Spacing (px)

What it does: Space between cards.
What to enter or choose: A number from 0 to 80 (px).
Default: 24 px
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always optional.
Example: 24.
Result: Wider or tighter gaps.

Cards

What it does: The card look.
What to enter or choose: One of: Card, Tint, Plain.
Default: Card
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Tint on a white page.
Result: Card has a border and a hover shadow; Plain has no box.

Star rating

What it does: Shows the stars.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: If you entered ratings.
Example: On.
Result: Hidden for every card when off.

Photos

What it does: Shows the photos.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: If you have photos.
Example: On.
Result: Hidden for every card when off.

Quote mark

What it does: Shows a coral quotation mark on each card.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Always optional.
Example: On.
Result: A decorative mark (hidden from screen readers).

Settings panel: Carousel

Shown when Layout is Carousel.

Arrows

What it does: Shows previous/next arrow buttons.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep on for desktop visitors.
Example: On.
Result: Arrows at the sides.

Dots

What it does: Shows a dot per page below the slides.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: To show how many slides there are.
Example: On.
Result: Clickable dots.

Loop

What it does: After the last slide, continues from the first.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on.
Example: On.
Result: Arrows never become disabled.

Autoplay

What it does: Advances slides automatically.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Use sparingly — moving content distracts.
Example: On for a hero slider.
Result: Pauses on hover and focus, shows a pause button, and never runs for visitors who prefer reduced motion.

Delay (seconds)Shown when Autoplay is on

What it does: Time each slide stays.
What to enter or choose: A number from 2 to 15 (s).
Default: 5 seconds
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Longer for slides with text.
Example: 6.
Result: Slower or faster autoplay.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Testimonials offers.

Element: Cards selected first

Each testimonial card. Hover state.

Styles-tab controls for “Cards”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Element: Block

The whole block.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Quote

The quote text.

Styles-tab controls for “Quote”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Name

The name.

Styles-tab controls for “Name”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Role

The role or company.

Styles-tab controls for “Role”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Photo

The photo.

Styles-tab controls for “Photo”
Panel	Control	Per device	Available in states
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States: Normal only.

Element: Stars

The stars (their colour).

Styles-tab controls for “Stars”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal

States: Normal only.

Element: Quote mark

The quotation mark.

Styles-tab controls for “Quote mark”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States: Normal only.

Element: Carousel arrows

Carousel arrows.

Styles-tab controls for “Carousel arrows”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Carousel dots

Carousel dots.

Styles-tab controls for “Carousel dots”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Active
	Color / Gradient	—	Normal, Active
	Image	—	Normal
Border	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Active — The selected / current item ([aria-current="true"]).

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

Each testimonial is a <figure> with a <blockquote> and a <figcaption> naming the person. The carousel uses the plugin’s shared, dependency-free carousel script; without JavaScript it still scrolls.

Limitations and notes

No review structured data: Google ignores self-published reviews of your own business.
Ratings are whole stars (0–5).

Troubleshooting

A testimonial does not show on the site.

Its quote is empty. Type a quote into the card.

Overview

At a glance

When and why to use it

Example scenarios

How to add the Testimonials block

Content settings

On the block (in the editor canvas)

Quote, name and role

Block toolbar

Align

Settings panel: Testimonials

Quote

Name

Role or company

Photo

Rating (stars)

Settings panel: Layout

Layout

Columns (desktop)Desktop

TabletTablet

MobileMobile

Spacing (px)

Cards

Star rating

Photos

Quote mark

Settings panel: Carousel

Arrows

Dots

Loop

Autoplay

Delay (seconds)Shown when Autoplay is on

Design & styling

Element: Cards selected first

Element: Block

Element: Quote

Element: Name

Element: Role

Element: Photo

Element: Stars

Element: Quote mark

Element: Carousel arrows

Element: Carousel dots

Responsive settings

Advanced options

How it works on your site

Limitations and notes

Troubleshooting