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:
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):
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?
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
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
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
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:
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)
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
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
- 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
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
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:
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:
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
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
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
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...
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)
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.
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
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:
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
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
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
Loading suggestions...