Step by Step

Usage

Step by Step displays a numbered process as a responsive grid of steps — each with a circular counter, headline, and description. Use it for onboarding flows, how-it-works sections, service steps, or any sequence where order matters.

The block inserts with four Step children by default. Steps auto-number via CSS counters; you control the look with parent settings rather than typing numbers manually.

Parent and child blocks

The Step by Step parent holds one or more Step children (ds/step-by-step-child). Add or remove steps with the block inserter.

Select Step by Step for layout, counter styling, and connector options. Select an individual Step child to edit that step's title and body copy.

Layout (parent)

• Columns — 2, 3, 4 (default), 5, or 6 steps per row. The grid wraps responsively on smaller screens.
• Alignment — Left or Center for counter, headline, and body text within each step
• Grid Gap — spacing between steps in rem (0–4)
• Small Text — reduces body copy size for every step
• Card Background — adds a subtle rounded background pad around each step's content
• Connector Line — horizontal lines linking step counters on desktop (768px and up)
  • Connector Width — line thickness in pixels (1–24)
  • Connector Color — palette color for the connector

Connectors hide on the last step and are not shown on mobile.

Headlines (parent)

• Headline Tag — semantic HTML tag for step titles on the front end (h2–h6 or p; default h4)
• Headline Appearance — Customizer typography preset for how titles look (default matches h5)

Tag and appearance are independent — you can use an h4 tag with a smaller visual style, for example.

Counter (parent)

Shared styling for every step's numbered circle:

• Counter Appearance — typography preset for the number
• Counter Text Color, Counter Outline Color, Counter Background — palette colors
• Counter Outline Width — border thickness in pixels (0–12)
• Counter Size — circle diameter on a 4–40 scale (maps to about 1–10rem)
• Counter Font Size Adjust — fine-tune number size in em (0.5–9)
• Counter Prefix — text before the number (default 0 produces 01, 02, 03…)
• Counter Suffix — text after the number (e.g. . for 1.)

Individual steps (child)

Select a Step child to configure:

• Title — step headline, edited inline
• Body — paragraph inner blocks below the title (default template includes one paragraph)

Counter numbers update automatically when you reorder, add, or remove steps.

Block width

Step by Step supports Wide and Full alignment from the block toolbar and defaults to Wide width.

Tips

• Set Columns to match your step count when possible — four steps in four columns reads cleaner than three plus one wrapped.
• Use Counter Prefix 0 for zero-padded numbers (01, 02) or clear the prefix for plain 1, 2, 3.
• Enable Card Background when steps sit on a busy Section background.
• For chronological events with dates rather than numbered steps, consider Timeline instead.