Your story is in the right order in your head. On the page it’s a wall of text.
An About page, a product roadmap, a project history — they’re all a sequence of moments, one after another. Written as paragraphs, that sequence disappears; the reader can’t see the shape of it. Drawing a real timeline by hand means fighting with columns, a vertical line and a row of dots that never quite line up.
The Timeline block draws that line for you. Each event is an entry with a date, a title and a few words, threaded down a connector with a marker at every step — so the order is something the reader can see at a glance.
Setting one up takes a couple of minutes. Add the Timeline block, type each event’s date, title and note, pick whether the entries alternate or stack, choose a marker and a line style — and it draws itself in the preview. No columns, no CSS.
See it in action
All three below are the same Timeline block showing the same three events — only the layout, markers and connector line change. Watch how the same story reads differently as a zig-zag or a single column.
Alternating sides, circle markers, solid line. Events zig-zag left and right of the line — the classic story layout for a wide page.
All on one side, rounded markers, dashed line. The same events stacked down a single column — tidy for a narrower space or a sidebar.
One side, square markers, dotted line, date inline. The date sits on the same row as the title instead of above it, for a more compact entry.
One block for any sequence
A company history, a product roadmap, the steps of a service, a project’s milestones — they’re all the same shape underneath, and the same block handles them all. Add or reorder an event and the line redraws itself around it.
Lay your story out in order
The Timeline block ships with Flexa Block. Install it, and a ready-to-fill timeline is waiting in the editor the next time you open a page.
