10 Great Homepage Above-The-Fold CTA Examples
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:
Homepage Example 1: Susan Peirce Thompson
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Ā
Homepage Example 2: Darren Rowse
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Ā
Homepage Example 3: Tim Ferriss
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
Homepage Example 4: Grant Baldwin
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
https://www.melyssagriffin.com
Homepage Example 5: Melyssa Griffin
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
Homepage Example 6: David Siteman Garland
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
Homepage Example 7: Derek Halpern
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
Homepage Example 8: Liam Austin
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
Homepage Example 9: Nick Stephenson
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Ā
Homepage Example 10: Lewis Howes
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.”
That’s why I like website design and sales funnel strategy – there is an art to it, and it’s an art that generates revenue – especially when you know which rules to break.
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.