When I was putting up Flux Ventures, I thought I had to put up a good website. Doing this is part of my strategy to not only get lots of people interested but also increase my prospects at the same time.
And I realized that the first hurdle is its landing page.
While I was reading on how to do so, I am able to apply these to my own and not only did it bring me a lot of views, but it made my company look more trustworthy to each viewer.
Today, I’ll show you how you can make an amazing, high-value landing page so that you can get high-value followers as I did.
As a summary, do watch this video about how important they are:
What Is A Landing Page
First things first, let us define what it is.
According to Unbounce, it is a standalone web page that is made specifically for a marketing or advertising campaign.
Are you curious about what makes them different from home pages? I was confused before I got in nose-deep into research, so here’s what I have to say about what makes them different:
- A landing page contains fewer links to the rest of the website.
Let us take this example from Unbounce as an example:
The page on the left is a bike store’s home page. Meanwhile, the one on the right is a bike store’s landing page.
Notice that the webpage on the right has fewer links than the one on its left.
- A landing page aims to convince people to buy what they want to buy.
Notice how the bike store’s home page from the left wants you to click on any of its links.
For example, the items listed have a tag with a percentage like 40% or 15% convince you to click on the link below to learn more. This means you might be interested in a bike and its accessories.
Meanwhile, the landing page wants you to notice the shop’s bike instead of its other products. There is a link at the top that redirects you to buy it off its page.
Now that we learned the difference between a home page from a landing page, let me show you some types of landing pages you can choose for your needs from this post:
- Squeeze Page
This type of landing page’s aim is to get visitors’ emails in order to convince them to buy one of your products in the present or in the future.
How you make this page is that you offer your future visitors content they can get for free (e.g. newsletter, ebook, whitepaper) that would convince them to become subscribers to your website which will then become future buyers of your website’s products.
Shown below is an example from Neil Patel’s page:
As you can see, his page asks you for your email so that you can enter a chance to win a contest the website is currently holding.
Doing this will not only increase the number of people sharing this page to their friends who need it but it will also help you get a group of people you can convince with future contests or give them a discount with any of your products.
- “Get Started” Landing Page
The picture above is an example of one of the other landing pages you can choose for your website, taken from MailChimp.
This format is about enticing the visitor to click the “Get Started” button to convince them to get your product now or later.
Its goal is to present the website’s main product as a solution to a visitor’s need. In this example, it is attracting those who needed another CRM tool to help with their marketing strategy.
- “Coming Soon” Page
It is amply named due to being able to show its visitor that the website is about to release a product in the near future and you can know about it.
In these kinds of pages, it usually shows a countdown timer at the top, then it asks for the visitor’s email below it in order to contact them for updates, especially when the product has been officially launched.
An example is this page from MiEvent.
- Pricing page
The final type I will show for you is remaking your pricing page.
Whether you are planning to sell a new product or you want people to purchase an existing one of yours, you can opt for a similar design like the one shown below from Wistia.
Aside from having their pricing page remade to look like this, they also made sure to add several links to their pricing page such as the next two pictures shown below to pique the visitor’s curiosity even more:
Benefits of Effective Landing Pages
After learning what landing pages are and what kinds you can use in your future website, let us explore why you should have one.
Getting SEO Ranking
This reason for getting a landing page has something to do with using the right keywords to associate your product with your website.
Having one will increase your website’s visibility across all search results that include all of the words you use on this page.
Think about it: creating a landing page using high-traffic keywords will increase your chances of getting a future customer with each click.
Promoting an Upcoming Product or Sale
Since this kind of web page focuses solely on one promotion, product, or sale, there are two reasons as to why having content focused in this way.
Highlighting the marketing campaign
For example, if you are a drinks manufacturer and you want to promote your newest energy drink, adding a landing page that talks only about the newest energy drink will help you increase attention on that.
This can also help you promote it in social media and other forms of marketing too since you can show people the link to the landing page, thus increasing your potential customer base at the same time.
Track the campaign’s success
Using the energy drink in the previous section as an example, having a landing page will also help you check how excited people are around your product.
After using it in several other campaigns, you can also gain more data such as how often your landing page has been visited and its rank in search engines.
What is Unbounce?
Now, before I introduce you to how you can make one yourself, I would like to highlight that I will be featuring a tool that can help you make one and add to your pages: Unbounce.
Born out of a German company, their software has been used by various companies such as Helix and Campaign Monitor to help with their own landing pages. If you want to learn more about Unbounce, you can visit their site here and follow a tutorial in making one by watching this video:
Steps on How to Design a Landing Page
After learning how important a landing page can be for your future marketing campaign for your website, here are the steps you have to do in order to create one by yourself.
Step 1. Choose the right landing page colors
In this step, you have to think about what kind of colors your landing page should have. Doing this will help give the viewer an image of how you want your product to look like how your marketing campaign should feel to people.
Make sure to choose one of the following color schemes.
This color scheme makes use of different shades of a certain pure color called a hue. If you included a color where you added white to the hue, it is called a tint.
Meanwhile, adding black instead would create a shade. Finally, adding black and white to a hue would create a tone.
Adding at least one tint, shade, and tone to a selected hue to a landing page will make it feel more relaxed.
To talk about this color scheme, let us take a look at this color wheel.
For this color scheme, you have to choose two colors that are opposite to each other in this layout.
Two examples were to choose green and red or blue and orange.
Using any of these pairs on a page will help make certain elements stand out when used properly.
For this color scheme, it would have to use colors that are next to each other on the color wheel.
Referring to the picture in the previous section, you can opt for either blue with blue-green and blue with blue-purple. You can also opt for yellow-green and green too.
Opting for any of these colors won’t bring too much contrast to any elements applied in the landing page compared to using complementary colors but they will be as easy on the eyes as using monochromatic colors are.
After choosing which color scheme to use for this, follow these tips on how to apply it on your design:
- Dedicate 60% of the colors you will use for your background as it will be the biggest part of the post-click landing page visually.
- Then, dedicate 30% of the colors to your header, footer, and form as it will dedicate the second most visual space.
- Finally, use an accent color from your scheme to highlight the most important elements on the page and it should not exceed 10%.
Use the right shape for your landing page layout
One of the most common mistakes in making your page layout is that you have to cram as much as you can in one page, such as the example by Carter’s page below.
If you designate this as your landing page design and I were to look at it at first, I would be confused due to seeing the sidebar and the categories of clothes this website is trying to sell to me. I would not be able to notice their promotion for their newest kids’ line either.
However, compared to this landing page shown below by Boden, I can clearly see that they are known for children’s clothes and that is the only focus on the page.
Notice the shapes used in the Boden landing page.
The main focus of the landing page commands most of the space. For this specific example, they were aiming to show that they are selling children’s clothes and added a picture of a girl wearing one of their clothes.
Then, the next largest thing on this page is the small white box next to the picture that says “New clothes seek a good home.” Under it, it has “Colorful new styles just waiting to be taken for a twirl” with three links to their different clothes categories.
Based on these two landing pages, here’s my tips when you have to design your landing page based on its shape:
- Dedicate most of your area to give the visitor a good impression of what the site is about. Adding moving pictures can increase conversions as much as 80%.
- Allocate space to add two meaningful lines of text to summarize what you want to sell or promote. The first line should be a hook for people to stay while the second line should be a sinker to convince them to buy in the future.
- Avoid adding too many elements to this page. Using Cartier’s page as an example, doing this will help the visitor value your landing page’s focus on a particular product or service that you are selling.
- Adding links to your various social media pages can increase your chances to get a share of the 71% of millennials who would purchase something if it has been recommended online.
Adjust your mobile landing page layout
Now that you have used the first two tips and the video I shared in order to fill out your landing page’s design, your next step is to create one that works on mobile phones.
Doing this will help you get as much share of more than half of web traffic worldwide as it continues to increase from 50.3% in 2017 to 52.2% last year.
Twillory, a brand that has applied this principle, was able to manage a conversion rate of 46.85%. They also opted for a stripped-down version of their desktop site, which resembles the latter’s visual appeal without sacrificing load times on smaller devices.
While using Unbounce to create your own landing page for these is as simple as clicking on the “Mobile” tab at the bottom of the screen. You can also opt to use its Layout Assistant feature to automatically generate one for you and start from there as well.
Make sure to click the toggle button next to “Mobile” to enable this view for your landing page before going to the Layout Assistant. Then, save your current project.
Unbounce can still let you create your own mobile landing page with or without using the said tool. Aside from that, you can also hide page elements you don’t want to display.
Configure your landing page settings
After finishing your layout, you would have to do three steps before launching your page.
- Add a keyword-focused page title and meta description. Doing this will help search engines index this page quickly while increasing your chances to get more conversions once it is launched.
- Create a personalized confirmation page such as a “Thank You” page for your form. Doing this will not only increase your viewer’s trustworthiness to your website but also be able to have another opportunity to make your viewer remember you for your product at the same time.
- Add a listener that would indicate which part of your landing page that a user should click to qualify as a conversion. Doing this will help you automatically track how effective your page is once it is launched.
Set your landing page URL
If you have finalized your desktop and mobile layout for your landing page, the final step is to make it live! Here are the following steps on how to do so:
- Log-in to Unbounce using your credentials and set up your CNAME with your website’s original domain hosting service.
- Go to “Domains” -> “Add your first domain”
- In the window that shows up, add the domain you want to use with the landing page you have made.
- Click “Yes, I want to add a custom domain.”
- Choose “I will set up the CNAME record myself” and click “Continue.”
- Go to your Unbounce landing page’s overview screen.
- Click the “Change URL” button
- Select your domain in the drop-down.
Add tracking and custom scripts
If, for example, you had a custom landing page made in the past and you wanted to incorporate a better design but using the same files you had before, you can opt to import these to your Unbounce account.
Make sure to enable jQuery for your landing page first before proceeding with importing them.
Also, the script will not run while the page is still in the editor, thus you can only see it once it is published.
Then, you can paste your custom CSS in the dialog that follows.
After adding, your Properties panel will update with the contents of the CSS file that you just drew up and you can change it graphically there too.
Adding Custom HTML or Widgets
If you want to add something like a slides viewer or a PDF viewer to your landing page, follow these steps to add it while in Unbounce’s editor:
- Drag the Custom HTML widget from the object toolbar to the spot you want it to appear on.
- In the dialog box that appears, paste your script/code for your widget.
- Click “Save Code.”
- Stretch the Custom HTML to the correct size.
- Save the page.
- Check how it works using the “Preview” button. If it does not show up, that only means that it can be viewed once it is published.
Integrate with your marketing toolset
While using the Unbounce editor, you can include the following widgets to your landing page in order to maintain it easily. In this tutorial, I will cover integrating Google Analytics and Zapier.
To find other applications you can integrate with Unbounce, check here for a list of instructions of which modules are supported.
Integrate Google Analytics
If you want to include Google Analytics to your landing page, your first step is to get your website tracking ID from Google Analytics. For more information about that, read this article from Google Support.
After that, go to “Settings” -> “Script Manager” -> “Add your first script.” In the pop-up that shows up, select “Google Analytics” and fill in the details before clicking “Add Script Details” as shown in the picture below.
Fill in the form under “Script Usage” field of the domains you want to apply the tracking script to, as shown in the screenshot below.
Then, click “Save and Publish Script.”
Integrate with Zapier
If you want to use Zapier to connect to other apps such as Google Docs and Trello, first you need to have a Zapier account. Aside from that, make sure you already have a published page, sticky bar, or overlay in your Unbounce account as well.
Next, choose which page you want to add a module using Zapier integration in. Then, scroll down to see a list of possible integrations you can add.
Then, click “Powered by Zapier” and in the pop-up, log-in using your Zapier credentials. After that, click “Authorize” when asked for permission for Unbounce to access your data for it.
Then, you are redirected to the full list of applications you can add to your landing page. Click on the plus symbol next to them to add them.
Then, read through what the integration entails and click “Create this Zap” if you will allow them to connect any of their modules with your Unbounce site. After that, log-in to your account under ”Connect an Account” in the “Select Unbounce Account.”
Select your client ID, landing page, overlay or sticky bar once you are done then click “Continue.” After that, go through the screens and when you reach a step that asks you to turn on the Zap, click the toggle to keep it on.
Back in the Page Overview section, all successfully configured Zaps will appear on top of the “Powered by Zapier” tab section. They can appear as any one of the following:
Preview and publish
Finally, if you want to publish your site, click on the “Preview” button in the editing screen of your landing page and hit “Publish.”
If you transferred this site from WordPress to Unbounce, add their WP landing page plugin and it is all set to help you redecorate your website at ease. You can read more about that here.
In summary, having a landing page for your website is awesome for converting visitors into customers. Aside from that, it can help with promoting a certain campaign, product, and/or service.
Then, designing using color theory and shapes will increase your chances of getting your point across to your audience within 3 seconds. Finally, I helped you navigate your way around Unbounce to make it a reality.
Did this help you in your business marketing strategy? Read some of my other articles to get more ideas on how to rise above the others this 2020:
Have you made a landing page? Comment down below about your experience.
Sign up for my newsletter ⤵
or get left behind by the people who do...