10 Great Homepage Above-The-Fold CTA Examples

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:

https://susanpeircethompson.com

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 

https://problogger.com

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 

https://tim.blog

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

http://grantbaldwin.com

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

https://therisetothetop.com

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

https://socialtriggers.com

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

https://entrepreneurshq.com

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

https://leopoldblake.com

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 

https://lewishowes.com

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

https://www.nerdfitness.com

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.

What Does Gutenberg Change In WordPress?

What Does Gutenberg Change In WordPress?

If you are looking to learn about Gutenberg in advance of the WordPress 5.0 release date, the best thing you can do is install the Gutenberg Ramp Plugin and give it a try for yourself. There are plenty of WordPress Gutenberg tutorials out there, but until WP 5.0 drops, we don’t really know what the effects will be. But so far, it seems to be mostly positive.

“For most casual users, it will, after some growing pains, bring a more flexible content creation experience.

Non-developers will be able to intuitively craft more complex layouts with extra elements like buttons, content embeds, and lots more. And that will, hopefully, help WordPress to continue to grow.”

Colin Newcomer on CodeinWP

WordPress Gutenberg Introduction

The new editor is clean, sleek, and simple. As I said in my first-ever Gutenberg post on my personal blog, “If Medium and the WordPress WYSIWYG had a baby, it would be named Gutenberg.” It’s a much more intuitive user interface that will enable newer bloggers to create content easily and fluidly.

“Gutenberg is an obvious reaction to competitors of WordPress; the writing experience of Medium, the quick and easy site builds using Wix and Squarespace.”

Iain Poulson on Delicious Brains

Gutenberg was revealed in mid-2017 by Matt Mullenweg during an interview with Om Malik, and ever since then, there has been a lot of anticipation for this new editor. Because WordPress is open source, none of this has been secret, and friendly geeks have been investigating the ins and outs of the software as it develops. Some of the links below have detailed tutorials on how to use Gutenberg for your WordPress website, with some tutorials in text, some in video, and a few in gifs.

How do I install Gutenberg on my website?

First off, let’s determine whether or not you have WordPress 5.0 or not.

How to install Gutenberg on your WordPress 5.0 Website

Step 1: Install WordPress.

That’s it. The WordPress core will have Gutenberg standard on every WordPress installation.

How to install Gutenberg on your WordPress 4.X site

  • Go to Plugins → Add New
  • Search for “Gutenberg” (I used Gutenberg Ramp plugin, it worked fine)
  • Click Install Now
  • Wait – Install Now button will change to Activate
  • Click Activate

Installing Gutenberg early will give you the chance to see what it does with your website; if things will break, if things will go smoothly, or if it’s way above your head.

Gutenberg FAQ

What will Gutenberg change in my WordPress site?

After WordPress 5.0, Gutenberg will change the Post Editor (and Page Editor) that you use to create new posts and pages. All the remaining WordPress functionality will be unchanged.

Can I use my page builder with Gutenberg?

Yes and no. Yes, on the website, but no, not on the page.

Yes, you can use a page builder on a WordPress 5.0 website that uses Gutenberg as the core editor. No, you cannot use the Gutenberg editor and your Page Builder editor on the same page.

This website is built in the Divi theme, and uses the Visual Builder as the page builder for many pages (and even some posts). If I compose a post in Gutenberg, and then try to transition that post to the Visual Builder, it used to remove all coding in the easiest way possible: it will delete all the content in the post.

I tried a Gutenberg-to-Visual Builder conversion, and it refused to convert, I couldn’t even access the Visual Builder. But it did preserve the Visual Builder shortcodes.

wordpress gutenberg tutorials screenshot

I tried a Visual Builder-to-Gutenberg conversion, and this is what the screen looks like when you try to go to the Classic Editor:

wordpress gutenberg tutorials classic editor

If you try to return to Default Editor, or get to Gutenberg, you’ll lose it all:

gutenberg tutorials divi builder visual builder

Will Gutenberg change my eCommerce Store?

Since Products are a Custom Post Type, they will not (currently) be able to use Gutenberg without extra enhancement.

However, since I use WooCommerce on as the shopping cart on this website, I did see a neat little notice on here after I installed Gutenberg:

gutenberg tutorials woocommerce integratione

I did this to get one of my basic page-builder functions in Gutenberg, and it is something I can already do with WooCommerce shortcodes, but this is what a Product Block looks like in Gutenberg:

Can I keep the old version of WordPress instead of using Gutenberg?

I am quite sure there will be a plugin to attempt doing that, as there is always a plugin to handle any feature the user base wants; but since the old Tiny MCE editor is embedded in the core, it would take quite a hefty piece of code to transition it back.

If you really need to keep the old editor and refuse to use Gutenberg, your best bet is to stick with WordPress 4.9 and manually install any security updates, keeping your website increasingly obsolete. I’m sure this will be an appealing option for many to begin with, but I suspect that most people will upgrade in due course. 

How hard is it to learn Gutenberg?

Try one of the Gutenberg tutorials linked in this post, you’ll see how easy it is. Like any learning curve, though, it depends on your aptitude and your interest.

Writing a blog post in Gutenberg won’t be much different than writing a blog post in Medium, but it will have a lot of the core WordPress functionality and integration. Getting all of the new features to sync up will take a little study, but it’s not very difficult. I’ve found it to be very user-friendly – read the first post I wrote in Gutenberg, with glitches, here: https://caelanhuntress.com/2018/08/12/gutenberg-is-coming-to-wordpress/

How long does it take to learn Gutenberg?

It’s not long. After 3-4 posts, a novice blogger should have the hang of it; experienced bloggers will only need 1-2 blog posts to pick up all the differences.

Are there Gutenberg tutorials?

One of the best Gutenberg tutorials I’ve found is the WP Engine Gutenberg for Beginners tutorial.  – This comprehensive tutorial is full of gifs and is very useful.

If you like video, the Yoast team put out a great video series of Gutenberg tutorials for free on YouTube:

Will my old WordPress posts be affected by Gutenberg blocks?
Will Gutenberg affect the SEO of my WordPress website?

What’s New: Gutenberg Blocks

The Blocks are the most fundamental change to the editor. The Gutenberg tutorials linked above go into them in some detail.

Users of Medium will recognize the interface intuitively; but because it’s WordPress, you have much more flexibility and control than with a typical Medium post.

When you pop the hood and look at the the code, the Blocks code is pretty simple. It looks like this:

<!– wp:core/text –> <!– /wp:core/text –> makes a text block. Everything within those bracket pairs can be moved around, drag-and-drop, within the Gutenberg editor.

“Previously, your content lived inside one big HTML file and for every enhancement there had to be something new: shortcodes, custom post types, embeds, widgets and the like. All with their quirky interfaces and weird behavior. Now, you can build your content precisely like you make a LEGO set: all from one box, following a standardized and straightforward set of instructions.”

–  Edwin Toonen on Yoast

This sounds great, on the surface, if you’re starting from scratch. But what if you have an older website?

If you use a lot of shortcodes in your theme, this could present some problems.

“Currently, shortcodes cannot be executed in text columns or paragraph blocks. They must be placed in the shortcode block in order to work. This can cause some problems if your shortcodes produce inline content like the year or an inline call to action.”

– Nathan Ingram on iThemes

Gutenberg Glitches

These are the glitches I noticed while composing my first post in Gutenberg:

  • Making links doesn’t always work. The Link editor doesn’t always take my text, and I often can’t add a link easily.
  • Sometimes when I mean to backspace a word, it deletes the entire text block.
  • There is no undo when this happens; the text block I am working on is just gone.
  • The Fixed Background option to make images parallax often masks the image entirely in the editor
  • Sometimes deleting blocks is problematic, and I have to convert to HTML and manually kill it in the code
  • The images don’t display in the Editor the way they do in preview

An easy caveat: I created this post using the Gutenberg Ramp plugin, on a WordPress core that is still made to support previous versions of WordPress. This is also the early stages of rollout, and I made this post without reading any Gutenberg tutorials, so I am quite sure these glitches will improve over time.

Others have noticed some glitches and hazards too:

“Doesn’t support responsive columns yet. We really hope this is coming. A lot of times this is a reason people install visual builder plugins or shortcode plugins, is to get the column feature alone. It is definitely time for columns to be in core!”

– Brian Jackson on Kinsta

“Backward compatibility is going to be a primary concern for most developers. It will destroy current plugins and themes, especially ones that require integration with TinyMCE.”

– Manish Dudharejia

Gutenberg Plugin Compatibility

“Since announcing the database on March 1st, 70 people have been granted testing status. However, of 5000 total plugins, we’re still at 4139 untested plugins. No companies have stepped up to contribute a significant amount of person-hours.”

– Daniel Bachhuber on his blog

Of the 861 tested plugins that Daniel tested in April of 2018:

  • 219 (25.44%) are compatible.
  • 518 (60.16%) are likely compatible.
  • 25 (2.9%) are likely not compatible.
  • 39 (4.53%) are not compatible.
  • 60 (6.97%) are in “testing”, which means someone started test and abandoned the process.

That’s a decent spread, and the numbers may have improved. But as Igor notes below, this could cause big difficulties for Custom Post Types:

“If your plugin has a custom post type, then you may want to disable Gutenberg for that particular post type. To disable Gutenberg for your custom post type, you can just change your post type configuration.”

– Igor Benić on Tuts Plus

When will Gutenberg be a part of my WordPress website?

The answer to that question is very personal.

When WordPress 5.0 is released, every WordPress website that upgrades is going to have Gutenberg installed as its core editor by default. If you want it earlier, you can install a plugin, as described above. If you don’t want to upgrade to 5.0, you can probably coast on WordPress 4.9 for a number of months without facing any serious issues.

So, you will have Gutenberg on your WordPress website when you want it. Get ready, because it’s coming. Read some Gutenberg tutorials, or better yet, give it a spin.

If you want to talk about what Gutenberg could do to your WordPress website, schedule a consultation.