HEY

Participate in the next Webflow Challenge!

Create a sales page on Webflow (10 essential elements)

There are many ready-made sales page templates. However, you can differentiate your sales pages on Webflow. How can I do that?

Updated on

30/1/2021

Create a sales page on Webflow (10 essential elements)

In your career, you've probably seen ready-made sales page templates. And they're not bad... For ready-made. But then, what's the point of using a webdesigner to design a sales page? Don't worry, there are many reasons why you should hire a professional to do this.

That's what we're going to see in this article.

🌈Sondage

In your opinion, what could stop companies from using a webdesigner for their sales page?

It's too expensive.
The result is (almost) the same as for the free templates that are already ready for use.
Others? Feel free to share your opinion

Summary

Define the client's objective

Identify the target of his client

Learn about the standards of the sales pages

  1. Hero
  2. Services
  3. Section: How it works
  4. Social Evidence
  5. Form
  6. Team
  7. Service / product price
  8. FAQ
  9. Resources Resources
  10. Footer

Other useful tips

Conclusion

Video

He defines his client's objective

If you already have some experience in webdesign, you'll know that all clients are different. And if you haven't seen this yet, I assure you that it will come! They have different visions, different ways of thinking... and above all, their goals are not the same. While some want to enhance their image, others focus on increasing their sales. Still others want to expand their community...

In any case, I have noticed that in general, the objectives revolve around :

  • Treating an image
  • Encouraging commitment
  • Conversion of prospects into customers

Depending on the goal your customer has set for himself, your way of designing the sales page will be different.

He defines his client's target

If your client wants to make a sales page, it's not for him. It's mostly for his own clients. But who are they? Do you know them well enough? Have you taken the time to learn about them? If not, now is the time to do so.

For each type of audience, you will also have to use a variety of methods. To help you, I advise you not to be satisfied with general information about this target. Get into the details: what are their client's "pain points", their needs and the situation in which they live?

For more information, here's a lead you can follow:

  • Demographic data (the country they come from, their age, marital status, work...).
  • Keywords (at the level of the natural referencing of the site, the data relating to the keywords often used by the target audience helps a lot: which queries they use the most, what they will never use...).
  • The interest of the target group (which brand already attracts them? Which one doesn't they like? Etc. This way, you can draw inspiration from brands that have caught their attention, without copying them stupidly)

The more you know them, the better you'll understand them. Then you'll know what kind of design would suit them best (performance, practicality and attractiveness).

He knows the standards of the sales pages

I'm talking about the elements that are absolutely necessary to appear on a sales page. Only a professional webdesigner is able to know them. In this paragraph, I will talk about 10 elements. If you think you know others, don't hesitate to comment on them!

The fact that I list these 10 elements does not mean that on any sales page, they must be put at the same time or in that order. Depending on where you're going to put it (home page, among others), you choose the elements.

landing page on Webflow
https://www.happydesk.be/video-de-formation-gratuites

1. Hero

I think I've already repeated it more than once in my blog posts: visitors give your website very little time for their first visit (between 10 and 20 seconds, at most). So the first thing they face will have to be attractive enough to grab their attention. This first thing, on a sales page, is none other than the hero.

This is why this hero will have to convey a clear message (what does your client do, what makes him different, what advantages can be gained by using his services or buying his products, how to subscribe to his offer...). Only, what good is this message if it is not warm? Indeed, good communication with the target audience is a must! It will help you to establish a relationship of trust, and thus encourage you to scroll down the page to find out more.

Airbnb's Hero is a fine example! It's simple. A simple glance is enough to make visitors understand the site's activity, the services it offers, etc.

2. Services

Unfortunately, Hero is not enough to make it all clear. It only gives a general idea. The section reserved for the explanation of the service or product offered, will do the rest of the work. After all, if you provide detailed information in the Hero, visitors will have no reason to continue browsing.

So, in this section, you will explain precisely: how are your services/products the SOLUTION?

Let me give you two other very successful examples:

The service section of Zendesk Sell

It is a sales automation software to track prospects. It also helps in sales management. For their sales page, in the service section, they used a combination of images and illustrations to explain their products easily, clearly and quickly. Accompanied by a short description, these illustrations are simply: attractive and action-packed.

The service section of LeadPages

In the predefined sales page templates or in the predefined functionalities, the 3-column service layout is often found. This is what LeadPages has used, and frankly, it is also a pure success! The target audience understands immediately, without making an effort, which products LeadPages offers and exactly what solutions they provide.

3. Section: How It Works

Still with the aim of encouraging people to scroll down, we must continue to arouse the curiosity of Internet users. So don't reveal everything in the service section. Another section: process / how it works can still be done. This is where you put demonstrations or a little tutorial about how to use your products.

For Buffer, they showed the steps to follow to use their products.

4. Social Evidence

For prospects, there is nothing more reassuring than having proof! And social evidence is very important. I'm talking about testimonials here, and real testimonials on top of that (especially not fictitious ones, because they are useless; on the contrary, fictitious testimonials only lower the image of the site).

What is needed are real people talking about their experiences with the products or services offered by the site. When asking for testimonials, be clear about the question that customers must answer: what problems have they encountered before, and what solutions did the product/service provide?

Not only are the testimonials reassuring, but they also inspire other visitors. Lattice did very well too. In addition to the testimonials in question, he posted on the site the number of people who used their product. This can only inspire other Internet users and make them decide to use the product in turn.

I would also like to point out that Lattice knew how to gain people's trust. They put forward a person who is very well known in the field in which they operate. Indeed, the authors of the testimonies can greatly influence the decision of the prospects.

Then Google Adsense acted strategically. It only put photos of their clients on this section. When you click on it, you are redirected to videos of testimonials on YouTube or other social networks. The goal here is then to promote these other networks. This will only motivate customers to agree to give their opinions on products / services.

5. Form

Without prospects (and above all, his contact information), there will be no business. That's the way it is, and there's nothing we can do about it! But how do you win leads? Simply insert on your sales page a registration form (for a newsletter, a service, etc. depending on your client's objective, as I explained at the very beginning of this guide).

I'm not just talking about the form in the fifth place, because that's the best place to put it. At this point, you've already established a trusting relationship with your prospects. If it reaches this point, it's because they are convinced (or almost) that the service offered is worth it. The logical next step is then to register it on your site (obviously, according to the rules of the RGPD).

Here again, you have to be careful what you say. This step is not just about inviting people to sign up on your site or your mailing list. They need to understand that they have something to gain and that they need this. Here's a tip that works every time, as long as you know exactly what your customers need:

Uses a lead magnet, i.e., offers something free in return (free trial, ebook, etc.). Don't forget your clear and precise CTA.

Take Webflow as an example. In exchange for an email from his prospects, he offers a free trial at his service. By the way, I take this opportunity to urge you to do so. You will see that you will have nothing to lose by trying it. Here is the link

https://en.happydesk.be/video-de-formation-gratuites

6. Team

Even if your products are very effective and you have explained this very well to your site visitors, the risks of them leaving without doing anything are still high. To build a real relationship of trust and thus easily convince your prospects, the site owner needs to introduce himself and his team.

If future customers don't even know who's behind the site, do you think they'll be able to blindly trust it? Especially since they will be investing money in the product / service.

Moreover, presenting your team is a way to stand out from the competition. Each member of a team is different, with his or her own personality, values, etc. Likewise, each team, each company is different. We might as well highlight this difference in order to stand out even more.

We've already seen Buffer 's example for the "how it works" section, but I'll tell you more about their example for the team section. They didn't just say who they are (last name, first names and function); they explained their culture, that of their company, their origin... As the members work remotely (teleworking), knowing their origin already inspires confidence. It also gives the impression that one is closer to them and that subscribing to their service is not scary.

7. Service / product price

By exposing the price of a service or product, transparency is achieved. And that only increases the confidence of prospects. On the other hand, displaying prices helps to save a lot of time. Why is this?

Simply because those who are interested in the proposed products do not need to open their mail to send a message to the support, or to write a long mail on any contact form. Some people even hate the idea of doing that, and they don't do it. That's a shame, because your customer would have lost a potential customer!

Displaying the price at this stage is also wise. This can be considered the final step in the conversion. Simply viewing the price can help prospects finally make the move.

There are different ways of showing these prizes: For Drift and Typeform, they give visitors a choice of payment methods (per month, per year, etc.), with for each, the features to be won.

8. FAQ

There will always be questions. If a prospect doesn't have any questions about the given service, either he has understood everything or he has understood nothing (the latter is less likely to happen if you have followed all my recommendations so far).

So let's suppose your customer has about ten prospects and they all send him an email about how the services work. He's overwhelmed and will spend an enormous amount of time answering all these emails. At some point, he may have to call on other people to take care of site support.

But he has a choice between:

  • Create a customer service team that answers all these emails and calls.
  • Put a section: FAQ (Frequently Asked Questions)

Without thinking, I'll choose the second option. A real saving of time and money.

The FAQ section also helps to clear up doubts about certain things, and thus encourage prospects to make a decision quickly.

Lyft 's example is inspiring. He put a series of questions on this section. When you click on it, the answer is immediately displayed. Note that all the questions make sense. Maybe they put the repetitive questions they received in their emails there.

As for PayPal, they have categorized their questions so that their customers don't get lost!

9. Resources

Sometimes, simple statistics are enough to convince. Seeing something concrete can indeed change everything. Usually they are used to support arguments. I take the example of Lattice, who put in the social evidence section, the number of people who have already used their service. This shows that their solution works! It also reassures visitors, and above all, it shows that the company has a certain expertise.

10. Footer

Finally, we come to the last element: the footballer. Avoid the mistake of designing this game in haste. On the contrary, this step deserves our full attention. As it is the last section seen by the visitor, it must inspire their confidence and encourage them to take action (that of buying the products or using the services).

Not only should you focus on its design, but also make sure that all the necessary information is there: terms and conditions, useful links and general conditions. Just knowing that these pages exist on a site helps people to trust it. Some of them even take the trouble to check the information on them.

Remember: if you have a site that targets different people in different languages, the language selector is essential. I have already shown you how to design a multilingual site on Webflow, using Weglot.

Other useful tips

Suppose you have followed all the advice I explained earlier to the letter, but so far you feel that nothing is going right. Maybe you've neglected other things, like the content, the speed of the site...

Copywriting

Now that the design is coming to an end, only the text content remains. In the training I also talk about the fact that Design and Copywriting have to go hand in hand. Some call in professionals, others take care of it themselves. Whatever you choose, it is essential that you know the basics of good copywriting:

  • A simple message: you don't need to use technical jargon that only a handful of people know. Short sentences with simple vocabulary can do the trick.
  • Focus on the target, not the products or services. For example, what benefits do they offer? How will they help readers? etc.

Remember: the goal is to communicate with readers , not to provide them with a long pad of text or fill in a web page.

Site speed

Studies show that after 3 seconds, if the page of a website is not yet displayed, 53% of users (on mobile phones in particular) leave in search of another site. These sites therefore have a very high bounce rate (which is very bad in terms of natural referencing).

How can we remedy this? The first solution is to opt for a fast hosting for the site. Fortunately for those who use Webflow, it is the case! Then, you have to make sure that all the images on the site (and not only on the sales page) are compressed. You can do this using free online tools or even Photoshop.

When you've finished all this, it's finally time to check the speed of the site on an online simulator. The most severe, but the reference in the field, is indeed on the PageSpeed insights test proposed by Google.

Conclusion

A sales page can therefore achieve a specific goal, whether it is to convert a customer, enhance the image of its brand or create a community. To this end, ready-made sales page templates are not necessarily suitable for all websites. It would be a waste of time and money. To avoid this (for you and your customers), I advise you to opt for custom-made sales pages! Moreover, after reading this guide, you are certainly more than competent in the creation of effective sales pages.

Comments

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training