Story panels stacking as the page scrolls
Set up the content
- Content → Panels: Add one panel per story with Number or tag, Heading (wrap a phrase in asterisks to highlight it), Text, a Button (link or HubSpot CTA) and an Image on the Left or Right.
- Give each panel its Panel color – add a Gradient end color for a fade – and turn on Light text for dark colors.
- Content → Heading adds an eyebrow, heading and lead above the stack.
Choose the look
| Setting | Options |
|---|---|
| Styles → Layout → Scroll effect | Stack (the covered panel shrinks and dims), Reveal (its image drifts up more slowly and it dims), Fade or None |
| Panel width | Contained rounded panels, or Edge to edge halves that meet in the middle |
| Panel height | Minimum height as a share of the screen (50–100 vh) |
| Space above a sticking panel | Gap below the site header while a panel sticks |
| Text column share, Image | Half and half or a wider half; image filling its half or framed with space around it |
| Shrink covered panels, Dim covered panels | Strength of the stack effect |
| Styles → Text / Border / Corner / Spacing | Fonts and colors, panel border, corner radius and shadow, padding and gap |
Good to know
- Keep panels to three to five: Each one is a screen's worth of scrolling.
- The effect needs animations on; with Animations → Off or reduced motion the panels still stack, but nothing shrinks, dims or fades. In the page editor the panels scroll normally.
- On phones the image sits above the text inside each panel.
- Background, module width, spacing and animation work the same in every module – see Backgrounds and Animations.