How It Works (Steps) | SaaSFlow Docs

65 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: HOW IT WORKS

Heading Text Wrap words in [square brackets] to highlight them.Default: From data to growth in 3 simple steps

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

Button text Text Optional button under the description. Leave empty to hide it.

Button link 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.

StepsRepeater · 7 settings

Step Number	Text	Step number shown before the title, for example 01.
Icon source	Choice	Pick an icon from the library, upload an SVG or PNG, or paste SVG code. If the chosen one is empty, any of the others that is filled in is used.Options: Icon libraryUpload an imageCustom SVG codeDefault: `Icon library`
Icon	Icon	Search the Font Awesome library and pick an icon. It takes the item's icon color.
Icon image	Image	A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors.
SVG code	Text	Paste an element. Use stroke="currentColor" or fill="currentColor" so it takes the icon color.
Title	Text	Shown as the item's heading.
Description	Text	Supporting text. Keep it to one or two sentences for best results.

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

Setting Type What it does

Design Choice Cards: a card per step with arrows between. Timeline: numbered icon circles joined by a dashed line. Staircase: the heading on the left and the steps climbing a dashed curve on the right. Timeline and Staircase stack into a vertical timeline on phones.Options: Design 1: CardsDesign 2: TimelineDesign 3: StaircaseDefault: Design 1: Cards

Show step numbers On/off Design 1: the number in each card's top corner. Turn off for a simple row of linked cards.Default: On

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 heading. Leave empty for the theme gradient.

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`

Step title size Number Leave empty to use the theme H3 size.

Step text size Number Leave empty to use the theme body text size.

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

Show background glow	On/off	Default: `Off`
Intensity	Number	How strong the glow is. 0% hides it.Default: `60`
Flowing movement	On/off	Plays an entrance animation. Visitors who turn off motion on their device don't see it.Default: `On`
Fade out at the top and bottom	On/off	Fades the glow out at the edges so it blends into the next section.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

CardsGroup · 4 settings

Corner radius	Number	Roundness of the corners. 0 is square.Default: `16`
Show border	On/off	Draws a thin border around each card.Default: `Off`
Shadow	Choice	Shadow under each card.Options: NoneSoftStrongDefault: `Soft`
Lift on hover	On/off	Cards rise slightly when hovered.Default: `Off`

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.

Heading alignment Choice Used with the Stacked layout.Options: LeftCenterDefault: Left

LayoutGroup · 2 settings

Number of Columns	Choice	How many items sit side by side on desktop.Options: 1 Column2 Columns3 Columns4 ColumnsDefault: `3 Columns`
Icon Position	Choice	Where the icon sits on each step card.Options: LeftTopRightDefault: `Top`

Header layout Choice Where the description sits relative to the heading.Options: Split (heading left, description right)Stacked (description under the heading)Default: Split (heading left, description right)

Header link style Choice Look of the link beside the heading (Content > Button).Options: ButtonText link with arrowDefault: Button

Card Background Color Color Leave empty to use the theme colors for the current light or dark mode.

Step icon size Number Size of the icon box on each step.Default: 48

Step 1 icon color Color Icon color for item 1.Default: #3B82F6

Step 2 icon color Color Icon color for item 2.Default: #8B5CF6

Step 3 icon color Color Icon color for item 3.Default: #D946EF

Step 4 icon color Color Icon color for item 4.Default: #F59E0B

Step 5 icon color Color Icon color for item 5.Default: #EC4899

Highlighted step Choice Give one step its own background and text color.Options: NoneStep 1Step 2Step 3Step 4Step 5Default: None

Highlighted step background Color Background of the highlighted step.

Highlighted step text Color Text color of the highlighted step.

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.