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 22–42 of 103 examples

Unriddle Hero
Hero|

Unriddle AI Hero Design

Sprout Social Hero
Hero|

Sprout Social Social Media Hero Design

Salesforce Hero
Hero|

Salesforce CRM Hero Design

Close Hero
Hero|

Close CRM Hero Design

CircleCI Hero
Hero|

CircleCI Developer Tools Hero Design

New
Firecoach AI Hero
Hero|

Firecoach AI AI Hero Design

Safetyculture Hero
Hero|

Safetyculture Operations Hero Design

Supaboard Hero
Hero|

Supaboard Analytics Hero Design

Bond Hero
Hero|

Bond Lead Generation Hero Design

PollyReach Hero
Hero|

PollyReach AI Hero Design

Agentmemory Hero
Hero|

Agentmemory Developer Tools Hero Design

CtrlOps Hero
Hero|

CtrlOps Developer Tools Hero Design

Kirki Hero
Hero|

Kirki CMS Hero Design

Zendesk Hero
Hero|

Zendesk SaaS Hero Design

Xenia Hero
Hero|

Xenia SaaS Hero Design

Waratek Hero
Hero|

Waratek Cybersecurity Hero Design

UserEvidence Hero
Hero|

UserEvidence SaaS Hero Design

Tractian Hero
Hero|

Tractian IoT Hero Design

Synapsa Hero
Hero|

Synapsa AI Hero Design

Spotify Premium Hero
Hero|

Spotify Premium Software Hero Design

Sinch Hero
Hero|

Sinch Telecom 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.

Unriddle hero section78/100
Top-scored hero: Unriddle

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.