Thread by @luisthewiz

6 months ago, I sold my first landing page for $500.

Last week, I built a landing page that made $79,461 in a week

A Landing Page Manifesto:

Product: @EdLatimore and @OneJKMolina's The Templates

Goal: $50k launch

Conversion rate: 18.76% (on average)

Result: $79,461 (and counting) within a week

Let's dissect it part by part (anyone can do this):

There are two things that make a great landing page:

1) Great copy
2) Conversion-centered design

But how do you write great copy?

What the hell is conversion-centered design?

And how do you combine those to sell over $70k?

First, great copy

JK wrote the copy using @ComedicBizman's approach:

1. BIG problem

2. BIG Idea

3. BIG promise

4. Unique Selling Proposition

5. Unique Mechanism

6. Proof

7. Irresistible offer

Second, conversion-focused design

Here's my 7-step process to build a conversion-focused landing page

1) Color
2) Fonts
3) Structure
4) Graphic Elements
5) Integrations
6) Responsive Design
7) Load Speed

1. Color

The colors you use depend on what feelings you want to convey

Facebook uses blue to convey trust (LOL)

McDonald's uses yellow to convey happiness

Subway uses green to convey freshness

So think about the feelings you want to convey to your target

And use this color-psychology map to pick one or two colors that convey those feelings:

Example:

I wanted people to feel the same thing they feel when they enter Twitter

So I used the same colors Twitter uses:

- Primary Color -> #15202B
- Secondary Color -> #1DA1F2

The other two colors you'll use are white and black (or variations of those colors)

2. Fonts

Like colors, different fonts convey different feelings to the reader

Trust, professionalism, authority, etc

All of them important when it comes to conversions

Picking the right font is what determines whether your prospect will read your landing page or not

Here are the different categories of typography alongside and the feelings they're associated with:

- Serif: trust, formality, authority
- Sans-Serif: modernism, modernism, tech-focused
- Script: elegant, sophisticated, creative
- Display: uniqueness, adaptability, fun

All you have to do is pick:

1. A font for the headings (usually from the Serif category)
2. A font for the body copy (Usually from the Sans-Serif category)

Use fonts(dot)google(dot)com to validate the pairing of the fonts you choose

3. Structure

Your landing page (like your copy) its divided into sections

Each section serves a purpose

Some sections agitate the problem, others show social proof and others call people to action

The trick here is to identify which sections to emphasize

Usually those sections are the ones where you have the headline, CTAs, price tables, etc

To make those sections stand out use:

1. Primary color for the background
2. White for the text
3. Secondary color for the CTA

Example:

For the sections containing the body of the copy your main goal is to keep them reading

AKA you need to make the reading easy, enjoyable and effortless

Use:

1. White for the background
2. Primary color for the headings
3. Black for the text

Example:

4. Graphic Elements

Images, videos and gifs are great to boost conversions

Use them to show:

- What's inside
- How to use it
- Social proof

If it is well structured, the copy should tell you where to place them

Example:

1. Video showing how to use the product at the beginning

2. Gifs showing what's inside the product in the middle

3. Testimonials at the end

5. Integrations

Design-wise, the page is almost done

Now you have to integrate your Gumroad page

This is where most people f*ck up

By redirecting prospects to their Gumroad page

Instead of helping them complete the sale right on the spot

Listen:

If they're clicking a button that says BUY NOW

It means they want to BUY NOW

When you redirect them to your Gumroad page,

You're giving them the chance to think it twice = not buying

DON'T!

Instead...

Use the the "Gumroad Overlay" integration

This shows the reader a pop-up to finish the purchase without leaving your page

(If this thread gets 100 likes I'll post a step-by-step video on how to do it)

6. Responsive Design

If you're promoting a product on social media

At least 40% of your traffic will come from mobile devices

Which means...

If your landing page isn't mobile-optimized you will lose 40% of your sales

FORTY PERCENT.

So how do you optimize it?

1. Make the text smaller
2. Resize buttons to fit screen
3. Resize elements to fit screen
4. Reduce spacing between elements
5. Put everything in one column
7. Align text to the left (if possible)
8. Check on different mobile devices

7. Load Speed

People have very low consideration spans

If your page takes more than 5 seconds to load they'll leave

So you need to make your landing pages load FAST

Here's how:

1. Convert your images to .jpg or .webp
2. Compress your images (use optimizilla)
3. Use embedded videos (YouTube or Vimeo)
4. Preload GIFs (This requires some basic coding)
5. Remove unnecessary text/content

Before / After

That's it my friends.

This is how I built a landing page worth 76 grand

This will take you far,

But it's just the tip of the iceberg

Follow me to learn more about landing pages, web design and online biz

P.S.

Feel free to DM me if you need any work done

Talk soon

Luis

Here's the final result:

thetemplates.carrd.co