<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=241066823005528&amp;ev=PageView&amp;noscript=1">

Modules

Story panels (Omni Pro)

This module ships in Omni Pro.

Full-height panels for customer stories or chapters: A colored surface with a number or tag, heading, text, button and image. As the page scrolls, every panel sticks below the site header and the next one slides over it – shrinking and dimming the covered panel, letting its image drift, or fading it out. Available in Omni Pro.

On this page

Set up the content

  1. 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.
  2. Give each panel its Panel color – add a Gradient end color for a fade – and turn on Light text for dark colors.
  3. Content → Heading adds an eyebrow, heading and lead above the stack.

Choose the look

SettingOptions
Styles → Layout → Scroll effectStack (the covered panel shrinks and dims), Reveal (its image drifts up more slowly and it dims), Fade or None
Panel widthContained rounded panels, or Edge to edge halves that meet in the middle
Panel heightMinimum height as a share of the screen (50–100 vh)
Space above a sticking panelGap below the site header while a panel sticks
Text column share, ImageHalf and half or a wider half; image filling its half or framed with space around it
Shrink covered panels, Dim covered panelsStrength of the stack effect
Styles → Text / Border / Corner / SpacingFonts 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.

Support

Did this answer your question?

If not, write to us and say which page you were on.