> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/storytelling/parallax.md).
# Parallax
A staggered gallery of image tiles that drift past each other as the visitor scrolls. Each tile climbs at its own pace, so the columns pull apart and settle again. Good for lookbook openers, brand moments, and editorial galleries.
***
## Settings
### Layout
| Setting | Description |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. |
### Gap
| Setting | Description |
| ------- | -------------------------------------------------- |
| Desktop | Space between the header and the tiles on desktop. |
| Mobile | Space between them on mobile. |
### Content gap
| Setting | Description |
| ------- | ----------------------------------- |
| Desktop | Space between the tiles on desktop. |
| Mobile | Space between the tiles on mobile. |
### Background
| Setting | Description |
| -------------- | ------------------------------------------------- |
| Media | Section background media type. |
| Video | Shopify-hosted background video. Autoplays muted. |
| Image | Section background image. |
| Image — Mobile | Separate background image for mobile. |
| Show overlay | Adds a color layer over the background media. |
| Overlay color | Color and opacity of the overlay. |
### Color
| Setting | Description |
| ------------ | ----------------------------- |
| Color scheme | Color scheme for the section. |
### Padding
| Setting | Description |
| ----------------------- | ----------------------------------------------------- |
| Padding top / bottom | Outer spacing above and below the section. |
| Custom padding — Mobile | Override desktop padding with separate mobile values. |
***
## Available Blocks
### Header
The heading area above the tiles, pinned in place while they scroll past. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md).
### Item
A single tile in the gallery. Add one per image or piece of content.
#### Item Settings
| Setting | Description |
| ---------- | ------------------------------------------------------------------------------------------ |
| Position | Which column the tile sits in. |
| Alignment | Horizontal alignment of the tile's content. |
| Gap | Space between nested blocks — set separately for desktop and mobile. |
| Appearance | Border thickness, corner radius, and shadow. |
| Background | A media slot for the tile, with overlay color and backdrop blur. |
| Color | **Inherit** the section's color scheme, or apply a separate **Color scheme**. |
| Link | Wrap the whole tile in a link, optionally opening in a new tab. |
| Padding | Outer spacing on all four sides, with independent mobile values via **Custom for mobile**. |
#### Item Blocks
Blocks you can add inside an Item.
| Block | Description |
| -------------------------------------------------------------------------- | ------------------------------------------------------ |
| [Heading](/helix/theme-blocks/basic/heading.md) | Main headline. |
| [Subheading](/helix/theme-blocks/basic/subheading.md) | Small label above or below the heading. |
| [Text](/helix/theme-blocks/basic/text.md) | Rich-text paragraph for supporting copy. |
| [Button](/helix/theme-blocks/basic/button.md) | Single call-to-action with label, link, and style. |
| [Buttons](/helix/theme-blocks/basic/buttons.md) | Two side-by-side buttons. |
| [Image](/helix/theme-blocks/basic/image.md) | Inline image within the tile. |
| [Image comparison](/helix/theme-blocks/basic/image-comparison.md) | Before-and-after images with a draggable handle. |
| [Video](/helix/theme-blocks/basic/video.md) | Uploaded or external video with a play button. |
| [Icon](/helix/theme-blocks/basic/icon.md) | An icon from the theme library. |
| [Group](/helix/theme-blocks/layout/group.md) | A container that arranges several blocks together. |
| [Divider](/helix/theme-blocks/layout/divider.md) | A horizontal line between content blocks. |
| [Popup](/helix/theme-blocks/links/popup.md) | A button that opens an overlay. |
| [Spacer](/helix/theme-blocks/layout/spacer.md) | Empty block for adjusting vertical spacing. |
| [Image card](/helix/theme-blocks/cards/image-card.md) | An image with its own caption and link. |
| [Product card: Compact](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card, for shoppable tiles. |
| [Colors](/helix/theme-blocks/basic/colors.md) | A row of color swatches built from nested Item blocks. |
{% hint style="info" %}
**Tip:** How far a tile drifts depends on where it falls in the block list, not on a speed setting — the section deals out the movement in a fixed rhythm. If one tile barely moves, reorder it rather than looking for a control.
{% endhint %}
{% hint style="success" %}
Mixing image ratios is what makes the effect read — the preset pairs portrait tiles with a square one on purpose. Give every tile the same crop and the columns drift in lockstep, which looks like a mistake rather than a design.
{% endhint %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}