Scroll statement
Scroll statement shows one large sentence, such as your brand promise. The words start faded and light up one after another as the visitor scrolls through the section, so the sentence is read at the pace of the scroll. Highlight words in italic and an accent color, and add a button below.
How to set it up
Step 1: Add the section
- In the theme editor, open the home page and click Add section in the Template area.
- Choose Scroll statement. Drag it to where you want it on the page.
Step 2: Write the statement
- Under Text, write an optional Eyebrow (a short line above, such as
Our story). - Write the Statement. Select words and click the italic button to highlight them, for example *sketch on paper*.
- Choose the Text style: Display, Page title, Section heading or Secondary heading. Their sizes come from Theme settings > Typography.
Step 3: Choose the reveal
- Under Animation, choose the Reveal (1): Words light up while scrolling, Fade in (the whole statement fades in once) or None.
- With words lighting up, set the Unread word opacity: how faint the words are before they light up. 20% is subtle; higher is easier to read before scrolling.
Step 4: Color the highlighted words
- Under Color, pick a color for Highlighted words, the italic ones. Leave it empty to keep the text color.
Step 5: Set the layout and button
- Under Layout, set the Maximum content width and the alignment on desktop and mobile.
- Under Button, write a Label, add a Link and choose the style. With no label, no button shows.
Settings reference
Scroll statement
| Animation | |
|---|---|
| Reveal | Words light up in browsers that support scroll-driven animation; others show the full text. Options: Words light up while scrolling, Fade in, None. |
| Unread word opacity | Slider. |
| Button | |
| Button label | |
| Button link | Where the link goes. |
| Button style | Options: Primary, Secondary, Outline. |
| Layout | |
| Alignment (desktop) | |
| Alignment (mobile) | |
| Color | |
| Highlighted words | Leave empty to use the text color. |
| Corners | |
| Make section rounded | Rounds this section's corners with the radius set for each one. |
| Top left radius | Slider. |
| Top right radius | Slider. |
| Bottom right radius | Slider. |
| Bottom left radius | Slider. |
Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Words light up with the browser's scroll-driven animation, which needs no script. Browsers without it show the whole statement at full strength, so it is always readable.
- Visitors who ask their device for reduced motion see the full statement without the effect.