How to Create an Effective Landing Page

44 minutes

Key points you can
learn in this lesson.

Building an Effective Landing Page

Understand the elements required to build a high converting landing page.

Adding UVPs on Your Landing Page

Learn how to incorporate your unique value proposition in the landing page experience. 

Mastering the Building Process

Obtain working knowledge of how to build a landing page from template to launch.

Our key metrics increased. More importantly, we implemented a lot of new tactics and test scenarios, which will boost our company’s future prospects.

Dave McCue
Digital Marketing Manager at Allstate

Lesson Preview

In this lesson, we’ll be walking through how to create an effective landing page for your advertising campaigns. We’ll also be sharing with you the importance of landing pages and how they can increase campaign performance metrics. 

What is an effective landing page?

A landing page is a single web page where a visitor lands after they have clicked on your ad. An effective landing page is one that turns users into customers and/or leads. These pages can be broken down into core elements that can be A/B tested with the goal of improving performance. 

Here are the core page elements we will be focusing on in this lesson:

  1. Headline
  2. Subheadline
  3. Call-to-Action
  4. Social Proof
  5. Mission Statement/Core Value
  6. Key Benefits 
  7. Imagery
  8. Colors 

Why is this important?

Creating an effective landing page is a key aspect of your campaigns. This is the piece of your campaign that the user engages with the most and forms their opinion about your brand as well as your products and/or services. 

What you’ll need:

The Process:

Step 1: Start Unbounce Free Trial

1. Enter https://www.unbounce.com into your web browser.

2. Navigate to the “Start My Free Trial” button in the top right corner.

3. Select “Start My 14-Day Free Trial” on the plan that best fits your marketing needs.

4. Now it is time to signup for your Unbounce account. You can signup via an existing Google account or create an account via personal information or email. 

5. Next up is billing information. You will need to link either a Paypal account or a credit card to your Unbounce account. Don’t worry, you will only be charged if you decide to continue with the product after your free 14-days. 

6. The next step is your email confirmation. You will need to navigate to the inbox of the email you used to signup and open up the message from Unbounce to confirm your account.

7. Sign in to your account using your email and the password you created in the signup process. You may also sign in using your Google account if you chose that option. 

8. Now that you are in your free account, Unbounce will ask a few questions to make sure you get the best experience on the platform. 

9. Welcome to your Unbounce account! We highly recommend watching the short overview video so that you can get an introduction to the functionality of the platform.

Step 2: Choose Your Landing Page Template

Now it is time to create your landing page. In this lesson, we will be using an Unbounce template to create your page. 

Note: Unbounce also has a world-class support team. You should expect a call from them soon after signing up. We highly recommend taking advantage of their time and using their support to solve a couple of the technical steps in creating your landing page. The main area you may need help with is connecting your Unbounce pages to your domain. This can be achieved by using their native WordPress integration or connecting a subdomain within your hosting settings. 

Here is where you should go if you get stuck and/or have questions:

1. To access the Unbounce page templates, start by clicking “Create New.”

2. In order to get a feel for the platform, feel free to spend some time within the Training Template. We will not be using this as the template for your advertising campaign. 

3. For your campaign landing page, we will be using the “Getting Started – Clickthrough” template. Click on this template in the template menu and then click “Start with this template” to launch the page builder. 

4. Here is what you should see once you enter the Unbounce builder. Feel free to scroll up and down the page to get a feel for the information you will be including. 

Step 3: Build Your Effective Landing Page

To kick off the page build, we will be removing all of the Unbounce directions on the page. These speech bubbles will be getting in the way as we design our page. 

To do this, click within the white speech bubbles and hit your delete key. You can get rid of the first camera icon as well. 

Note: There are additional direction speech bubbles that need to be deleted further down the page.

Once you are done, your template page should look nice and clean.

You can ignore the mobile notification on the bottom left. We will focus on that later on in the lesson.

1. The first personal element we will be adding to the page is your logo.

  • The first step we want to take is to make room for the logo. 
    • Unbounce gives you the ability to move multiple elements at the same time. To do this, hold down your shift key and click on the main menu items
      • Hold shift > click “Mission” > click “Key Benefits” > click “Clients” > release shift

    • Now that you have everything selected, simply click and within the dashed lines, hold your click down and drag the elements over to the right.
    • Here is what your new menu position should look like: 

  • To add your logo, double click the circle image at the top left of your page. 

  • After you double click, you will be brought directly to your image library. Your personal image library should be empty at this point. To add your logo, click on “Upload New Images” at the bottom left. 
    • Make sure you have your logo saved within a folder on your computer prior to clicking “Upload New Image.”

  • Once you open your logo image, you will see it within your image library. Make sure the logo image is selected and then hit “Choose” in the bottom right. 

  •  You will now see an option to scale your image to fit. We recommend selecting “Don’t Scale.” If you choose to scale your image to fit, Unbounce will then crop your logo so that it fits in the same space as the circle image that once held it’s place. 

  • What you see after selecting the “Don’t Scale” all depends on the file size of your logo image. 
    • For Directive, our file size was too large. Fortunately, you can easily adjust the logo image size by clicking on it and dragging it inwards from the bottom right corner. 

    • Here is what your logo should look like once you are done resizing. 

  • And there you have it! You added your first custom element to your landing page.

The next element we will be customizing is our headline. This is the first bold line you see at the top of your page. 

  • In search engine marketing, the user is often moving from page to page fairly quickly. The headline of your page will allow the user to quickly understand what your product and/or solution is and decide if it is worth exploring. We recommend writing a headline that clearly states what you are offering. 
  • Here is the text that you will be editing in this step. 

  • You will be referring to your campaign strategy spreadsheet when writing copy for your landing page (link here). Your headline should clearly represent your campaign name. 
  • To edit the text, double click on the placeholder text. Once you can edit the text, highlight it all.

  • Now you can type out your own headline.
  • For Directive, our headline is representing our PPC service deliverable. With our target market being B2B and enterprise brands, we wanted to make sure our text aligned with our target audience. 
  • Here is the headline we landed on, “PPC Management for B2B & Enterprise Brands.” 

  • As you can see, our headline length does not work with the current formatting settings. To fix this, click on the headline text box and open up the text formatting settings. 
    • You can adjust font size using the settings on the right.
  • You can adjust the size of the text box by dragging the side to the left and right.
  • We decided to reduce the font size to 72, widen the text box so that our text was reduced to two lines, and center the text box.

3. Once you have decided on a headline, it is time to give the user more context via a subheadline. 

  • As explained by the placeholder text, this is where you can give more detail about your product or service and introduce your offer/promotion/goal (your call-to-action). 
    • You can reference your unique value props within your campaign strategy to inspire a more descriptive explanation of your product or service (link here).
  • The process of changing this text is the same as the headline. First, double click the placeholder text and highlight all of it. Once this is done, you can start typing out your subhead. 

  • For Directive, we wrote a subhead that mentions our most important unique value prop, more time on your account. We then blended this UVP messaging into our proposal offer. 
    • We adjusted the width of our subhead text box so that it fit the wide headline. 

4. Before moving on to the next section, we want to add a new element to this template. With us bringing up our call-to-action within the subhead, we think it would be best to add a call to action button directly under the subheadline. 

  • To add a new feature to the page, we will be using the page element modules on the left of the landing page builder.
  • Navigate to the button element, hold down click on the icon, and drag a new button below your subhead. When you release your click, you should see a new button on your page.  
  • Here is what the new button looks like after dragging and dropping it onto your page.   
    • We will be editing the formatting of your buttons later on in this lesson. In the meantime, we can modify the text on each call-to-action button. Navigate back to your campaign strategy sheet to find your call-to-action text (link here).
    • To edit button text, click on the button you would like to edit and change the text within the formatting’s tools on the right of the landing page builder. 
    • You can make this change to the rest of the buttons on your page. There are additional call to action buttons located at the top right of the page as well as the bottom of the page. 
    • Here is what the first section of our landing page looks like after making the call-to-action text changes. 
    • Now it is time to move on to the social proof section of your landing page!

5. In this next section, we will be adding our social proof to the landing page. No matter what we say on our page, the user will only believe us if they see support from third parties. 

  • Here are a few different forms of social proof.
    • List of clients
    • List of awards
    • Star rating from third-party review platforms (Yelp, Capterra, Trip Advisor, etc)
    • Customer reviews
    • Customer social posts about your product or service
  • Your social proof will be placed in the second section of the landing page template.
  • To get started on the social proof section, you will be editing the intro text. This text will give context to the information below. This is especially important if you plan on only using logos, award badges or review badges. 
  • For Directive, we are using this text to make sure the user knows that the logos below represent the companies that grow through our PPC service. 
    • You now have some experience editing text on the page. As a quick reminder, double click, highlight, and type your personal text. 
    • We went with, “Companies that grow with our PPC management.”

  • Now it is time to edit the placeholder logos on the page. You can change these out for reviews, awards, testimonials, etc. 
    • If you would like to change these out for text, we recommend clicking on each logo box and deleting it from the page. Once deleted, you can drag and drop a text element from the menu on the left of the page builder. 
  • For Directive, we are going to be swapping out the placeholder logos with our client logos. This process will be identical to the logo implementation at the beginning of this lesson. 
  • To start, double click on the first placeholder logo. 

Related lessons.

Get full access to all lessons
today for only $39/mo.