Fancy Testimonial

Parent / child element

Fancy Testimonial

A testimonial carousel that shows one customer quote at a time, with the author’s photo, name and role, optional star ratings and autoplay, in seven design styles.

Seven design styles: Default plus six Pro card layouts
Author photo, name and role on every testimonial
Star ratings from 0 to 5, in half steps (Pro)
Autoplay with your own slide duration
Per-testimonial accent colour
Accessible dot navigation that pauses on hover and focus

Design styles

Default + 6 Pro styles

Star rating

0 to 5, half steps (Pro)

Carousel

One at a time, dots, autoplay

Default

The team delivered our new site two weeks early, and the handover training meant we could update it ourselves from day one.

Sarah Mitchell

Head of Marketing, Northwind Studio

Every question we had was answered within the hour. It felt like having an in-house team.

David Okafor

Founder, Brightline Agency

Our online orders rose 18 percent in the first month after the redesign.

Emma Larsson

E-commerce Manager, Nordic Home

Horizontal Card · Pro

Clear communication, fair pricing and no surprises. We will be back for the next project.

They took the time to understand our customers before designing a single page.

Booking a table used to take three emails. Now our guests do it in thirty seconds.

Speech Bubble · Pro

Emma Larsson

Our online orders rose 18 percent in the first month after the redesign.

E-commerce Manager, Nordic Home

Sarah Mitchell

The team delivered our new site two weeks early, and the handover training meant we could update it ourselves from day one.

Head of Marketing, Northwind Studio

David Okafor

Every question we had was answered within the hour. It felt like having an in-house team.

Founder, Brightline Agency

Compact Row · Pro

David Okafor

Founder, Brightline Agency

Every question we had was answered within the hour. It felt like having an in-house team.

James Carter

CTO, Fieldwork

Clear communication, fair pricing and no surprises. We will be back for the next project.

Aisha Rahman

Creative Director, Studio Mosaic

They took the time to understand our customers before designing a single page.

Editorial Quote · Pro

They took the time to understand our customers before designing a single page.

Booking a table used to take three emails. Now our guests do it in thirty seconds.

The team delivered our new site two weeks early, and the handover training meant we could update it ourselves from day one.

Quote Blobs · Pro

Booking a table used to take three emails. Now our guests do it in thirty seconds.

Lucas Moreau

Freelance Web Designer

Our online orders rose 18 percent in the first month after the redesign.

Emma Larsson

E-commerce Manager, Nordic Home

Clear communication, fair pricing and no surprises. We will be back for the next project.

James Carter

CTO, Fieldwork

Corporate · Pro

The team delivered our new site two weeks early, and the handover training meant we could update it ourselves from day one.

Clear communication, fair pricing and no surprises. We will be back for the next project.

Every question we had was answered within the hour. It felt like having an in-house team.

Every design uses the same testimonial fields. Switch between them with the Design Style option, and your quotes, photos and ratings carry over.

Example of fancy testimonial with autoplay every 4 seconds and H5 author names…

Our online orders rose 18 percent in the first month after the redesign.

Clear communication, fair pricing and no surprises. We will be back for the next project.

They took the time to understand our customers before designing a single page.

Booking a table used to take three emails. Now our guests do it in thirty seconds.

Example of fancy testimonial with a dark quote bubble, a secondary background and larger photos…

Clear communication, fair pricing and no surprises. We will be back for the next project.

James Carter

CTO, Fieldwork

The team delivered our new site two weeks early, and the handover training meant we could update it ourselves from day one.

Sarah Mitchell

Head of Marketing, Northwind Studio

Booking a table used to take three emails. Now our guests do it in thirty seconds.

Lucas Moreau

Freelance Web Designer

Example of fancy testimonial with half-star ratings and a different accent shade per testimonial…

Sarah Mitchell

Head of Marketing, Northwind Studio

The team delivered our new site two weeks early, and the handover training meant we could update it ourselves from day one.

David Okafor

Founder, Brightline Agency

Every question we had was answered within the hour. It felt like having an in-house team.

Emma Larsson

E-commerce Manager, Nordic Home

Our online orders rose 18 percent in the first month after the redesign.

Use cases

Homepage social proof, with a rotating quote from a happy customer beside your main call to action.

Product and pricing pages that show star-rated reviews right where visitors decide to buy.

Agency and case-study pages featuring client quotes with photos, names and job titles.

Key features

What the element does, in plain terms. Every individual control is listed in the settings reference below.

Layout

Seven design styles

The Default quote bubble plus six Pro card layouts: Horizontal Card, Speech Bubble, Compact Row, Editorial Quote, Quote Blobs and Corporate.

One-at-a-time carousel

Testimonials fade in one by one, with a dot for each quote so visitors can jump straight to any of them.

Content

Author details

Each testimonial has the quote, an author photo with alt text and adjustable size, a name with a selectable heading tag, and a role or company line.

Star ratings (Pro)

A rating from 0 to 5 in half steps, shown as accessible star icons on the Pro designs.

Styling

Colour controls with hover states

Quote bubble, author area, name, role and text colours for the Default design, each with a hover colour.

Per-testimonial accent

Each testimonial has its own accent colour, which the Pro designs use for bars, quote marks and corners.

Behaviour

Autoplay

Rotates through the testimonials at the speed you set, and pauses while visitors hover over or tab into the carousel.

Accessible navigation

The dots are real buttons with labels such as “Show testimonial 2”, so keyboard and screen-reader users can move between quotes.

Settings reference

Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.

Structure General tab

Design Style

Default · Horizontal Card · Speech Bubble · Compact Row · Editorial Quote · Quote Blobs · Corporate

The card layout used for every testimonial. All styles except Default come with Pro.

Testimonials

Child elements

Add, reorder, clone or remove testimonials. Each one has its own settings, listed below.

Heading Size

H1 · H2 · H3 · H4 · H5 · H6

The HTML tag used for author names, so the carousel fits the page heading outline. Default H2.

Autoplay

Yes · No

Rotates through the testimonials automatically. It pauses while visitors hover over or focus the carousel. Default No.

Autoplay Duration

Milliseconds, default 5000

How long each testimonial stays on screen, for example 4000 for four seconds.

CSS Class

Adds a class to the wrapping HTML element.

CSS ID

Adds an ID to the wrapping HTML element.

Testimonials Child element, one per testimonial

Title

Text

The author’s name, shown with the heading tag chosen above.

Caption

Text

The author’s role and company, for example “Founder, Brightline Agency”.

Author Image

Image upload

The author’s photo, shown as a circle on most designs.

Image Alt Text

Text

Describes the photo for screen readers. Leave empty to use the author’s name.

Image Size

Length, for example 80px

The width of the author photo in the Default design.

Testimonial Background Color

Colour, with hover. Default #65bc7b

The accent colour of this testimonial. Pro designs use it for bars, quote marks and corner shapes.

Content

Rich text

The testimonial quote.

Star Rating

0 to 5, in half steps. Default 5

The number of stars shown on Pro designs. Pro only.

Colours Design tab, Default design

Primary Background Color

Colour, with hover. Default #65bc7b

The background of the quote bubble and the colour of the active dot.

Secondary Background Color

Colour, with hover

The background of the author area below the quote.

Caption Text Color

Colour, with hover. Default #2f3237

The colour of the role and company line.

Heading Color

Colour, with hover. Default #000000

The colour of the author’s name.

Text Color

Colour, with hover. Default #ffffff

The colour of the quote text.

Fancy Tabs

Fancy Blockquote

On this page

Use cases
Key features
Settings reference

Star ratings and the per-testimonial accent colour show on the Pro designs. The Design tab colours style the Default design.