Stepper Mode

Plan: Enterprise only
Best for: How-to guides, assembly instructions, recipes, tutorials, care guides

What It Does

Each H2 heading becomes a numbered step with a visual step indicator and connecting progress line. Creates a clear, sequential reading experience ideal for instructional content.

Key Settings

Step Number Style — circle, square, or badge
Connector Line — connecting line between steps
Active Step Color — color of current/completed steps
Inactive Step Color — color of remaining steps
Step Shape — filled, outlined, or minimal
Animation — progressive reveal as user scrolls

SEO Bonus: HowTo Schema

Stepper Mode supports HowTo Schema.org markup (enable in settings):

Google can display your steps directly in search results
Shows as rich snippets with step numbers and titles
Increases visibility and click-through rates
Combines perfectly with Stepper's visual layout

Creative Use Cases

Assembly Instructions: "Step 1: Unbox → Step 2: Attach legs → Step 3: Secure bolts"
Skincare Routine: "Step 1: Cleanse → Step 2: Tone → Step 3: Moisturize"
Recipes: "Step 1: Prep ingredients → Step 2: Mix → Step 3: Bake"
Product Setup: "Step 1: Download app → Step 2: Connect → Step 3: Configure"

Tips

Write H2 headings as clear action steps: "Step 1: Prepare the Surface"
Enable HowTo Schema for SEO benefits
Keep each step focused on a single action
Use 5–10 steps for optimal readability
Add images to each step for visual clarity
Works great with the Section Icons feature

Example

  ① Prepare the Surface
     Clean the area thoroughly with
     a damp cloth and let it dry...
② Apply the Product
     Use a thin, even layer across
     the entire surface...
③ Let It Cure
     Wait at least 24 hours before
     applying any pressure...