Search blocks by description or jump to a page.
Three numbered tour steps, each paired with a framed mini screen showing that stage.
The source for every Marketing block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Tour Steps With Screens walks the first hour of the product. Three numbered rows alternate sides, each pairing a step title and two sentences with a framed mini screen drawn for that step: a connect channels list with one connected, a campaign builder with sidebar and canvas, and a live report filling in. The screens are rounded divs in shared window frames, no screenshots to keep current.
The steps are one array of title, text, and screen component, and each screen is a small local component you can redraw. The connected chip, the active sidebar item, and the live badge are the storytelling details, each screen shows progress, not just UI.
Reach for this block on product pages where the buyer fear is the blank first day. Showing the actual sequence from signup to value answers it more concretely than any feature grid. It is the tour sibling of steps-with-mini-mockups, distinguished by alternating layout and screens that depict one continuous journey rather than independent capabilities.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is signup to first report in three screens. Other tours:
Tip: give every screen one progress signal, a connected chip or a live badge, screens that show state changing feel like a product moving.