Timeline
Steps along a line: the story of your brand, how a product is made, or what happens after an order. Four layouts, from a simple list to a pinned story that unfolds as shoppers scroll.
- In the editor
- Timeline
- Where it goes
- Any page template, with Add section
- In the presets
- Index: Home page, About page; Poster: About page
- Settings
- 17
- Blocks
- Step
- App blocks
- Yes
Set it up
- Add a Step block for each moment.
- Write the Label – a year, a duration or a step number (1998, Day 1, 2–3 days) – then the Title and Text.
- Add an Image to a step if it helps the story.
Layouts
| Layout | How it reads |
|---|---|
| Vertical | Steps one below the other, along a line on the left. |
| Alternating sides | Steps left and right of a central line, like a classic timeline. |
| Horizontal | Up to five steps in a row on desktop – compact, for short processes. |
| Pinned story while scrolling | The section stays pinned on screen and plays one step at a time as the shopper scrolls. The most immersive layout, and the default. |
On mobile, every layout is vertical.
Options
- Marker: Numbers or Dots on the line.
- Card style: Plain, Filled or Outline.
- Fill the line while scrolling: the line fills and the steps light up as the shopper reaches them.
The Index home page uses it for How delivery and returns work, and the About page for how products are made.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Timeline17 settings
| Setting | Options | Default |
|---|---|---|
| Heading | Rich text (one line) | Sample text |
| Text | Rich text | – |
| Heading size | Large · Medium · Small | Medium |
| Heading alignment | Left · Center | Center |
| LayoutHorizontal shows up to 5 steps in a row on desktop. On mobile every layout is vertical. | Vertical · Alternating sides · Horizontal · Pinned story while scrolling | Pinned story while scrolling |
| Marker | Numbers · Dots | Numbers |
| Card style | Plain · Filled · Outline | Filled |
| Fill the line while scrollingSteps light up as the line reaches them. | Checkbox | On |
| 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: Step4 settings
| Setting | Options | Default |
|---|---|---|
| LabelSmall text above the title, such as a year or a duration. | Text | – |
| Title | Rich text (one line) | Sample text |
| Text | Rich text | Sample text |
| Image | Image | – |
Related
TabsTabs with an image, heading, text and button each – a routine, materials or how an order works.Image with textA photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.MulticolumnColumns with an icon or image, a heading, text and a link – for benefits, services and how it works.