Split With Steps
Split hero with headline, lede, dual CTAs, and a two stat row beside a card walking the four onboarding steps on a numbered vertical rail.
Split hero with headline, lede, dual CTAs, and a two stat row beside a card walking the four onboarding steps on a numbered vertical rail.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Split With Steps is a two column hero. The left column holds a large headline, a lede, two stacked CTAs, and a ruled row of two stats, each a big number over a short caption. The right column is a bordered card that walks the four onboarding steps on a numbered vertical rail: a connecting line threads the circles, the first step is filled in the primary color, and a support note closes the card. The layout fills the viewport and ships without its own header.
The steps are a plain array of title and description, so the rail grows or shrinks by editing the array and the connecting line redraws itself. The two stats are their own small values, and the headline, lede, and button labels are independent copy strings. Nothing here is an image, so the panel themes cleanly and never falls out of date.
Reach for this block when the fear a visitor carries is setup, not price or features. Showing the first hour as four concrete steps makes the primary CTA feel low risk, which is exactly what a switcher weighing a migration needs to see. It sells the onboarding where split-with-metrics sells the results, so pick it earlier in the buying journey, before the numbers land.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a product onboarding from empty account to live campaign. Other four step flows that fit the same rail:
Tip: keep every step to one line of description, a rail reads as a quick promise only while each rung stays scannable.