We’ve created a step-by-step guide on how to create a landing page that converts along with design and sales tips.
In order to create your landing pages that convert, you need to understand your customers and perfectly design your page to communicate your value in convincing fashion.
But even with perfect design, copywriting and all the elements you’ll learn in this article there are a few things you have to assess before promoting your offer.
We’ll get right to the 11 steps, but make sure to read the first and last part as they’ll provide a deeper understanding of the anatomy of a landing page.
What goal does your business have with this landing page? Are you simply looking to generate brand awareness and engagement? Are you looking to increase your sales? Are you looking to get more leads?
Knowing this is
incredibly important as it will help you with the type of landing page you need
to build in order to achieve your business goal.
Identify your target audience
Identifying your target audience is an extensive task. You can’t just take a buyer persona template and fill it in. First, you have to conduct market research to better understand the situation of your audience and put yourself in their shoes to know what they relate to.
To sum it up, you have to
talk to their pain points, their needs and their viewpoints.
You can define your target audience using key targeting elements.
Demographics
Where is the customer from?
How old is he?
What’s their family situation? Are they married? Do they have kids? Are they single?
What’s their job title? Are they self-employed?
Keywords
Here, a proper SEO process will really benefit your market research. Using tools like Serpstat, SEMrush or AHREF, conduct a thorough competition analysis and see what your competitors rank for. Simply plug the URLs of high converting landing pages and check the top keywords those pages rank for, their search volume, and how much traffic those keywords bring to the page. You can also analyze those pages for design inspiration and assemble elements from multiple high-converting landing pages to create a flawless one. Putting yourself in your customer’s shoes can also help here by uncovering keywords such as:
How would they phrase their search query? Using long-tail keywords is becoming increasingly popular, especially with voice search, so get creative and ask the questions exactly as they would.
What keywords would they never use? Using negative keywords is an effective way to better target your audience.
Interests
What is this person interested in?
Do they like specific brands that might be related?
Do they dislike certain brands?
Are there products or people that influence this person?
It’s only when you understand clearly your audience
that you can use those insights and create landing pages that convert.
11 important things to NAIL for landing pages that convert
1 – Hero Header
The Hero Header is an essential element
of a landing page that converts. Getting traffic on your landing page is good,
but you need to know how to make a good first impression.
Think of the Hero as the protagonist of
your web page as it plays a key role in converting visitors into customers.
It consists of the first thing people
see when landing on your page. It’s larger than any other section in the page
and spreads horizontally on the screen (generally full width). It either takes
up the whole top of the page of lets a glimpse of content appear underneath as
to say “there’s more to this page”.
A Hero is not just an image. It’s
something that represents your brand, tells a story and gives that little extra
motivation for visitors to continue scrolling.
To create a high converting landing
page, make sure your Hero is in line with your specific offer.
Since it’s such an important visual and it has to be strikingly beautiful, make sure to use a high-quality image that will display equally well on smaller or bigger screens. Make sure your design is responsive and will look just as good on mobile or tablet.
Always include your call-to-action in
your Hero.
Here are some key Hero Header takeaways
to build a high converting landing page:
Include your logo on the top left.
Short text/title in a bold and easy-to-read font.
Don’t overcharge your visual. 1 key element has more impact.
Essential parts of your visual are not covered by text
Doesn’t hinder navigation
Adapts to any screen size (responsive)
Here are some Hero Header layout examples
for high converting landing pages:
2 – The headline
The headline sparks interest, attention and understanding. Paired with the subheadline, it’s what will keep the visitor on your page and learn more about your offer – or not.
Thankfully, finding a good headline is
an easy part of a landing page.
If you answer yes to the next 3 questions, you’re good to go.
Does your headline grab the reader’s
attention?
Does your headline tell the reader what
your product/service is about?
Is your headline short (no more than 20
words, try to aim for 10)?
Strategically, you want to place your headline in the best possible position so that it’s the first thing people read. I like putting it on the left part of the screen, taking around 50% of the space and putting your most important visual on the right, dividing the screen into equal square sections, like this:
It’s the easiest formatting to read for
viewers as our eyes are naturally going from top left to bottom right when we
read.
3 – The sub-headline
Having a good sub-headline is just as important as having a good headline for a high converting landing page. They give you the one-two punch you need to make visitors stay.
They’re like Michael Jordan and Scottie
Pippen for your landing page. Or even Frodo and Sam… You get the drift: they go
hand in hand.
What can’t be said in the headline, the subheadline contains. Make sure that:
Your sub-headline is positioned directly under your headline.
Your sub-headline gives more information and insight than your headline.
Your sub-headline is persuasive.
4 – The walkthrough: guide your visitors to landing page conversions
Once your headline and sub-headline have done their filter job, only the people really interested in your product/service will scroll further. They want to understand better, so you better make sure they copywriting and design of this section is on point to create the best converting landing page.
The most effective way to do that is to create the main features section to display your product/service and solutions.
To maximize results, combine striking
and explicative visuals with short paragraphs and titles. One of the most
popular ways to do this is the alternate squares sections, like this:
In terms of UX, it’s a lot more
effective than having all images on the left part and all text on the right
part (or vice-versa) as it gives your page a lot more dynamism.
There are other popular ways to display
your features, like columns.
The problem is, it allows for less text,
so it might not fit a complicated software for example and might fit a simple
service better, so choose carefully.
5 – How it works: help your readers understand to make your landing page convert
Displaying the features is great, but
you have to go even further to gain the trust of your landing page visitors.
For potential leads to really perceive the value of your product, you need to
break it down even more.
Show exactly how a particular feature solves a problem or provides the desired benefit. Use the data you collected when defining your goal, target audience, demographics, keywords and demographics to show the most relevant example.
The section can either be composed of a
product/service demonstration in the form of steps, like so:
Or my personal favourite, a video. What
better way is there to explain your product or service than an elevator
pitch-like video? It’s short, it’s concise and it gives you the possibility of
showing your offer in action.
Furthermore, video is still growing and is by far the medium of choice for online information. Try to develop this skill and implement it in a section to increase your chances of having landing pages that convert.
6 – Social proof boosts landing page conversions
Telling a story of people that have benefitted from using your product will always be one of the best sales techniques. Its main goal is to inspire your potential customers. Real people sharing real experiences with your brand are things your visitors will relate to.
Social proof can come in various forms. It can be a video that a customer did for you, telling his or her story. It can be a picture with a quote of that person or it can even be logos of brands you’ve worked with.
The last one generally does not contain
a story or a quote as it is used more when you’ve worked with brands that need
no introduction/explanation or brands that are known in your specific industry.
It can even be a number: the number of
clients you’ve worked with or the number of users on your software for example.
An effective landing page practice is to
include some social proof pretty high up the page and at the end of the page,
as to make a statement. It reinforces the fact that your brand can be trusted
and sometimes gives that little extra push to get the conversion.
7 – The form
After building trust with the first 6
points in this list, it’s time to gather leads.
The form can be tricky because if too
long, you risk losing a potential lead over a matter of effort. Too short and
you might not collect all the info that you need to qualify your leads. It has
to be just right.
In order to do that, follow these 5
simple steps:
Ask only the information you must have. Is their country or state/province really necessary in this step? Can you do without their exact title in the company? Generally, conversions start to drop off significantly after 7 form fields.
Use spacing. If your form field is too crowded and can’t breathe, chances are visitors can’t breathe while looking at it either. Your form design is just as, if not more, important than the rest of your landing page. Make it aesthetically pleasing to make it less intimidating to viewers.
Use radio buttons or dropdowns to minimize effort. Entering data manually, even if it takes 30 more seconds of their time, can seem like a huge effort online. People want things to go fast on a website, and giving them choices they can simply click lowers the time it takes to fill the form and therefore, lowers the barrier to conversion.
Make your form mobile-friendly. As you’ve probably heard, mobile traffic is up 222% in the last five years. Yet, so many marketers simply forget (or neglect?) the online versions of websites or landing pages. They’re missing out on huge opportunities to get leads. You have to make sure your landing page is mobile-friendly by either making it responsive or designing a completely different page for mobile altogether. Companies like Elementor offer extremely easy to design mobile and tablet features, so you have no excuse.
8 – The CTA
A simple thing to remember when creating
your call-to-action is that a landing
page ends with what your reader desires.
It can be broken down in simple steps:
Use the best command verb. Let your audience know exactly what you want them to do. This depends a lot on your niche. If it’s an e-commerce store, preconize words like “buy”, “shop” or “order”. If it’s a newsletter or informational content, use words like “Subscribe” or “Download”. For webinars or events, try things like “Sign up” or “Reserve”. Just remember that’s it’s a call-to-action and that without a good command verb, you will drastically lower your conversions. Avoid things like “New collection is available” on buttons at all costs.
Spark emotion. Think of what the user wants when looking at your offer and use that to your advantage. If you’re selling a computer game, try things like “Start playing”. For a spring break vacation offer, experiment with variants like “Get the vacation I deserve”.
Adapt to users’ devices. A longer button text can work well on a computer, but if it appears on two lines on a mobile, you’re in trouble. Make sure to create a button both for mobile and desktop.
9 – Page speed
People online need things to be fast. They’re used to clicking on things with their thumbs and seeing the things they desire in a flash. If your landing page loads slow, it will be one of the biggest barriers to conversion.
Furthermore, low page speed kills your
SEO. It’s one of the first things Google analyzes when looking at your page.
Here are ways to optimize your landing
page speed:
Optimize images. Make sure your images are not bigger than they need to be. That is to say, if an image displays in 500×500 px on your landing page but your file is 750×750 px, it’s too big. It’s also very important that any visual file on your website isn’t bigger than 1MB, and by aiming for the lower hundreds of KBs. A good way to make sure your images are optimized in terms of file size is to use the “Save for web” function on software like Illustrator, Photoshop or Lightroom. This will prepare the image for your website.
Use the right format. The most common file formats for web are PNG and JPG, but some people simply put everything in one format without knowing what they’re good for. PNG is better for graphics and vectors as the colours stand out more and JPG is better for photos. As simple as that.
Set up browser caching A lot of the time, your landing page won’t convert in one go. People on average see an ad 7 times before buying. So, to create a better experience for your viewers when they revisit your landing page, make sure to have a browser caching plugin on your website. It will store some information on the browser so it doesn’t have to reload everything on your page when people come back. Check out Google’s article to learn more about how to leverage caching.
Some great tools exist to analyze page speed, and the amazing thing is they give you actionable on how to improve it. Our favourites are GTmetrix, Pingdom (paid plans after free trial) and PageSpeed Insights by Google.
If your landing page loads in more than
5 seconds, you have things to work on. Try to aim for around 4 seconds as it’s
still fast without compromising the quality of your visuals and overall landing
page design.
10 – Integrate a chatbot or a live chat
With the emergence of chatbots, this one
is a no-brainer. People feel safer and more connected when they see a chatbot
in the bottom right corner. They know they can obtain information quickly if
they have questions.
This builds much-needed trust to your landing page and lets them know there is someone behind the page.
One amazing way to personalize the
experience with the chatbot is to include geolocation. Say the person is in
Canada, you can open the message by acknowledging their location and break the
ice with a light-hearted opener like “Brrrr,
Canada’s cold but oh so beautiful! ?? ?”
This creates more proximity with your
visitors and reinforces the positive sentiment they built while looking at your
landing page (provided you’ve done all the steps in this article).
11 – A/B Test
You’ve spent 100 hours designing the
perfect landing page. It looks amazing. You’ve checked all the items in this
list and you nailed each one. Guess what? That’s not enough. You basically have
to double/triple your efforts in order to really find the right recipe.
Find things that are easy to switch up in terms of design and copywriting.
Here are some ideas for you:
Choose different pain points for your headlines
Try a different hero
Change the background colour in different sections
Use vertical columns instead of odd square sections (or vice-versa)
Try different visuals to accompany your text sections
Change the button colour
Change your CTA
Try different types of social proof
Designing the best converting landing page is a long
process.
You’ve implemented the core of your landing page (the
steps above), but there is still work to do to get your landing page to the
next level.
There is a lot of things you can do in terms of design, copywriting and tracking to create landing pages that convert.
Here are a few of them.
Design tips for landing pages that convert
Layout & design
Have you ever been on a website and thought “wow that looks amazing!” and… that’s it?
Let me explain. A lot of incredible web designers
create stunning websites with interactive effects and unique layouts. You end
up playing on that website and testing the effects. They have a unique way to
showcase information and visuals.
But one thing they lack is a conversion focus.
For one, adding too much JavaScript will simply kill
the speed of your website and you risk frustrating a lot of visitors.
There also won’t be a natural flow to the reader’s eye
so he won’t know what the offer is about.
Instead of starting from scratch, take inspiration on different landing pages and try to analyze the patterns in the ones you like. You can then choose some elements of different ones to implement them in your own way for a winning formula.
Colours
No matter how funky your brand is, a landing page cannot contain too many bright colours for 1 reason: the CTA. You must always make sure that your CTA colour is the one that stands out the most as you want your visitors’ eyes to be drawn to it. Confusing the reader will only lessen your conversions as he won’t be sure where to look at.
If you must include a lot of colours, a good way to do it is to use light, pastel colours for your backgrounds and creative and a more bright, deep colour for CTAs.
Visuals
A big problem I often see on landing pages is people don’t know how to properly use visuals to enhance their argument. I see people going on Unsplash or Pexels and sprinkle some stock photos at random places on their landing page. Sure, these photos might look amazing when you look at them individually, but when you have too many of those, it simply cancels the personalization effect of your brand. It doesn’t feel like it’s yours and it doesn’t add anything to a text or title.
Having your very own creative and branding shows much more effort and is likely to have people develop a more positive sentiment towards your brand. If graphic design isn’t your forte, I strongly recommend you invest in graphic design or branding services to really create an identity for your brand.
Effects
There are so many effects you can integrate into a landing page, but I’ll stick to the essential ones. These are effects that are easy to create even if you don’t have a graphic design degree, and they add a lot of dynamism to a page.
Drop shadow:
The drop shadow is a really simple visual effect that consists of adding an element that looks like the shadow of an object. It’s particularly effective when used on images because it adds a 3D element to your page and makes them stand out. Use them on your most important images so they draw attention.
The downside is, a lot of people abuse drop shadows, putting
them on images, text, buttons and making them too strong.
Also, remember that light comes from above, so if your drop shadow is on top of your image, it will not look natural to viewers.
Follow these exact settings to create the perfect drop
shadow:
Opacity: 10% to 20% Blur: 3px to 7px X-axis location: 5px to 7px Y-axis location: 5px to 7x
Parallax:
A parallax happens when the position or direction of an object or section on your web page appears to differ when viewed from different scrolling positions.
It’s a very good way
to add dynamism to your page and is a very low effort web effect that will not
hinder page speed.
Notice how the “WE’RE
CERTIFIED” moves according to where I’m scrolling on our home page.
Fade-in:
A fade-in is an optical effect where web objects appear gradually out of the darkness.
It’s one of the most subtle, minimalist effects that
exist but one of the most used in web design as it is an easy way to create
stunning landing pages.
The reason it is so good is when you scroll, having objects appear from thin air will make them pop out more and directly catch the attention of your visitors without them even noticing.
But like drop shadows, it’s easy to abuse them. Only
select a few visual elements to apply fade-ins on. Keep the fade-in time to
around 0.7 seconds to create a visually appealing effect.
There are simple beautiful variants to the fade-in,
like a fade-up or a fade-down where the object will take an upward or downward
trajectory respectively when appearing.
Hover:
The hover is one of the best effects when it comes to
providing information that would be too much if shown directly.
It keeps your page extremely minimalist and lets
people choose if they want more content displayed when in need of an
explanation.
The tooltip is a great way to provide a small
explanation to a visual, like so:
But a text box can be extremely useful for bigger
explanations:
It can also be used to add just a bit of dynamism to a
page, like this:
It doesn’t serve any real functionality purpose but a design one, and to show your expertise in user interface/user experience and that you care about the visual aspect of things. This greatly increases trust in your brand and can make the difference in landing pages that convert.
No, this is not the 90s, but gradients are back in a
big way.
They’re eye-catching and attention-grabbing and
therefore, a great way to focus the attention of a visitor on a certain object,
like a button.
They’re also perfect as backgrounds, making any flat
colour that’s over them stand out.
Lightbox:
A lightbox is a JavaScript library that displays an object by filling the screen and dimming the rest of the page.
It concentrates the focus on the lightbox only, making it extremely efficient for forms or videos.
If you don’t have a choice but to have a long-form that would look terrible if displayed directly on the landing page, a lightbox is a logical choice.
The big advantage is your visitor doesn’t have to
leave the page and load a new one. Everything appears in the blink of an eye.
Sales techniques to craft landing pages that convert
Urgency
Unfortunately, humans have a very short attention span, especially online. Stressing a sense of urgency is a very good way to hold on to your visitor’s focus. To encourage them to make a decision quickly, a few techniques exist, one of the most effective is the countdown timer.
It works particularly well for webinar registrations, event sign-ups, discount code downloads or simply limited product sales.
If like me, you think it can look a bit scammy if not done right, there are more subtle ways to evoke urgency like using simple copy words. “Act today”, “Only available until *date*”, “This offer ends on *date*”.
Scarcity
How many times have I found myself looking for a
certain item online, find one I like and see a little “Only 3 left in stock”. Even if a certain part of me knows it’s not
true and even if I may find a better one on another website, I still want to
act upon it.
“Only x seats
left”, “Only x copies remaining” are persuasive sales techniques
that influence your visitors’ choice and drive conversions.
It’s important to make sure your visitors are made
aware of the scarcity as soon as they arrive on the page as their focus will be
multiplied after seeing that line.
Special offer
This one is quite similar to the urgency. Make sure
you let visitors know this is a temporary offer so they are more likely to take
advantage of your promotion.
Use low friction words like “Special offer” or “Limited time offer” instead of harsher words like “Buy now” or “Act quickly!” to give a more pleasant experience to potential customers.
This technique works especially well when paired with
a countdown timer.
You can even implement scarcity in the special offer
by saying things like “Limited time offer
– only 50 available.”
Unique value proposition
This should be focused on your headlines. You need to captivate
visitors by highlighting exactly what your product or service does for them.
Do not overwhelm with long titles that state 4
benefits. Instead, focus on the one quality that you think will address the
biggest pain point of your audience.
But remember, using A/B tests, you can try different
titles focusing on different pain points to see which one resonates the most
with your audience.
Tracking is key to landing pages that convert
Google Analytics
There is no way you will be able to properly analyze
your data and A/B test correctly without Google Analytics.
Analytics is still underused by marketers even though
it’s one of the best tools available.
It allows you, among other things, to see where the traffic comes from (SEO, PPC, social media, referral, direct traffic), to know the bounce rate of your website, to gain customer insight like location or age and even splits the data per device.
See how people interact with your landing page
Heat maps allow you to track actual time visitors look
at, click on and scroll through different sections of your landing page.
It’s a highly visual method of analyzing your traffic. Highlighting the areas
that receive the most and the less attention through a colour code (red is
more, blue is less), you’re able to adjust your layouts and really the impact
the changes you make on your page has.
There are different types of heat maps:
Scroll maps: They allow you to see how much information is available without scrolling but also when people are abandoning the website. You can also see what sections of the page are used most.
Hover maps: This one shows where people hover while reading across your landing page. It can help you define what you should put in those areas.
Click maps: Pretty self-explanatory, they display where people click or are most likely to click while visiting your landing page.
Attention maps: They use the visitor’s browser data to display which parts of the page received more attention. This is particularly helpful if you have a long landing page and need to trim it down as it will tell you which sections people don’t care about.
One of the most popular tools for heat maps is Hotjar.
User testing
There’s nothing like good old human insight. If you’re in the online marketing world, you surely have contacts that could comment on your landing page. You can even send it to friends and family to know what the customer experience feels like when visiting your page.
If you have collaborators or coworkers, there are amazing tools like MarkUp that allow you to comment in real-time about landing page or website sections.
And you, what are your best tips for landing pages that convert?
← Back to blog
