You don’t have to build a full website each time you want to run a new campaign or market a product. Instead of recreating the wheel on a new website each time, a landing page is a minimal, single page approach to driving action with the audience. A landing page has a specific, focused action that you’ll ask the visitor to take.
Basically, any freelancer or small business can benefit from building landing pages. Any time that you’ve got a page that you want to send visitors to, a landing page can help inspire action, such as joining a mailing list or buying a product.
In this tutorial, we’re going to learn more about how to build a landing page using Unbounce. I’ll walk you through building your very first Unbounce landing page and styling it for the effect you want. Let’s dive in.
What’s a Landing Page?
The term “Landing page” is fairly broad, so let’s start off by defining what it is. In short, a landing page is simply any page that a visitor can “land on” when they’re browsing the web.
Typically, landing pages are targeted in some way. They’re designed to provide something more specific than just sending your audience to the homepage, for example. In most cases, you’ll build Unbounce landing pages based upon your audience.
Imagine that you’re running a Facebook Ads campaign that’s asking the visitor to sign up with their email address to download an eBook. Customizing an Unbounce landing page to show only these elements helps the audience understand exactly what they were looking for and drives action.
A landing page is really just a targeted web page designed to make the most of the traffic it receives. Even if you aren’t a web developer, you can quickly learn how to create a landing page that can help you capture leads and audience attention. Let’s learn about a tool that’s tailor-made for this purpose.
Unbounce is a tool you can use to build professional landing pages with an easy-to-use editor. You don’t have to know how to use HTML, CSS, or other web technologies to make a landing page with Unbounce.
As freelancers and small business owners, there simply isn’t enough time to master all skills. If you want to throw a webpage online quickly, an Unbounce landing page is one of the best ways to do it.
Unbounce doesn’t require you to learn programming to build landing pages. There’s an easy drag-and-drop page builder, but it also has the flexibility to let you add code as needed. Let’s learn how to create a landing page using Unbounce.
Watch & Learn
In the screencast below, I’ll show you how to make landing page quickly using Unbounce. We’ll also use a custom template to add more style to our landing page.
Read on to find out more about the power of landing pages and walk through building a landing page with detailed written instructions.
Why Use Unbounce Landing Pages?
I think of Unbounce landing pages as having two very useful purposes:
- Build a landing page to provide highly targeted content to the visitor that considers where they’re coming from and what they may be interested in.
- Use landing pages as a stand-in for a full website. For example, instead of spending the time to build a full website, simply make a landing page as a placeholder for a full site.
In either case, building a landing page is typically faster and less expensive than a full-blown website. Even better, the simplicity of an Unbounce landing page helps your audience cut to the chase on the content that they’re looking for.
Landing pages are often experiments to see how an audience reacts to your content. The nature of running experiments is to try them out, measure results, and revise as needed.
1. Plan Your Unbounce Landing Page
Let’s use Unbounce to build our first landing page. To get started with Unbounce, you can sign up for a free trial on their website.
Before you jump into the Unbounce editor, the most important step in this process is to set a goal for what the landing page should accomplish. Remember that a landing page is a targeted, focused piece of content. The design elements don’t matter if you lack a clear focus for the action the visitor should take.
Unbounce Landing Page Templates on Envato Elements
Although Unbounce includes many built-in themes and templates, there are always more options to style your landing page for maximum effect.
Envato Elements is an all-you-can-download creative service that includes over 400,000 assets, ranging from stock photos to graphics to web templates. Best of all, Elements also includes pre-built landing page templates that you can use for Unbounce. Each of these templates gives you a head start over designing something from scratch.
2. Build a Landing Page
Let’s build a landing a page for our fictitious real estate business. I’m going to use the Homes Realestate template that’s available as a part of an Elements subscription.
For this Unbounce landing page, the focus is very clear: the realtor wants to connect with clients and host a consultation for them. This is the beginning of a potential relationship between the business and a client.
After you download the project from Elements, you’ll need to extract the zip file and find the .unbounce file. In the case of the template I’m using, there’s a file called homes.unbounce that we need to upload to Unbounce to get started.
3. Customize Your Unbounce Landing Page
Once you’ve got the landing page uploaded, you can start customizing it for your own business. The Unbounce landing page template is just a starting point that you’ll use for your own business.
To start customizing the page, click on the gear icon dropdown next to the landing page name and choose Edit Champion Variant. This will allow you to start customizing the landing page.
1. How to Add Content to Your Unbounce Landing Page
The template that we’re using already has placeholder content built into it, but it’s easy to substitute that out for our own content.
When you click on a text box, you can simply type over the placeholder text to add your own. You’ll also see Unbounce automatically show the option to adjust font size, text color, and paragraphs on the right side of the editor.
For each of the placeholder boxes, simply repeat this process until you’ve added all of your own content to the landing page.
Again, this illustrates the power of Unbounce. There’s no need to dive into the HTML code and change out the content. The visual editor is easy to use.
2. How to Add Images to Your Unbounce Landing Page
Next up, let’s focus on changing the images in the landing page. Simply click on an image in the landing page, and then change the background in the sidebar by browsing for an image. You can upload an image right inside of Unbounce.
Under the Advanced Settings, don’t miss the option to drop down the opacity for your image either if you want a more subtle effect.
3. How to Remove Unused Blocks or Placeholders
The landing page has plenty of placeholders for your content, but that doesn’t mean that you’ll want to use all of them.
To remove some of the blocks, simply click on what you want to remove. Then, click on Delete near the top of the Unbounce editor to remove the entire block.
Templates from Elements often include many boxes that may not fit your goal. It’s okay to simply remove content placeholders that you don’t need and focus on what you do need.
Publish Your Landing Page
Now that you’ve built your landing page, it’s time to get it online so that you can convert traffic. Click on Overview in the upper left corner to return to the options for your landing page.
Next up, click on Publish Page in the upper right corner to put your page online. You’ll get a URL that you can attach to your ad campaign or send out to visitors.
Your conversion goal or purpose may be very different form the example I shared. That’s no problem; you can still use the same approach with a different purpose.
Recap & Keep Learning
Any time that you want to make a specific impression on your audience, a landing page is one of the best ways to do it. The combination of the Unbounce tool and Unbounce landing page templates from Elements helps you pull together landing pages quickly so that you can jump back to running your business.
To learn more about landing pages and online marketing, check out the tutorials below and keep learning:
Landing PagesWhat Is a Landing Page?
eCommerce10 Simple Ways to Quickly Increase Your Online Sales
Landing PagesWhat is a Squeeze Page? (Hint: It’ll Help You Skyrocket Conversions)
How will you use Unbounce landing pages with your own business? Let me know in the comments section below. Or, share your tips with other Tuts+ readers.