Hero Slider | SaaSFlow Docs

48 settingsPagesBlog postsBlog listings

Where it is used

Homepage 5

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

Setting Type What it does

SlidesRepeater · 13 settings

Each slide has its own text, buttons and image or video.

Eyebrow	Text	Small line above the heading. Leave empty to hide it.
Heading	Text	Put words in [brackets] to highlight them; use \| for a line break.Default: `Slide heading`
Description	Text	One or two sentences under the heading.
Main button text	Text	Leave empty to hide the button.Default: `Start free trial`
Main button link	Link	Where the main button goes.
Second button text	Text	Leave empty to hide the button.
Second button link	Link	Where the second button goes.
Second button icon	Choice	Small icon before the second button's text.Options: PlayCalendarGridArrowVideoNo iconDefault: `Play`
Media	Choice	An image, or a video that plays muted on a loop while the slide is showing.Options: ImageVideoDefault: `Image`
Image	Image	The slide's picture. With a video it shows while the video loads, and for visitors who prefer reduced motion. Full-width designs: at least 1920px wide.
Video from	Choice	A short, light MP4 gives the cleanest result. YouTube and Vimeo play muted, without controls.Options: Upload an MP4MP4 linkYouTube linkVimeo linkDefault: `Upload an MP4`
Video file	File	An MP4 from the File Manager.
Video link	Text	A direct link to an .mp4 file, or a YouTube or Vimeo link (pick the matching Video from).

Feature stripRepeater · 3 settings

Design: Background with feature strip only. Up to 4 items across the top right of the slider (desktop).

Icon	Choice	A small icon in a tile.Options: ChartVideoSparkleLinkUsersBoltShieldPlayCalendarGridArrowNo iconDefault: `Chart`
Title	Text	One or two words.Default: `Feature`
Text	Text	A short line under the title.

SliderGroup · 5 settings

Change slides automatically	On/off	Moves to the next slide on its own. It pauses while the pointer or keyboard focus is on the slider, and never runs for visitors who prefer reduced motion or in the page editor.Default: `On`
Seconds per slide	Number	How long each slide shows.Default: `7`
Show arrows	On/off	Previous and next buttons at the sides (tablet and desktop).Default: `On`
Show dots	On/off	A row of dots under the slides to jump to a slide.Default: `On`
First slide heading is the page title (H1)	On/off	Turn off when the slider isn't the first thing on the page; then every slide uses H2.Default: `On`

Style settings

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

Setting Type What it does

Design Choice How the slides are laid out. Every design takes images and videos.Options: Full-width image or video backgroundBackground with feature stripSplit: text left, media in a card on the rightSplit: text left, media on the right (no frame)Default: Full-width image or video background

Color mode Choice The background designs use dark colors so text stays readable over images and videos.Options: Automatic (dark for the background designs)LightDarkDefault: Automatic (dark for the background designs)

Overlay color Color Background designs: color over the image or video. Lower the opacity for a lighter overlay.Default: #0E1228

Overlay Choice Background designs. Phones and tablets always use an even overlay.Options: Strong behind the text, fading out to the rightEven across the slideDefault: Strong behind the text, fading out to the right

Image focus Choice Which part of a background image or video stays in view when cropped.Options: CenterRightLeftTopBottomDefault: Center

Media width Number Split designs: share of the width for the image or video (desktop).Default: 52

Slide height (desktop) Number Room for each slide's content on desktop; Spacing is added above and below it. At the top of the page the slider also leaves room for a Floating or Transparent header on its own.Default: 520

Slide transition Choice How one slide changes to the next.Options: FadeSlide sidewaysZoomSlide upDefault: Fade

Text and buttons Choice How the eyebrow, heading, description and buttons appear, one after another, on page load and each time a slide shows.Options: Rise upFade inSlide in from the leftZoom inBlur inNo animationDefault: Rise up

Image and video Choice How each slide's image or video appears.Options: Move in (background: slow zoom, split: glide in from the right)Fade inNo animationDefault: Move in (background: slow zoom, split: glide in from the right)

Animation speed Choice Speed of the slide transition and the entrance animations.Options: SlowNormalFastDefault: Normal

SpacingGroup · 4 settings

Space above (desktop)	Number	Leave empty for the default (72px).
Space below (desktop)	Number	Leave empty for the default (96px, room for the dots).
Space above (phones)	Number	Leave empty for the default.
Space below (phones)	Number	Leave empty for the default.

Interface labels

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

Setting	Type	What it does
Slider name	Text	Read by screen readers.Default: `Featured highlights`
Previous button	Text	Read by screen readers.Default: `Previous slide`
Next button	Text	Read by screen readers.Default: `Next slide`
Dot buttons	Text	{number} is replaced with the slide number.Default: `Go to slide {number}`
Slide label	Text	Read when a slide shows.Default: `{number} of {total}`
Video player name	Text	Name of YouTube and Vimeo players.Default: `Slide video`

Tip

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