Testimonials

Show what customers say about you as a grid, a rotating carousel or speech bubbles, with an author, a photo and a star rating on each quote. It is shown in the block inserter as Canvas Testimonials and registered as canvas-core/testimonials.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

• Testimonial ItemsDefaultEmpty

  The testimonials in this set, one card each.

  Each row of Testimonial Items takes:

  • ContentDefaultEmpty

    What the customer said. Keep it short enough that every card in the row stays a similar height.

  • Author NameDefaultEmpty

    Who said it, shown under the quote.

  • Author TitleDefaultEmpty

    Their role or company, shown in smaller type under the name.

  • Author ImageDefault0

    Portrait of the person quoted.

  • Portrait URLDefaultEmpty

    Used only when no portrait is chosen above.

  • Portrait DescriptionDefaultEmpty

    How the portrait is described to someone who cannot see it. Leave empty to use the description saved with the file.

  • Rating (0 to 5)Default0

    How many stars this card shows, once Show Rating is on.

  • Bubble DirectionDefaultEmpty

    Bubble layout only: a row of bubbles may mix directions.

    ChoicesBlock default (empty)Points leftPoints right

  • Extra Card ClassesDefaultEmpty

    Class names on this card alone, most often for spacing the rest of the set does not need.

  • Video Embed URLDefaultEmpty

    Shown above the card body: a video testimonial.

  • Bubble ColorDefaultEmpty

    Fill colour of this card in the Bubble layout, taken from the theme palette.

    ChoicesNone (empty)PrimaryDarkDangerSuccessWarningInfo

• LayoutDefaultGrid

  How the testimonials are arranged: a grid of cards, a carousel, a compact one at a time slider for a sidebar, speech bubbles, or one large quote over a scrolling background.

  ChoicesGridCarouselSlider (Widget)BubbleParallax (DarkCentered)

• ColumnsDefault3

  How many cards sit side by side on a wide screen. Narrow screens stack them.

  Shown when Layout is not "Carousel"

• Image PositionDefaultBeside the quote

  Where the portrait sits in relation to the quotation.

  ChoicesBeside the quoteAbove the quote (centred)Author row under the quoteAvatar overlapping the card top

• Show RatingDefaultOff

  Show each card's star rating. A card left at 0 shows no stars.

• Show ImageDefaultOn

  Show the author portrait. Turn it off for a set where not everyone has a photograph.

• Show Quote IconDefaultOn

  Show the large decorative quotation mark behind each card.

Style

• Avatar Size (px)Default0

  Width/height of the author image. 0 uses the layout default.

• Parallax BackgroundDefaultEmpty

  Background image for the Parallax layout (dark, full-width section).

  Shown when Layout is "Parallax (Dark, Centered)"

• Overlay ColorDefaultrgba(241,128,82,0.9)

  Colour of the wash laid over the background picture, which is what keeps the quote readable. Leave empty for no wash.

  Shown when Layout is "Parallax (Dark, Centered)"

Slider

• Slide AnimationDefaultSlide

  How the slider transitions between testimonials.

  ChoicesSlideFadeShown when Layout is "Slider (Widget)"

Layout

• Wrapper ClassesDefaultEmpty

  Replaces the default root class. Enter "none" to drop the root wrapper so the design's own row is outermost.

• Row ClassesDefaultEmpty

  Replaces the layout default on the grid/bubble row.

• Column ClassesDefaultEmpty

  Replaces the column the Columns setting works out, for a row whose widths differ by screen size.

• Background IconDefaultEmpty

  Decorative icon behind the card (e.g. bi-quote, bi-star-fill).

  Shown when Show Quote Icon is on

• Quote ClassesDefaultEmpty

  Class names on the quotation itself, for a size, weight or colour that differs from the theme default.

• Slide Row ClassesDefaultEmpty

  Replaces the classes on a slide's row. Stack the avatar above the quote with flex-column gy-3 align-items-center.

  Shown when Layout is "Slider (Widget)"

• Slide Text ColumnDefaultEmpty

  Replaces the grid column holding the quote and author.

  Shown when Layout is "Slider (Widget)"

• Quote Size ClassDefaultEmpty

  Replaces the quote's font-size utility, so a full-width testimonial can read larger than a sidebar one.

  Shown when Layout is "Slider (Widget)"

• Quote Inline StyleDefaultEmpty

  Styling set on the quotation itself, for a one off size or line spacing no class covers.

Carousel

• Items (Mobile)Default1

  How many cards are visible at once on a phone.

  Shown when Layout is "Carousel"

• Items (SM)Default1

  How many cards are visible at once on a large phone, from 576 pixels wide.

  Shown when Layout is "Carousel"

• Items (MD)Default2

  How many cards are visible at once on a tablet, from 768 pixels wide.

  Shown when Layout is "Carousel"

• Items (LG)Default2

  How many cards are visible at once on a laptop, from 992 pixels wide.

  Shown when Layout is "Carousel"

• Items (XL)Default3

  How many cards are visible at once on a wide screen, from 1200 pixels.

  Shown when Layout is "Carousel"

• Show ArrowsDefaultOff

  Show previous and next arrows for moving between testimonials.

  Shown when Layout is "Carousel" or "Slider (Widget)"

• Show DotsDefaultOn

  Show a row of dots under the carousel, one per position.

  Shown when Layout is "Carousel"

• Autoplay (ms, 0=off)Default0

  How long each testimonial is held before the carousel advances on its own. 0 leaves it to the visitor.

  Shown when Layout is "Carousel"

• Slide Gap (px)Default20

  Space between one card and the next in the carousel.

  Shown when Layout is "Carousel"

• LoopDefaultOff

  Run the carousel round without end, so the last card is followed by the first.

  Shown when Layout is "Carousel"

• Centre the Active SlideDefaultOff

  Highlights the middle slide and shows the neighbours either side.

  Shown when Layout is "Carousel"

• Carousel ClassesDefaultEmpty

  Extra classes on the .owl-carousel element.

  Shown when Layout is "Carousel"

• Slide Inner ClassesDefaultp-2

  Classes on the padding wrapper inside each slide. Leave empty to drop the wrapper.

  Shown when Layout is "Carousel"

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.