Skip to content

Hero Sections with a Secondary CTA Path (103)

A secondary CTA path gives the hero two next steps instead of one, so a self-serve visitor and a sales-assisted buyer 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 43–63 of 103 examples

SignOnSite Hero
Hero|

SignOnSite SaaS Hero Design

PayFit Hero
Hero|

PayFit HR Tech Hero Design

PathFactory Hero
Hero|

PathFactory SaaS Hero Design

Parabola Hero
Hero|

Parabola SaaS Hero Design

Jasper Hero
Hero|

Jasper AI Hero Design

HubSpot Hero
Hero|

HubSpot SaaS Hero Design

GourmetPro Hero
Hero|

GourmetPro B2B Hero Design

Eventmobi Hero
Hero|

Eventmobi Event Tech Hero Design

Elastic Path Hero
Hero|

Elastic Path SaaS Hero Design

ERPNext (Frappe) Hero
Hero|

ERPNext (Frappe) ERP Hero Design

DevStats Hero
Hero|

DevStats Developer Tools Hero Design

Contentsquare Hero
Hero|

Contentsquare SaaS Hero Design

Attribuly Hero
Hero|

Attribuly SaaS Hero Design

Arrows Hero
Hero|

Arrows SaaS Hero Design

Tray.ai Hero
Hero|

Tray.ai Developer Tools Hero Design

Helpshift Hero
Hero|

Helpshift SaaS Hero Design

Zapier Hero
Hero|

Zapier SaaS Hero Design

Spendesk Hero
Hero|

Spendesk Fintech Hero Design

Sentry Hero
Hero|

Sentry Developer Tools Hero Design

Outreach Hero
Hero|

Outreach CRM Hero Design

Livestorm Hero
Hero|

Livestorm SaaS 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.

[WHY THIS GALLERY]

BEYOND PRETTY SCREENSHOTS

SCR
[01]

Scored, Not Curated by Taste

Every hero section is scored across 6 conversion best practices. Copy the best practice stack, not the design. See what converts and why.

DB
[02]

103+ Real SaaS Pages

Hand-picked from 350+ companies and analyzed by our AI conversion agent. Not a random dump of homepages. Every entry earns its spot.

VS
[03]

Benchmark Your Own Hero

Found a hero you admire? Run yours through the same scoring engine. See where you stand on the same best practices, and what to fix first.

What a secondary CTA path actually is

A secondary CTA path is the decision to give the hero two next steps instead of one. The primary action serves the visitor who is ready to act now. The secondary action serves the one who is interested but not ready, by offering a lower-commitment or higher-touch alternative that still moves them forward.

The best heroes use one of a few recurring pairings:

  • Free trial plus demo. "Start free" sits next to "Book a demo," so self-serve buyers can try the product while considered buyers can request a conversation.
  • Build for free plus talk to sales. Common in developer and infrastructure products, where "Start building free" serves the individual and "Talk to the team" serves the enterprise evaluation.
  • One-click signup plus guided tour. A "Sign up with Google" or email path next to a "Take a product tour," so a visitor can either commit or look first.
  • Inline action plus secondary download. A core action in the hero alongside an app store or platform link, capturing a different way the same buyer wants to start.

Why it works

A SaaS hero almost always serves two audiences at the same time. One visitor wants to try the product immediately and resents anything that stands between them and the signup. The other wants to understand the product, or needs buy-in from a team, before committing. A single call to action serves one of them well and abandons the other.

A second path closes that gap. The primary action keeps the self-serve buyer moving, and the secondary action gives the considered buyer something to do other than leave. Done with clear hierarchy, it widens the top of the funnel without slowing the visitor who already knew what they wanted.

How the best heroes do it

About six in ten of the scored hero sections in our library offer a secondary path beside the main CTA. Across the scored examples below, the discipline is hierarchy. The strongest heroes make the primary path obviously dominant, a solid button, and let the secondary sit beside it in a quieter style so the intended default reads at a glance. They also map the split to real buyer types: self-serve trial for individuals and small teams, demo or sales contact for larger evaluations. Heroes from 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 second path rarely stands alone. The strongest heroes pair it with a risk reducer in the hero so the self-serve path carries no signup anxiety.

SignOnSite hero section67/100
Top-scored hero: SignOnSite

Common mistakes

Bloomreach hero section10/100
A low-scoring hero that skips this pattern: Bloomreach

The usual failure is two CTAs with equal visual weight, which forces every visitor to make a decision the page should have made for them and slows the buyer who was ready to act. The second failure is a secondary path that goes nowhere useful, a vague "Learn more" that adds a choice without adding a real alternative. Lead with the path most visitors should take, give the second path to the audience it is actually for, and make the hierarchy between them obvious.

Gabriel Amzallag

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.

Does your hero give both buyers a next step?

Paste your URL. Get a scored analysis of your hero section, including whether your CTAs serve self-serve and sales-led buyers. Free, no signup.

FAQ

The secondary CTA path, answered

The common questions about offering a second hero action, with answers drawn from 103 scored examples.

What is a secondary CTA path in a hero section?

01

It is a second call to action placed next to the primary one, aimed at a different kind of visitor. The most common split pairs a self-serve action like 'Start free' with a higher-touch action like 'Book a demo' or 'Talk to sales', so a visitor who is not ready to sign up still has a next step that fits them.

Why offer a secondary CTA instead of just one?

02

Most SaaS heroes serve two audiences at once: a self-serve buyer who wants to try the product now, and a considered buyer who wants a conversation first. A single CTA forces one of them to leave without acting. A second path captures the buyer the primary action does not fit, without weakening the primary action for the buyer it does fit.

What are common secondary CTA pairings?

03

Free trial plus book a demo, build for free plus talk to the team, and one-click signup plus a guided product tour are the patterns that recur most. The pairing usually maps to a self-serve path for individuals and small teams and a sales-assisted path for larger or enterprise buyers.

How should the secondary CTA look next to the primary?

04

The primary action stays visually dominant, usually a solid button, and the secondary sits beside or just under it in a lighter style, often a ghost or text button. The hierarchy should make the intended default obvious at a glance, so the second path is available without splitting attention evenly between the two.

Can a secondary CTA hurt conversion?

05

It can when both actions carry equal weight, because that forces a choice and slows the visitor who already knew what they wanted. The fix is hierarchy, not removal: lead with the path most visitors should take, and let the second path serve the minority it is meant for without pulling focus from the first.