SaaSFlowDocs

Module · Video

Video Tutorials

A grid of tutorial videos with titles and lengths.

50 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
Show the play iconOn/offThe small play icon beside the heading.Default: On
HeadingTextLeave empty to hide it.Default: Video tutorials
DescriptionTextLine under the heading. Leave empty to hide it.Default: Watch step-by-step videos to learn quickly.
Link textTextLink at the top right. Leave empty to hide it.Default: View all videos
LinkLinkWhere the link goes.
VideosRepeater · 7 settings
TitleTextShown under the thumbnail.Default: Video title
DescriptionTextOne or two short lines.
Video sourceChoiceWhere the video comes from.Options: YouTube or Vimeo linkUploaded video (MP4)Default: YouTube or Vimeo link
Video linkTextA YouTube or Vimeo link.
Video fileFileAn MP4 from the file manager.
ThumbnailImageLeave empty to use the video's own thumbnail (YouTube or Vimeo) or its first frame (MP4).
DurationTextShown on the thumbnail, for example 3:24. Leave empty to hide it.

Style settings

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

SettingTypeWhat it does
Show as a panelOn/offA soft tinted box around the whole section, as on the Guides page.Default: On
Videos per row on desktopNumberScreens 1024px and wider. Tablets show 2, phones 1.Default: 3
Color modeChoice"Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site
Eyebrow styleChoice"Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme
Highlight colorColorColor for [bracketed] words in the heading. Leave empty for the theme gradient.
FontsGroup · 2 settings
Heading fontFontStarts as the theme's heading font. Change it to use another font in this module only.Default: Outfit
Text fontFontStarts as the theme's body font. Change it to use another font in this module only.Default: Inter
Transparent backgroundOn/offRemoves this section's background so the page background shows through. Useful for blending sections together.Default: Off
Background colorColorLeave empty to use the theme colors for the current light or dark mode.
Background effectGroup · 6 settings
Show background glowOn/offDefault: Off
IntensityNumberHow strong the glow is. 0% hides it.Default: 60
Flowing movementOn/offPlays an entrance animation. Visitors who turn off motion on their device don't see it.Default: On
Fade out at the top and bottomOn/offFades the glow out at the edges so it blends into the next section.Default: On
Glow color 1ColorLeave empty to use the theme primary color.
Glow color 2ColorLeave empty to use the theme accent color.
Background animationChoiceA 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 strengthNumberHow visible the background animation is. Lower is subtler.Default: 45
Number of bubblesNumberHow many bubbles float in this section. Phones show about half of them.Default: 6
Bubble arrangementNumber0: 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 · 5 settings
Card backgroundColorLeave empty to use the theme card color.
Corner radiusNumberRoundness of the corners. 0 is square.Default: 16
Show borderOn/offDraws a thin border around each card.Default: On
ShadowChoiceShadow under each card.Options: NoneSoftStrongDefault: None
Lift on hoverOn/offCards rise slightly when hovered.Default: Off
SpacingGroup · 4 settings

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

Top padding (desktop)NumberSpace above the content on desktop.
Bottom padding (desktop)NumberSpace below the content on desktop.
Top padding (mobile)NumberSpace above the content on phones.
Bottom padding (mobile)NumberSpace below the content on phones.
Animate when scrolled into viewOn/offContent fades up as the section comes into view. 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.

SettingTypeWhat it does
Play buttonTextKeep {title} where the video's title goes.Default: Play video: {title}
Close buttonTextFor the pop-up's close button.Default: Close video

Tip

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