12 layout options13 Styled looksNo plugin needed

WordPress process steps patterns

Show a process in order with WordPress how-it-works patterns: numbered steps as a list, cards or a stair, built for the Gutenberg editor.

25 layout options shown

Showing 1–25 of 25

Sort byPer page

Shot in Twenty Twenty-FiveFeaturesNo plugin needed

Appointment letter checklist

What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction.

FeaturesPreview pattern

Shot in Twenty Twenty-FiveTimelineNo plugin needed

Course plan taper

A typical course of treatment drawn as eight weeks on a ruled baseline: a solid bar for each clinic session, its height set by its minutes, and a short rule for each week of exercises at home, so the sessions visibly shorten and spread out as the course goes on.

TimelinePreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

First visit to scale

What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button.

How it worksPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps cards

Four photographic process cards with level tops and descending feet.

How it worksPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps cover stair

A full-bleed cover with a heavy veil of your theme's contrast colour over the photograph, a display headline at the top left and three numbered steps set as a stair: each step a huge numeral, a short title and one line under a hairline rule, every column starting lower than the one before, so the steps descend down and to the right across the photograph.

How it worksPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

Process delivery manifest

A three-phase handoff unfolds through nested document frames: the brief contains the proof, and the proof contains the final delivery.

How it worksPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps ledger

A process set as a printed schedule: a ruled column-head row (No., Stage, What happens) and then five full-width rows, each one a display numeral, a title and a short description in three columns, hairlines in currentColor between them and a closing rule under the last.

How it worksPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps run

A process as one horizontal run: three display numerals across the band, each over a short title and a packed line of copy, with a single hairline threading the gaps between the numerals at numeral height so the row reads as a sequence rather than as three separate cards.

How it worksPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps screens

A software walkthrough in four columns: a 16:10 frame with an example photograph ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence.

How it worksPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

Titles on the seam

The chip grows into a full-width bar and takes the step title up onto the seam with it, so under each screen there is one sentence and nothing else.

Variation of Steps screensPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

Process switchback

Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order.

How it worksPreview pattern

Shot in Twenty Twenty-FiveHow it worksNo plugin needed

TPO permission steps

A four-step process on an inverted slab for work that needs the council's consent: each step opens with an oversized numeral and a timescale badge on a hairline, then a heading and a short line.

How it worksPreview pattern

Features Own palette