Attention is so scarce online, you only have a moment to convert. That’s why a good homepage CTA above-the-fold can be so powerful – in first moment that someone lands on your homepage, they should immediately know who you are, what problem you solve, and how you can help them solve it. This article has 10 homepage CTA examples that use their above-the-fold content in the right way.
What is ‘Above The Fold’ content?
The term ‘above the fold,’ according to Wikipedia, refers to ‘the portions of a webpage that are visible without further scrolling or clicking.’
If you remember reading that old media interface we used before the Internet – the newspaper – then you probably know intuitively what ‘above the fold’ means.
“Most newspapers were sold from sidewalk kiosks,” as they say on OptinMonster, “folded in half so passersby could see the top half of the front page. If what they saw didn’t grab them, they’d keep on walking, and sales would be down. That’s why it was crucial to put your best, most interesting content ‘above the fold’.”
And what is a CTA?
CTA = Call-to-Action. This is the message that incites your user to do something specific.
Here are 10 lessons from 10 great websites that use their above-the-fold section to frame their CTA really well:
CTA: Take the Quiz Now
Headline: My name is Susan Peirce Thompson, Ph.D., and I want to help you get Happy, Thin, and Free.
Susan has a program that helps you decide in the moment when you should or shouldn’t eat something, with clear, bright lines.
What I like so much about Susan’s messaging is its clarity. She has a very well-defined problem she solves, and you don’t have to spend any time figuring it out. If you are struggling with your weight, she speaks directly to your problems, and you know exactly what you need to do next (take the quiz!)
LESSON: Clearly articulate what you offer right away
CTA: Subscribe to Problogger Plus
Headline: Become a ProBlogger
If you’re a blogger and you want to make a career out of it, you want to be a ProBlogger. Darren has been helping people level up their blogging game for a long time, and his advice is always friendly and helpful. (Read my review of Darren’s talk at WDS here.)
This homepage has lots of CTAs – join the Facebook community! Listen to the Podcast! Subscribe and Follow! Look at all these orange links! – but unlike most other target markets, this works for bloggers. We are a hyperactive bunch, and we know how to open links in new tabs, so I think he breaks the rule of ‘one CTA at a time’ very nicely here.
LESSON: Break the rules when it suits you
CTA: Click to Listen
Headline: 300+ Million Episodes Downloaded
This blog is a vehicle to the podcast. Everything above the fold here is to convince you to get to the podcast – he’s got tons of social proof, the title of the latest episode (twice! In two different colors!) and any competing options are barely visible.
Tim Ferriss’ website does not exist to convince you why Tim is awesome – he’s beyond that point. Now he’s directing his audience to what he wants them to do next. He doesn’t want new website visitors to hire him for coaching (yet), or to approach him with VC deals (here), or to subscribe to his newsletter. All he wants is for you to listen to his podcast, because that is the strongest cornerstone of his platform, and the entry point to all his other offerings.
Lesson: Direct the top of your funnel to one destination
CTA: Join our Online Training
Headline: Want to Learn How to Find and Book Speaking Gigs?
Normally, your above-the-fold CTA should not lead to another website. When someone lands on your homepage, why would you want to immediately take them somewhere else? In Grant’s case, he’s got good reason. He has a very clearly defined Customer Avatar – public speakers who want to get booked and paid to speak. His signature course is promoted in his free course, which you find by clicking the ‘Join our Online Training’ button here.
This is a good looking homepage, and it validates Grant’s credentials and authority. If you happen to match his Customer Avatar, however, he wants to get you into his funnel right away, and his CTA button is a great way to do that.
Lesson: Make a fast lane for your Customer Avatar
CTA: Click Here to Sign Up
Headline: Get my bangin’ blog business plan workbook for free.
This homepage includes an extra feature, something I usually see just a step or two lower down in the sales funnel: segmentation! By selecting the group with which you most strongly identify, Melyssa is gearing up a different automation sequence for you after you subscribe. Normally this is done in a follow-up email (as I typically handle it in the Stellar Email Template) but here it works seamlessly as part of the sign-up process.
The design of this hero section is bold and minimalistic, which helps offset the large amount of text in the selection boxes. I especially like the various options she presents JUST below the fold, encouraging you to scroll a little further (and to self-segment yourself again).
LESSON: Segment your audience at all the natural decision points
CTA: Sign up for free training!
Headline: I help experts create and sell online courses
The hero shot here is really personable and engaging – I just wish it didn’t cut off his head! While I like the clarity and simplicity of his message – if you are an expert, and you create and sell online courses, you know that you want what he’s selling – I’m not a big fan of the color palette, and I think the ‘Get My Free Cheat Sheet’ CTA just above the fold is more compelling than the ‘Sign Up for Free Training’ in the green button.
What this homepage does really well is bolding out the big result his customer wants – CREATE AND SELL ONLINE COURSES – in a way that makes his Customer Avatar sure to dig deeper.
LESSON: Focus on the specific outcome your audience wants
CTA: Click To Get Free Updates
HEADLINE: Get With the FREE Program, Will Ya?
This is such a clear and simple homepage that it should be framed. The confidence in this hero shot – that is the confidence that Derek’s customers want to have. (Having your imagery visually convey the experience your customers hope to have is on the first page of the Stellar Homepage Checklist.)
While this could have been a very bland CTA – ‘join our weekly newsletter’ is in the start of the subhead – he’s put a very good set of copywriting twists on it that are intriguing, and make you want to learn more. It even says ‘free updates’ in the upper right, instead of ‘subscribe now,’ and that’s a good pivot. I also like how this homepage doesn’t celebrate the logo, but the logo’s typography still frames the visual experience. Instead of the logo being the champion of this website, it’s Derek himself, and that’s a much more authentic expression of a personality-based brand.
LESSON: Your homepage is about you, not just your business
CTA: Sign Up
HEADLINE: The #1 marketing tactics of proven entrepreneurs – delivered daily
Normally I find ‘Sign Up’ to be a weak CTA in this day and age, but on this homepage it works. There isn’t a hero shot confusing you with the personality of the author – contradicting the previous lesson with Derek Halpern – instead, there is just a clear and simple value statement, and everything is framed around the daily email.
Putting so much effort into content marketing means that Liam does not want to dilute his main message (‘Sign Up’) with competing calls-to-action. He may have plenty of programs to sell, and media to review – videos, and podcasts, and ebooks, oh my! – but he will pitch you all those things in good time, AFTER you have subscribed. This homepage is a lot like a landing page – its goal is to convert you into taking ONE action, and other subsequent CTAs don’t distract you from taking this entry into the larger funnel.
LESSON: Optimise for the one action you want people to take
CTA: Get the Book
Headline: Your Free Book is Waiting
Nick knows his audience, and they are heavy readers. The prospect of a free thriller is going to be exciting to his target market, but not to people outside of it. If he can hook a heavy reader with one thriller, the likelihood that they will purchase the rest of his books is very high.
Offering a free book is a big giveaway, and I especially like that he does not answer a relevant question here – is this a free digital copy, or a free hard copy? Just wanting to get that question answered is enough incentive to get someone to click.
LESSON: Be a little unclear, so users have to click to figure it out
CTA: Sign up to learn these 3 simple steps
Headline: Make a full-time living doing what you love
At first glance, the headline seems to be ‘Become The Hero Of Your Own Story,’ but I don’t think it is. I think that’s the tagline. The real headline for this homepage, and the message that frames someone’s decision to enter Lews Howes’ sales funnel, is ‘Make A Full Time Living Doing What You Love.’ That is the outcome-based value statement that tells the reader what they are going to get.
The hero shot is excellent quality, and the tagline does more to draw someone in to Lewis’ brand than the headline would. In this instance, I think it’s a smart move to have the tagline overshadow the headline. Without superior design, this wouldn’t work, but this is a good examples of breaking the rules the right way.
LESSON: Inspire users to level up, through you
BONUS Homepage Example: Steve Kamb
Headline: We help Nerds, Misfits, and Mutants Lose Weight, Get Strong, & get Healthy PERMANENTLY!
There isn’t really a clear CTA on this homepage above the fold, but the messaging is so clear, it deserves an honorable mention. Nerd Fitness, run by Steve Kamb, has a very clear message – so clear, that if you’re a nerd who wants to get in shape, you won’t need a big flashy button for your call-to-action – you’re willing to hunt it down, like the Easter Egg in the bonus level of your favorite video game.
The hero shot is great, the headline is visually compelling, and the before-and-after photos peeking up from below the fold demonstrate the results. Some of the top-level navigation links could technically be CTAs, but without a clear button, or fillable fields, I don’t think this page properly has a CTA – but as I said, it’s so well-targeted, I don’t think it needs one.
So, what do you need on YOUR homepage above the fold?
Quicksprout has a simple formula, and they go into much more detail in their post about what to put above the fold on your website:
- A well-written USP
- Some brief explainer copy
- Your branded logo
- Simple, intuitive navigation
- Contact info – especially important if you’re running an e-commerce store
This is their formula for what to include above the fold on your homepage, and it’s pretty straightforward. However, don’t just follow the rules.
A Contrarian View
Don’t Put Your CTA Above the Fold
It must be noted, putting a call-to-action above the fold is not strictly necessary. As we see above with Nerd Fitness, it’s not essential. There are even some A/B tests that have seen a 20% increase in putting the CTA below the fold.
“If you just rotely put the call-to-action above the fold,” Marketing Experiments says on their blog, “you may be making ‘the ask’ before your potential customer sees the value in why they should act. Or, sometimes, before they even know what you’re asking.”
If you have a solid reason for taking a contrarian position with your homepage CTA – like some of the examples above expertly demonstrates – then do it. Just make sure, as Picasso supposedly said, that you “learn the rules like a professional, so you can break them like an artist.”
About The Author
Caelan Huntress is the father of 3 kids, and in his spare time serves as creative director of Stellar Platforms. He is also a writer, digital marketer, multimedia producer, and a retired superhero. He blogs about his adventures on https://caelanhuntress.com.