The right Landing Page will transform your sales/conversions, I’m going to take you through step-by-step and show you exactly how to create your own Ultimate Landing Page.
I recently covered how Good Landing Pages = More Sales and also 5 Essential Landing Page Elements. Both proved popular and I’ve had a number of emails asking questions so I decided to dive in a little deeper on the subject.
I’ll break this down into a number of parts and take you through step-by-step how you can create your own ultimate landing page for you business by testing what works, and what works even better.
If you’re looking for more info first on what a landing page is and why you should care, click over to the links above first.
I’ll take you step-by-step though the layout, colours, headlines, buttons, opt-in forms, images and testing so that we can together help you find your own ultimate Landing Page. Some things work great for everyone, others will work for you and not others, the key will be testing. Many people think of testing things as a chore and the boring bit that takes time and patience. Testing landing pages can actually be the most exciting part though, especially when you find one single element makes the difference between 50 sales or 150 sales for example.
I’m assuming you already have a product or service, logo etc and you’re ready to sell/promote. The landing page is simply the tool which will help convert more customers for you. Think about what your landing page is trying to do, make a sale, get a registration for an event, get an email address… what’s your conversion goal? Keep it simple, one goal, one page, one thing you want your visitor to that page to do, the more options you give someone the less success you’re going to have.
Stage 1 – The starting layout
This could easily start off in a number of different formats but there are some key elements that you will want to begin with. A Landing Page acts much like a normal Web Page in terms of a header area, content and footer but the key difference is you are homing in on one specific goal and dedicating every element of that page to your conversion of that goal.
Here is my starting point, a two-column layout which covers all my basic page areas. Just to stress again that this is not THE ULTIMATE starting layout, it is a GOOD starting point that you can develop to find THE ULTIMATE for your business.
Here is my own summary of those key page areas above. I’ll be diving into more detail on all these areas one at a time but for now this gives you an overview.
[A] Page Dimension and Backgrounds
This refers to the size of your page content and the background colours. Although screen resolutions and the screens themselves are getting better all the time it’s better to start with a size which fits the content best. Rather than spreading everything out over a 1000 pixel wide layout start with something more compact like 800 pixels wide. The longer it takes someone to scan across a page the more time it takes them to digest your content. This will, on most screens, leave a background behind the content. So for now this leaves two options, a colour for your content background (Above in white) and a colour for your page background (Above in grey). You will want the page background to compliment the content background so it lifts the content off the page. A good place to start is white on light grey.
[B] Header
The first of the 3 H’s. As with a traditional Web page your header should be functional, look professional but also be discreet. It’s purpose in this case is simply to assure the user they are on the right page (Your logo/Contact Details) and back-up your message possibly with discreet images.
[C] Headline
Absolutely crucial, but the beauty of this is I’ll show you how you can test different versions until you get it just right. Think of a Newspaper, it has hundreds of stories but you’re more often drawn in by the headline. A powerful headline will keep your users interested and lead them to your hooks.
[D] Hooks
This area completes the 3 H’s – Header, Headline and Hooks. These three will make a huge difference in whether you get the user to your goal. The hooks should start developing your headline. Your absolute best selling points and benefits of what’s on offer. Short bullets and then possibly develop those with a slightly longer couple of sentences.
[E] Action
This should be high on the page (Often referred to as above the fold). In this example I’m assuming that the Goal is to get someone to sign up with their name and email address. This area may move around slightly depending on what your goal is but for now this is a good starting place nestled right below you powerful headline and naturally across from your Hooks.
[F] Proof
By this point in the page someone has already by-passed your Action. They may have read your Headline and possibly some or all of your Hooks and their looking for more assurance. Give this to them with accurate and natural proof elements. Put real testimonials here from people who have had success with your product or service. By using images and video this can be made far more genuine to the user and push them back up to your action.
[G] Bounce
I call this the bounce area, again this area can take on a number of forms but it’s sole aim is to “bounce” someone back up the page to your Action. This could be a statement that uses scarcity for example “This offer ends Midnight Thursday – enter your details above to guarantee your copy NOW”.
[H] Footer
Like the header it’s an area common on any page. A great place on your landing page to add some more reassurance with best practise logos, awards and promises.
So there we have our key areas to kick-off our ultimate landing page. In Part 2 we’ll get stuck into each of these areas and actually start building a real landing page with examples. Stay tuned by visiting my facebook page and hitting “Like” or sign up for email alerts on the right sidebar above. Don’t forget to leave comments below!



Perfect timeing – sent through to this page by Dean Hunt and just lookiong at revamping one of my e-commerce pages so will have a little more think about the layout with regards to the above… and will also have more of a read through your site. Cheers.
PS – does this layout help with SEO and the likes of Google reading it? (Or do I need to go elsewhere?)
Hi Gareth, great timing then! stay tuned I’ll be updating with Part 2 tomorrow.
I’ll be covering SEO and page relevancy in here as well (Relevancy is also important if you’re sending paid traffic like Adwords to the page). You definitely want to address this with your content but also your coding structure. I’ll be giving you tips on how best to tackle this.