Interactive module

Process Steps block

A row of numbered or icon steps joined by a connector line — explain how you work in a glance.

Overview

Process Steps shows a sequence — “Discover → Design → Build → Launch” — as a row of markers joined by a line, each with a title and a short text. The steps are Process Step blocks. On phones the row becomes a vertical list.

At a glance

Block name: wpbb/process-steps
Module: Interactive
Find it by searching: Process Steps
Contains: Process Step
Loads JavaScript on the site: No

When and why to use it

How you work / how it works sections.
Onboarding or ordering steps.

Example scenarios

Services page: four numbered steps with a dashed connector, centred.

See it in action

These are live examples: real Process Steps blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Numbered steps with a dashed connector

Open in a new tab

How to add the Process Steps block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Process Steps in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Process Steps in the results. The block appears with four sample steps (Discover, Design, Build, Launch).
Configure the content. Edit each step’s title and text directly. Select Process Steps and click + to add a step.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Steps

What it does: The Process Step blocks.
What to enter or choose: Add with the + at the end.
How to use it: Select the block and click +.
When to use it: Always.
Example: Three to five steps work best.
Result: Steps share the row equally.

Settings panel: Steps

Marker

What it does: Automatic numbers (01, 02…) or an icon per step.
What to enter or choose: One of: Number, Icon.
Default: Number
How to use it: Click one of the buttons in the group.
When to use it: Numbers stress the order; icons illustrate the steps.
Example: Icon for visual steps.
Result: Icons are chosen on each Process Step.

Connector

What it does: The line joining the markers.
What to enter or choose: One of: Solid, Dashed, None.
Default: Dashed
How to use it: Click one of the buttons in the group.
When to use it: Always, unless steps are unrelated.
Example: Dashed.
Result: The line style changes or disappears.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Process Steps offers.

Element: Marker selected first

The number/icon markers. Hover state (when the pointer is over the step).

Styles-tab controls for “Marker”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover
Colors	Text	—	Normal, Hover
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Hover — When the mouse pointer is over the whole block — so this part changes as soon as visitors point at the block.

Element: Block

The whole block.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Step

Each step. Hover state.

Styles-tab controls for “Step”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Element: Title

Step titles.

Styles-tab controls for “Title”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Text

Step texts.

Styles-tab controls for “Text”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

Below 782px the steps stack vertically.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Width, Max width, Height, Min width / Min height / Max height, Margin, Padding, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

An ordered list, no JavaScript.

Accessibility

Numbers and icons are decorative; the list order conveys the sequence.

Tips and best practices

Keep titles to one or two words and texts to one sentence so the row stays balanced.

Overview

At a glance

When and why to use it

Example scenarios

See it in action

How to add the Process Steps block

Content settings

On the block (in the editor canvas)

Steps

Block toolbar

Align

Settings panel: Steps

Marker

Connector

Design & styling

Element: Marker selected first

Element: Block

Element: Step

Element: Title

Element: Text

Responsive settings

Advanced options

How it works on your site

Accessibility

Tips and best practices