Single Testimonial

A focused testimonial carousel that shows one customer quote at a time with a circle avatar and author info. Great for highlighting individual stories, rotating through a few key voices, or anchoring a homepage with a single, well-crafted quote.

View live preview → Jump to settings ↓

→ Start Here

The most-used controls live up top: the optional section heading, alignment, max width, auto-play behavior, navigation arrows, and a switch to disable transitions for editors who want a static look.

Show Section Heading

Toggle Default: Off

Show or hide the section heading area (badge h6, title h2, description p) above the testimonial carousel. Turn on if you want a "What Our Clients Say" lead-in; leave off when the quotes need to stand on their own.

Heading Alignment (Desktop)

Select Default: Center Shown when: Show Section Heading is on

Text alignment for the heading area on desktop (993px and above).

left Left-aligned
center Centered (default)
right Right-aligned

Heading Alignment (Mobile)

Select Default: Center Shown when: Show Section Heading is on

Text alignment for the heading area on mobile devices (below 768px). Set independently from desktop so the heading can stay centered on phones while desktop reads left.

left Left-aligned
center Centered (default)
right Right-aligned

Heading Max Width

Slider (0-1920px) Default: 900px Shown when: Show Section Heading is on

Maximum width of the heading area in pixels. Set to 0 for no limit. Narrower max widths (700-900px) keep the heading legible without stretching across the full row.

Auto-Play

Toggle Default: Off

Automatically cycle through the testimonials on a timer. Off by default so visitors stay in control; turn on when you have 3+ quotes and want them to rotate without interaction.

Auto-Play Speed

Slider (3-10s) Default: 5s Shown when: Auto-Play is on

Seconds between each testimonial when auto-play is running. 5-7 seconds is comfortable for short quotes; go to 8-10s if your quotes are 30+ words.

Show Arrows

Toggle Default: On

Show left/right chevron arrows on either side of the testimonial for manual navigation. Leave on by default so visitors can step through; turn off when relying on auto-play + dots only.

Disable Transitions

Toggle Default: Off

Turn off the crossfade transition between testimonials so changes are instant. Useful when the section sits on a busy page and you want minimal motion, or when editors prefer a snappier feel.

/// Content

The actual testimonial copy: the optional section heading rich text, the scroll-in animation, and the repeater of individual testimonial entries (quote, avatar, author info).

Section Heading

Rich text Default: Testimonials / What Our Clients Say / one-line description Shown when: Show Section Heading is on

The badge + title + description block above the testimonial carousel. Default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.

Fade-In Animation

Select Default: None

Entrance animation when the section scrolls into view. Triggered via IntersectionObserver and combines a 30px slide from the chosen direction with opacity.

none No animation (default)
bottom Fade Up (slides up from below)
top Fade Down (slides down from above)
left Fade from Left
right Fade from Right
fade Fade Only (no slide)

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.

Testimonials (repeater)

Group (repeater) Default: 3 items (min 1, max 10)

The list of individual testimonials shown in the carousel. Editors can add, remove, and reorder entries; each entry exposes the three fields documented below. Minimum 1 entry, maximum 10. With auto-play off, navigation falls to the arrows and dots.

Quote

Rich text (per item) Default: "This team delivered outstanding results that exceeded our expectations in every way."

The testimonial body. Keep it to 1-3 sentences for best legibility inside the rotation. Markup defaults to a <p> but supports the full rich-text toolbar (bold, italics, links).

Avatar

Image (per item) Default: empty (placeholders for the 3 seed items)

The circle avatar shown next to the author info. Recommended size 200x200px so the image stays sharp when the avatar size slider goes up to 96px. Alt text defaults to "Client avatar" and should be set per author.

Tip: Use a unique filename when you replace an avatar. HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image.

Author Info

Rich text (per item) Default: "Full Name" / "Title, Company"

The name + title/company block below the quote. The default uses two <p> elements with the name wrapped in <strong>. Keep it tight (one line for the name, one for title + company) so it sits cleanly next to the avatar.

Custom ID & Classes (code)

Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #testimonials) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Style Settings

Everything visual: the testimonial style block (quote sizing, color, avatar, dots, arrows), badge styling, section dividers, and the row's background/width/spacing.

/// Testimonial Style

Quote Max Width

Slider (400-1200px) Default: 700px

Maximum width of the testimonial content area. 700px keeps quote lines around 70-80 characters which reads best; widen to 900-1000px only when quotes are short and you want them to breathe.

Quote Text Color

Color Default: #1a1a1a @ 100%

Color of the testimonial quote text. Keep it high-contrast against the row background; switch to a near-white (#f5f5f5) when the row is on a dark background.

Quote Font Size (Desktop)

Slider (14-40px) Default: 22px

Font size of the quote text on desktop. 20-24px is the sweet spot; go larger (28-32px) when the testimonial is the lead element on a page.

Quote Font Size (Mobile)

Slider (14-32px) Default: 18px

Font size of the quote text on mobile. Drop a few px below desktop so longer quotes don't overflow a phone screen.

Author Text Color

Color Default: #666666 @ 100%

Color of the author name and title text. Defaults to a muted gray so the quote stays the visual lead; switch to lighter shades on dark backgrounds.

Avatar Size

Slider (32-96px, step 4) Default: 56px

Width and height of the circle avatar. 48-64px feels balanced next to a 22px quote; go to 80-96px when the testimonial is hero-level and the avatar should anchor the layout.

Dot Color

Color Default: #d1d5db @ 100%

Color of inactive navigation dots below the testimonial. Light gray by default; pair with the Dot Active Color so the active state reads at a glance.

Dot Active Color

Color Default: #1a1a1a @ 100%

Color of the active navigation dot. Use the brand primary if you want the dots to feel branded; otherwise keep the near-black default.

Arrow Color

Color Default: #1a1a1a @ 30% Shown when: Show Arrows is on

Color of the left/right navigation chevron arrows. Defaults to a faded near-black so the arrows are visible without competing with the quote. Bump opacity to 60-100% if visitors aren't noticing them.

/// Badge Style

Show Badge Styling

Toggle Default: On

Styles the <h6> inside the section heading as a pill badge instead of a plain heading. The badge color/border are pulled from the three color fields below.

Badge Background

Color Default: #ffffff @ 100% Shown when: Show Badge Styling is on

Fill color of the badge pill. Defaults to white for a clean look on light backgrounds; switch to a brand tint when you want the badge to draw the eye first.

Badge Border

Color Default: #e0e0e0 @ 100% Shown when: Show Badge Styling is on

Border color of the badge pill. Defaults to a subtle light gray hairline. Match it to the background color to create a borderless pill, or use a brand color for emphasis.

Badge Text Color

Color Default: #1a1a1a @ 100% Shown when: Show Badge Styling is on

Color of the text inside the badge. Pair with the Badge Background for high contrast.

/// Section Dividers

Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.

Top Divider

Select Default: None

Decorative shape at the top of the section. The shape renders as an inline SVG filled with the top divider color.

none No divider (default)
wave-1 Wave 1 (Gentle)
wave-2 Wave 2 (Sharp)
wave-3 Wave 3 (Multi)
wave-4 Wave 4 (Smooth)
wave-5 Wave 5 (Layered)
tilt Tilt (Angled)
curve Curve (Arc)
triangle Triangle

Top Divider Color

Color Default: #ffffff @ 100% Shown when: Top Divider is set to any shape

Fill color of the top divider SVG. Set this to match the background color of the section above so the divider looks like a transition between rows.

Top Divider Height

Slider (20-200px) Default: 60px Shown when: Top Divider is a wave, curve, or triangle

Height of the top divider shape. Larger values make the shape more pronounced.

Angle Height (Top)

Slider (0-300px) Default: 100px Shown when: Top Divider is set to "tilt"

Height of the angled tilt divider, used only when Top Divider is set to Tilt.

Flip Top Divider

Toggle Default: Off Shown when: Top Divider is set to any shape

Mirror the divider shape horizontally. Useful for varying the rhythm when alternating dividers between adjacent sections.

Bottom Divider

Select Default: None

Decorative shape at the bottom of the section. Same 9 shape options as the top divider.

none No divider (default)
wave-1 Wave 1 (Gentle)
wave-2 Wave 2 (Sharp)
wave-3 Wave 3 (Multi)
wave-4 Wave 4 (Smooth)
wave-5 Wave 5 (Layered)
tilt Tilt (Angled)
curve Curve (Arc)
triangle Triangle

Bottom Divider Color

Color Default: #ffffff @ 100% Shown when: Bottom Divider is set to any shape

Fill color of the bottom divider SVG. Set this to match the background color of the section below.

Bottom Divider Height

Slider (20-200px) Default: 60px Shown when: Bottom Divider is a wave, curve, or triangle

Height of the bottom divider shape.

Angle Height (Bottom)

Slider (0-300px) Default: 100px Shown when: Bottom Divider is set to "tilt"

Height of the angled tilt divider, used only when Bottom Divider is set to Tilt.

Flip Bottom Divider

Toggle Default: Off Shown when: Bottom Divider is set to any shape

Mirror the bottom divider shape horizontally.

Divider Under Content

Toggle Default: Off Shown when: Bottom Divider is set to any shape

Puts the bottom divider behind the section's content (instead of above it) so any buttons or links overlapping the divider remain clickable. Turn on when a CTA in the testimonial gets covered by the divider shape.

/// Row Settings

The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.

Background (Image, Video, Color, etc.)

Group Default: None

The Background Type dropdown drives which sub-controls appear:

none No background (default; section inherits the page bg)
color Solid Color - reveals Background Color picker
gradient Gradient - reveals Top Color, Bottom Color, and 8 direction options
image Image - reveals Background Image, Size (cover/contain/original), Position (5-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

Group Default: Slim

Sets the wrapping container width. Defaults to Slim because the testimonial reads better in a narrower column.

standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
slim Slim (narrower variant, default for this module)
custom Custom - reveals a Custom Width number input (600-1920px, default 1200)

Spacing (Around Content)

Group (per breakpoint)

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:

desktop 100px top, 100px bottom, 0 left, 0 right
tablet 60px top, 60px bottom, 0 left, 0 right
mobile 40px top, 40px bottom, 15px left, 15px right