Quote Blocks

A specialized version of Dirigible Blocks that features a quote alongside an image.

Quote Blocks with testimonial copy beside a featured photo.
Quote Blocks with testimonial copy beside a featured photo.

Usage

Quote Blocks pairs a quote column with a featured image in a 50/50 split — similar to Blocks in layout, but specialized for testimonials. The quote side includes flanking quote marks, body text, a circular headshot, and citation name/title.

Use it for featured testimonials, case study highlights, or editorial quotes where the photo should share equal weight with the copy.

Layout

The block has two fixed regions side by side on desktop:

  • Quote column — quote text, decorative quote marks, citation with optional headshot, name (h4), and job title (small)
  • Featured image column — full-height photo (click to replace in the editor)

On mobile, the featured image stacks above the quote content regardless of Swap Blocks state on desktop.

Settings

  • Swap Blocks — toolbar control flips quote and image columns on desktop only
  • Text Color (reverse print) — light or dark text on the quote column background
  • Text Size — Small (standard paragraph size), Medium (about 2vw), or Large (about 3.8vw)
  • BG Color — background fill for the quote column from your palette

Images

Two separate photos:

  • Featured image — the large photo column. Click the image area in the editor or upload from the sidebar. Set Featured Image Focal Point to keep the subject in frame when cropped.
  • Headshot — small circular citation photo beside the name. Click the headshot placeholder or use the sidebar uploader. Set Headshot Focal Point when a photo is selected.

Without a headshot, name and title center beneath the quote on the front end.

Content

Edit inline in the editor:

  • Quote — main testimonial text (paragraph)
  • Name — citation name
  • Job Title — supporting line below the name

Block width

Quote Blocks supports Wide and Full alignment from the block toolbar and defaults to Full width.

Tips

  • Enable reverse print when using a dark BG Color on the quote column.
  • Use Swap Blocks when the photo subject faces the wrong direction for your layout — remember mobile always shows the image first.
  • Medium or Large text size works well for hero-style testimonial bands at full width.
  • For a single-column quote without a photo split, use the standalone Quote block instead.

Screenshots

Front-end

  • Quote Blocks on the front end with quote marks, citation, and image column.
    Quote Blocks on the front end with quote marks, citation, and image column.

Editor

  • Swap Blocks reverses quote and image columns on desktop.
    Swap Blocks reverses quote and image columns on desktop.
  • Reverse print for light text on a dark quote column background.
    Reverse print for light text on a dark quote column background.
  • BG Color picker for the quote column background.
    BG Color picker for the quote column background.

Settings

Quote Settings

Text Color setting in the block editor sidebar
Text Color

Light or dark text on the quote column. Enable when using a dark background color.

  • Dark
  • Light
Text Size setting in the block editor sidebar
Text Size

Quote text scale — Small (paragraph size), Medium (about 2vw), or Large (about 3.8vw). Medium and Large scale with viewport width.

  • Small
  • Mediumdefault
  • Large
BG Color setting in the block editor sidebar
BG Color

Background fill for the quote column from your site color palette.

Featured Image Focal Point setting in the block editor sidebar
Featured Image Focal Point

Focal point for the featured image so the important area stays visible when cropped.

Headshot Focal Point setting in the block editor sidebar
Headshot Focal Point

Focal point for the citation headshot crop.