Call to Action Banner | SaaSFlow Docs

53 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

Icon badge Choice A large icon in a soft circle before the text (Split and Centered layouts).Options: NoneOpen bookRocketStarChatIdeaCalendarPick from icon libraryDefault: None

Icon from library Icon Search the icon library.

Eyebrow text Text Short label shown above the heading, such as a category or theme.Default: READY TO GET STARTED?

Heading Text Type | where you want a new line, and wrap words in [square brackets] to highlight them.Default: Turn your data into real growth.

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

Image Image Used by the Image left and Image right layouts. For the banner style use a wide image (about 1400 x 800px) with the artwork on the right. Leave empty and the live page uses the Split layout.

Primary CTA Link 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 Link 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.

Secondary CTA Text Text Text on the second button. Leave empty to hide it.Default: Request a demo

Subscription formGroup · 5 settings

Add a HubSpot form, for example a newsletter sign-up, below the text or beside it.

Show a form	On/off	Shows a HubSpot form in the banner. The buttons still show when they have a link and text; clear them for a form-only banner.Default: `Off`
Form	HubSpot form	Choose a HubSpot form. A short form with just an email field works best.
Form position	Choice	Right and Left put the form beside the text from tablet size up; phones show it below. With an image layout the form always sits below the text.Options: Below the textRight of the textLeft of the textDefault: `Right of the text`
Form title	Text	Optional line above the form, for example Get the monthly newsletter.
Note under the form	Text	Optional small print under the form. Leave empty to hide it.Default: `No spam. Unsubscribe at any time.`

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] heading words. Leave empty for the default.

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

Banner boxGroup · 8 settings

Background	Choice	Kind of background for this box.Options: Brand tint (follows light/dark mode)Solid colorBrand gradient (primary to accent)Custom gradientWhite card with border and shadowDefault: `Brand tint (follows light/dark mode)`
Color / gradient start	Color	The solid color, or the first color of a custom gradient.Default: `#1E1B4B`
Gradient end	Color	Used by the custom gradient.Default: `#7C3AED`
Gradient angle	Number	Direction of the gradient. 90 runs left to right, 180 top to bottom.Default: `135`
Text color on colored backgrounds	Color	Used with a solid color or gradient. The brand tint uses the theme text colors.Default: `#FFFFFF`
Box width	Choice	Contained keeps the content width; full width spans the screen.Options: ContainedFull widthDefault: `Contained`
Corner radius	Number	Roundness of the corners. 0 is square.Default: `24`
Show decorative arrow	On/off	A small decorative arrow in the corner.Default: `On`

SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)	Number	Space above the content on desktop.
Bottom padding (desktop)	Number	Space below the content on desktop.
Top padding (mobile)	Number	Space above the content on phones.
Bottom padding (mobile)	Number	Space below the content on phones.

Layout Choice Image left and Image right show the image from the Content tab beside the text; with no image chosen, the live page uses Split. Split and Centered have no image.Options: Split (text left, buttons right)CenteredImage leftImage rightDefault: Split (text left, buttons right)

Subscription formGroup · 3 settings

Fields	Choice	On one line suits a single email field. Use Stacked for forms with several fields.Options: On one line (email and button side by side)Stacked (the form's own layout with labels)Default: `On one line (email and button side by side)`
Show the form on a card	On/off	A panel behind the form. On a colored box it is a soft see-through panel.Default: `On`
Form width	Number	Width of the form column when the form is beside the text (from tablet size up).Default: `42`

Image style (image layouts) Choice Use the banner for wide images with a soft background, like the theme's rocket. Use framed for photos and screenshots.Options: Background banner (fills the side, fades into the box)Framed image (sits in its own column)Default: Background banner (fills the side, fades into the box)

Image width (image layouts) Number Share of the width the image takes on desktop.Default: 48

Stay in view while scrolling On/off When the banner sits in a column beside other content, its column stays in view while the page scrolls, until the end of that section. For example a sign-up form beside a long guide.Default: Off

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.