Module · Social proof
Testimonial Spotlight
One large customer quote with a photo, metrics and company logo.
Where it is used
- About page
- Homepage 1
- Homepage 4
- Homepage 5
- Homepage 3
- AI scoring product page
- Analytics product page
- Professional services solution page
Content settings
What the module says and shows. Repeaters (groups you can add items to) are marked as such.
| Setting | Type | What it does | ||||||
|---|---|---|---|---|---|---|---|---|
| Eyebrow text | Text | Short label shown above the heading, such as a category or theme.Default: CUSTOMER STORY | ||||||
| Testimonial Quote | Text | Wrap words in [square brackets] to highlight them.Default: “SaaSFlow helped us increase demo requests by 3x in just 6 months.” | ||||||
| Description / Body Text | Rich text | Supporting text. Keep it to one or two sentences for best results. | ||||||
| Author Avatar | Image | Square photo of the person quoted, about 160px. | ||||||
| Author Name | Text | Name of the person quoted.Default: Michael Chen | ||||||
| Author Title | Text | Job title and company of the person quoted.Default: Founder & CEO, NovaTech | ||||||
| Link / CTA | Link | Where the button goes. | ||||||
| Button: HubSpot CTA ID | Text | Optional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button. | ||||||
| CTA Text | Text | Text on the button. Leave empty to hide the button.Default: Read full case study → | ||||||
| Main Image | Image | Large photo shown with the testimonial. | ||||||
Company MetricsRepeater · 2 settings
| ||||||||
| Company Logo | Image | Logo of the customer's company. | ||||||
Style settings
In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.
| Setting | Type | What it does | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Color mode | Choice | "Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site | ||||||||||||||||||
| Eyebrow style | Choice | "Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme | ||||||||||||||||||
| Highlight color | Color | Color for [bracketed] words in the quote. Leave empty for the theme gradient. | ||||||||||||||||||
FontsGroup · 2 settings
| ||||||||||||||||||||
| Transparent background | On/off | Removes this section's background so the page background shows through. Useful for blending sections together.Default: Off | ||||||||||||||||||
| Background color | Color | Leave empty to use the theme colors for the current light or dark mode. | ||||||||||||||||||
Background effectGroup · 6 settings
| ||||||||||||||||||||
| Background animation | Choice | A subtle moving background behind this section. Soft bubbles: glass circles floating. Aurora: large blurred color clouds drifting. Dot grid: a faint dotted pattern drifting. Ripples: soft rings spreading out. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None | ||||||||||||||||||
| Animation strength | Number | How visible the background animation is. Lower is subtler.Default: 45 | ||||||||||||||||||
| Number of bubbles | Number | How many bubbles float in this section. Phones show about half of them.Default: 6 | ||||||||||||||||||
| Bubble arrangement | Number | 0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0 | ||||||||||||||||||
SpacingGroup · 4 settingsLeave empty to use the theme section spacing (Theme settings > Layout).
| ||||||||||||||||||||
| Animate when scrolled into view | On/off | Content fades up as the section comes into view. Visitors who turn off motion on their device see no animation.Default: On | ||||||||||||||||||
Tip
Headings support [brackets] to highlight words and | for a new line. See Editing tips.