Guide Step | SaaSFlow Docs

26 settingsPagesBlog postsBlog listings

Where it is used

Guide 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

Step number Number Shown in the circle. 0 hides the circle.Default: 1

Title Text The step's heading.Default: Connect your HubSpot account

Screen reader prefix Text Read before the title by screen readers. {number} is replaced with the step number.Default: Step {number}:

Short title for On this page Text Shorter text for the guide's On this page list. Leave empty to use the title.Default: Connect your account

Description Rich text Text under the title.

ImageGroup · 2 settings

Image	Image	A screenshot or illustration, about 1200px wide. Leave empty for no image.
Show in a frame	On/off	Border, rounded corners and a soft shadow around the image.Default: `On`

Beside the imageGroup · 5 settings

Show Choice What appears next to the image (or under the text when there is no image).Options: Numbered listCallout boxNothingDefault: Numbered list

List itemsRepeater · 1 setting

Item

Rich text

One short instruction. Use bold for buttons and menu names.

Callout type Choice Sets the color and the icon.Options: Tip (green)Good to know (brand)Success (green)Warning (amber)Troubleshooting / important (red)Default: Tip (green)

Callout title Text Bold line at the top.Default: Tip

Callout text Rich text The message.

Style settings

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

Setting Type What it does

Number style Choice Look of the step number.Options: Soft circleSolid circleOutline circleDefault: Soft circle

Image width Number Share of the width for the image when something sits beside it (wide screens).Default: 64

Line up the side content with the top On/off Off centers it next to the image.Default: On

Color mode Choice "Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site

SpacingGroup · 4 settings

Space above (desktop)	Number	Leave empty for the default (28px).
Space below (desktop)	Number	Leave empty for the default (28px).
Space above (phones)	Number	Leave empty for the default.
Space below (phones)	Number	Leave empty for the default.

Animate on scroll On/off Content fades in as it scrolls into view.Default: On

Tip

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