wptheme.com

Testimonial page: a free WordPress block pattern

Three review cards with star ratings, the quote and who said it.

How to use it

  1. Copy the markup below.
  2. In the block editor, open the options menu and switch to the Code editor.
  3. Paste the markup where you want the section, then switch back to the Visual editor.
  4. Swap in your own text and images. Colors come from your theme's palette.

Block markup

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"base-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-base-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained","contentSize":"760px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"gw-eyebrow","align":"center"} -->
<p class="has-text-align-center gw-eyebrow">Reviews</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">What our customers say</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","textColor":"contrast-2","fontSize":"large"} -->
<p class="has-text-align-center has-contrast-2-color has-text-color has-large-font-size">Sample reviews. Replace these with real reviews from your Google Business Profile.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"wide","layout":{"type":"grid","columnCount":3,"minimumColumnWidth":"18rem"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"className":"gw-card","layout":{"type":"constrained"}} -->
<div class="wp-block-group gw-card"><!-- wp:paragraph {"className":"gw-stars"} -->
<p class="gw-stars">★★★★★</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
<p>They showed up when they said they would, explained everything and the price matched the quote.</p>
<!-- /wp:paragraph --><cite>Sample customer · Downtown</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-card","layout":{"type":"constrained"}} -->
<div class="wp-block-group gw-card"><!-- wp:paragraph {"className":"gw-stars"} -->
<p class="gw-stars">★★★★★</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
<p>Friendly, professional and fast. We will not call anyone else.</p>
<!-- /wp:paragraph --><cite>Sample customer · Westside</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-card","layout":{"type":"constrained"}} -->
<div class="wp-block-group gw-card"><!-- wp:paragraph {"className":"gw-stars"} -->
<p class="gw-stars">★★★★★</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
<p>Clear communication from start to finish. Highly recommend.</p>
<!-- /wp:paragraph --><cite>Sample customer · Lakeview</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Uses preset color and spacing slugs from the Groundwork theme (base, surface, accent, contrast). In another theme, map them to that theme's palette.

See it in a live site