Avatar
Nick Schäferhoff
Editor in Chief
. No Comments

How to Create a Landing Page Using Unbounce

With over 100 professional templates and a really simple drag and drop editor, Unbounce can be used by anyone to create professional landing pages to increase website conversions.

Companies that raised their number of landing pages from 10 to 15 see on average, a 55% increase in leads according to Hubspot – so the more the merrier, we say!

This step-by-step tutorial walks you through the basics of creating a landing page using Unbounce, from building an account to adding the finished landing page to your WordPress website.

So without further ado, let’s get you on the way creating your very own landing pages.

P.S. You can compare top landing page builders here.

Sign Up With Unbounce

Unbounce has a two-week free trial, so you can sign up and have a play with the drag and drop editor to create some landing pages, and cancel within 14 days with no charge if you do decide it isn’t for you.

Go to Unbounce and click Start My Free Trial.

Start free trial edit

This page will display different packages Unbounce has to offer. If you’re just getting started in the world of landing pages, the Essential plan might be the one for you while you’re giving it a try, but if you already have plans for a larger number of landing pages, then you might feel that the premium plan is more appropriate.

You will not be billed until after your trial, and Unbounce will send you an email when you’re nearing the end of the trial if you do wish to cancel.

Click on Start My Free 14-Day Free Trial below the plan you choose.

Choose a package

Fill in your details to create your account (or select Sign up with Google if using your Google account), choose whether you would like to be billed monthly or annually from the dropdown menu, check the box to agree with the terms of service and privacy policy and click Sign Up With Email.

Fill in your details

You will then be prompted to fill in your billing details, before being taken to a page telling you to check your inbox to click the link in your confirmation email.

Upon clicking the link in the email, you’ll be prompted to sign in to your account once more using the details you specified earlier. Once you’re logged in, Unbounce asks you a few questions to gauge how you will be using their service, to make your experience as relevant as possible. Answer these using the drop-down options based on what you’re looking to achieve, and click Get Started With Unbounce.

Answer questions

Create a Landing Page Using Unbounce’s Drag And Drop Editor

Once you’ve signed in, you will be taken straight to the page builder with a demo video signposting you to the basics.

1. Getting Started

When you’re ready to create your landing page, click on Create New in the top right corner of the page builder.

Create New

You can either build a page from scratch using the ‘Start With a Blank Page’ option, or you can choose from the 100+ professional templates already available on Unbounce.

There’s even a training template if you’d like to create a dummy page and have a bit of a play with the page builder first.

If you’re ready to jump in and start creating your landing pages, then make sure you’re sitting comfortably and we’ll work through the process together.

2. How to Choose a Template

With so many options available, it might feel a bit daunting as to which template to choose, but you can easily narrow them down by answering one question:

What are you trying to achieve?

Maybe you’re looking to increase your newsletter sign-ups, selling an e-book, or want people to sign up for a webinar you’re hosting. You can use the ‘Filter’ drop-down to view templates that have been created to achieve conversions according to a specific goal.

Once you’ve selected your goal in the drop-down, all relevant template thumbnails will appear. By clicking on each one in turn you can preview what they look like on the right-hand side of your screen to help you choose.

Template filter drop down

Don’t forget, you can change images, text, and colors to match your branding and design preferences using the page editor in a short while, but the structure of the templates have been specifically created to maximize conversions so they’re a fantastic starting point.

Once you have decided on a template, give your page a name at the bottom of the preview screen and click Start With This Template.

Start with this template

3. Page Builder Basics

There are four main parts to the page builder where you’ll be making and editing all of your pages.

Page builder basics

  1. Widget panel – this is on the left-hand side and is where you can drag and drop text, images, or any other elements you wish to add to your landing pages.
  2. The main window – this is where the magic happens, and you build your landing pages
  3. Toolbar – at the top of the screen, this is where you can save your work as you go, with actions such as save, preview, undo and redo.
  4. Properties Pane – you will find this to the right of your screen, and it is where you can add links, add page metadata, and fine-tune details of page sections such as borders, backgrounds, and widths.

4. How to Edit Template Elements

Images

To swap an image in the template to one of your own:

Click on the image you wish to change in the main window.

In the Properties pane on the right-hand side, click Change Image.

Change image

A window will appear, and you can upload your image by clicking Upload New Images and then navigate to the file you wish to upload.

Once it has uploaded, click Choose and it will appear, instead of the template image.

You can use the properties pane to add alt text and a title for the uploaded image, as well as adjust the size of it until you are happy.

If you don’t have an image to upload but you would like to change it, you can also use an Unbounce public image or an image from Unsplash which are copyright free, professional stock images. Follow steps one and two as above, but in the window that appears choose either Unsplash Images or Unbounce Public Images.

Unsplash images

In both cases, use the search bar to find an image that you like, select the image, and click Choose.

Unsplash images choose

To change the size of an image

Click on the image you wish to adjust in the main window.

In the properties pane, under the ‘Geometry’ heading, you can adjust the size by changing the width and height (W and H) of the image.

resizing images

If the lock between both values is closed, changing one value will change the other automatically to keep the image in proportion. If you wish to change both the height and the width independently of each other, click on the lock and when it is open you will be able to do so.

Adding a link

If you wish to add a link to your image:

Click on the image you wish to be a clickable link.

In the properties pane, under Click Action make sure Go to URL is selected in the drop-down.

Click Action Adding link

Paste the URL you wish the image to link to the URL box.

In the Click Action section of the Properties pane, there are also other options in the drop-down menu. Upon click, you can also display the image in a lightbox, call a number, or send an email.

Adding a border

You can also use the properties pane to add a border to an image.

Select the image you wish to add a border to in the main window.

In the properties pane under Border select the kind of border you wish to surround your image from the drop-down. If you don’t want a border, make sure this is set to ‘none’.

Border drop down

Change the thickness of the border by using the drop-down next to the border type – the higher the number, the thicker the border.

You can change the color by either clicking on the color square and using the color picker to choose, or if you have a specific color in mind, you can type in its value in the box next to it.

Border colour

You can also make the corners of your border rounded, by using the slider to increase the corner radius value. The higher the value, the more rounded the corners.

Border corners

Text

To edit text double click on the text box you wish to change in the main window and select the holder text to delete it and replace it with your own.

You can change the text type – whether it’s paragraph text, or a heading – the font, color, alignment, size, and style as well as adding a link or border by selecting the text you wish to change in the main window of the website, and using the properties pane just as before for editing images.

Text properties pane

Another option for text in the properties pane is editing the background. Using the drop-down under the background section, you can select solid color, gradient, image, pattern, or even upload a video in the same way you upload images.

Text background

Forms

One of the most important elements of your page is the form that landing page visitors will fill out to complete the action aligned with your goal.

Adding form fields

At the top of the Properties pane, click Edit Form Fields.

Edit form fields

You can choose pre-defined fields from the left-hand side of the form design pop-up which are common fields like first name, email, and phone number. Simply click on the field you wish to add, and it will show at the bottom of the list of fields that your form has in the middle of the pop-up box.

Choose a field

You can also add custom fields, by choosing which type of field you would like to add from the left-hand side, clicking, and it will also be added at the bottom of the list of your form fields. Field types include:

  • Text field (single line, or multiple lines)
  • Checkboxes
  • Radio Buttons
  • Drop-down menu
  • Hidden field

Editing form fields

Select which field you would like to edit by clicking on it in the center of the design pop-up and options will appear on the right-hand side to allow you to edit the field labels, add placeholder text, or make it a required field so page visitors MUST fill it out before they can submit the form.

Edit field

In this form of design popup, you can also reorder the fields, either by clicking and dragging them into position or using the arrows on each field to move them up or down.

If you wish to remove a field, you can simply click on the trash can icon next to the arrows to delete it.

Arrows and trash

Once you’re happy with the content of your form click done and using the Properties pane, you can adjust the overall look of the form on your landing page.

Done button

5. Adding Sections to Your Landing Page

Although the templates are great, there may be times when you want to customize them further and add a bit more information, a video, or some pictures to your landing page.

To add a new section, go to the widget panel on the left-hand side of the page builder and click and drag the section icon on to your page. You can drop it at the top, at the bottom, or between any two other page sections.

add section

If you accidentally drop it in the wrong place, you can use the arrows on the toolbar at the top to move it up or down the page.

You can edit the background of your section using the properties pane.

Section background colour

Once you’re happy with how that looks, you can go back to the widget panel and drag and drop page elements on to your newly created section. The elements you can add include:

  • Box
  • Image
  • Button
  • Text
  • Embedded Video

Like this:

Section elements

Getting Your Landing Page Ready to Go Live on Your Website

Once you’re pleased with how your landing page looks, there are just a few more things to do before it’s ready to be added to your website and you can start monitoring your conversions.

Previewing Your Page on Mobile

On the bottom right-hand side of the main editing window, there are two options Desktop and Mobile. As you edit, the templates of Unbound are responsive, which means that they change depending on what screen size a website user is visiting on.

mobile preview

If you’ve been editing the Desktop version, it’s a good idea to preview what your landing page will look like on mobile to make sure all of your website visitors are getting the same great experience. Simply click on Mobile and the view of your page will change in the main screen to be the mobile version.

You can toggle between Desktop and Mobile as much as you like throughout the process of designing your page.

Page Properties

The Page Properties tab is at the top of the Properties pane, and from here you can change the default color of your text and links, as well as add metadata to your page such as the title, keywords you’re looking to target with your page, and a description which will appear in search engines. This is important for Search Engine Optimisation (SEO) if you wish your landing page to be discoverable on sites such as Google.

page properties

However, if for example, you only want your landing page to be viewable by people who click through to it from an ad campaign on Social Media, you have the option under page properties to Hide My Page From Search Engines. You simply have to make sure the box is checked.

hide page from search engines

Adding Your Landing Page to Your WordPress Website

Once you’re satisfied with the design of the page, there are just a few more things to do in the page builder before you can add your landing page to your website.

Unbounce users on paid plans can publish landing pages to their WordPress domain using the simple Unbounce plugin – perfect for users who aren’t confident modifying DNS records.

Add a WordPress Domain to Your Unbounce Account

Although you can design your pages so they look and feel like your website and your users won’t be able to tell the difference, your landing pages are hosted by Unbounce. You need to link your domain to your Unbounce account to be able to publish pages to WordPress.

Make sure you’ve saved all your hard work, and in the top left of the toolbar click on Overview.

Save and Overview

Click on Domains on the left of your screen.

Domains

When the new screen appears, click on Add Your First Domain in the main screen, or Add a Domain in the top right corner.

Add your first domain

In the pop-up box, choose to Add a WordPress Domain and add your WordPress URL in the field of this tab, making sure that it matches your WordPress URL exactly, including capitalization.

Add WordPress domain URL

Click on the Add a WordPress Domain button to complete this process.

Add a WordPress domain

Download the Unbounce WordPress Plugin

Log in to your WordPress account.

Hover your cursor over ‘Plugins’ on the left-hand menu, and click on Installed Plugins.

Click on Add New.

In the plugin search bar, search for ‘Unbounce’, and click the Install button next to the Unbounce Landing Pages plugin.

Once installed, go back to your installed plugins page, find Unbounce Landing Pages, and click on Activate.

Authorize the plugin by clicking the Unbounce Pages Plugin on the left-hand side of WordPress, and then click the Authorise.

Your list of Unbounce pages published to WordPress will appear on your installed plugins screen.

Make Sure Published Unbounce Pages Are Published on WordPress

If your published pages aren’t appearing in WordPress, you may need to change their URLs.

You can do this by:

Logging in to your Unbounce account, clicking Pages on the left of your screen, selecting a page by clicking on it, and clicking the Change URL button. When the pop-up appears, make sure in the dropdown the WordPress URL is selected, instead of Unbounce pages. Click the Change URL button, and your page should now appear on your WordPress plugin page.

And You’ve Reached the Finish Line

Congrats!

Although there is a bit to learn, Unbounce is one of the most intuitive and simple ways to allow anyone to create clean and professional landing pages with easily trackable goals.

Remember that statistic at the beginning about more landing pages leading to an increased rate of conversions? Well now you know what to do, and you’re well on your way to those conversions being yours.

Please leave us a comment if you have any questions, we’re here to help.