Process Block — Editorial Step-Walkthrough Variant
A step-by-step walkthrough in an editorial register — generous spacing, large type, slow transitions — pilots a generic process but the pattern fits any premium or contemplative procedural lesson.
Best for: Procedural lessons for premium or contemplative brands where each step should feel intentional rather than utilitarian.
Live preview — scroll inside the frame to see the full page.
What it does
- One-step-at-a-time focus — each step gets its own editorial spread instead of being crammed into a list
- Slow, considered transitions — steps fade and slide gently so the rhythm feels unhurried
- Progress indicator — a slim, refined progress bar or numeral set marks the learner's position
- Per-step content slots — each step holds an editorial title, paragraph-length description, optional pull-quote, and image
- Recap finish card — a final card summarizes every step in a clean editorial recap layout
Best use cases
- Premium coaching — signature methodology walkthroughs, founders' approach lessons
- Wellness and ritual — slow-paced morning rituals, sound-bath protocols, retreat-day flows
- Culinary and craft — chef's-process spreads, recipe stories, craft technique walkthroughs
- Editorial education — methodology breakdowns for a flagship course, signature framework lessons
- Spirituality and contemplative practice — practice-by-practice walkthroughs, meditation sequences
What you can change with your DNA
When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:
- Colors — slots for page background, step card background, progress indicator color, button color, and accent — tuned to a refined or muted palette
- Fonts — two roles: an editorial display serif for titles, and a refined body font for descriptions and quotes
- Copy — title, intro line, per-step title and longer paragraph, optional pull-quote per step, and final recap heading
- Images — generous image slot per step (full-width hero or framed editorial portrait)
- Behavior — choose the number of steps, transition speed, whether previous-step is allowed, and whether the recap card is shown
How remixing works
From "swiped it" to "shipped it" in three steps.
Pick a remix
Browse the library, find one that fits — like this one.
Run it through your DNA
The remix skill uses your CCOS DNA to swap colors, fonts, copy, and structure so it lands as yours.
Ship it
Paste the finished HTML into Thinkific, Kajabi, WordPress, or any platform that takes embed code.
Create a new list
Save your favorites
Email me a magic link and I'll add this to your favorites list.