In this article, we'll show you how to build a high converting landing page with Elementor, step by step.
Creating a landing page is one of the best ways to promote your product or service online. These days, when people have so many different options to choose from, it can be tough to design a landing page that outshines the others. However, it is possible to produce a compelling page that makes your product or service stand out from the crowd.
In this article, you’ll learn everything you need to know to build a beautiful high converting Elementor landing page. You’ll see how Elementor can simplify the task of making a landing page. Before diving into design details, let’s first define: What exactly is a landing page?
How to Create an Elementor Landing Page That Converts?
A landing page is a page on your website where you send visitors with the goal of converting them into users, customers, subscribers, etc. Many designers confuse landing pages with homepages. They are not the same thing (learn more about creating websites in our free online course). Landing pages are always designed with the specific intent of turning visitors into customers, while homepages are usually designed for a broader range of purposes.
It’s hard enough to drive people to your landing page and even harder to keep their attention once they get there. You only have a few seconds to engage your users. Let’s explore a few basics you have to do right to create a high converting landing page.
Define the Landing Page Objective
Before starting, ask yourself: What are you aiming to achieve with your page? It is essential to have a clear vision in mind to create a successful page.
Since a landing page is one of several tools in your marketing campaign, first consider your overall campaign goals. Do you want your visitors to subscribe to a service? Make a donation? Apply for a training program? Whatever the reason, understanding your principle goal helps bring focus to your design.
Follow one simple rule — one conversion goal per page. A landing page should serve a single ambition — the primary purpose of your marketing campaign. Choose one main aim for your landing page and stick to it.
Distractions kill conversions. The fewer the distractions, the better conversion results.
Here are a few common distractions:
- Landing page clutter. Nothing drives people away from a landing page faster than a cluttered layout. Keep your layout clean by including only what drives your message home and using enough whitespace (space that is intentionally left blank).
- Multiple Call-to-Action buttons with differing objectives. Remember the rule “one page, one purpose.” It’s okay to have a few CTAs on your page — as long as they propel people toward the key action. Each CTA button on the landing page should support the primary target of your marketing campaign.
- Navigation bar with links to other pages. When you add navigation options to other pages, you lay the ground for visitors to leave the landing page before converting. No need to entirely remove the navigation bar from the page, just change the options in it — make a navigation bar with anchors to different sections on the same page.
How Elementor Can Help You: Elementor Theme Builder enables you to create custom headers and footers. This feature helps you to have a custom navigation bar for your landing page. Customize your header according to your needs and choose a specific page where to apply your template.
Optimizing Landing Page Copy
Landing page copy is a crucial element that helps you explain your offerings and build interest. It’s essential to follow a few rules when preparing copy for your landing page:
- Ensure your landing page message matches your ad. A landing page should give people precisely what they were promised in the ad. There’s nothing more annoying than clicking on an ad you’re interested in and being directed to a page that is a far cry from the ad. Visitors who experience this issue are sure to bounce. So, match your message to reassure visitors that they’ve come to the right place.
- Provide enough information. Put yourself in the shoes of your visitors. Try to understand how much the visitor already knows and what they need to know to convert.
- Don’t overwhelm visitors with information. Don’t put all you have on the landing page. Nobody wants to be bombarded with information. Trim all the fat and break the text up into digestible chunks — break up long content with subheading and bullets to make it easier to read.
- Speak to benefits rather than features. Always think about your visitors and how they will benefit. ‘Our product is great’ doesn’t sound like a benefit, but ‘our product solves your problem’ does. Remember that you sell an idea, not a product or service.
- Avoid jargon. Phrases like “Our product is a synergy of cutting-edge technologies” might sound smart, but it doesn’t truly say anything. Thus, always prioritize clarity over cleverness and use simple words to describe what you are offering to your landing page visitors.
“If you’re trying to persuade people to do something, or buy something, it seems to me you should use their language, the language they use every day, the language in which they think.” –David Ogilvy
Tip: Before adding copy to your landing page, consider reading it out loud first. Read all copy out loud to yourself and to someone else. It will help you figure out if you are successfully getting your message across.
Practical Landing Page Design Recommendations
User experience and conversion optimization go hand-in-hand. Better user experience means more conversions. In this section, I’ll focus on three things that will help you create great user experience.
1. Create a Strong Hero Section
A Hero section is the part of a landing page people see first. It is a crucial component in creating the first impression. Similar to the real world, you only get one chance for first impressions. What that will be — positive, neutral, or negative — largely depends on the content that is presented in this section.
The fundamental idea when designing your hero section is not to overload your users with content. Provide only essential information to create a context and set expectations. If visitors want to read more details about what you offer, they’ll scroll down the page.
There are three essential elements in a hero section — a headline, visuals, and a CTA button.
Improving Landing Page Headlines
The page headline is where everything begins. A good headline can get a visitor’s attention, build interest and understanding. It gives visitors a reason to take action.
That’s why it’s essential to design a headline in a way that effectively grabs visitor’s attention and clearly describes what visitors will get from the page. Keep the headline short — remember that it should be one, maximum two sentences (strive to have ten words in your headline).
Below is Instapaper’s landing page— one of the most successful save-it-for-later apps. The headline of this landing page explains what visitors will get if they install the app.
Adding Visuals Fit for Landing Pages
The old saying ‘a picture is worth a thousand words’ is especially true in the context of a landing page. By pairing text with images you make it easier to convey information — visitors will quickly connect the main message in the header with the visual.
You can use visuals to:
- Describe complex ideas. Using illustrations lets you take a reasonably complex idea and make it easy to understand.
- Establish an emotional connection with your visitors. As we know, emotions play a vital role in the process of decision making.
It’s possible to tell a whole story with just one illustration. Image: Basecamp
How Elementor Can Help You: Elementor lets you create a specific structure for your layout. The great news is that you’re not limited to pre-default structures — you can choose the most suitable structure and customize it according to your own preferences.
Incorporating Landing Page Call-to-Action Buttons
The whole goal of your landing page is to get visitors to do something. That’s why you need a CTA button in your hero section. This CTA is by far the most important CTA on your landing page. It should be clearly distinguished on your page.
You need to consider the following properties of the CTA — shape, size, color, label and the supporting text.
Shape. ‘Make a button look like a button’ is a basic requirement for any button. Your CTA button may be overlooked if visitors can’t identify the element as a button. A button’s shape plays a vital role in helping users understand the button. It’s a safe bet to design CTA buttons as horizontal rectangles. Most users are used to perceiving this shape as clickable buttons.
Size. Size is the most common tool designers use to prioritize UI components according to the level of their importance. The larger an element is, the more noticeable it is to users.
Larger UI elements have a better chance of being noticed and clicked. Since CTAs’ prior goal is to draw a users’ attention, designers should try to make them stand out among the other elements on the page. But it’s essential to reach a good balance — make the button large enough to attract attention, yet not too gigantic as it could ruin the visual composition of a page.
Color. Color is another visual property that helps designers make the button more noticeable. Some designers believe that there’s a magic button color that converts the best. As a result, they spend loads of time looking for that specific color. Unfortunately, no universal color is best for conversions. But color is still an important choice.
It’s critical to remember one straightforward rule when choosing colors for a CTA — people notice something that stands out from everything else around it. That’s why button color should contrast enough so that CTAs stand out from their surroundings. Simply compare two examples below — the first one is PandaDoc and the second is from Trello.
PandaDoc CTA ‘Start a trial’ doesn’t contrast well— it doesn’t stand out from the rest of the page and some users might overlook it.
Label. A button’s label is a text that indicates its function. The label plays a significant role in the efficiency of Call-to-Action — it has the power to compel people to click on the button. But writing good text for a CTA button isn’t an easy task. Fortunately, there are a few tips that can help you to do it:
- Avoid generic labels. Avoid using ‘Learn More’ or ‘Submit’ for CTA label. HubSpot tested the buttons with the text ‘Submit’ against those with different phrases. It’s clear that buttons with generic text lack any compelling behavior.
- Use action-oriented text. CTA buttons are for actions. That’s why the text on the button should begin with a verb. Otherwise, it’s not a Call-to-Action button; it’s just a regular button with some text on it. For example, ‘More Information’ or ‘How to Use It’ are not Call-to-Action buttons. Here are a few examples of action-oriented labels — ‘Start a Trial,’ ‘Download the App,’ and ‘Sign up for Updates.’ Generally, the more descriptive the action is, the more likely people are to click on it.
Helpful Text. Sometimes you may want to add an extra line of information in your button text. This practice is common with free trial buttons. For example, the text ‘30-Day Free Trial’ below the button might ease the decision-making process for those visitors who haven’t tried the service before.
How Elementor Can Help You: Elementor has a widget called ‘Button.’ The widget comes with a multitude of of Style options — you can customize everything starting from the button shape, to the typeface used on the label. Consider reading the article How To Create A Call-to-Action Box in WordPress Using Elementor for more information.
2. Provide More Information on Scroll
No matter how good the hero section is, your visitors might want to read more information before committing. Make sure your landing page provides enough information for users so they can make a decision. The text and visuals available on scroll should reinforce the message in the hero section. Think about it as an opportunity to provide more info. that continues to persuade users.
Make it Easier to Scan Information
It’s a known fact that 79% of web users scan the page rather than read it. Make scanning easier by presenting the information in a format best for scanning — the information should be presented logically, and it should be provided in chunks (a large text section should be divided into smaller parts).
Using our latest Navigator feature release, it is now easy to get a ‘bird’s-eye view’ of your entire landing page, and move elements around until you reach the right layout.
Below are two excellent examples of presenting the benefits of using a service in an easy-to-scan format. The first one is Spotify’s landing page for a premium subscription. Spotify paired short descriptions together with lovely illustrations.
Spotify’s Premium subscription page provides an apparent reason why it’s beneficial to have a premium account.
Slack took a slightly different approach. The service put each benefit on a separate slide and paired copy with rich illustration.
Trust plays a vital role in the decision-making process. If people don’t trust a service, they won’t go for it. That’s why a landing page should immediately start building trust with visitors.
Consider adding following trust-building elements on your landing page:
- Information about privacy. People want to be sure that their data is safe. Knowing that is especially important when people sign up for a financial service.
- Social proof. If you have an impressive user base, list the number of users. Or maybe you have a partnership with big industry names. Placing logos of partners on the page can also reinforce the user’s decision.
Basecamp’s stats-driven landing page makes visitors see how useful the service is.
- Contact information. Reassure that your company has a physical residency. Provide this information in the footer or with a link to the contact page.
- Testimonials are especially powerful when used in conjunction with social proof indicators.
How Elementor Can Help You: Elementor provides a special widget dedicated to testimonials — the ‘Testimonial Carousel.’ This widget enables you to present each testimonial in compelling ways.
Consider Adding a Video to Your Landing Page
If given a choice, people prefer to watch videos rather than read texts. Not surprisingly, adding videos to landing pages can increase conversions by 86 percent.
You can use a video to show your visitors how to use your product or service. It’s possible to record even more powerful videos with a real person presenting your product. Having a real person talk about the benefits of your product helps establish a human connection with your visitors, and this makes your offering more trustworthy, which ultimately leads to higher conversion rates.
How Elementor Can Help You: Elementor provides a widget called ‘Video.’ The widget allows you to incorporate a video from the most popular video services (YouTube, Vimeo, Dailymotion) as well as self-hosted videos.
Make it Easy to Act
One of the foundational rules of UX design says that the less effort it takes to do something, the better chance people will do it. Don’t make your visitors hunt for a CTA; your CTA should always be prominent.
One way to achieve this is to make your CTA sticky so it will remain in place as people scroll down the page. Alternatively, you can repeat your main CTA a couple of times across the page, particularly at the beginning and end.
How Elementor Can Help You: It’s relatively easy to create sticky headers using Elementor’s Theme Builder. All you need to do is to click the Edit Section icon in your Header, and in the Panel go to Advanced. Click on Scrolling Effect, and slide the Sticky Header ON. Here is a quick video which demonstrates how to do it step-by-step.
3. Test Your Landing Page Design
No matter how thoughtfully you design a landing page, it’s impossible to predict precisely how visitors will react to it. To create the best experience possible, you have to test your design and to optimize it based on the feedback you receive from real visitors.
Use the 5 Second Test
The goal of this test is to discover whether or not your visitors can tell what your landing page is about in 5 seconds or less.
It’s easy to conduct this test — all you need to do is to find a test participant who represents your target audience and ask them to interact with your landing page for 5 seconds. After that ask the following questions:
- What is the landing page about?
- What does it offer?
- What are you supposed to do on the landing page?
If a test participant answers all questions correctly, then you’ll have a better chance at conversions.
A/B Testing for Your Landing Pages
There are dozens of approaches you can try when creating a landing page. However, it’s always important to test your landing page to find out what approach works best for you. Don’t just assume that something works better than others, test it. So, one of the best ways to check it is to use A/B testing. A/B testing is an essential part of figuring out which elements on your website work best. You can compare two variations of one page and see which performs better.
A/B testing is perfect for the CTA button. An A/B test helps you discover where to place a CTA and what size and color it should be. It’s amazing how minor changes to an element design can significantly increase conversion.
How Elementor Can Help You: A/B testing is relatively simple to set up with the help of Google Optimize. With Elementor, you can generate landing pages on the fly and test them out without any problems. Check this guide to learn the exact steps for running A/B tests for free using Elementor and Google Optimize.
Landing pages should be designed with the visitor in mind. Your primary goal as a designer is to make it as easy as possible for them to convert. To achieve this goal you need to find a balance between a well-designed visual hierarchy, sufficient content length and persuasive Calls-to-Action. But there’s no universal formula to achieve this balance. Designers have to experiment with different decisions to discover what works for their users.