Modules
Expanding panels (Omni Pro)
This module ships in Omni Pro.
Two to six photo panels side by side. The panel under the pointer grows while the others make room, a floating preview appears on the open panel, and a click opens a video in a lightbox or follows a link. Available in Omni Pro.
On this page
Set up the content
- Content → Panels: Add a Photo for each panel. Portrait or square photos work best; the panel crops them to its height and keeps the center.
- Write the Caption – one sentence at the bottom of the panel. Choose Caption element H3 or H4 when the captions are the section's subheadings.
- Floating preview: Pick Image for a product screenshot or Video loop (MP4) for a short muted clip with a Preview poster. Preview position places the frame over the side of the photo without a face.
- On click: Open a video shows a play button on the preview and opens the video in a lightbox – an MP4 file from the file manager or an Embed (a YouTube or Vimeo URL). Open a link makes the whole panel a link.
- Content → Heading adds an eyebrow, heading and lead above the panels.
Choose the look
| Setting | Options |
|---|---|
| Styles → Layout → Row height | Height of the panels on desktop |
| Styles → Layout → Panel row width | Content width keeps the panels inside the page width. Wider than the content lets the row reach past the text column on both sides by Extra width on each side (never past the screen edge), as on hubspot.com. Edge to edge runs the row to the screen edge with the page side padding. Phones and tablets keep the content width |
| Open panel size | How much wider the open panel is than a closed one (2.5 with three panels ≈ half the row) |
| Panel open at start | 0: All panels equal until hover. 1–6: That panel starts open and stays open when the pointer leaves |
| Preview width | Width of the floating frame as a share of the open panel |
| Phone layout | Stacked (the tapped panel grows in height) or Side by side (swipe, every preview visible) |
| Panel height on phones | Closed panel height when stacked; the side-by-side row is twice this |
| Styles → Panels | Caption backdrop, closed panel tint, preview frame, play button colors |
| Styles → Border / Corner | Panel border, panel and preview corner radius |
Good to know
- On touch screens the first tap opens a panel and the second tap plays the video or follows the link. A second tap on an open panel without an action closes it.
- Keyboard: Tab moves between the panels (each opens when focused), Enter plays the video, Escape closes the lightbox.
- Preview loops load nothing until their panel opens for the first time. With animations off or reduced motion the poster stands in for the loop.
- The lightbox stops the video when it closes. YouTube and Vimeo embeds start automatically when the lightbox opens.
- Content → Screen reader labels holds the words assistive technology reads for the play button, the close button and the panels.
- Background, module width, spacing and animation work the same in every module – see Backgrounds, Module width and inset panels and Animations.
More in this category
Keep reading
Support
Did this answer your question?
If not, write to us and say which page you were on.