Flexa Block Pro

The Steps Block: Turn Your Process Into a Timeline People Follow

Every service has a process — discover, design, deliver — but on most pages it’s buried in a paragraph nobody reads. The Steps block lays it out as a timeline, so visitors see exactly how working with you unfolds.

Your process deserves better than a paragraph

You explain your “how it works” in three sentences on the services page, and it reads like fine print. Visitors can’t tell where one stage ends and the next begins, or where they’d be right now. Building it as a real timeline usually means wrestling with numbered lists, pseudo-element CSS for the connecting line, and colours that never quite line up.

The Steps block turns that into a proper vertical timeline. Each step gets a marker, a title and a description, threaded together by a line — and you fill it all in from the sidebar.

Numbered, icon or image markers — number the steps automatically, or swap in an icon or a small photo, in a circle, rounded or square marker.
Mark done, active and upcoming — give each step a status so completed stages, the current one and what’s still ahead each read in their own colour.
A connecting line you control — solid, dashed or dotted, in any colour and thickness, so the steps read as one flow instead of a loose list.
Plus the usual spacing, colour and typography controls, so it matches the rest of your page.

Filling it in takes a couple of minutes. Add your steps in the sidebar, type a title and a line of description for each, pick a marker style, and set which one the visitor is on. The timeline updates as you type — no CSS, no shortcode, nothing to remember.

See the Steps block in action

Each timeline below is the same Steps block, set up differently. Watch how the marker style and the connecting line change the feel.

Numbered markers, three statuses. Done stages in one colour, the current step highlighted, the rest still ahead — a classic onboarding flow.

1
Discovery callWe talk through your goals, your audience and the timeline.
2
Design & buildYou approve the direction, then we build the pages section by section.
3
LaunchWe ship it live, then hand over the keys and a short walkthrough.

Icon markers on a dashed line. The same block swaps numbers for icons and threads them together with a dashed connector.

PlanMap the scope and every moving part before a pixel is drawn.
BuildAssemble the pages block by block, checking as we go.
ReviewWalk through everything together, then go live.

Square markers, a dotted line. The same three steps with a squarer marker and a dotted connector — a lighter, more editorial look.

1
Discovery callWe talk through your goals, your audience and the timeline.
2
Design & buildYou approve the direction, then we build the pages section by section.
3
LaunchWe ship it live, then hand over the keys and a short walkthrough.

Ready to map out your process?

The Steps block ships inside Flexa Block. Install the plugin and it’s waiting in the editor the next time you build a page.

Download Flexa Block
More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found