New
Hero|
Hero Sections with a Secondary CTA Path (234)
A secondary CTA path gives the hero two next steps instead of one, so a self-serve visitor and a buyer who wants to talk first each find the action that fits them.
Key takeaways
- Offer a quieter second action beside the dominant CTA.
- Map the split to buyer types: self-serve vs sales-assisted.
- Keep the primary path obviously dominant.
Showing 1–29 of 234 examples
Hero|
BetterClaw No-Code Hero Design
Hero|
Lensmor Lead Generation Hero Design
New
Hero|
Trezy Fintech Hero Design
New
Hero|
heal.dev Developer Tools Hero Design
Hero|
Phantomstory Marketing Hero Design
Hero|
Folio AI AI Hero Design
Hero|
mailX by mailwarm Marketing Hero Design
Hero|
Livestorm SaaS Hero Design
Hero|
Scoro SaaS Hero Design
Hero|
ZooWork AI Hero Design
Hero|
thestory.run Marketing Hero Design
Hero|
DailyHelm Analytics Hero Design
Hero|
Typewise Nova Customer Support Hero Design
Hero|
Hello Inbox Marketing Hero Design
Hero|
Navigara Developer Tools Hero Design
Hero|
PromptQL AI Hero Design
Hero|
Nautis Productivity Hero Design
Hero|
Sleek Analytics Analytics Hero Design
Hero|
Leaddelta CRM Hero Design
Hero|
Novu Connect Developer Tools Hero Design
Hero|
VC Boom Startup Hero Design
Hero|
Travis Ci Developer Tools Hero Design
Hero|
Storyblok Developer Tools Hero Design
Hero|
Neat Telecom Hero Design
Hero|
Saleshandy Lead Generation Hero Design
Hero|
Openline AI Hero Design
Hero|
Behiiv Marketing Hero Design
Hero|
Koyeb Developer Tools Hero Design
Didn't find the hero you were looking for?
Browse every hero pattern by UX best practice, or jump to an industry view.
What it is
A secondary CTA path gives the hero two next steps instead of one. The primary action serves the visitor who is ready to act now. The secondary serves the one who is interested but not ready, with a lighter or more personal alternative that still moves them forward.
The best heroes use one of four pairings:
- Free trial plus demo. "Start free" next to "Book a demo", so self-serve buyers can try the product and others can ask for a conversation.
- Build for free plus talk to sales. Common in developer and infrastructure products: "Start building free" for the individual, "Talk to the team" for the company evaluation.
- Signup plus guided tour. A "Sign up with Google" or email path next to "Take a product tour", so a visitor can either commit or look first.
- Main action plus download. The core action alongside an app store or platform link, for the same buyer who wants to start a different way.
Why it matters
A hero often serves two kinds of visitor at once. One wants to try the product now and does not want anything in the way. The other wants to understand it first, or needs a team to agree, before committing. A single call to action serves one of them and leaves the other with nothing to do but leave. A second path gives that visitor a next step too.
How the best heroes do it
The examples below map the split to real buyer types: a self-serve trial for individuals and small teams, a demo or sales contact for bigger evaluations. Scoro, Livestorm and Whatfix pair a free-trial CTA with a demo path. Developer-led products like Dyte and Runtime split a build-for-free action from a talk-to-sales path for enterprise buyers.
The strongest also pair it with a risk reducer in the hero, so the self-serve path asks for nothing the visitor would worry about.
100/100Common mistakes
The usual failure is a hero with one button only. When that button is "Book a demo", the visitor who wanted to try the product alone has no way in. The second is a secondary path that goes nowhere useful: a vague "Learn more" that adds a choice without adding a real alternative.
Curated by
Gabriel Amzallag , Founder, Web Anatomy
5 years CRO + SEO at Qonto (2021–2025). After advising 15+ SaaS on their websites (Payfit, Pigment…), the same patterns kept breaking, so I decided to build the source of truth on what works on the web: the intelligence layer every tool, builder, and team uses to ship sites that perform.
FAQ
The secondary CTA path, answered
The common questions about offering a second hero action, with answers drawn from 234 scored examples.
How should the secondary CTA look next to the primary?
01The primary action stays dominant, usually a solid button. The secondary sits beside it or just under it in a lighter style, often an outlined or text button. The visitor should see the default choice at a glance, with the second path there if they need it.
Can a second CTA get in the way?
02Yes, when both buttons carry equal weight. The visitor has to make a choice the page should have made for them, and the one who already knew what they wanted slows down. The fix is a clear order, not removing the second path: lead with the path most visitors should take.