docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Free
  5. Testimonials

Testimonials ​

Social proof: client quote, name, role, and avatar. Multiple testimonials render in a grid.

Testimonials

What testimonials add ​

  • Quote, name, and photo in one card
  • Multiple reviews without a custom snippet
  • Pairs well with stats and CTA blocks

Typical placement ​

  • Homepage: trust block after product copy
  • Landing page: reviews before the lead form
  • About page

Page examples ​

Fields in the inspector ​

Testimonials repeater: Quote, Name, Role, Photo. Photo is optional but helps trust.

Similar sections ​

  • Logos for “trusted by” without quotes
  • Team for staff bios, not client quotes

Block parameters ​

ParameterValue
keytestimonials
LayerFree
Categorysocial proof (social)
Chunkpagebuilder_testimonials
Requires—

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Optional.

Testimonials (items) ​

Type repeater. Required. Repeatable rows. "Add" button in the inspector.

Each row:

FieldTypeLabelRequired
quotetextareaQuoteyes
nametextNameyes
roletextRoleno
avatarimageAvatarno

Site output ​

pb-testimonials grid: blockquote, author line, avatar partial.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "quote": "Great service, I recommend it to colleagues.",
      "name": "Jane Doe",
      "role": "Director, Example LLC",
      "avatar": {
        "url": "assets/images/example.jpg",
        "id": 12,
        "filename": "example.jpg",
        "extension": "jpg",
        "title": "example.jpg",
        "width": 1920,
        "height": 1080,
        "type": "image"
      }
    }
  ]
}

Chunk template ​

Fenom chunk pagebuilder_testimonials:

fenom
<section class="pb-section pb-section--testimonials pb-testimonials{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="testimonials"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-testimonials__inner">
    {if $title}
      <h2 class="pb-heading pb-testimonials__title">{$title|pb_text}</h2>
    {/if}
    <div class="pb-testimonials__grid">
      {foreach $items as $item}
        <blockquote class="pb-testimonials__item">
          {if $item.avatar}
            {include 'pagebuilder_partial_image' image=$item.avatar alt=$item.name class='pb-testimonials__avatar'}
          {/if}
          <p class="pb-testimonials__quote">{$item.quote|escape}</p>
          <footer class="pb-testimonials__footer">
            <div class="pb-testimonials__author">{$item.name|pb_text}</div>
            {if $item.role}
              <div class="pb-testimonials__role">{$item.role|escape}</div>
            {/if}
          </footer>
        </blockquote>
      {/foreach}
    </div>
  </div>
</section>

See also ​