Learning HTML and CSS so you can build your own landing pages is pretty important if you want to make serious money with affiliate marketing. I know a lot of affiliates that simply direct link everything and although they may be successful at it now, the industry is constantly changing and traffic sources are getting more and more strict on what they’ll approve and what is not allowed. Direct linking is one of the things that is getting more and more difficult to get approved. For example, Facebook has stopped approving PeerFly direct links, unless you know a way around it. Once you have a pretty good grasp of HTML and CSS, there are a lot of different tutorials and scripts online that can help you improve your landing pages, but something I found about a year ago that I’ve been using on all of my projects that has helped me immensely is a framework called Bootstrap.
What is Bootstrap?
Bootstrap is a framework built using HTML, CSS, and Javascript that makes it easier for you to structure and design web pages. Basically, it’s a stylesheet that has most of the work already done for you. All you have to do is link to the stylesheet and you can take advantage of it’s awesome grid system, responsive design, HTML components, and cross browser capabilities. Not only that, but it’s built by Twitter and has a large community of developers behind it so it will only continue to get better!
Basic Bootstrap Theme
If you’ve taken a look through all the components Bootstrap has to offer you are probably ready to give it a test run. You can download the latest version of Bootstrap from GitHub or use the new BootstrapCDN. I’m now using the CDN primarily, but you are welcome to download the Bootstrap files from GitHub so you can take a look through them. In my example I am going to be linking to the CDN.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <meta name="description" content="" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- css --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" /> </head> <body> <div class="container"> </div> </body> </html> |
This is your basic html page, but it links to the BootstrapCDN and has a div class of container. All of our code will be wrapped within this container and Bootstrap will use that to make the theme responsive, so it will work in all browser sizes (shown below).
Bootstrap Grid and Buttons
The Bootstrap grid is one of the main reasons I use it. The grid allows you to structure elements within your container by simple creating rows and then spanning elements within those rows. In my example code below, I’ve created one row (under the hero unit) that has 3 divs within that row. Bootstrap uses a 12 column grid system so as long as your row spans 12 columns everything will come out just the way you want it. I have created 3 columns that are evenly spaced so each spans 4 grid columns (which is shown in the code below).
The other big selling point for Bootstrap is it’s awesome buttons. There are 7 different buttons classes available and each can be created in 3 different sizes. These buttons make it really easy to setup an awesome call to action button and you can test the different classes to see which one gets the best click through rate for your campaign. I’ve found that the orange button (btn-warning) has worked best for me so far.
Pro Tip: If you’re looking to test a bunch of great looking call to action buttons check out the CSS3 button generator at css3button.net.
The Hero Unit
Bootstrap was built with marketers in mind. Nothing proves that more than one of the awesome components they included, the hero unit.
The hero unit is a large attention grabbing component you can easily add to your Bootstrap page by including a div with the class hero-unit. I’ve included one in my example below with a big headline, some text, and a big call to action button. This is also a great place to include an image (or you could change the hero-unit background image) and some bullet points.
Responsive Design
Responsive design is something that a lot of affiliate marketers miss when creating their landing pages. It’s important your landing page looks good on any screen resolution or you will miss out on conversions. If your call to action button is not visible it is unlikely that person will convert for you. Here are two screenshots of my Bootstrap demo at two different screen resolutions:
1280×800
800×600
As you can see, the design is setup to respond to the resolution size and in both cases everything looks good and my call to action is visible.
Demo Code
Here is the HTML code for the example from above:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Landing Page Demo</title>
<meta name="description" content="" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" />
<style>
body {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>Big Headline!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<a class="btn btn-large btn-primary">Get Exclusive Access!</a>
<a class="btn btn-large">Learn More</a>
</p>
</div>
<div class="row">
<div class="span4">
<h3>Selling Point 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<a class="btn">Learn More</a>
</p>
</div>
<div class="span4">
<h3>Selling Point 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<a class="btn">Learn More</a>
</p>
</div>
<div class="span4">
<h3>Selling Point 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<a class="btn">Learn More</a>
</p>
</div>
</div>
</div>
</body>
</html>
|
Feel free to use and modify this code as you please. As you start working with Bootstrap you will find more and more components that you can use within your landing pages. Recently, I added the progress bar to one of my campaigns and it started performing much better. There is also a nice set of Javascript components you can add to increase the functionality of your landing page. Again, test these things to see what helps improve your click through rate and overall conversion rate.
Being able to pre-sell an affiliate offer can really help improve the performance of your campaign and if you have the right tools, creating a good looking landing page to pre-sell can easily be done. Bootstrap is a great resource for any affiliate marketer looking to take their campaigns to the next level. Please let me know if you have any questions. I have created hundreds of pages using Bootstrap and I’ve spent many late nights trying to figure it all out, so I can definitely help. Let’s get some campaigns up and make some money!
I use Bootstrap for all of my new projects. It’s extremely versatile, easy to use and learn and has a full set of documentation that is so simple. I have 2 projects ongoing right now that use it and it looks great!
Thanks for the lovely post,My mental block is creation of landing pages like lot of affiliate’s,Looks like have to go through bit of learning curve.
Hi Luke,
thanks again for a great insights shared with us. This looks extremely helpful and I will try to utilize it when creating my next landing page.
Robert
I “discovered” Twitter Bootstrap a few months ago and have used it for a few work-projects to build more business-oriented web-apps (it’s awesome for admin-related backends). Never really thought about doing regular websites but you’re right, they’re perfect for landing pages! (I have a thing about the oh-too common IM landing pages that all seem to be based on the same lousy template)
HI:
Was just going to try AffPortal, and use their landing page maker. What wrong with that if what my main problem is getting landing pages up fast with even dynamic KW insertion?
Yes, I think it would be good to learn my css and html better, but this AffPortal has tools I think I should be using to get into PPV, which sounds like a more responsive traffic source by the sounds of it.
Luke also likes Search7, and I guess I wouldn’t need the AffPortal if I was going to just do 7Search and use this “Bootstrap” to build my landing pages.
Then again, If I need the landers up fast, this Affportal has this new landing page maker that looks like it really rocks!
If you haven’t heard Luke talking about AffPortal, see what I’m talking about. Click below.
http://freetrialit.com/AffPortal
Fair enough, but with building your own and not using a generator, you have full control. Sure, it might take a little longer, but with a little programming skill you can do everything and more that you mentioned. Since you put up such a good argument, I’ll allow the affiliate link in your comment ;) :)
Thanks Luke for Bootstrap components
Hi Luke, one question, It is necessary to know HTML in order to use Bootstrap?
Do you know any free tool which I can use to create landing pages fast without knoledge of HTML?
Thanks.
Hi Luke, thanks so much for the info. Did you test how a bootstrap lp can appear on a smartphone?
The design is responsive so it’ll look okay, but I still suggest creating a mobile optimized landing page using jQuery Mobile.
Thanks Luke for Bootstrap components
Awesome material Luke,
What about Optimize Press for landing pages??
I’ve checked it out. It seems to be pretty dynamic. I prefer to create from scratch, but if you want to use WordPress that seems pretty good.
Im a Newbie and i Just got accepted into a CPA network and i have been reading some stuff on Luke’s blog and i have the following questions.
1. Do i need to buy a domain name and hosting for the Landing page
2. Whats the idea of VPS? And what is it used for?
Thanks
Yes, you would need a domain and hosting for landing pages. I recommend HostGator (use coupon lukepeerfly for 25% off). A VPS is a “virtual private server”, which is just a more powerful hosting solution. HostGator offers both VPS and shared hosting.