Product Hero Banner | SaaSFlow Docs

100 settingsPagesBlog postsBlog listings

Where it is used

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: AI-POWERED GROWTH PLATFORM

Heading Text Wrap any word in [brackets] or {braces} to highlight it.Default: Turn insights into [impact]

Description Rich text Supporting text. Keep it to one or two sentences for best results.

Floating Images (Parallax Overlays)Group · 2 settings

Floating Image 1 (Bottom Left)	Image	First floating image over the main image.
Floating Image 2 (Middle Right)	Image	Second floating image over the main image.

Stat badgesRepeater · 5 settings

Small cards floating on the hero image, for example 100+ Team members. The first sits at the top left, the second at the top right, the third at the bottom right. Shown with the Image visual.

Icon	Choice	A built-in icon, or choose Pick from icon library or Upload my own.Default: `Team`
Library icon	Icon	Pick an icon from the library.
Icon image	Image	A square SVG or PNG, used instead of the library icon.
Value	Text	The big figure, for example 100+.Default: `100+`
Label	Text	Small text under the value.Default: `Team members`

AI Insights Card (Floating)Group · 7 settings

Enable AI Insights Card?	On/off	Default: `On`
Icon	Image	Icon shown with this item.
Library icon	Icon	Or pick an icon from the Font Awesome library. Used when no image is chosen above.
Title	Text	Shown as the item's heading.Default: `AI Insights`
Description	Text	Supporting text. Keep it to one or two sentences for best results.Default: `Your demo requests increased by 34% this month. Consider launching a targeted...`
CTA Text	Text	Text on the button. Leave empty to hide the button.Default: `View insights`
CTA Link	Link	Where the button goes.

Primary CTA Link Where the main button goes.

Main 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.

Primary CTA Text Text Text on the main button. Leave empty to hide it.Default: Get started free →

Secondary CTA SettingsGroup · 10 settings

Secondary CTA Text	Text	Text on the second button. Leave empty to hide it.Default: `Watch 2-min demo`
Action Type	Choice	What happens when the second button is clicked: open a link, play a video in a pop-up, or open a form in a pop-up.Options: Standard LinkVideo PopupForm PopupDefault: `Standard Link`
Secondary CTA (Video Demo)	Link	Where the second button goes.
Second 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.
Video URL (YouTube/Vimeo/MP4)	Text	YouTube or Vimeo link. Opens in a pop-up when the play button is clicked.Default: `https://www.youtube.com/embed/dQw4w9WgXcQ`
Form Eyebrow	Text	Default: `BOOK A DEMO`
Form Title	Text	Default: `Get a free demo`
Form Description	Text	Default: `Fill out the form below and we will get back to you shortly.`
Popup Form	HubSpot form	The HubSpot form shown in the pop-up.
Pop-up note	Text	Small text under the form, with a lock icon. Leave empty to hide it.Default: `We respect your privacy. Your information will never be shared.`

Features List Style Choice Show the points with check marks or as small pills.Options: Plain Text with CheckmarksPill Badges with DotsDefault: Plain Text with Checkmarks

Small Checkmarks List Text Short points shown with a check mark.

HighlightsRepeater · 5 settings

Up to four points with an icon, shown under the buttons. Good for pricing or product pages. Leave empty to hide them.

Icon	Choice	Icon shown in the tinted box. Choose Pick from icon library or Upload my own for any other icon.Default: `Lightning bolt`
Library icon	Icon	Search the Font Awesome library and pick an icon. It takes the icon color.
Icon image	Image	A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors.
Title	Text	Shown as the item's heading.Default: `Highlight`
Description	Text	Short line under the title. Leave empty to hide it.

Hero Image (Dashboard) Image The main image. Recommended about 1200px wide and under 1MB.

Background videoGroup · 4 settings

Styles > Image position > Background only. Plays muted on a loop behind the text; the Hero Image shows while it loads and for visitors who prefer reduced motion.

Video	Choice	Upload or link an MP4 (a short, light file works best, under about 10 MB), or use a YouTube video. YouTube plays muted and on a loop through YouTube's privacy-enhanced player.Options: No video (use the Hero Image)Upload an MP4MP4 linkYouTube linkDefault: `No video (use the Hero Image)`
Video file	File	An MP4 from the File Manager.
Video link	Text	A direct link to an .mp4 file.
YouTube link	Text	Any YouTube link, for example https://www.youtube.com/watch?v=... or https://youtu.be/... The Hero Image shows until the video starts.

Device mockupGroup · 2 settings

Used when Styles > Visual is set to Tablet and phone. Upload transparent device images; empty ones are left out.

Tablet or laptop image	Image	A device image with a transparent background, about 1000 x 700px. It sits behind the phone and may run past the edge of the page.
Phone image	Image	A phone image with a transparent background, about 440 x 1100px. It sits in front, on the left.

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 Leave empty to use the theme colors for the current light or dark mode.

FontsGroup · 2 settings

Heading font	Font	Starts as the theme's heading font. Change it to use another font in this module only.Default: `Outfit`
Text font	Font	Starts as the theme's body font. Change it to use another font in this module only.Default: `Inter`

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

Background effectGroup · 6 settings

Show background glow	On/off	Default: `On`
Intensity	Number	How strong the glow is. 0% hides it.Default: `70`
Flowing movement	On/off	The glow slowly drifts behind the content. Turned off for visitors who turn off motion on their device.Default: `On`
Fade out at the bottom	On/off	Blends the glow into the next section instead of ending in a hard line.Default: `On`
Glow color 1	Color	Leave empty to use the theme primary color.
Glow color 2	Color	Leave empty to use the theme accent color.

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 settings

Top padding (desktop)	Number	Space above the content on desktop.Default: `112`
Bottom padding (desktop)	Number	Space below the content on desktop.Default: `112`
Top padding (mobile)	Number	Space above the content on phones.Default: `64`
Bottom padding (mobile)	Number	Space below the content on phones.Default: `64`

Image position Choice Where the image sits next to the text, or Background to fill the whole hero with the Hero Image or a video.Options: RightLeftBottom (text centered above)Background (image or video behind the text)Default: Right

Background image or videoGroup · 4 settings

Overlay color	Color	Color over the image or video so the text stays readable. Lower the opacity for a lighter overlay.Default: `#0E1228`
Overlay	Choice	Phones and tablets always use an even overlay.Options: Strong behind the text, fading out to the rightEven across the whole heroDefault: `Strong behind the text, fading out to the right`
Image focus	Choice	Which part of the image or video stays in view when it is cropped.Options: CenterRightLeftTopBottomDefault: `Center`
Minimum height (desktop)	Number	The hero is at least this tall on desktop. The text sits in the middle.Default: `640`

Visual Choice Image: the hero image with optional floating cards. Tablet and phone: two device screens overlapping, set under Device mockup on the Content tab.Options: Image with floating cardsTablet and phone mockupDefault: Image with floating cards

Show decorative arrows On/off A dashed line and a curved arrow beside the image.Default: Off

Floating cardsGroup · 3 settings

The two floating images and the AI Insights card.

Background	Color	Card background. Leave as the theme card color to follow light and dark mode.
Text	Color	Title and text on the AI Insights card. Change it when you pick a dark or colored background.
Show border	On/off	A thin border around each card.Default: `On`

Image width (left or right position) Number Share of the content width the image takes on desktop. The image stays on its side and grows toward the text.Default: 52

Image width (bottom position) Number Width of the image on desktop. It grows evenly from the center.Default: 100

Space between text and imageGroup · 2 settings

The gap between the text column and the image (beside it, or below it).

Desktop	Number	Screens 1024px and wider. Leave empty for the default (64px beside, 56px below).
Tablets and phones	Number	Narrower screens, where the image sits under the text. Leave empty for the default (48px).

Background overlapGroup · 2 settings

End the hero background partway down the image, so the rest of the image sits over the page below. Works best with the image below the text and a dark or colored background (Colour mode or Background color).

End the background behind the image	On/off	Turn on to let the image hang out of the hero background.Default: `Off`
Part of the image below the background	Number	50% cuts the image in half.Default: `50`

Animate on page load On/off Text rises in line by line, then the image and floating cards. Visitors who turn off motion on their device see no animation.Default: On

Interface labels

Words on buttons and for screen readers. Change them to translate the module.

Setting	Type	What it does
Close button	Text	Read by screen readers for the button that closes the video.Default: `Close video`
Background video	Text	Name of the YouTube background player, for screen readers.Default: `Background video`

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.