Numbered “how it works” steps joined by a connector line, horizontal or vertical, revealed one by one on scroll. It comes with Bright Addons Blocks Pro, which also includes every free block.
Live demo
This is the block itself with its starting settings. Change any of them in the block sidebar.
What you can set
The Process Steps block has 4 settings panels. No code needed.
Set steps.
Set direction, Switch to vertical on, Alignment, Marker, Icon, Number format, Number prefix, Connector, Animate steps in sequence and 1 more settings.
Set marker size (px), Space between steps (px), Space between marker and text (px) and Connector thickness (px).
Set 5 color settings.
How to use it
Settings
The full list, panel by panel, is in the Process Steps guide.
| Setting | What it does | Choices |
|---|---|---|
| Steps (Steps) | A list you can add to, remove from and reorder. Each item has: title, description, link (optional), marker, icon, image, marker text and accent color. | – |
| Direction (Layout) | Choose one. | Horizontal, Vertical |
| Switch to vertical on (Layout) | Choose one. | Never, Tablet and mobile, Mobile |
| Alignment (Layout) | Choose one. | Left, Center |
| Marker (Layout) | Choose one. | Number, Icon |
| Icon (Layout) | Icon picker. | – |
| Number format (Layout) | Choose one. | 1, 2, 3, 01, 02, 03 |
| Number prefix (Layout) | Text you type. | – |
| Connector (Layout) | Choose one. | Solid line, Dashed line, Dotted line, Arrow, None |
| Animate steps in sequence (Layout) | Steps appear one by one and the connectors draw when the block scrolls into view. | – |
| Title tag (Layout) | Choose one. | H1, H2, H3, H4, H5, H6, div, p |
| Marker size (px) (Sizes) | From 32 to 140. | – |
| Space between steps (px) (Sizes) | From 0 to 100. | – |
| Space between marker and text (px) (Sizes) | From 0 to 60. | – |
Questions
Process Steps is a Pro block. It comes with Bright Addons Blocks Pro, which has the same plans and prices as Bright Addons Pro for Elementor and includes all 62 free blocks.
No. It is a block for the WordPress block editor (Gutenberg). Elementor is not needed. If you use Bright Addons Pro for Elementor on the same site, both plugins work side by side.
No. Each block loads only its own small CSS and JavaScript, and only on pages where it is used. Blocks you do not need can be switched off in Bright Blocks.
Yes. The blocks work with block themes and classic themes, and follow your theme fonts. Wide and full width alignment are supported.
More blocks
Bright Addons Blocks
Blocks Pro has all 99 Pro blocks, the 62 free blocks, Pro effects for every block, Theme Templates and popups.
Yearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.
