# Story panels section

Source: https://themes.spicydesign.ca/help/reference/sections/horizontal-story/
Updated: 2026-11-12

Pinned storytelling: vertical scroll drives a horizontal row of panels, with a progress bar.


Pinned storytelling: vertical scroll drives a horizontal row of panels, with a progress bar.

The same section in the three themes:

![The Story panels section in the Picante style.](https://themes.spicydesign.ca/help/shots/section-horizontal-story--picante.webp)

![The Story panels section in the Overdrive style.](https://themes.spicydesign.ca/help/shots/section-horizontal-story--overdrive.webp)

![The Story panels section in the Pastille style.](https://themes.spicydesign.ca/help/shots/section-horizontal-story--pastille.webp)

**Where to find it:** In the theme editor, choose **Add section** on any template, then pick **Story panels**.

The heading area is a static block named **Section header**. Select it in the section sidebar to edit the eyebrow, heading, text and buttons, or to restyle or reorder them.

When you add this section, it starts from the **Story panels** preset.

## Settings

### Scrolling

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Pin and scroll sideways | Checkbox | On |  | On desktop the section sticks while the panels travel sideways as the page scrolls. On touch screens, small screens and with motion off it becomes a swipeable row. |
| Scroll length | Slider | 100 % | 50 to 200 %, step 10 | Higher values make the panels travel more slowly. Shown when **Pin and scroll sideways** is on. |
| Drift images on scroll | Checkbox | On |  | Images and numbers drift at a different speed while pinned. Shown when **Pin and scroll sideways** is on. |
| Show progress bar | Checkbox | On |  |  |

### Panels

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Width on desktop | Slider | 70 % | 40 to 100 %, step 5 |  |
| Width on mobile | Slider | 85 % | 60 to 100 %, step 5 |  |
| Minimum height | Slider | 70 % | 40 to 100 %, step 5 | Share of the screen height. Pinned panels always fill the screen. |
| Gap | Slider | 24 px | 0 to 80 px, step 4 |  |
| Corner radius | Slider | 40 px | 0 to 80 px, step 4 |  |
| Show numbers | Checkbox | On |  |  |

### Section style

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Color scheme | Color scheme | Scheme 3 |  |  |
| Layout width | Select | Page width | Page width, Full width |  |
| Animation on scroll | Select | Theme default | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in |  |
| Top padding | Slider | 80 px | 0 to 200 px, step 8 |  |
| Bottom padding | Slider | 80 px | 0 to 200 px, step 8 |  |

## Blocks

Add, reorder, duplicate or remove these blocks in the section sidebar: **Section header**, **Story panel**.

This section holds up to 8 blocks.

### Section header block settings

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Layout | Select | Stacked | Stacked, Split: content left, button right |  |
| Alignment | Select | Left | Left, Center, Right | Shown when **Layout** is Stacked. |
| Max width | Select | None | None, Narrow, Normal |  |
| Gap | Slider | 12 px | 0 to 64 px, step 4 |  |
| Space below | Slider | 48 px | 0 to 120 px, step 4 |  |
| Animation on scroll | Select | None | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in |  |


### Story panel block settings

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Layout | Select | Image beside text | Image beside text, Image behind text, Text only |  |
| Image | Image |  |  | Shown when **Layout** is not Text only. |
| Media position | Select | Right | Left, Right | Shown when **Layout** is Image beside text. |
| Overlay opacity | Slider | 40 % | 0 to 90 %, step 5 | Tints the image with the panel background color so text stays readable. Shown when **Layout** is Image behind text. |
| Vertical alignment | Select | Bottom | Top, Middle, Bottom | Bottom places the number at the top and the content at the bottom. |

#### Colors and border

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Color scheme | Color scheme | Scheme 2 |  |  |