BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Process Steps Widget for Elementor Pro

Show how something works as numbered, connected steps

Overview

What Process Steps does

Process Steps lays out a sequence of steps in a row or a column, each with a marker, a title and a description. Lines or arrows join the markers, and the steps can appear one by one when the widget scrolls into view. Use it for how it works sections, onboarding and order processes.

Live demo

See it in action

  1. Discovery call

    Explain what happens in this step in a sentence or two.
  2. Proposal and plan

    Explain what happens in this step in a sentence or two.
  3. Design and build

    Explain what happens in this step in a sentence or two.
  4. Launch and support

    Explain what happens in this step in a sentence or two.
Features

What it can do

  • Horizontal or vertical layout, with horizontal steps able to switch to vertical on smaller screens.

  • Automatic step numbers in plain (1, 2, 3) or padded (01, 02, 03) format, with an optional prefix.

  • Number or icon markers for all steps, with icon, image or custom text overrides per step.

  • Five connector choices: solid, dashed or dotted line, arrow, or none.

  • Steps appear in sequence and the connectors draw as the widget enters the screen.

  • Each step title can link to a page.

  • An accent color for the whole widget and a different one for any single step.

Use cases

When to use it

How it works

Explain a service in three or four steps on the home page.

Ordering process

Show customers what happens from placing an order to delivery.

Onboarding guide

List the setup steps for new users, with each title linking to its help page.

Project workflow

Use the vertical layout for longer descriptions of each project phase.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag the Process Steps widget onto the page and open the Steps section.

  2. Give each step a Title and a Description, and add a Link if the title should be clickable.

  3. Open Layout and choose a Direction. For a horizontal layout also set Switch to Vertical On and Alignment.

  4. Pick the Marker type. For numbers choose a Number Format and add a Number Prefix if needed.

  5. Choose a Connector and leave Animate Steps in Sequence on for the scroll animation.

  6. In the Style tab set the Accent Color, then adjust the Marker size and the Connector color and thickness.

FAQ

Questions and answers

Can one step use an icon while the others use numbers?

Yes. Open that step and set its Marker to Icon, Image or Custom Text. The other steps keep the global marker.

What happens to a horizontal layout on phones?

By default it switches to a vertical layout on mobile. Change this with Switch to Vertical On.

Can a step link to another page?

Yes. Add a Link to the step and its title becomes a link.

Can the numbers read Step 01, Step 02?

Yes. Set Number Format to 01, 02, 03 and type Step in Number Prefix.

Bright Addons Pro

Get Process Steps with Bright Addons Pro

Bright Addons Pro has 77 Pro widgets plus all 48 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $16 a year, with a 14-day money-back guarantee.