How To Build Landing Pages

You never get a first impression back, so how are you welcoming new visitors to your site?

Landing pages are a great way to ensure you make the right first impression as you can purpose-build them for a singular goal and audience. The best landing pages are concise and help to direct your customers to take a clear action. For example, they are great for encouraging sign-ups to an email newsletter, releasing a new product or promoting a special offer that you are running.  

If you are trying to promote online or elsewhere, providing a link that sends visitors to your homepage might not achieve the best results for you and could be confusing for them, as visitors then have to try to find the relevant information on your site themselves.

By creating a specific page for your purpose and linking to this instead, you are providing your visitors with a complete resource of information on what you are promoting and a clear call-to-action.

Building a Landing Page

When building your landing page, it’s important to keep your end goal in mind. What do you want to achieve? Figure out what this is, and then focus all the content on that page around getting your visitor to take this action.

It has been found that longer landing pages can generate up to 220% more leads than pages that only have above-the-fold content (but you should test what works for you).

So where is best to put the call-to-action if you are building a long page?

There will be two types of visitors to your landing page. Those that know of you and those that don’t. Your initial call-to-action should be the first thing people see when they land on your page. This enables those that know of you to take the action straight away.

Build your page of content underneath this and include all the reasons someone should click through to what you are offering. This is your chance to sell your brand, service or products.

At the very end of your landing page, repeat the call-to-action. This is so that your visitors don’t then have to scroll right back up to the top of the page.

Examples

We’ve put together some examples of landing pages you can design with the Create Website Builder. You can use these designs to inspire your own landing pages and we've included the steps for how to make these so you can achieve a similar look using your own content. If you are wondering where to find great pictures for your pages, check out these free stock image websites.

Before you get started with our example pages, why not watch our latest video on how to build your website with Content Blocks to see how you can easily put your landing page together:

Example 1 - Email Signup Landing Page

This landing page was set up as a way to get people to sign up to a weekly newsletter. Email is a great way to engage with people personally and is actually one of the highest converting methods of marketing.

The page has been designed to entice the visitor to sign up for the newsletter by using beautiful holiday pictures. This is specifically targeted at people looking for unusual destinations that they can visit on a budget. Equally importantly, it lets people know what they can expect when signing up to the email list and reassures them that signing up is risk-free for them.

As well as being up front and sharing some stunning pictures, testimonials are a great way to encourage visitors to take action. If they can see other people enjoy receiving your newsletter, then they figure that they might too.  

Here are the steps to put this page together:

• Custom & Text Block (choose this from Custom in the Add Block drop down)

• The email entry was built using a custom form (read our guide on how to do this) This can now be added to the placeholder within the block.

• The Background was added via Block Settings (right-hand menu) and choosing the Background tab. Click “Select Image” and then either upload or choose your picture. Opacity in the Background tab was set just below halfway to make the text stand out.

• Full-Width Card & Two Images Block (choose this from Full-Width in the Add Block drop down)

• Block Heading and Text switched on (Choose in Block settings on right-hand menu under Elements tab)

• A 4:3 Aspect Ratio was applied to the images in this block. This can be done when hovering over the image you want to select from your gallery and clicking the icon in the bottom right of the image.

• Full-Width Four Images & Overlay Text Block (choose this from Full-Width in the Add Block drop down)

• All text and button options switch off (Choose in Block settings on right-hand menu under Elements tab)

• Testimonials Block (choose this from People in the Add Block drop down)

• Custom and Text Block (choose this from Custom in the Add Block drop down)

• Block Heading switched on (Choose in Block settings on right-hand menu under Elements tab)

• Re-used the custom contact form the same way as before.
  
  

Example 2 - Special Offer Landing Page

Creating a special offer page is perfect for encouraging people to try out your product or service. If they buy from you once and have a great experience, there’s every chance they’ll come back and buy from you again!

In this instance, this Landing Page is offering 20% off an initial painting workshop. This would give them a taste of what the course is like. If they enjoyed the course and want to carry on, then they will inevitably return to the website and book in for follow up sessions at full price.

The page shows what you can achieve when taking part in the workshop, by sharing some of the work of previous students. It also offers some information as to why you should consider completing a course.

• Hero Card Block (choose this from Featured Headings in the Add Block drop down)

• Block Colours in Block Settings (right-hand menu) was set to “Default - Alternative Background Colour” This lightens the background image when the opacity is changed rather than darkening it.

• Background image added (Also in Block Settings under Background tab)

• Opacity, also under the Background tab, was set to just below halfway so the text stands out against the background image

• Image and Card Floated Block (choose this from Images in the Add Block drop down)

• Block Colours (found in Block Settings, right-hand menu) was set to Contrast in this block. Giving a black background in this instance.

• Headline (Large) Block  (choose this from Headings in the Add Block drop down)

• Three Image & Overlay Text Block in Full-Width (x2) (choose these from Full-Width in the Add Block drop down)

• All Text and Buttons removed (Choose in Block settings on right-hand menu under Elements tab)

• Image and Card Floated Block (choose this from Images in the Add Block drop down)

• Rather than before, Block Colours (Choose in Block settings on right-hand menu) are set to Default - Alternative Background Colour, giving the greyish background rather than the black background.

• Button was switched on (Choose in Block settings on right-hand menu under Elements tab)
  
  

Examples 3 - Christmas Range Landing Page

If you’ve got a new range of products, you have a fantastic opportunity to draw people into your website. It gives you the chance to update people on what’s new in your shop and remind them of all the reasons why they should buy from you.

If you have a new Christmas section on your website, a landing page like this would be perfect for sharing on social media. This page goes through some of the unique selling points that the business offers in general, features customer reviews and links to the different sections that a visitor might be interested in. The page acts as a signpost directing people to where they would like to go next.

• Hero Card Block (choose this from Featured Headings in the Add Block drop down)

• The positioning of the card is selected as a variant when you click this block.

• Block Colours in Block Settings (right-hand menu) was set to Default - Alternative Background Colour.

• The background image was applied in Block Settings (right-hand menu) under the Background tab. Opacity was set to just over halfway.

• Block Padding reduced in Block Settings (right-hand menu) to make it look more like a banner.

• Image & Features Block in Images (choose this from Images in the Add Block drop down)

• A square Aspect Ratio was applied to the image by hovering over the image and selecting “Aspect Ratio” from the pop-up menu.

• The Icons can be changed by hovering over them and selecting “Icon Settings” from the pop-up menu. You can then choose from our library of options.

• Testimonials Block (choose this from People in the Add Block drop down)

• Block Title added (Choose in Block settings on right-hand menu under Elements tab)

• Card Items with Left Content Block (choose this from Collections in the Add Block drop down)

• Item Text and Item Button switched off (Choose in Block settings on right-hand menu under Elements tab)

• The pictures and titles should have links applied to them. This can be done from the pop-up menu that appears when you hover over each item.

• A 3:2 Aspect Ratio was applied to each image. Also done from the pop-up menu.

• Hero Card Block in Featured Headings (choose this from Featured Headings in the Add Block drop down)

• Done in the same way as before, except a right-aligned card was chosen as a variant instead.
  
  

In Summary:

1. Have One, Clear, Call-To-Action

Keep your landing page focused on your goal. This means you can focus all your content around this one purpose and measure your success in relation to this objective.

2. Use Visually Engaging Content

This is your chance to give a great first impression. Make sure to use pictures and videos where you can to grab the interest of your new visitors and keep them on the page.

3. Showcase Your Testimonials

Social proof is a great way to build trust with your new visitors. If they can see that other people have tried your product or service and loved it, there’s every chance they will too.

4. Include Your Call-To-Action Twice

Once at the top for those that want to sign-up or enter your site straight away, and once at the bottom for those who have read through your page, ensuring they don’t then have to scroll back to the top.

5. Keep It Simple

Try to keep the information as concise as possible while also conveying the best bits of your product or service. Once they have completed your call-to-action, you then have permission to elaborate.

Before you start...

You may be brimming with ideas by this point, but don’t rush into it just yet!

It’s important to track how your landing pages are performing. If you haven’t yet set-up Google Analytics, it’s a good idea to familiarise yourself with the platform and add it to your website. By monitoring how your page is performing, you can then start to make changes and determine how they affect your conversions.

 

---

Now that you're driving traffic to your website through optimised landing pages, how confident are you that your home page is doing all it can to convert visitors into customers? Read our tips on how to build an effective home page to find out how to optimise one of the most popular pages on your website.