Step Flow (Divi)

A how-it-works flow for Divi 5. Every step is a Step child with an icon, a number or an image, a badge, a title, a description, a link and its own colours. Connectors draw between the steps as the flow scrolls into view, done and current steps show progress, and the flow runs across or down per device. Each example is labelled with the settings that make it.

1. How it works

The default flow: icons, solid connectors with arrowheads, a lift on hover and the scroll reveal. Across on desktop and tablets, down on phones.

2. Numbers, dashes and an animated flow

Media: Number with two-digit numbers counted automatically · Style: Dashed · Animated Flow (the dashes keep moving) · Hover: Glow ring · accent teal.

3. Progress: an order tracker

Current Step: 3 — the first two show as done with a check mark, the third is highlighted with a pulsing ring, the connectors behind them take the Done colour.

4. Down the page, as a timeline

Direction: Down on every device · Alignment: Left · numbers · badges · each step is a card (Step Box: background, border and shadow, Step Padding 20 px) · dotted connectors.

Per device

Direction and alignment are set per device. This timeline runs down everywhere; the flow in section 1 goes across on desktop and down on phones — the connectors swap from horizontal to vertical with it.

5. Images and a gradient connector

Media: Image (Media Library) · a gradient connector from pink to indigo · square-ish media (Border Radius 24 px) · badges at the bottom · title links with a “See it” text link.

6. Each step in its own colour

Step Colors on each Step: media colour and background, badge background and the connector leading to the next step.

7. One step with a direction arrow

Show: One step — each module shows its first Step with an arrow pointing on (Width 140 px, Angle −12° / 12°), so a flow can be built from separate modules in separate columns. The arrow hides on phones.

8. On a dark background, styled from the Design tab

Glass media (translucent background, a light border from Icon / Number / Image), white titles and muted text, a gradient connector in brand colours and an animated highlight running along it.