How to Make a Landing Page For Your Website

Home >> Web Design

A landing page is a web page where the goal is to either sell a product or capture some kind of information from the visitor like an email address. They are normally fairly concise with a call to action at the end.

There are many ways to create these kinds of pages, so I'm going to show you how to make one if you have a static, HTML website or use WordPress.

For HTML Websites

Download a very simple HTML landing page I created. To edit the file you will need to open the landingPage.html file with Notepad or an HTML editor.

Please note that you will not be able to view the landingPage.html file properly until you extract it from the ZIP folder. So drag the internal folder called landingPage onto your Desktop and then open the folder to view the files.

Here is what the file looks like...

Customizing The Page

After you've extracted the folder, open the landingPage.html file by right-clicking it and "Open With" Notepad or a plain text editor.

At the top of the page you will see the CSS code that you can adjust to change the look of the page.

You can change the color, width, font size, font family, etc. of the web page by editing the CSS located in the HTML code.

Below I've shown how you can modify the color of the links by adjusing the a:link value to a color (red, blue, etc.) or hex color value. And you can change the width of the landing page by changing the width of the container as illustrated below. Super easy!

There's even a placeholder for inserting your own logo if you wish.

I've also created some Buy Now/Sign Up buttons you can use and I've provided the PSD files for the images if you want to edit them in Photoshop. There's a blank button if you want to add your own custom text. (Need a graphics program? GIMP is free.)

Now save the page and upload it to your web host.

For WordPress Users

If you have a WordPress website, you can actually use the same template and editing instructions above, then upload it to your site. Here's a tutorial for uploading files manually through WordPress.

However, there are a couple of easier ways to create a landing page.

1. Use a Page Template

As you probably know, with WordPress you can create two kinds of content: a Post or a Page.

Depending on your theme, you may actually have different Page templates. For example, the Genesis WordPress theme has several different ones you can choose from.

To find out if you have more template options with your theme, create a brand new Page from the admin panel.

Look over on the right side below the Publish button. You should see a drop-down with various templates.

Notice this particular theme (Genesis) has a Landing Page template built in. So all you have to do is choose that template and you will have a cleaner template that can serve as a landing page.

2. Use Premise

Another option is to use Premise. This WordPress plugin will give you much more control over the design of the page and you can save different versions of the page for other projects.

When you install it, WordPress adds a tab right from the admin panel so you can manage and access all your landing pages with ease.

You can create a completely blank page if you'd like and adding other elements like your logo, email subscription form and other widgets is pretty easy.

Notice the button bar circled above. You can add email opt-in forms (AWeber), notices, buttons, images and sample copy with the click of a button. No need to fiddle with any HTML code.

You can see how I use Premise here.

Landing Page Design Tips

Landing pages are created to convert as quickly as possible, so here are some tips to keep in mind as you create them.

1. Use Light/White Backgrounds

White backgrounds are clean, crisp and easy to read when used with dark text.

2. Break Up Paragraphs

Your paragraphs should not be more than 4 lines long. Remember, most people do not read every single line. They scan. Make them short so it's easier for your visitors eyes to scan.

Notice how this page uses very short paragraphs. Imagine if this was written in 20-line paragraphs with no breaks. It would be a nightmare to read.

Also make use of bullets and sub titles as often as you can. They also help break up lots of text.

3. Use Images to Add Color and Improve Readability

Add images between paragraphs to break up the text even more.

4. Use Large, Simple Fonts

Small text is hard to read, and small text with fancy fonts is even worse. Keep it simple. Try not to use fonts any smaller than 14px except for dislaimer text or the terms and conditions. I prefer to use 16px for the body.

5. Keep The Content Area Between 500 and 850 Pixels

Content that takes up the entire width of the screen is harder to scan. Keep the width of the content container small, and it will improve readability.

If you liked this, please share. Thanks!