The Timeline block lays out a series of steps on a vertical rail, each one with its own marker, title, and description. It is built for anything that reads in order: how your service works, what happens after someone books you, a product roadmap, or the story of how your project got here.
How to add a Timeline block
- Open the page editor and click the Add + button above your blocks list.
- In the Content section of the Add Block modal, select Timeline.
- The Timeline editor opens on the side, with a live preview of the block next to it.
Writing the heading
The Heading section at the top of the editor sets the copy above the rail:
- Title: the heading for the whole timeline, such as "How it works".
- Description: an optional line underneath, such as "From first message to finished work."
Leave either one blank if you would rather the steps stand on their own.
Adding steps
Every new Timeline block starts with three empty steps. Each one has these fields:
- Label (optional): a short eyebrow above the title, such as "The brief" or "Week one".
- Title: the step itself, in a few words.
- Description: a sentence or two explaining what happens at this stage.
- Badge (optional): a small pill shown beside the title, such as "Included" or "Most popular".
- Highlight this step: turns the step into a filled card so it stands out from the rest of the rail.
Click Add Step at the bottom of the list to add another one. Drag a step by its handle to move it up or down, and click the trash icon to remove it. You need at least one step with something written in it before the block can be saved.
Steps you leave completely blank are kept in the editor, so a half typed entry never disappears while you work, but they are not shown on your public page.
Choosing the markers
The Markers dropdown in the Steps section controls the circle beside each step:
- Numbered (01, 02, 03): each step is numbered automatically in list order. Reorder the steps and the numbers renumber themselves.
- Plain dot: a small dot instead of a number, for a timeline where the sequence matters more than the count.
How it looks for visitors
On your public page, the steps run down a vertical rail inside a single card. Markers and highlighted steps pick up your page's accent colors, and the whole block inherits your fonts, borders, and card style, so it matches the rest of your page automatically. Badges render as a small pill next to the step title.
Use the highlight sparingly. One filled card in a list of plain steps pulls the eye exactly where you want it, and two or three of them cancel each other out.
Tips
- Keep each step to one idea. If a step needs three sentences, it is probably two steps.
- Five or six steps is usually the ceiling. Past that, visitors stop reading the rail and start scrolling past it.
- Labels are a good place for time: "Day 1", "Week two", "2019". Titles are a good place for the outcome.
- Highlight the step where you want people to act, then follow the timeline with a Link or Form block so they can act on it right away.
- Pair a Timeline with an FAQ block to answer the questions your process raises.