Steps / Process

A numbered steps / process flow — horizontal, vertical timeline, alternating, cards or circles — with icons or numbers and connectors. Tabs: Content, Design, Styling, Animations, Advanced.

💡 Web dev tip: sequences are ordered lists

When order matters — step 1, then 2, then 3 — the right element is an ordered list (<ol>), not a set of headings or divs. The numbering becomes real content that assistive tech announces in sequence, and it stays correct if you reorder the steps. MDN: the ol element

Live demo

▶ See the Steps / Process live on the demos site — an interactive example you can click through.

Content

• Steps — an addable, repeatable list of steps. Each step opens an Add / Edit Step popup with these sub-fields:
  • Title — the step title (default "Step title").
  • Description — a textarea body; accepts HTML and shortcodes.
  • Icon — an icon (icon picker) used when Marker is set to Icon.
  • Number / Label override — optional; defaults to the step position (1, 2, 3…).

Design

• Design — image-picker of layouts (horizontal, vertical timeline, alternating, cards, circles); default horizontal.
• Marker — Number (default), Icon, or None.
• Marker Shape — Circle (default), Rounded square, or Square.
• Connector — Solid line (default), Dashed line, or None — the line between markers (Horizontal / Vertical / Alternating).
• Title Tag — H2, H3 (default), H4, H5, or div.

Styling

• Marker / Connector — color of the markers and connector line.
• Marker Text — color of the marker number/text.
• Title Color — color of the step title.
• Description Color — color of the description text.
• Font Size — font-size preset for the steps.
• Margin & Padding — spacing control for the block.

Animations

Standard entrance-animation controls (effect, duration, delay, offset).

Advanced

Custom CSS class/ID, responsive visibility toggles, custom attributes, and margin/padding.