Docs / Social Proof / Scrolling Testimonials
A continuous testimonial ticker with two scrolling modes: vertical columns that drift cards upward across one to three lanes, or a horizontal slider that pushes cards sideways with optional manual arrow controls. Use it for press pull-quotes, customer reviews, or any social-proof block where you want quotes to stay in motion.
The high-traffic controls: pick the scroll mode (vertical columns vs horizontal slider), toggle the section heading, set column counts, scroll speed, hover behavior, and the area height. Mode-specific fields below only render for the matching scroll mode.
The master switch for layout. Vertical splits cards into one to three columns that scroll upward continuously. Horizontal lays cards in a single row that pushes sideways (auto or manual). The rest of this group's controls swap based on which mode you pick.
vertical Vertical Columns (default) - cards drift upward in 1-3 laneshorizontal Horizontal Slider - single row scrolling sidewaysShows or hides the heading area (badge h6, title h2, description p) above the testimonial ticker. Turn it off when the row above already provides context and you want the cards to lead.
Text alignment for the heading area on desktop (993px and above).
left Left-alignedcenter Centered (default)right Right-alignedText alignment for the heading area on tablet and mobile (below 992px). Set independently from desktop.
left Left-alignedcenter Centered (default)right Right-alignedMaximum width of the heading area in pixels. Setting it tighter than the row width keeps the title and description from stretching into uncomfortably long lines. Use 0 for no limit.
How many scrolling lanes to render on desktop. Adjacent columns scroll in alternating directions for visual rhythm.
1 1 Column2 2 Columns3 3 Columns (default)Column count on tablet-sized viewports. Drops by one from desktop so cards stay readable.
1 1 Column2 2 Columns (default)3 3 ColumnsDuration of one full scroll cycle in seconds for the vertical columns. Higher numbers scroll slower; lower numbers scroll faster. 60-90s feels calm and readable, under 30s starts to feel busy.
Pauses the vertical scroll animation when a visitor hovers over the ticker so they can actually read a quote. Recommended on.
Fixed height of the scrolling area on desktop. The overflow is masked top and bottom so cards fade in and out as they travel through the viewport. Taller heights show more cards at once.
Fixed height of the scrolling area on mobile (below 576px). Sized smaller than desktop so it doesn't dominate the phone screen.
How the horizontal slider advances. Auto keeps it scrolling continuously. Manual adds left/right arrow buttons so visitors page through deliberately.
auto Auto Scroll - continuous sideways driftmanual Manual (Arrows) (default) - arrow buttons for visitor controlDuration of one full scroll cycle in seconds for horizontal auto mode. Same logic as the vertical Scroll Speed - higher is slower.
Pauses the horizontal auto-scroll on hover so visitors can read a card mid-flight.
Direction the cards travel in horizontal auto mode.
left Left (default) - cards slide right-to-leftright Right - cards slide left-to-rightHow many testimonial cards are visible at once on desktop in horizontal mode. Drives card width on the row.
How many cards are visible at once on mobile in horizontal mode. Defaults to 1 so each quote gets full width on phones.
How the cards align vertically when they have different content lengths. Middle is the safest pick; Top aligns the quote text and lets author info hang below; Bottom anchors the author info and lets text grow upward.
top Topmiddle Middle (default)bottom BottomRenders the testimonials in a static grid with no scrolling animation. Useful when you want the social proof block to behave like a normal card grid (good for screenshots, PDF exports, or accessibility-first pages).
The actual editorial content: the heading rich text, the repeating list of testimonials with photo, and the scroll-in animation.
The badge + title + description block above the ticker. The default markup is <h6> (rendered as a pill badge when 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.
The list of testimonial cards. Each entry holds a quote, an author name and role, and an author photo. There's no maximum count - add as many as you like. For vertical mode, 6-12 cards keeps the columns feeling full without slowing the page. For horizontal mode, 4-8 cards usually reads best.
Plain text body of the quote. One to three sentences works best; longer quotes can break card heights in the vertical columns layout. Quotation marks are not added automatically.
The author's name as displayed under the quote.
The author's job title or role, rendered below the name in a muted color.
Square headshot recommended (around 80x80px). HubSpot file manager handles SRC + alt text. Use a unique filename when you replace this image; HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.
Triggers an IntersectionObserver-driven fade when the section scrolls into view. This is separate from the ticker's own continuous scroll - it fades in the whole section once, not the individual cards.
none No animation (default)bottom Fade Up (from bottom)top Fade Down (from top)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Reduced motion: When a visitor has prefers-reduced-motion: reduce, the fade-in is skipped and the section renders fully visible.
Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #reviews) and JS targeting.
Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.
Everything visual: card colors, borders, shadows, gaps, arrow styling (for horizontal manual mode), badge, section dividers, and the row's background/width/spacing.
Background color of each testimonial card. White reads well on most page backgrounds; pick a tinted color when you want the cards to pop on dark hero rows.
Color of the quote text inside the card.
Color of the author's name under each quote.
Color of the author's role/title. Defaults to 60% opacity so it reads as secondary text under the name.
Rounded corners on each testimonial card. 12px matches the theme's default tile rounding; 0 for hard corners, 24+ for very soft, pill-like edges.
Inner padding inside each card (applied evenly on all sides). Tighter padding fits more text per card; looser padding feels airier.
Master switch for the card border. Turn off for a flat, shadow-only card look.
Color of the card border. A light neutral keeps the border quiet; a saturated color makes the cards feel like buttons or tags.
Thickness of the card border in pixels.
Master switch for the card drop shadow. Pair with a 0 border-width if you want shadow-only cards.
The color and opacity of the card drop shadow. Stay under 15% opacity for a tasteful effect; above that the cards start to feel heavy.
Spacing between testimonial cards. Applies to both the gap between cards in the same column (vertical mode) and the gap between cards in the row (horizontal mode).
Color of the chevron icons inside the navigation arrow buttons. Only renders when the slider is in manual mode (arrows are visible).
Background color of the round arrow buttons. Pick a color that contrasts both the page background and the card background so the arrows stay visible against either.
Styles the <h6> inside the section heading as a pill badge instead of a plain heading. Badge colors and styling come from Theme Settings > Badge.
Picks the badge tier. Colors are configured in Theme Settings > Badge.
badge-primary Primary (default)badge-secondary Secondarybadge-three Threebadge-four Fourbadge-five Fivebadge-six SixDecorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Decorative shape rendered at the top of the section.
none None (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 TriangleSet this to match the background color of the section above so the divider acts like a continuous shape between the two rows.
Height of the top divider shape. Applies to all shapes except Tilt (which has its own Angle Height control).
Height of the tilted divider in pixels. Only renders for the Tilt shape.
Mirrors the divider shape horizontally. Useful when you want to alternate divider direction between consecutive sections.
Decorative shape rendered at the bottom of the section. Same 9 shapes as the top divider.
none None (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 TriangleSet this to match the background color of the section below.
Height of the bottom divider shape. Applies to all shapes except Tilt.
Height of the tilted bottom divider in pixels.
Mirrors the bottom divider shape horizontally.
Sends the bottom divider behind the content layer so interactive elements (buttons, arrow controls) sitting on top of it remain clickable.
The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.
The Background Type dropdown drives which sub-controls appear:
none No background (default; section inherits the page bg)color Solid Color - reveals Background Color pickergradient Gradient - reveals Top Color, Bottom Color, and 8 direction optionsimage Image - reveals Background Image, Size (cover/contain/original), Position (5-point), Overlay toggle, Overlay Color, Blur toggle, Blur amountNote: The 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.
standard Standard (uses the theme's standard container width, set in Theme Settings > Layout)slim Slim (narrower variant, also set in Theme Settings)custom Custom - reveals a Custom Width number input (600-1920px, default 1200)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 righttablet 60px top, 60px bottom, 0 left, 0 rightmobile 40px top, 40px bottom, 0 left, 0 right