← All widgetsWidget 275 · emcp_custom_275

Process Steps

Elementor widget6 layouts9 content options27 style options3 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: steps, process, how it works, workflow, timeline, numbered.

Setup guide

  1. Open a page in Elementor, search the panel for Process Steps and drag it into a container.
  2. Content › Steps: Steps, Layout, Marker, Number Format, Connector Style, Highlight Steps Up To (0 = none), Title Tag, Stagger In on Scroll and 1 more.
  3. Pick a Layout: Horizontal with connector line, Vertical with connector line, Vertical zigzag (alternating sides), Numbered cards, Chevron arrows, Scroll progress (line fills as you scroll). Each one is shown below.
  4. Style tab sections: Marker & Line, Text & Cards. Colours, typography and spacing set here are scoped to this widget instance.
  5. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Horizontal with connector line

Layout = horizontal

  1. ✓
    Day 1

    Tell us what you need

    A short call or a form, whatever suits you.

  2. ✓
    Week 1

    We design and build

    You see progress every day in a shared staging site.

  3. ✓
    Week 2

    Review and refine

    Two rounds of changes are included.

  4. ✓
    Week 3

    Launch

    We deploy, monitor, and hand over the keys.

Layout

Vertical with connector line

Layout = vertical

  1. ✓
    Day 1

    Tell us what you need

    A short call or a form, whatever suits you.

  2. ✓
    Week 1

    We design and build

    You see progress every day in a shared staging site.

  3. ✓
    Week 2

    Review and refine

    Two rounds of changes are included.

  4. ✓
    Week 3

    Launch

    We deploy, monitor, and hand over the keys.

Layout

Vertical zigzag (alternating sides)

Layout = zigzag

  1. ✓
    Day 1

    Tell us what you need

    A short call or a form, whatever suits you.

  2. ✓
    Week 1

    We design and build

    You see progress every day in a shared staging site.

  3. ✓
    Week 2

    Review and refine

    Two rounds of changes are included.

  4. ✓
    Week 3

    Launch

    We deploy, monitor, and hand over the keys.

Layout

Numbered cards

Layout = cards

  1. ✓
    Day 1

    Tell us what you need

    A short call or a form, whatever suits you.

  2. ✓
    Week 1

    We design and build

    You see progress every day in a shared staging site.

  3. ✓
    Week 2

    Review and refine

    Two rounds of changes are included.

  4. ✓
    Week 3

    Launch

    We deploy, monitor, and hand over the keys.

Layout

Chevron arrows

Layout = chevrons

  1. ✓
    Day 1

    Tell us what you need

    A short call or a form, whatever suits you.

  2. ✓
    Week 1

    We design and build

    You see progress every day in a shared staging site.

  3. ✓
    Week 2

    Review and refine

    Two rounds of changes are included.

  4. ✓
    Week 3

    Launch

    We deploy, monitor, and hand over the keys.

Layout

Scroll progress (line fills as you scroll)

Layout = progress

  1. ✓
    Day 1

    Tell us what you need

    A short call or a form, whatever suits you.

  2. ✓
    Week 1

    We design and build

    You see progress every day in a shared staging site.

  3. ✓
    Week 2

    Review and refine

    Two rounds of changes are included.

  4. ✓
    Week 3

    Launch

    We deploy, monitor, and hand over the keys.

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Steps

OptionTypeChoices / rangeDefaultNotes
Steps
steps		Repeater4 items
↳ Title
title		TextStep
↳ Text
text		Textarea
↳ Icon (replaces number)
icon		Icon
↳ Image
image		Image
↳ Small Label
label		Text
↳ Link
link		Link
Layout
layout		DropdownHorizontal with connector line, Vertical with connector line, Vertical zigzag (alternating sides), Numbered cards, Chevron arrows, Scroll progress (line fills as you scroll)horizontal
Marker
marker		DropdownNumber, Icon (falls back to number), Dot, Check marknumber
Number Format
number_format		Dropdown1, 2, 3, 01, 02, 03, Step 11
Connector Style
connector		DropdownSolid, Dashed, Dotted, Nonesolid
Highlight Steps Up To (0 = none)
active		Numbermin 0, max 300
Title Tag
tag		DropdownH3, H4, H5, divh4
Stagger In on Scroll
reveal		Toggleon / offyes
Text Alignment (horizontal / cards)
align		Button groupLeft, Centercenter

Style tab

Marker & Line

OptionTypeChoices / rangeDefaultNotes
Accent
accent		Color#6a11cb
Marker Size
marker_size		Slidermin 24, max 120, px56
Marker Typography
marker_typo		Typography
Marker Color
marker_color		Color#6a11cb
Marker Background
marker_bg		Color#f4ebff
Active Marker Color
marker_active_color		Color#ffffff
Marker Border
marker_border		Border
Marker Radius
marker_radius		Slidermin 0, max 50, %50
Marker Shadow
marker_shadow		Box shadow
Line Color
line_color		Color#e4e7ec
Line Thickness
line_w		Slidermin 1, max 8, px2
Gap Between Steps
gap		Slidermin 0, max 80, px24Responsive
Image Size
img_size		Slidermin 40, max 400, px120
Image Radius
img_radius		Slidermin 0, max 50, px/%12

Text & Cards

OptionTypeChoices / rangeDefaultNotes
Title Typography
title_typo		Typography
Title Color
title_color		Color#101828
Text Typography
text_typo		Typography
Text Color
text_color		Color#475467
Label Typography
label_typo		Typography
Label Color
label_color		Color#6a11cb
Card Background
card_bg		Color#ffffff
Card Border
card_border		Border
Card Radius
card_radius		Slidermin 0, max 40, px14
Card Padding
card_pad		Dimensions
Card Shadow
card_shadow		Box shadow
Card Hover Shadow
card_shadow_h		Box shadow
Chevron Background
chev_bg		Color#f2f4f7

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_275" and a settings object using the keys above. Run get-custom-widget with id 275 for the full JSON spec.