DIY: Design Squeeze Page for Your Affiliate Website

Design Landing Pages for Affiliates

What is Landing Page?

Landing pages or sometimes called squeeze page are web pages that capture users emails (aka leads) in exchange for something you offer to them after they provided you with their email address.

This process is called collecting subscribers to your list.

Now most internet marketers including affiliate marketers prefer this business model as it is a way to collect all your audience emails in a list and build trust relationship with them over time, therefore allowing them to sell as much product to them as they wish.

This article will take you step by step in designing a squeeze page for your affiliate website.

We also have included Web Designer Affset; a tool in our affiliate marketing training package to give you more design options.


What makes a Landing Page successful?

The success of your landing page is judged by how many subscribers you can collect, however that is directly connected to some important factors I will list below:

  • The quality of the traffic you are sending
  • The quality of the free offer you providing in exchange for their emails
  • The design of your landing page

I am going in this article to focus on the design of your landing page, and show you how you can design highly converting landing pages without paying hundreds of dollars to designers. This will save you both time and money.


What Landing Pages Consists of?

Landing pages have common elements in them:

  • Video (optional)
  • Leads Capture Box (where users opt-in)
  • Few Paragraphs (to describe what you are offering)
  • Main Headlines (these are the text you put above the leads capture box and the headline before your paragraphs)

Here is how a regular squeeze page/landing page looks like:

Squeeze Page Template Preview

Squeeze Page Template Preview


The red and blue text at the top are your Headlines, the box under the arrows are your Leads Capture Box and the rest of the text should describe what you are offering in exchange for them subscribing to your list.

The Video can be added right under the red headline but this is optional.


What you Need Before Creating your Landing Page?

1. Auto Responder Service

You need to have an auto responder account, which is a service that capture leads and allow you to mass email them ensuring your emails go straight to the inbox and not the spam box.

GetResponse , Aweber , MailChimp are the leader auto responder services that most affiliates and internet marketers use.

2. Squeeze Page Template

Download this landing page template it’s free, and I am going to show you how to edit it so it become personalized to your website and to what you are offering to your audience.

3. Text Editor

Any text editor will do just fine, you can use Microsoft Notepad that comes with your windows machine if you are on PC or use Mac’s text editor if you are on a Mac machine.


How to Design your Landing Page?

Now it’s time to show you how to actually design your squeeze page (or landing page).

Step 1: Open the index.htm file (from the landing page template you downloaded above) in your text editor; I am going to use Microsoft’s Notepad to open the file:

Code Preview


Step 2: Change your landing page title to match what you are offering because the title will show up in search engines when you get your landing page live:

Code Preview

Replace the highlighted text between “<title>” and “</title>” with your page title, leaving those “<title> and </title>” tags untouched.


Step 3: Change the main headline of your landing page (the red text in the above template screenshot):


Just replace “This is the main red headline” between the underlined “<h1” & “</h1>” tags with your main headline.

If you have trouble locating this highlighted area, then CTRL+F then do a search for “<h1 “ (without the quotes) to find it.


Step 4: Change sub headline of your landing page (the blue text in the above template screenshot)

Code Preview

Replace “The blue sub headline” with your sub headline or remove it to create your landing page without sub headline.

You can find the highlighted text between the “<h2 “ and “</h2>” tags.


Step 5: Add main content to your landing page

Code Preview

Text between “<p>” & “</p>” highlighted in yellow are the text before and after the bullet points (as shown in the landing page template screenshot above).

The “pre bullets text” in yellow is a paragraph or two you want to add before the bullet points.

The “post bullets text” in yellow is a paragraph or two you want to add after the bullet points.

Now to change the actual bullet points text, replace the text highlighted in green with your bullet point text. So you can change “point 1” with your bullet point text and so on for the rest of green-highlighted text.

Since this template comes with 5 bullet points, you may find yourself in need of less or more bullet points.

If you want to remove a bullet point from the template, then just remove everything between “<li>” and “</li>”. Each one of those you remove means you remove 1 bullet point.

To add more bullet points just add “<li>Your Bullet Text Here</li>” right after any “</li>”


Step 6: Add the headline to encourage people to subscribe

That’s the text right below the 3 red arrows on the top right part of the landing page template (as shown in the above screenshot).

Here you write ideally 3 to 8 words to entice people to subscribe, and preferably tell them about what you will be giving to them when they subscribe and whether it is free or not.

Code Preview

Replace “Blue headline above box” you see between “<div “ & “</div>” with your own headline.


Step 7: Describe your offer

In the text inside the subscription box, you should tell them to subscribe and then they will get instant access to your offer (it should be between 3 or 6 words).

This is the text right below the 3 red arrows on the top right.

Code Preview

Replace “the box text” you see between the underlined “<div” and “</div>”, with your own description of your offer.


Step 8: Setup your Auto Responder

In order for your landing page to be functional so that when someone enters their email address it goes right into your list, you will need to integrate your auto responder service in your landing page theme.

So the first thing to do is to login to your auto responder service and create a web form there (you don’t need to customize how it will look as the lading page theme we are creating now will apply its own theme).

Once you created your web form, your auto responder will give you an HTML code.

I am going to give you an example of this HTML code given to me by Aweber service (it may look slightly different if you use another auto responder service).

Code Preview

(Figure 1)

That’s the kind of code you will get from auto responder services.

Now find in the landing page theme the following block of code (between the red-underlined “<form” and “</form>”

Code Preview

(Figure 2)

Our goal here is to replace all the yellow highlighted text in the landing page theme with the correct values we got from our auto responder HTML code.

In the auto responder HTML code (Figure 1), we take the green-highlighted text


and put it instead of the yellow highlighted action value (Figure 2)


Now you take each one of the purple highlighted text (Figure 1) and match them with their yellow-highlighted (Figure 2) correspondent values.

For example, this line (Figure 1)

<input type="text" value="Enter your first name" name="name" id="optin-name">

Obviously refers to the “First name”, and its match in our landing page template (Figure 2) is

<input id="inf_field_FirstName" class="text" type="text" size="20" value="Enter your name..." name="inf_field_FirstName" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your name...&#39;;}" onfocus="if (this.value == &#39;Enter your name...&#39;) {this.value = &#39;&#39;;}">

And now that we matched those 2 “<input” tags, we need to change the “name” and “id” html tags in Figure 2 with the “name” and “id” values in their matched “<input” from Figure 1

So in our landing page theme we replaced

 name="inf_field_FirstName"” with “name=" name"” and replaced “id="inf_field_FirstName "

with “id=”optin-name””

Apply the same method to the email and submit <input tags.

Lastly, you need to copy all the yellow-highlighted text in Figure 1 (input tags type hidden), the whole block of them. And past them right before the red-underlined “</center></div></form>” in Figure 2.

That’s it; test your optin form to make sure it was configured correctly.


Step 9: Setup your Landing Page footer

The last thing you need to customize on your landing page is the footer, this is basically where you put links to other pages on your website (i.e. contact us, about me pages…etc) and the copyright statement.

Code Preview

Replace “Your Copyright Statement” highlighted in yellow with your copyright statement, usually it says something like:

Copyright © 2014–2015

Obviously you replace the year with the current year and “” with your domain name.

Now you should add the links to other pages on your website, usually the contact us, about us, privacy policy pages and so on.

You will see two parts in the blue highlighted text, the 1st part is the “text text” between “>” and “</a>” this should be the name of the page you want to add to the footer. For example if I to add a contact us page I would replace “text text” with “Contact Us”

The 2nd part is the http://, you should replace that with the link to your page, so using the same Contact Us example I mentioned just above, I would replace http:// with “” which basically is the location of my contact us page on my website.

You can notice that there are 5 blue highlighted text and that’s because this landing page template came with 5 links in the footer.

So if you want to remove few links from footer then you should remove everything between “<li class=”page_item page item-”>” and its next “</li>” that should remove the “<a href” in between.

However if you want to add another link in the footer, then you should add right after the “</a></li>” the following:

“<li class="page_item page-item-500"><a target="_blank" href="http://">text text </a></li>”

Obviously replacing http:// with the page location url on your website, and “text text” with the page name and “page-item-500” with “page-item-“ then random number not 500.


Step 10: Finalize and Upload your Landing Page

Now that you finished designing and customizing your landing page, it is time to save and upload your designs to your website.

Save your notepad file, and then close it.

Code Preview

Now you need to upload both the “index.htm” file you just finished editing and the “template_files” folder you download with the landing page theme

Folder Preview

It is important that you keep this folder and file in the same location when you upload them to your website.

That’s it, you just designed your professional landing page and uploaded it to your website.

Or instead of all these, you can use Web Designer Affset software we included in our affiliate marketing course “Affset”

No comments yet.

Leave a Reply

Powered by WordPress. Designed by Woo Themes