Mighty Studio template

Process steps

By Jocelyn

Process Steps — Configurable Horizontal Step Navigator An interactive step-by-step process/journey visualizer supporting 3–8 steps, each with its own content card. Built entirely through Mighty's native authoring form. Per-step content: step label, heading, rich-text description, optional image, optional audio (custom player with scrubbable progress + optional transcript), and optional video (uploaded file, YouTube, or Vimeo, with the same transport controls). Content block order (text/image/audio/video) is configurable per step. Navigation & completion: Free or Sequential navigation (locked steps until unlocked in order); completion on load or after all steps visited; optional visited checkmarks; optional media auto-play; toggleable hover navigation arrows. Appearance: background and content-card colors (transparent option), accent color, corner radius, 8 connector styles, 4 marker shapes, and independent font/size/color for 5 text roles (title, subtitle, step label, heading, description) from a 16-font library. Configurable max width (600–1000px or 100%). Technical notes: step row auto-scales to container width on load/resize; all controls are keyboard-operable buttons with proper aria-labels; content authored via native rich-text/asset fields; completion via sdk.markAsComplete(), no SCORM/xAPI scoring.