About this block

Horizontal Steps lays out an engagement as four numbered markers on a connected rail: Understand, Propose, Build, Launch. Each marker sits above a title and a short description of the work at that stage, from a first conversation about the problem and the audience through to final files, a walkthrough, and support past launch. The rail collapses to a plain stacked list on small screens.

Steps are one flat array of four objects, each with a number, title, and description; the connecting line is drawn between markers and hidden after the last one. The horizontal layout is the distinctive choice, letting a visitor read the whole arc left to right in a single glance.

When to use

Reach for this block as the process section on a homepage or about page where a visitor should grasp the shape of an engagement before they reach out. The installer swaps the four step titles and descriptions to match how they actually work, keeping the numbered rail intact.

A natural flow around it on a Portfolio Pro page:

Before

• Services section
• About sections

After

• Testimonials
• Contact section

What you can display

One strong use is the end-to-end engagement overview. Other step arrangements:

• Onboarding sequence. The path a new client moves through from inquiry to kickoff.
• Studio methodology. Rename each marker to the named phases the practice already uses.
• Fixed sprint. A week by week arc for a scope-locked engagement with a hard deadline.

Tip: write each step description as what the client receives at that stage, not the internal task you run.