What you get out of this
Above the Fold
The most important part of your page?
Your "above the fold" (ATF) section is the part of your site that's immediately visible before scrolling.
When visitors see this, they decide to either keep scrolling or bounce.
In seconds, they attempt to assess:
- What you do.
- Whether you're a fit for them.
If your above the fold is confusing or uninteresting, visitors bounce. This happens because of:
- Weak messaging: Your product's purpose is unclear, uninteresting, or irrelevant.
- Weak design: Your design is unprofessional, outdated, or ugly.
We've written several hundred above-the-fold sections. We have data on what works.
And that's what this playbook teaches you: how to rewrite and redesign your above-the-fold to increase conversion and make your brand stand out from your competitors.
In a sense, this playbook isn't just about your ATF. It's about learning how to position your startup so that people get excited by it. The lessons herein improve your landing pages, ads, content, and how you present your startup to the world.
Watch how we rewrite this header
On the left, we have a bad example. Pay attention to what makes the right example better.
The right one is better because:
- It no longer sounds like corporate speak.
- It describes the specific benefit of the product.
A few more examples
The right one is better because:
- It no longer uses vague phrasing.
- It describes the specific benefit of your product.
The right one is better because:
- It doesn't talk in self-congratulatory terms. It talks in terms of benefits to the visitor.
- It ****clarifies the specific outcome of using the product.
What these improved examples have in common is increased specificity.
Specificity is step one to strong ATF header writing.
Step two is layering a hook into your header. Meaning, find what's magical and exciting about your startup, and write it in your ATF copy.
For example: The startup below offers the educational equivalent of a university degree for just $19/mo. That's magical for an audience who gave up on higher education because it was unaffordable.
Don't consider your landing page completed until you've found your startup's magic and pitched it in your header. It's how you get people to lean in and keep scrolling.
These changes can increase conversion by 10-30%. That's significant.
Over the next few sections we'll walk you through writing your own ATF from scratch.
Our copywriting process
The first part of this guide covers writing the key text in your ATF: headers, subheaders, and call-to-action buttons.
We'll follow three steps:
- Identify how users get value from your product
- Add a hook—to get them to keep reading
- Speak directly to your customer personas
1. Identify how users get value
Value props are ways people "get value" from your product.
Consider the following exercise for finding your product's value props:
- What bad alternative do people resort to when they lack your product?
- How is your product better than that bad alternative?
- Now turn the last step into an action statement—that's your value prop.
As an example, let's use the free language learning app Duolingo. It offers short-form, interactive lessons.
Let's look at a few more examples
- List the ways life is worse when your product doesn't exist.
- Identify a specific articulation of your better solution. Do not use vague phrasing.
Now that we have our clear and specific header, we'll add a hook to compel visitors to keep reading.
2. Add a hook
Adding a hook to your header can take two forms:
- A bold claim
- A response to likely skepticism
Add a bold, specific claim
On the left, we have a vague statement. On the right, we have a specific, bold claim about the benefit users will receive.
Now that's more enticing. Readers want to know how that's possible. So they keep reading.
Here's another example:
Be sure your pitch doesn't sound too good to be true. If you trigger the reader's hyperbole radar, it cheapens your brand and compromises their trust in you.
For example, don't do this:
In short, a bold claim is:
- Highly specific
- Triggers a dopamine hit of "wow, I didn't know that was possible."
Proactively address major objections
In addition to including a bold claim, you can also add a hook by addressing a key objection in your header.
Let's use the website design tool, Webflow, as an example. Below is their header copy, which hasn't yet been paired with a hook:
Build your own website.
Upon seeing this, objections readers have could include:
- But, I don't know how to code. Don't websites require coding skills?
- This will take too long. I don't have the time. I'm not a trained designer.
- This will be low functionality and constraining like other site design tools.
Your job is to identify which of these is a major buying objection—and to proactively address it.
Don't let visitors retain their unaddressed concerns that cause them to bounce before scrolling.
In the examples above, we're expanding our header's first sentence plus adding a second—in pursuit of our handling a key objection.
This requires balance. If you bloat your header with extraneous details, it becomes hard to read.
Don't try to address every objection—you can do that with the rest of your page.
Backing up, how do you go about identifying your customers' biggest objections? Survey them.
- "What almost stopped you from buying?" That's an objection.
- "Why do you think non-customers haven't bought from us yet?" That's an objection.
Let's revisit our earlier examples—this time with objection handling:
- List out your customers' key objections when considering your product.
- Address those objections in your header through a bold claim and/or an objection-handling sentence.
3. Speak directly to your customer persona
So far, we've captured the specific, major benefit of our product. And we've articulated it clearly without using vague language. Then, we added a hook to reel visitors in.
Now, we have to make sure we're addressing our value prop to the right audience.
If your target audience isn't everyone in the world—and it's probably not—then don't try to appeal to everyone in your header copy.
When warranted, it's okay to go niche. Make your target persona know you're truly built for them.
This is the discipline of persona marketing.
In short, list who you're selling to, prioritize the list based on your business objectives and ROI, then directly address those personas in your ATF.
Let's look at a subtle example:
- Before: tamagotchi.com, a site for children, is talking to adults who are presumably making the signup decision on behalf of their children. This is a misunderstanding of who's signing up for Tamagotchi. It's actually the children browsing on their own, not the adults.
- After: Now the children feel spoken to. The benefit is directed at them.
If your product targets multiple major personas, you can prompt visitors to choose which persona they fit into at the top of your page. Then route them to the appropriate section of your site.
We call this "choose your own adventure." In the example below, xealenergy.com creates different paths for apartment and workplace owners:
- List out your top 2-3 customer personas.
- Rewrite your header(s) to speak to them—in their language.
- Choose the header that best addresses your key audience, or create multiple landing pages for each persona.
Header writing recap
- Find what makes you magical then shape that into a specific, non-vague benefit.
- Add a hook. Either a bold claim or a major objection handled.
- Tailor your messaging to your major persona(s).
That's the header writing process.
Onto the next step: Subheader
Until now, we've only written a header. It's time to compliment that with a subheader, which will expand on what makes our product special.
The subheader is commonly used for expanding on two things:
- How does our product work exactly?
- Which of our features make our header's bold claim believable?
In the example above, we address what our platform is (green) then we explain how its claim ("new way to grow your startup") is possible (blue).
Similarly, jupiter.co's first sentence explains what their product is (green). Then it explains how its claim ("In just 5 minutes") is possible (blue).
As a rule of thumb, your subheader should only be one or two sentences. Don't make this an essay. Keep reading breezy so visitors sustain their momentum.
Time for a few more examples
- Rewrite your subheader to explain how the claim in your header is achieved.
- Add the top 2-3 features of your product.
- Keep it brief. Lengthy paragraphs kill momentum.
Designing your above the fold
A landing page's design should rarely be unique. It's your product that should be unique. Your page is just a familiar medium for communicating your product's uniqueness.
In other words, don't be aggressive with avant garde design—unless you have a branding-related reason to. (Which is fine.)
Generally, stick with visual idioms readers are familiar with and are expecting.
When adding images, consider two goals:
- Make them visually appealing—modern, clear, and pretty. Pay a designer if you aren't one.
- Have the images demonstrate the value of your product. This is often done by showing the product in action.
In the example below, HelloSign includes a GIF of their product in action. It's showing us what we're about to sign up for. It's de-risking our time investment and removing the uncertainty.
Further, instead of making the visitor read tiny text, they blur it out so you can focus on what matters: how the product works.
One more good example. If you're selling physical goods, consider doing two things: (1) show off the various use cases and (2) show close-ups of the build quality. This gives visitors a fuller appreciation of the product's magic.
Keep plenty of empty space between the elements on your ATF. It'll help your copy and visuals pop.
Below is a counter-example. The visuals here don't add value and they cause the header copy and subheader copy to blend into the background.
The fewer links you have in your navigation bar, the better. Try to minimize analysis paralysis.
Put the greatest visual emphasis on the key action you want visitors to take.
Above, Slack has too many things going on. It's unclear where to start.
Trello, in contrast, is possibly too minimal with their nav bar. There are likely additional resources that could help buyers build confidence to buy from Trello.
Rule of Thumb: Use 2-4 links plus a CTA on home pages.
We've hit the end of this guide. Before we wrap up, let's talk about "call-to-action" buttons:
Above, we have two strong examples. "Find food" and "Start learning" are continuations of the magic teased in the header copy. It feels natural to click these CTAs because they help the visitor continue the narrative you kicked off.
In short, think of your CTA as the actionable next step to fulfilling the claim in your header.
In contrast, below is a weak CTA.
The copy is vague and it's not explained what the product is, so why would I request a meeting?
Rewriting CTA examples
Sometimes the best CTA is to keep scrolling
Some products are difficult to pitch. They may benefit from visitors reading more of the landing page before they click to sign up.
If this describes your product, consider having your CTA button simply lead further down the page. Then have a CTA focused on converting further down the page.
Or, instead of adding a CTA to keep scrolling, cut the above-the-fold short so visitors must scroll to see the rest.
Your above the fold starts a narrative. It provides visitors with the specificity, magic, and clarity to take the next action in your funnel.
More importantly, it's your first impression. That warrants a lot of your attention.
What we covered:
- Create a header by identifying how users "get value" from your product.
- Add a hook with bold claims or handling objections.
- Talk directly to your key personas.
- Support your header's claim with a subheader explaining how your product works.
- Design your ATF to support your message: value-added images, minimal and focused navbars, and magic-relevant CTA buttons.
Researched by Demand Curve