Step Section
The Step block shows a short series of numbered steps — ideal for a simple "3 steps to get started" section.
Purpose
Use it to break a process into a few clear, numbered stages with arrows connecting them. Simpler than the Process block.
Available layouts
1 layout:
| Layout | Description |
|---|---|
| SEO Three Steps (default) | Three connected steps with arrows and decorative shapes. |
Field reference
| Field | What it does |
|---|---|
| Subtitle | A small label above the title. |
| Title | The section heading. |
| Button text / URL | A call‑to‑action. |
| Shape image 1 / 2 | Decorative graphics. |
| Step items (repeater) | Each step: number, title, arrow image, is active (highlight this step). |
Best practices
- Three steps is the sweet spot for this layout.
- Use verbs in titles: "Sign Up", "Customize", "Launch".
- Highlight the current/first step with "is active".
- End with a CTA to start step one.
Example
Step items:
- Sign Up — active.
- Set Up Your Site.
- Go Live.
Button: "Get Started" → /register.
Frontend result
A horizontal row of numbered steps connected by arrows, with an optional button.
Screenshot: Page Builder → Step Section (SEO Three Steps) on the live site
Troubleshooting & common mistakes
| Problem | Fix |
|---|---|
| Steps not showing | Add items to the step repeater. |
| Arrows missing | Set an arrow image on each step. |
| Too cramped | Keep titles short; this layout suits exactly three steps. |
Common mistakes: adding too many steps, long titles, no CTA.
➡️ Back to Widget Overview · Next chapter: Widget Builder