10 Best Landing Page Examples to Learn From
After you’ve set up your business and have successfully launched your website, it’s time to start capturing some leads. So, what’s the most productive way to gain valuable information or engagement from your site visitors? Landing pages (LPs). Why? Because they are easy to create, affordable, and extremely effective.
Unlike a traditional website, where visitors are encouraged to browse through multiple pages and categories, a landing page is a one-page website. The reason for that is very simple: A landing page serves one purpose, and one purpose only. It should have one clear message, supported by a descriptive headline, a few engaging visuals and one captivating CTA (Call-to-Action). Be it to sell a product, capture new email subscribers or get registrations to an event, when done correctly, this powerful marketing tool can drive conversion for any purpose you may need (For more information, check out this guide on how to create a powerful landing page). Marketers and companies promote their landing pages through paid campaigns on Google, Facebook and other types of referral traffic. Think of this page as a place where potential clients ‘land’ once they have clicked on your Google Ads link - unlike a standard website, where most of your visitors will come from organic search.
Due to the diversity of industries that use landing pages, not to mention the vast amount of purposes they serve, there isn’t a magic formula that is guaranteed to work for everyone (unfortunately). Because of this, it’s best to turn to existing examples to learn and understand what essential ingredients are needed in order to create successful LPs. Here are 10 examples of landing pages that were done right:
10 of the best landing page examples From eCommerce to hospitality, from web design to online marketing, let’s go over some of the best landing page examples out there. We’ll explain why each page is effective and what you can learn and implement when creating your own. 01. Wix.com We’ll start off with something a little familiar. If you don’t know by now, Wix is the preferred website builder of over 150 million users in the world, from businesses to bloggers, from artists to online shops. Wix makes it possible for everyone to get online with a stunning, professional and functional website - all of this, for free. Regardless of your experience, you’ll be able to find the tools and solutions you need in order to create the website of your dreams. This landing page is one of many used by Wix to draw in potential clients who are looking to start their online journey. The first fold includes all the essential elements a landing page should encompass: the Wix logo, a straightforward and descriptive headline, one consistent message, engaging and appropriate visuals, and a prominent CTA. 📷 Let’s take an in depth look into some of these elements. What you can learn from Wix’s landing page: A prominent CTA: The CTA should be the hero of your landing page. Don’t be afraid to be direct with the wording and bold with the colors. ‘Start Now’ is clear and conveys a slight emotion of urgency, while the purple color pops against the light blue background. Here are a few more tips for writing your own CTAs: Keep it short: two to four words.Use action oriented words.Incorporate just a hint of persuasion and urgency. Use language that matches your brand. Be as direct as possible: Users should know exactly what to expect after they have clicked your CTA. Engaging visuals: Wix has beautified their landing page with captivating and evocative images. There’s a full screen image that it merged with the picture of a web browser. Here, we see a pair of hikers looking into the distance towards their goal of either climbing a mountain or perhaps creating a website. The image(s) you choose should effectively and quickly show what purpose your product or service serves. Minimize the scroll: All of your poignant information should appear ‘above the fold’ (The part of the website that’s viewable on the screen before visitors have to scroll down). This content should greet your visitor from the second that they click on your link. In this example, the logo, headline, CTA and visuals are all available to the viewer ‘above the fold’. If your landing page requires more information, and therefore more space, you can use directional visual cues like arrows to invite them to scroll down. 02. Airbnb Since 2008, Airbnb has changed the way people travel. The online marketplace and hospitality service has only grown more and more, thanks to their affordable options. This is true for travelers looking for a safe and easy night’s stay no matter where they find themselves in the world (sans extravagant hotel prices). The company’s website has various sections pertaining to different users, whether they want to become a host, or book a stay. Here, the selected landing page is targeting businesses who want to use their services for when they need accommodation, co-working spaces or team building exercises while travelling. The first page is filled with a large video background showing various scenarios of colleagues travelling, working and mingling. A clear headline in stark white describes the notion that Airbnb wishes to portray. In order to get started, visitors simply have to input their email and press ‘Continue’. To maximize conversion opportunities, the same CTA repeats at the bottom of the page. If you scroll down, the page is filled with more scenario pictures and descriptions of all the various options like work-ready homes. These are also accompanied by tailored CTAs: ‘Explore work-ready homes’. In order to show a sense of credibility, there’s a dedicated testimonial section. 📷 What you can learn from Airbnb’s landing page: A video background: Video is an excellent (and captivating) tool to show the product or service that you are promoting. Since Airbnb has numerous options, locations and services, a video is a smart way to show it all off at once. It’s important that the visual language remains the same throughout your page. The company achieves this by using only video and images that complement each other in terms of light, atmosphere and visual language. Ensure your brand is present: This could be through your logo, slogan name or any other element that will help your audience to ‘recognize’ you - regardless of how they landed on your page. Don’t have a logo? You can easily create one with this online logo maker. Note the locations: Airbnb’s simple yet distinctive logo is placed in white over the video background and again towards the bottom of the page, in order to create a subtle consistency throughout the layout. 03. Uber Uber has really created a name for itself since the ridesharing service started out in 2009. Since then, the brand has exponentially expanded from peer-to-peer sharing to private rides, food delivery services, and even a bicycle-sharing system. A more recent chapter in their development is ‘Uber Central’. This solution gives businesses the ability to schedule pickups for their clients, guests or customers. These rides can be requested on the spot or scheduled ahead of time. All you need to arrange the ride is your guest’s name, their phone number and destination. Unlike you, as the user, your guest does not need the app in order to catch their ride. Although the landing page for Uber Central looks slightly different from a generic Uber page, it is still highly recognizable as part of the Uber brand. Elements of this can be seen in the interface of the phone. The first fold of the page includes the crux of what’s on offer as well as a ‘Get Started’ CTA. As you scroll, more information is revealed in greater detail. 📷
What you can learn from Uber’s landing page: Keep your text short: Your visitors are flooded with information. This is why most Internet browsers have fallen into a habit of skim reading. In order to combat this, keep your text concise and sweet, just like Uber did. While they present a lot of information, it’s spaced out, sentences are kept succinct (one to two lines each), and because ‘an image speaks a thousand words’, small icons are used to reinforce the messages. Follow the ‘F pattern’: Another method used to catch those skim readers is something labelled the ‘F pattern’. The key here is to grab viewers’ attention to areas where their eyes naturally gravitate towards. This was developed due to the extensive research in eye-tracking (long before the Internet even existed). Here’s how it works: Imagine someone mapped out the letter ‘F’ on your landing page. Whatever areas are included along its lines are the places where you will want to insert all of the most important information and phrases in your writing. The horizontal lines of the F-Pattern are areas where you can place headers that quickly explain to the reader what they can expect to find on your page. Uber achieves this by placing ‘Uber for Business’ in the top left corner. After that, your eye is drawn to the next chunk of text starting on the left: ‘Get your customers where they need to go - with Uber Central’. The vertical line: After scanning across the top horizontal section of your page, a reader will naturally gravitate vertically downwards, staying on the left-hand side. Your job will be to fill this space with interesting features to jump off the page. This encourages readers to break with their instinctive scanning pace and actually follow the remainder of the sentence. It’s best to use bulleted lists, quote pulls or featured images in order to break up your content a bit. Uber follows this by placing their blue CTA which pops against the yellow background on the left-hand side. As you scroll, keeping to the left, you’ll see more bold text, promises, images, icons and a signup form.
It’s important to note that while this specific LP follows an ‘F-pattern’, most landing pages follow a ‘Z-pattern’. This is due to the fact that LPs are usually low on text and high on elements like buttons, forms and short explanations. Here’s how to formulate a landing page using a ‘Z-pattern’: The idea is that someone could roughly draw the letter ‘Z’ onto your page, starting from the upper left-hand corner and ending at the bottom right-hand corner, and hit every stage of the flow you’ve created for your web visitors. The top of your ‘Z’ (the left hand corner) is where your readers eyes will naturally gravitate towards, making it the perfect place to add your logo. The diagonal part (the angled line) that runs across the page from the top right hand corner to the bottom left-hand corner is meant to swiftly carry visitors from the top panel to the next section you want them to focus on. Whatever you place here should immediately grab attention. In the case of your landing page, this is where you could include your offer, copy, images, video or form. Moving from there to the tail end of the letter this is your spot to grab those visitors that you have managed to hook. Finish it off with a compelling CTA. This can be a request to sign up to a newsletter, request a demo, buy your product or book an appointment. 04. Blue Apron If you’re anything like me, I love to cook but hate the idea of going to the grocery store and having to plan out what ingredients I need to bring it all together. Enter: Blue Apron. This home delivery service enables you to select a weekly menu. Then, a delivery of fresh ingredients and recipes is dropped off straight to your door. All you have to do is assemble and voilà! This landing page is targeted to first time users of Blue Apron as they aim to hook in new leads with an appealing introductory offer. Their logo, headline and CTA can be found front and center on the first fold. Plus, all their information is surrounded by delicious looking, high quality images. As you explore further, an explanation of how their service works is shown through a timeline of images and text. That’s followed by all the reasons why you should try Blue Apron and customer reviews - all very convincing. It’s important to note that they have kept their CTA consistent throughout their page. It appears several times, ensuring that when a visitor is convinced and has made the decision to claim their offer, they won’t need to scroll too much to click on that CTA. 📷 What you can learn from Blue Apron’s landing page: Present an enticing offer: Blue Apron presents an offer most people looking for an easy solution to cooking can’t resist. After they’ve given you all the reasons why you need to try their service, Blue Apron follows it up with a $60 off deal. Below the offer is a small line (or slight nudge) explaining that the deal won’t last long. The ‘Don’t miss out’ line plays into the feeling of FOMO (fear of missing out) which is effective and not too pushy or salesy. Keep your messaging clear: Your landing page has to hook visitors within a couple of seconds. In order to make sure those browsers stick around to eventually convert, your message has to be crystal clear. Blue Apron has mastered the task of creating text that is simple but not simplified. Their text is friendly, understandable and easily skimmable - perfect for the average Internet browser of 2019. 05. Hootsuite There’s been a steady rise of the importance of a social media presence for businesses of all types and sizes. Due to this, many social media management tools have become integral parts of marketing strategies. Hootsuite enables you to manage and schedule all of your social media content in one place. Their landing page playfully shows (through the laptop interface) and describes (with the header) exactly what they offer. Much like social media, the vibe of this page is fun, exciting and lively. As you discover more of the page, they include trusted users as a way to build credibility with new users. Each fold of the page is used to explain and detail the multitude of features available. 📷 What you can learn from Hootsuite’s landing page: Emphasize your header: Your header is by far the most important element of your landing page (alongside your CTA). It’s the first thing visitors will see and it may be the determining factor of whether they decide to stay or leave. Hootsuite hits the nail on the head with this one. It’s clear, to the point, bold and users immediately understand what it is they are offering and how they can benefit from it. For optimal impact, we recommend keeping your header to 11 words or less. Repeat your CTA: Since your CTA is the gateway to converting clients, make sure it’s available to them throughout your page. Hootsuite does just this by placing their CTA in their frozen menu, the first fold, in the package picker and again at the bottom of the page. 06. LinkedIn Here’s a company that needs very little introduction. LinkedIn is the social media platform specifically tailored for professionals and businesses to network. Users can showcase their business skills, accomplishments, launches, employees and so much more. Since it’s a platform with many users and activity, it’s also become a spot where advertising space has proven to be valuable and successful. This landing page is targeted at businesses looking to reach new clients by advertising on LinkedIn. The first fold includes the LinkedIn logo we all know but with a more tailored name, ‘Marketing Solutions’, an uncomplicated headline and not one, but two CTAs. Then, the landing page goes straight into why you need to use LinkedIn ads with some impressive stats. They have opted for a frozen menu (the menu remains in the same place as you scroll) which includes their logo and CTA. This way, no matter where you are on their page, the call-to-action is accessible. 📷 What you can learn from LinkedIn’s landing page: Keep it focused: The more to the point your page is, the better. Your landing page should have one single purpose. Here, the message is to promote LinkedIn Ads. Apply the same principle for your own landing pages: Define what your goal is and keep it consistent throughout. Get rid of visual clutter and keep the focus on your main prize: that coveted CTA (shown here with the use of a frozen menu). Give order to your information: LinkedIn has successfully planned the thought process behind a visitor looking to start advertising. First, they start with a headline that describes what you can achieve by getting started. Then, as if preempting that a user may have some questions, they present a list of reasons why you should choose them. Following this, they go into more detail about their features and budget options using short text and images of the actual interface. And since other people’s opinions matter more, they also include a slideshow of testimonials from some major brands that have found success in their service. After all that valuable and convincing content, they end off their landing page with a strip in their signature blue color with a repeated CTA to seal the deal. 07. TrueCar Buying a new (or even used) car is a big decision to commit to. The main factor that usually seals the deal? The price. TrueCar is a digital automotive marketplace that shows consumers what others have paid for the car they want. Making the whole buying experience as transparent as possible. Their landing page is simple and clean. It segments shoppers into those looking to buy new or used cars while still promising that everyone deserves the transparency that comes with purchasing a car. A frozen menu ensures that their logo and main category choice follows browsers as they scroll. In order to show their own transparency they have also included a list of their own trusted partners. 📷 What you can learn from TrueCar’s landing page: Utilize white space: Regardless of the use of your landing page is, it needs to be aesthetically pleasing. White space, a design term, refers to the amount of space between your various elements. It’s crucial that you implement this to allow your content to ‘breath’ as well as not to overwhelm your visitors. TrueCar achieves this by not overcrowding their page with too many elements. Optimize for mobile: Your landing page should be optimized for mobile - there’s just no two ways about it. In fact, the mobile version of your landing page may even garner more traffic than your desktop version considering the amount of people who use mobile devices (52.2% of all website traffic worldwide was generated through mobile phones in 2018). This LP is perfectly optimized for mobile, with fixed CTAs that follow the reader as they navigate through the site. 08. AllModern AllModern is committed to making contemporary furniture that’s accessible to everyone and for any range of budget. On their website, you’ll find pieces for sale that encapsulate the latest in interior design trends. Their big promise? After you’ve ordered your furniture online, there’s no wait. Their fast and reliable shipping program ensures that your delivery finds its way straight to your door. Their landing page gets straight to the point by placing an offer around four images showing different interior spaces. These images give visitors an idea of what their own homes could look like if they buy from AllModern. While there’s not too much information, the message is clear - to make your interior design dreams come true and receive 60% off, just add your email here. 📷 What you can learn from AllModern’s landing page: Minimize entry fields in sign-up forms: There is nothing more frustrating to visitors than trying to fill out a 10-field form. It’s just irritating. So, like AllModern has done, keep all entry fields to a minimum: name, number, email address (or in this case just an email). Your forms should be as effortless as possible to fill out. Only ask for essential information. For more on this, you can read up about the tips and tricks to create online forms. Include a privacy policy: If your form asks for sensitive information, you should reassure your visitors that their information is safe with a privacy policy. That way, they will be more inclined to oblige. Here, AllModern gives visitors the reassurance that they can update their preferences at any time as well as read through their policy. 09. Vimeo for business Vimeo is a video sharing platform created by a group of filmmakers specifically catering to a more professional audience. The company provides creators with tools and technology to host, distribute and monetize videos. They offer various plans according to different functions users may need ranging from basic to premium plans. This landing page is specifically targeted towards users who need video solutions for their business. It’s no surprise that each function is shown through the use of video, alongside a short description and testimonial for each. The headline is bold and clear, followed by a straightforward CTA: ‘Get Vimeo Business’. 📷 What you can learn from Vimeo’s landing page: Know your audience: Since landing pages are not a one-size-fits-all operation, it’s important to understand your audience when writing text. The tone and messaging of the text throughout this page is heavily tailored to big companies. This is seen through the headline: ‘More engagement, more collaboration, more growth for your business’, as well as the section that shows which other creative tools you can use with Vimeo. They’ve understood what businesses want to achieve and have clearly laid it out. Eliminate all other navigation: Your landing page should have a clear objection: To convert visitors into leads. Therefore, remove all links that could potentially deter your visitors. Vimeo only includes a consistent CTA throughout the page to reiterate the same message: ‘Get Vimeo Business’. 10. Mazda The well-established car company known worldwide delivers a sleek and captivating landing page. The page starts with a black strip that displays their logo and a menu to navigate through their long form landing page. After that, a full length slider shows off high quality images of their latest releases. As you continue to scroll, more information about the specifics of each car is revealed. A captivating video of a car being painted is shown in a loop - drawing in visitors over and over again. The black, white and silver color scheme is enticing and luxurious. 📷 What you can learn from Mazda’s landing page: Create an engaging experience: Mazda uses the top slideshow as kind of a virtual showcase of their cars. Since it’s constantly changing, it immediately grabs attention. The same can be said for the subtle animation that appears when you hover over the three different images of the cars in the third fold. Finally, the video leaves visitors enthralled. Add in social sharing: When you include social sharing buttons on your landing page, your visitors can help you further spread your message on their own profiles. On top of that, you should also include links to your business’s social media profiles. Mazda uses a comprehensive footer to include essential information as well as their social media profiles linked through icons. Summary: The best practices for creating effective landing pages Let’s sum things up. From these 10 examples of landing pages, we’ve learned important lessons on how to build these web design items. It is imperative to keep these best practices in mind when you create your own landing page - so here is the full list: 1. Give your CTA the spotlight.2. Use engaging visuals. 3. Minimize the scroll.4. Incorporate video. 5. Ensure your brand is present.6. Keep your text short.7. Follow an 'F Pattern' or 'Z pattern'.8. Present an enticing offer.9. Keep your messaging clear. 10. Emphasize your header. 11. Repeat your CTA. 12. Keep your page focused. 13. Give order to your information.14. Know your audience. 15. Eliminate all other navigation.16. Minimize entry fields in sign-up forms.17. Include a privacy policy.18. Utilize white space. 19. Create an engaging experience. 20. Add in social sharing. 21. Make sure your page is mobile-friendly. Test your landing pages for better conversions One final tip: Once you’ve mastered the recipe of landing page creation, don’t stop just yet. There’s always room for improvement that could bring you some extra leads or clients. When it comes to landing pages, there isn’t a magic formula that is guaranteed to work for everyone. It takes time to perfect the art and find what resonates with your audience. There are many factors that could influence the success of your page (timing, exposure, text, images). A good way to understand what’s working and what’s not is to A/B test. This refers to the method of comparing two versions of the same piece of content, with one item changed in order to create the variation. Note: It’s important that you only change one element to really understand what is causing the success or detriment of your page. Options for elements that you can tweak include: Shorter or longer text More direct/urgent messaging The colors of your background or text The images you’ve usedAn image vs. a video The size of your CTA The placement of your CTAThe general layout of your page The offer
Ready to take your business online?
Create a stunning website with INTELLIGENT today!
*Source https://www.wix.com/blog/
1 view
