SaaSFlowDocs

Module · Heroes and headers

Guide Header

The header of a guide: title, summary, breadcrumb, reading time and author details.

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

SettingTypeWhat it does
LabelTextSmall pill above the title. Leave empty to hide it.Default: GUIDE
TitleTextLeave empty to use the page or blog post title. Put a word in [brackets] to highlight it, and use | for a line break.
SummaryTextLeave empty to use the page's or post's meta description.
BreadcrumbGroup · 4 settings
Show the breadcrumbOn/offA trail of links above the label.Default: On
Home labelTextRead by screen readers; the home link shows as an icon.Default: Home
LinksRepeater · 2 settings

Pages between Home and this guide, for example Guides and Integrations. Leave empty on a blog post to show the blog and the post's first tag.

LabelTextLink text.Default: Guides
LinkLinkWhere it goes. Leave empty for plain text.
Show this guide's title lastOn/offEnds the trail with the current title (not a link).Default: On
Details rowGroup · 7 settings
Show read timeOn/offClock icon with the reading time.Default: On
Read time (minutes)Number0 works it out from the post text on a blog post (and hides it on a page).Default: 0
Read time textText{minutes} is replaced with the number.Default: {minutes} min read
Show last updated dateOn/offCalendar icon with the date the page or post was last updated.Default: On
Updated textText{date} is replaced with the date.Default: Updated {date}
Date formatTextFor example MMM yyyy (Oct 2026) or MMM d, yyyy (Oct 7, 2026). Month names follow the page language.Default: MMM yyyy
Guide typeTextFor example Integration guide. Leave empty on a blog post to show its first tag, or to hide it on a page.
VisualGroup · 7 settings
ShowChoiceWhat appears beside the text. On a blog post, Image uses the post's featured image when no image is chosen here.Options: Connection diagram (two logos and labels)ImageNothing (text only)Default: Connection diagram (two logos and labels)
ImageImageAbout 1200 x 900px, PNG with a transparent background works well.
Left nameTextName in the left tile.Default: SaaSFlow
Left logoImageSquare logo, about 160 x 160px. Leave empty to show the first letter of the name.
Right nameTextName in the right tile.Default: HubSpot
Right logoImageSquare logo, about 160 x 160px. Leave empty to show the first letter of the name.
Labels around the diagramRepeater · 2 settings

Up to 4 small labels: top left, top right, bottom left, bottom right.

IconChoiceA small icon before the text.Default: Check
TextTextA few words.Default: Label
Search engines and AIGroup · 2 settings
Add article structured dataOn/offDescribes the guide (title, summary, dates, read time) to search engines and AI assistants (schema.org TechArticle).Default: On
Add breadcrumb structured dataOn/offDescribes the breadcrumb trail (schema.org BreadcrumbList). Turn off if the site breadcrumb already shows on this page.Default: On

Style settings

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

SettingTypeWhat it does
BackgroundChoiceA light brand-colored fade behind the header, or the plain page color.Options: Soft brand fadePage backgroundDefault: Soft brand fade
Label styleChoiceLook of the label above the title.Options: PillPlain textDefault: Pill
Text column widthNumberShare of the width for the text when there is a visual (desktop).Default: 52
Color modeChoice"Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site
SpacingGroup · 4 settings
Space above (desktop)NumberLeave empty for the default (48px).
Space below (desktop)NumberLeave empty for the default (56px).
Space above (phones)NumberLeave empty for the default.
Space below (phones)NumberLeave empty for the default.
Animate on scrollOn/offContent fades in as it scrolls into view.Default: On

Interface labels

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

SettingTypeWhat it does
BreadcrumbTextRead by screen readers.Default: Breadcrumb

Tip

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