Waiting
Customize and export code (opens in a new tab)Compare designs
Each model builds its own version. Pick your favorite and customize it.
Desktop preview
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
How to create best how it works components?
Break down the real process. Provide the stages a customer follows, starting with their first action and ending with the outcome. Give each stage a short title and a concise explanation.
Make the sequence visible. Ask for numbered steps, a timeline, or an illustrated flow. Explain which stages need more detail and specify the direction the sequence should follow on mobile.
Check for missing transitions. Compare whether the next action is clear after each stage. Remove repeated explanations and make sure the final step reflects what the customer actually receives.
Examples of how it works components
Wrexa
Introduction Hero with Three-Step Onboarding and App Preview
A marketing introduction section with a large centered headline, a left photograph with a bottom call to action, a middle column of three numbered onboarding steps, and a right-side app preview mockup showing a greeting card with avatars. The layout is split into three columns with light backgrounds and minimal purple accents.
Nigodo
How it works feature section with four numbered steps and laptop photo
A marketing feature section with a small eyebrow label, a bold two-line heading, and a 2x2 grid of numbered steps covering custom analytics, team management, easy setup, and website building. A photograph of a person typing on a laptop sits in a bordered, offset frame on the right.
Gradia
Three-Step Getting Started Section with Dashboard Preview
A dark marketing section titled "Three steps to get started" with three numbered steps on the left and a gradient-framed dashboard screenshot on the right, ending in a "Get Started Now" call-to-action button. The layout pairs a vertical step list with an illustrative product screenshot.
BoldUI
Split-screen feature section with eye photo, numbered steps, and CTA buttons
A dark split-screen marketing section with a full-height close-up eye photograph on the left and a text column on the right containing a blue eyebrow label, bold uppercase heading, four numbered descriptive steps, and a yellow primary button alongside a secondary text link. The layout presents a brand-focused call to action with a clear hierarchy.
Explore component generators
Generate any section of your website with the same multi-model workflow.
No categories match your search.
