About this block

App Onboarding Steps lays out the whole first run in three numbered stages across a row. Each stage carries a short explanation and a small drawn UI chip showing that exact moment, store buttons, a found workspace, alert toggles, so the reader watches the flow before installing anything.

The steps are one array and each chip is a self contained markup fragment, no images. The dashed connector between the number badges reads as progression on desktop and folds away on mobile where the stages simply stack.

When to use

Reach for this block when the objection is effort, not price. A three step row answers the how long does setup take question that stalls app installs. Keep it to three, a five step onboarding is admitting the product is hard to start.

A natural flow around it on a Marketing Pro page:

Before

• App hero establishing the app and its promise

After

• Store badges band turning the finished walkthrough into a download
• FAQs catching the questions the steps left open

What you can display

One strong use is install, connect, and configure. Other trios:

• Account setup. Sign up, verify, and invite the team for a collaboration app.
• Data import. Connect, map fields, and confirm for a migration flow.
• Habit start. Pick a goal, set a reminder, and log day one for a consumer app.

Tip: name what each step costs in seconds, effort is the real objection an onboarding row exists to answer.