Expanding panels
A row of tall image panels. One is open at a time, showing its title, text and button; the others wait as slim strips that open with a click or on hover.
- In the editor
- Expanding panels
- Where it goes
- Any page template, with Add section
- In the presets
- Every preset: Landing page
- Settings
- 27
- Blocks
- Panel
- App blocks
- Yes
When to use it
Expanding panels invite exploration: rooms of a house, categories of a wardrobe, steps of a ritual. Each panel is a teaser that opens into a small story. The Index, Poster and Petal demo stores use it as Room by room, Wear it your way and Little rituals.
Set it up
- Add a Panel block for each story – three to six work best.
- In each panel, upload an Image and write the Title (shown on the closed strip and as the heading of the open panel), an optional Label, Text and Link.
- Add a Button label to show a button in the open panel.
- Choose Panel open at start – the panel that is open when the page loads.
How panels behave
- Open a panel on: Click or tap, or Hover or click for a livelier feel on desktop.
- Closed panels: In color, Black and white or Dimmed – black and white makes the open panel stand out.
- Show titles on closed panels: the title runs along each closed strip.
- Video: a panel can play a muted video in the background while it is open, from the start each time it opens. The image shows while it is closed.
- On phones, panels stack vertically; closed ones become slim bands and the open one takes the rest of the height.
- In the editor, selecting a panel block opens that panel.
Size and look
Height (360–800 px, never taller than the screen below the header) and Height on mobile set the section's height. Closed panel width sets the width of the strips. The Overlay (gradient from bottom or left, or solid) keeps the text readable; each panel can override the Overlay color. Text color is white by default.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Expanding panels27 settings
| Setting | Options | Default |
|---|---|---|
| Heading | Rich text (one line) | Sample text |
| Text | Rich text | – |
| Heading size | Large · Medium · Small | Medium |
| Heading alignment | Left · Center | Left |
| Panels | ||
| HeightNever taller than the screen below the header. | 360–800px | 560px |
| Height on mobile | 320–720px | 520px |
| Closed panel widthOn mobile the panels stack and this is their height, at most 72 px. The open panel takes the rest. | 56–200px | 120px |
| Space between panels | 0–32px | 12px |
| Panel open at start | 1–8 | 1 |
| Open a panel on | Click or tap · Hover or click | Click or tap |
| Closed panels | In color · Black and white · Dimmed | Black and white |
| Show titles on closed panels | Checkbox | On |
| Panel heading size | Large · Medium · Small | Medium |
| Overlay | ||
| Overlay style | Gradient from bottom · Gradient from left · Solid | Gradient from bottom |
| Overlay color | Color | #161616 |
| Overlay opacity | 0–90% | 40% |
| Text color | Color | #FFFFFF |
| Full width | Checkbox | Off |
| Color scheme | Color scheme | Scheme 1 |
| Section spacing | ||
| Top padding | 0–160px | 80px |
| Bottom padding | 0–160px | 80px |
| Top padding on mobile | 0–120px | 56px |
| Bottom padding on mobile | 0–120px | 56px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Panel10 settings
| Setting | Options | Default |
|---|---|---|
| Image | Image | – |
| VideoPlays muted in the background while the panel is open, from the start each time it opens. The image shows while the panel is closed. | Video file | – |
| TitleShown on the closed panel and as the heading of the open one. | Text | Sample text |
| Icon | None · Box · Tag · Gift · Leaf · Sparkle · Heart · Star · Sun · Moon · Lamp · Truck · Return · Shield · Card · Chat · Globe · Pin · Clock · Ruler | None |
| Label | Text | – |
| Text | Rich text | Sample text |
| LinkThe heading links here and gets an arrow. | Link | – |
| Button label | Text | – |
| Button style | Primary · Secondary · Highlight | Highlight |
| Overlay colorLeave empty to use the section's overlay color. | Color | – |