Landing page samples. A clear call to action
Hello, readers of the financial magazine “RichPro.ru”! Today we’ll talk about landing, what it is, what advantages and disadvantages it has, etc.
Landing page (“landing page” or landing page) is a fairly well-known term that refers to a web page with a specific specification. However, not everyone knows the essence of such pages.
So, what is a landing page? A brief definition of “landing page” can be stated as follows: it is an Internet page on a domain, subdomain in html/css (or other) format.
People who sell various products on the Internet are interested in landing pages.
Such a “landing page” will not contain annoying advertising, useless texts, flashing banners or pop-up menus.
From this article you will learn:
- What is a landing page and how to use it;
- What are the advantages of a landing page compared to a regular website;
- How to create a landing page yourself for free and promote it online;
- Which landing page designers are the best and where to download ready-made templates;
- How to make money on landing pages and what taxes you need to pay.
We wish you a productive study of materials!
What is Landing (landing page), what types it comes in, how to create it yourself and other information, read further in the article
1. What is a landing page (or landing page) - its features and advantages 📌
A landing page is a one-page website on the Internet that can have several names:
- landing page or landing page;
- "lendos";
- customer capture page.
The main task of a landing page is to encourage site visitors to take some kind of active action - call, leave a request, purchase a product, subscribe to the newsletter etc.
That is, a landing page is an Internet marketing tool designed to increase sales of various goods or services on the Internet.
1.1. Landing page development historyLanding page was invented in the USA about 10 years ago by Internet marketers.
At a certain point, they began to realize that competition in the market was constantly increasing. Websites and online stores are improving and visitors cannot always understand what is the advantage of one company over another.
Serious competition in the industry was the primary reason for the creation of a landing page.
An example of an ideal selling landing page
1.2. Goals and objectives of the landing pageThe purpose of the landing page is to obtain contacts of possible buyers who have visited this one-page site.
Note! The sale of a product/service is carried out at the next stage, after the visitor’s targeted action, that is, submitting an application for consultation.
Internet marketing experts say that a high-quality landing page can increase website conversion several times. At correct use Landing page sales conversion can increase by 8-35%.
1.3. Sales funnel and conversionAny website owner is constantly looking for ways to increase its popularity and maximize sales.
The main criteria by which the effectiveness of an Internet resource is determined are the “sales funnel” and “site conversion”. By understanding the essence of these concepts, you can find out the level of your sales. Let's take a closer look at these definitions.
Conversion and sales funnel are the main indicators of landing page effectiveness
1) Website conversionWebsite conversion is considered the most significant indicator of the effectiveness of an Internet resource.
The conversion value displays the number of page visitors who became buyers of your products/services.
In other words, website conversion is a kind of “marker” that marks the fulfillment of your requirements, namely:
- purchase of goods;
- subscription to the newsletter;
- downloading specific files;
- registration;
- other actions.
For example, for tourism, 8-13% is considered a completely normal level. But a website that sells luxury fur coats has a conversion rate of up to 10%, and this is considered an excellent indicator. (The fact is that clients here have higher purchasing power).
Important! Typically, the conversion rate ranges from 2-3% to 20-40%. If the conversion is, for example, 20%, it means that out of one hundred target visitors who visited the site, twenty completed the target action.
Website conversion needs to be constantly improved. To do this, you need to gain the trust of site users. Your website should be user-friendly with easily accessible information.
It is worth noting that the conversion rate of a landing page is always higher than that of a regular website.
2) Sales funnelA sales funnel can show the number of visitors to your site who did not complete the actions you require. It is a graph in the form of an inverted pyramid. Such a funnel has the following representation:
- number of unique visitors;
- the number of unique visitors who performed the actions you require;
- the number of customers who paid for the product or service.
When used correctly, A sales funnel can become an effective assistant in planning the optimal amount of advertising material and the number of contacts at each sales stage etc.
Based on the indicators of the sales funnel, one can draw conclusions regarding the quality of management and the need to adjust work at a certain stage of sales.
This analytical tool provides an understanding of how a potential client makes a decision to purchase the product or service you offer. What pushes him to such an action.
By analyzing these steps, you will be able to exert control over customer behavior through a properly designed landing page.
The value of a sales funnel lies in segmenting a huge mass of buyers by behavior and interests.
Example - there are two people who want to purchase a vehicle.
One has not yet decided what exactly he wants to buy - an airplane or a car. The second one, on the contrary, already clearly knows that he needs a car. These people are completely different - the first, after much thought, will buy a bicycle, but the second is ready to go buy a car even tomorrow.
As a rule, the entire path from interest in your product to the anxious moment of purchasing it is divided into four stages:
- Stage 1. Awareness;
- Stage 2. Interest;
- Stage 3. Decision;
- Stage 4. Action.
By superimposing these stages on the number of people who are at each stage, the result will actually be a funnel that tapers towards the bottom.
1) At the top of it are people who realized that they were interested in a certain product. At this stage, a person tries to find general information about the product you like, perhaps its analogues, minimum characteristics.
3) In case of making a decision to purchase a product, the client moves to the next stage, in which the key role is given to the clarity and precision of the content. It is he who can motivate a person to make a purchase or become an obstacle to such a decision.
4) At the very bottom of the funnel are people who have moved from the status of site visitors to the status of buyers. If the sales funnel is organized correctly, the client will definitely buy the product on the same site.
The goal of any high-quality landing page is to invisible promote the visitor through all stages of the sales funnel from awareness to action. The best tools There will be educational articles, step-by-step guides, infographics.
Important! Information about the product must be specialized. Its goal is to increase the potential client’s motivation to make a purchase.
Online sales are growing regularly. Along with this, the sales funnel will also change. Perhaps over time it will become more complex. Therefore, it is very important to understand it now.
1.4. Capture Page PerformanceThe greatest effectiveness of a landing page can only be achieved with the participation of a full-fledged team of professionals in the development.
To create a high-quality landing page (before launching it on the Internet), you will need the help of the following specialists.
Only coordinated work of all specialists can create truly high-quality landing page.
1.5. Why create a one-page website - 3 main advantages of landing pageLet's look at the main advantages of a landing page compared to other sites and online stores. (Read also our article - where you will find step-by-step instructions on creating and launching a successful IM).
So, let's start in order:
Rules and tips for creating a landing page
2. 13 basic rules for creating your own Landing Page 📎There are landing pages with a conversion rate of 40-60%. Such indicators mean that every second visitor to the site left their data or filled out an application to purchase a product. Two factors contributed to this success:
Couldn't get your visitor to click on the “buy” button?
To get more clients, you must adhere to the following principles:
- the user's attention should be focused on one product;
- tell the client about the benefits of only this specific program;
- set a discount price for one product;
- interest the visitor with a newsletter on one topic.
When several products are placed on one screen, the customer’s attention will be scattered. He glances at the entire page. Perhaps he will show interest in some funny picture or a flashing discount. However, in the end the tab will still be closed. Not even a minute will pass before a visitor will forget about your site.
If a visitor comes to a website and sees one product that he can focus his attention on, his level of interest will increase. And the likelihood that he will take the action you need will also become very high.
Rule #2. The call to action must be clearWhen visiting a page, the first thing a user does is ask himself where he ended up and why.
Important! If in the first seconds of his stay on the page he cannot find answers, the potential client is guaranteed to be lost. It is necessary to provide the visitor with clear and understandable information about your product.
Statistics show that about 80% of potential buyers leave the site in the first fifteen seconds. The main reasons for this fact are:
- Lack of motivation to action. That is, the visitor did not find (did not understand) what to do on the site. The person is not offered to order, subscribe, learn more, etc. A high-quality landing page should contain specific calls to action for someone. If the page does not have a “big red button” with the word “buy” written on it, such a landing page will not bring the desired result;
- The page is very busy, which confuses the visitor. A person cannot understand what exactly is being offered to him. A lot of scribbled details, a lot of unnecessary animation, etc., only cause irritation for users. Each such element tries to attract a person’s attention. As a result, the main call to purchase or subscribe loses its significance.
These tips will help increase sales of your product.
However, you should not be too zealous in your desire to get a buyer. The presence of many advertising gimmicks and an intrusive offer to buy a product will only cause negativity in the visitor.
Rule #3. Make selling and catchy headlinesA good landing page has one promotional offer that fits easily into the headline.
Examples of selling headlines: If your product is fluorescent lamps? Here's the title - “Save energy 4 times more efficiently”. Need to invite fatties to the fitness center? Write their dream in the title - “Who wants a TV star figure?”.
When making headers, you must use h1 and h2 tags. If possible, include key phrases in the headings - these are words or phrases by which customers will find your site through a search engine.
Rule #4. Use intelligently written sales textThe text is the first priority.
Important! You should order a landing page design only after a final, high-quality text has been compiled.
To write a first-class text you need:
Nowadays, Internet marketing gurus can hear critical statements about large landing pages. However, if you carefully understand this situation, it becomes clear that the bulk of criticism falls on boring and uninformative texts. But those who like to criticize somehow forget about good, long landing pages.
There is no need to be afraid of large texts if:
This rule is one of the most significant for the promotion and sale of services or goods.
When formatting the text, you should adhere to the following recommendations:
Three exclamation points at the end are one of the signs of aggressive advertising. In addition to this, there is also “CAPS LOCK”.
Note! For most people, words or phrases with all capital letters and exclamation marks are suspicious. They develop a strong belief that they are being deceived.
If a copywriter, content manager or editor uses such things, then this indicates their low qualifications.
It is also not recommended to include in the text hackneyed phrases such as “the lowest prices in the region”, “flexible system of discounts”, “individual approach”, etc. Information that is not supported by facts, figures, comparisons is simply useless. Therefore, it must be removed from the text without any regret.
Rule #7. Competent landing structureIt is necessary to understand how the user's gaze will move.
If all the elements of the page are placed in their place, a person will be able to easily perceive the information. And if the visitor understands the product you offer, the likelihood that he will purchase it will increase significantly.
Visual navigation is also needed - these are thematic pictures, icons and arrows. You can attract a person’s attention with contrasting colors - highlight the headings, make the button red, orange or yellow.
Rule #8. The landing page must be relevant - this is very important!The concept of relevance refers to correspondence.
A relevant landing page is a web page that meets the visitor’s expectations.
Landing should be developed not only for each marketing company, but for each traffic source. For example, if visitors come to your page from any social network, this information should be displayed on the site.
Rule #9. You need to be prepared for objectionsAbout 9 out of 10 customers think about their decision before making a purchase. People are afraid of scammers and fear for their own safety.
There are many customers who want to hide their purchase from others. Some people have fears of losing their money or disbelief in such a low cost of the goods.
Since you do not have the opportunity to personally communicate and dispel all the user’s fears, you need to take care in advance of reasoned answers to all sorts of objections. They should be inserted into the text.
- guarantee return on investment, for example, within 1-2 weeks;
- provide the opportunity to try the product for free, also within a 2-week period. Emphasize that such a proposal will help a person make up his mind.
These marketing moves have always been and will be relevant when developing landing pages.
Rule #10. Use the principle of scarcity and the urgency effectYou need to be very careful with deficits, since not everyone falls for such a trick.
Important! Today no one pays attention to the countdown timer. Moreover, if it is regularly updated after the page is reloaded.
It is necessary to use other methods. For example, display information about the quantity of remaining goods and regularly update these numbers. The visitor should see that the product is quickly sold out.
Example: You need to try to make sure that the buyer’s algorithm of actions or thoughts is as follows: “Yesterday there were 100 bread machines in stock with a 50% discount, this morning there are already 33, and by lunchtime there are only 5 left. We need to buy it urgently while the goods are still available!”
Rule #11. Convince the visitor of your reliabilityTrust elements are best placed near calls to action.
- Using social network buttons - creating a group (page), a list of subscribers in a VK group, a tweet feed, likes on Facebook. (and we already wrote about promoting it in our last issue")
- Publication of reviews along with links to companies or people who left them.
- Display of certificates, awards. If necessary, all documents should be opened at full size and easy to read.
As a rule, the form for entering personal data does not cause irritation for most visitors. If necessary, people from the target audience are always ready to write name, occupation, email address.
Difficulties usually arise in the next stages of registration, when the visitor is asked to provide details of his life. It is better to ask such questions after the user has confirmed registration.
An equally common problem is a complex captcha!
Captcha is a pop-up form for entering a set of specific characters (numbers and letters). By filling out the captcha, the visitor confirms that he is not a robot.
To decipher the characters and write them into correct sequence sometimes it takes a lot of time. This is the reason that approximately 30-40% of people simply close the tab and forget about your offer.
No need to use captcha. Let your competitors have it.
Rule #13. Simplicity and accessibility of perceptionThis rule summarizes the essence of all previous rules.
Important! You should order a simple landing page.
She must be:
- without unnecessary graphics and text;
- with a proposal to perform only one action - buy one product, subscribe to one newsletter, etc.;
- spacious and not too busy.
Ideal Landing Page is a page that can be obtained through testing, adjustments and performance measurements.
Developing a landing page yourself is not such a difficult task. With knowledge and patience, anyone can create a landing page. However, in such a case there are both positive (+) and negative (-) aspects.
Let's consider all the advantages and disadvantages of creating a landing page yourself:
Pros (+)
Minuses (-)
Whether you order a landing page from a special studio or work on it yourself is up to you.
However, it is worth recalling that creating a page with your own hands does not involve any expenses. Therefore, it’s still worth trying your hand even if at the same time you placed an order for a landing page in the studio.
If you create a high-quality landing page, you can further develop the acquired skills and make the development of landing pages your own. The demand for these services increases every year.
Note! If similar work seems overwhelming to you, since it requires perseverance and takes a lot of time, then it is better not to spare money and order the creation of a landing page by professionals. And while they are working on your order, you will have time to solve the main tasks of your business.
Developing a landing page yourself is justified only if it is your first and you want to save money. After all, you cannot be sure that a product or service promoted through this site will be in great demand.
However, if sales have already started, the first orders have appeared and you are confident that your product will become in demand, then it’s time to turn to specialists. They will help make your landing page better and more effective, and will also significantly increase your conversion rate.
By paying 5-15 thousand rubles for services, your sales can increase by 2-3 units per day. Over the course of a year, you will accumulate quite a decent amount of money, which will significantly exceed the amount spent on “upgrading” your site.
Important! An increase in conversion by just 0.5% can bring millions in profits over the course of a year.
Of course, you can create a better quality landing page yourself than a single freelancer can do. Read about it in the article at the link.
Ordering from a studio will not be cheap, but you will save your time, and the money spent will subsequently be returned many times over in the form of profit.
The great popularity of landing pages has led to the emergence of many designers. Let's look at some of the most popular Russian-language designers.
Landing page builder No. 1. "LPgenerator" (lpgenerator.ru)"Lpgenerator" is an excellent website builder with which you can create landing station from scratch. The service can offer more than 300 templates, a large number of tools - lead management, A/B testing and many other goodies.
Simple tariff price— 2156 rubles per month. This tariff assumes a limit on the number of visitors - 9 thousand per month.
Eat tariff without restrictions. Its cost is 4,000 rubles per month.
The prices are a bit expensive, but many say that Lpgenerator is worth it.
Landing page builder No. 2. Flexbe (flexbe.com)The Flexbe website builder is considered one of the most reliable and simple landing page builders. Eat free version, which is valid for 14 days. This time is quite enough to evaluate the convenience of the designer and its suitability for your business.
Most affordable tariff — 750 rubles per month. The tariff includes: domain - 1, pages - 10, SMS notifications - 250, technical support, your own mailbox, free domain.RU, etc.
Most expensive tariff costs 3,000 rubles per month. It includes an unlimited number of domains and pages, 1000 SMS notifications, etc.
The disadvantages (-) include limitations in creating a landing page. It is not possible to get something cool because the set of tools of this website builder is not large.
The pluses (+) include the speed of creating a landing page. In ten minutes you get a completely decent one-page website that looks good on mobile phone screens.
Landing page builder No. 3. "LPTrend" (lptrend.com)“LPTrend” is a clear landing page designer that is suitable for beginners. The service can offer 61 ready-made template with layout restrictions.
Keep in mind! Creating a landing page from scratch is not provided here. There is no integration with other services.
From functionality There is A/B testing, tab " useful services» , which has links to various tools.
The trial period is 15 days. Sufficient time to test the capabilities of the service.
Cheapest rate— 500 rubles per month. It is possible to generate one landing page.
Behind the most expensive tariff you will have to shell out 2000 rubles a month.
Subscribe to premium tariff makes it possible to create an unlimited number of landing pages.
Other online landing page buildersThere are a couple more website builders that are worth paying attention to:
Basium is a pretty good website builder. The service offers almost 400 design variations, 53 blocks and 27 different settings, able to fully satisfy all needs. Among the positive aspects, one can especially highlight the possibility of paying for services as you use them. For this service you will have to pay 35 rubles per day.
"Tilda" - offers a modular system. The cheapest tariff costs 500 rubles, subject to payment for the entire year. If payment is made monthly, then the cost of the tariff will be 750 rubles.
5. How to create a landing page for free 💸Let's look at popular services where you can also create a landing page for free:
- landingi.ru;
- www.setup.ru;
- lpgenerator.ru;
- ru.wix.com;
- Creation of landing pages (one-page websites) to order for a small amount on freelance sites (from 1000 rubles and above).
Let's look at a few examples of selling landing pages. Keep in mind that landing pages are constantly changing their relevance. If “today” certain templates had a high conversion, then it is not a fact that these templates will work with the same conversion “tomorrow”.
Therefore, we recommend not to copy, but to take it as an example and create your own landing pages with your own unique pictures and texts (content that others do not have), or order them from specialists who know the relevance of landing pages.
The landing page structure consists of several elements:
- Logo, phone numbers, data capture form, that is, call back.
- A proposal or offer that is displayed as a relevant headline.
- List your benefits.
- Call to action (placed red button).
- Photos, drawings and other high-quality graphics.
- Information that helps increase confidence in the product - certificates, reviews, etc.
- Contact Information.
Each well-known platform, such as WordPress, Joomla, etc., has its own landing page templates. However, it is impossible to find high-quality and free landing pages for WordPress. A relatively good landing page starts from 15-25 dollars.
There are also templates that are not tied to any platform. They number in the hundreds of thousands. You can find many sites where you can download ready-made free landing page templates.
However, we can’t talk about a normal free landing page. Most of these proposals are just garbage. Decent options very little. You can try to find high-quality Landing Page templates on popular landing platforms (for example, lpgenerator, wix, etc.)
We have already discussed what a landing page is, why they are good and for what purpose. basic principles lean. But despite the fact that there are a number of rules and techniques that will ensure the success of your website, it is wrong to think that developing a landing page is a template job, and a well-functioning page can be made in 5 minutes, just know, insert pictures and change texts. Of course, this is a creative process, and imagination, supported by an understanding of the behavior of your target audience, is only encouraged. Below we will present ten examples of non-trivial landing pages, as well as pages that ensure high conversion.
1. Nest ThermostatA very interestingly designed landing page dedicated to the sale of a room thermostat. Despite the presence of all kinds of technical data and descriptions of convenient functionality, the landing page is focused on the visual component - several photographs of the interior, as well as a brilliantly conceived and executed animation in the middle of the page evoke the feeling that after purchasing this device, your home will be no worse, than in the pictures on the Internet. Thus, Land sells not a thermostat, but comfort in the home, which is the client’s ultimate need.
2. Boy-CoyThe website of a design studio, after which you are unlikely to even want to look for offers from competitors. A four-screen landing page can convince you to contact these guys, even if you don’t read any reviews or a list of companies with which the studio has collaborated. Most likely, you’ll just scroll through, admiring the parallax effect, and before you know it, you’ll start entering your data into a nice form. feedback.
http://boy-coy.com
Another example of a beautiful landing page with a parallax effect. A purely image page that does not force you to immediately make a purchase, but creates a positive image among the target audience. Please note that information about the quality of the product is presented in sufficient volume, but you can miss it while watching how beautifully the ice cubes float. However, the desired effect has already been achieved. This site is too beautiful to offer something of poor quality - this is the subconscious conclusion that every visitor to any tasteful site will have. 
http://www.valenkivodka.com
Truly interesting landing pages can attract the attention of even people far from the target audience. See the example of a store selling huge teddy bears. The site is literally filled with interesting ideas and seems to be conducting a dialogue with the visitor, which ultimately, with a high probability, means a purchase. 
http://medvedy.com
Beautiful landing page for a popular service for setting and achieving goals. First, go in and see how it works, and second, appreciate the design that represents movement towards the goal. Combined with the very competent filling of the blocks, it really motivates you to do everything that was planned, but put off on the back burner. 
https://smartprogress.do
As you know, a landing page should not overload the visitor, but immediately give him something to grab hold of and fill out an application. We won’t argue, but some products require careful selection, and you can’t get away with just one or two blocks. The landing page for this window manufacturer followed the program to the maximum and touched on details that we don’t even think about when choosing windows. And although it seems to us that there was an information overload in a couple of blocks, this page is still a good example of a large landing page. 
http://goodwin-nnov.ru/
Another landing page with high conversion. The principle of converting a visitor into a lead is used here similar to the previous example - a calculator. We propose to evaluate how many parameters can be entered to select a policy, and how tirelessly this is done. The same can be said about the rest of the content of the landing page - it is extremely simple and clear, and all the benefits that a car owner wants to receive by insuring his car are described.
http://prostokasko.rf
A good example of a selling landing page that ensures high conversion due to the fact that it clearly explains the benefits to a potential client, but also leaves intrigue and a desire to find out the details of the business plan that promises passive income. Our special praise goes to the designer. 
http://morewishes.ru
A good example of a landing page, where a relatively large amount of text (including the space it occupies on the main screen) does not create any difficulties for the visitor, but on the contrary, it looks organic and successfully describes all the advantages of the repair organization. Laptop repair services are urgent, so you should not give potential clients too much information: a few blocks are enough, but worked out as beautifully and informatively as possible, which inspires trust.
In this article we will look at 5 examples of the best landing pages taken from behance.net, recognized by world designers as the most popular website for web design, foreign customers for finding developers and the best for inspiration and drawing new ideas.
Below are the best landing pages that were selected directly by our web studio. We took the TOP works on the site and chose a landing page with the most effective selling structures, because it is the selling structure that is the main advantage of a landing page.
Ladies and Gentlemen! Meet the coolest and best selling landing pages of 2017-2018 according to the version of the popular site behance.net.
Examples of the best landing pageTo organize examples of the best landing pages, we decided to break them down into blocks specific to the sales page. We will look at the USP, description of the product, benefits and benefits, trust block and CTA using examples of selected landing pages. You will be able to see design and structure options, gaining valuable information and new ideas.
Unique trade offerThe first example of the USP of the best landing page of 2019 is a company selling chairs.
The first thing that catches your eye is the photograph of the product. A stylish chair really attracts attention, which is fueled by a unique selling proposition. Please note that the USP in this case is non-standard; there are no facts about the company or the benefits of the purchase. But at the same time a powerful selling text and high quality image They do their job - they increase the visitor’s interest, which is the principle of the selling structure. It’s worth saying right away that the very same advantage of the product is placed on the second and third slides of the first screen.
Each slide contains photographs of the product from different angles and a description of it. A very powerful move that motivates the reader to scroll down the page. See more examples of landing pages and get new ideas for your project.
The next example of the best, in our opinion, landing page is the landing page of a company selling honey
Juicy, bright, interesting. Very cool first screen design. At the same time, the unique selling proposition reveals the main advantage - the environmental friendliness of the product. The USP is written in a soft form, but at the same time inspires confidence.
The following example of the best landing page
The first screen combines a USP that provides value to a potential client, as well as a short list of short benefits. A very interesting photo was taken of a product that subconsciously makes you want to place an order. Which, in general, is what an effective landing page offers on the first screen.
The first screen with a USP contains text that arouses interest, 3 advantages of the manufacturer, a CTA with a button and a video that allows you to find out more information About company. The screen is decorated beautiful photo furnished interior, emphasizing the exclusivity of the product.
Another example of a cool landing page
One immediately notices the absolute unreadability of the text. Why the developers designed the text in white on a white background remains a mystery. But, we repeat, the best landing is the one that has a clearly developed selling structure, and this example of work is one of those. A stylish screen with a not very effective, barely visible USP. Unfortunately, the photograph of the company's services does not give an idea of its activities - a big mistake by the developers.
Want to know more about USP? Read the article with recommendations for creating a USP on the Impulse Design website.
Product DescriptionIn the first example, the visitor is given the opportunity to view product variations and select its type. The block is very convenient to use. All photographs from the catalog are placed in the form of sliders, there are buttons for choosing the color of the box and examples are given finished works. The visitor visually understands what is being offered to him. If he decides to order a product, the “Order” button will help him with this.
The following example of a product description of the best selling landing page contains large and bright photos and categories.
In addition, for the convenience of the visitor, a lead generation button is provided. She “kills” two birds with one stone. The visitor receives the information he is interested in, and the company receives the client.
The selling structure of the landing page should include user friendliness. Convenience in everything: making a decision and its implementation, viewing the product. In the case of the following example of product descriptions, ease of use is revealed by 100%.
Firstly, the types of products are presented, and secondly, under each type there is a lead-generating button. When you hover the mouse over the chair, the photo changes and the product is presented in a different position, which helps the user understand the principle of operation of the product and its appearance.
The following sales landing page contains a complete catalog of products provided by the company. A special plus - beautiful design and matching the colors to the general theme of the site.
Conciseness - best friend landing page. And the following example of the best landing page confirms this.
Stylish and modest, on a white background, the emphasis is on the photo and a small description of the service with a lead-generating button. The remaining services are made in the form of active links, when clicked on, other photographs with descriptions corresponding to the services are opened.
Benefits and advantages of a one-page websiteThe benefits and advantages of the company for the client are an effective motivation. Typically, benefits are placed at the beginning of the site to spark user interest, and benefits are placed towards the end, pushing the visitor to the target action. Both blocks should contain valuable information, answer questions, and suppress the fears of a potential client. Let's look at examples of cool landing pages.
Advantages
Both blocks reveal the values of the company and a specific product. The reader understands where the product can be used and its quality characteristics. As a supplement, shown competitive advantages the company itself.
The next landing page combines advantages and benefits. By reading and viewing the content, the user is convinced of the professionalism of the manufacturer, which suppresses his main fear - receiving a low-quality product. This trigger demonstrates the best example of a conversion landing page.
In the same block, a feature has been introduced that increases user confidence in the company - a video that will tell you more about the manufacturer.
The following landing page shows a similar combination of benefits and benefits.
In this case, fears are eliminated. The potential buyer knows that natural honey is a wild rarity. In the case of a one-page website, the naturalness of the product is confirmed with numbers. In addition, the user can obtain information about the product by clicking on a button and contacting company representatives.
Another block of advantages has a very stylish design and, in general, is quite interesting. The professionalism of the designer is visible, which definitely attracts attention.
It would seem that the advantages can be described in 4 words “Delivery throughout Russia,” but the graphics card adds uniqueness to the landing page. In addition, the map itself has a thematic focus, which makes the landing very cool.
TOP best landing pages contain interesting and effective solutions. The next landing has a small block of advantages, which is located immediately below the block with the USP. The benefits block is designed separately and answers the client’s questions about cost, and also increases desire through discounts.
And another selling landing page that reveals the company’s advantages and benefits for the client. The company's operating principle, which suppresses existing fears, is described as advantages.
Increased desire thanks to a small block of benefits
At the same time, the company demonstrates the benefits for the client not only by using high-quality products during the procedure, but also by hinting that cosmetics are on sale. This is what the button with CTA testifies to.
Trust block on landing pageThe trust block is not a mandatory requirement for a landing page, unlike, for example, a call-to-action block. However, it helps the user decide on the target action. After all, the landing page, based on its specifics, does not provide a large amount of informational text about the company. Therefore, it is better if the trust block is implemented in other ways. Let's see how the TOP landing pages dealt with this.
Option 1. Reviews
The review block on the website is very practical and convenient. A special plus - photo real people: not models, not pictures of people, frankly taken from the Internet.
Option 2. Video
Perhaps the video is one of the most effective ways influence a person. Video messages always increase trust due to direct contact with users who have already become clients and convey their emotions “live.”
Option 3. Photos
Very often, to increase trust, photographs of real specialists who work in the company are posted. In our case, it was decided to place real photos salon Looking at them, one gets the impression of elitism. And elite cannot be low-quality. Consequently, trust in the company increases.
The first landing page has a “juicy” CTA, designed in the same style as the website. The desire to place an order is enhanced by a discount.
The only negative is that the block is placed in the middle of the page. Ideally, there should have been another call at the very end; instead, small buttons were added that are not immediately obvious.
The following call to action contains not only a lead generation button, but also additional benefits for the client. A very thoughtful call.
Our review ends with another call to action, designed in rich colors that attract attention.
As you can see, the selling structure of the selling page is the main and mega-important tool for increasing website conversion. It is impossible to say which of the structures given in the best landing pages will be the most effective. Let's just say one thing: each structure must best meet the needs of the target audience and maximize the advantage of the company/product/service. Add to this a stylish and vibrant design, and you are sure to get stunning landing page conversions. Well, if you are not yet able to create your own selling one-page website, you can always order a landing page from us.
That's all! Like and subscribe to our blog so you don't miss the most interesting things.
The development of a landing page design based on the principle “I want it like his” remained in 2014, when the effectiveness of the selling page was revealed to the maximum, and companies realized that with the help of a landing page they can not only quickly sell a product/service, but also reveal themselves with creative points of view. Modern landing pages are not only a selling structure, but also an excellent opportunity to create a WOW effect in a visitor, to admire the idea of the page and its implementation.
If you don’t want to bother, you can download a prototype of the “ideal landing page” and create a page based on the rules, write a headline, an offer, advantages and benefits, insert a trust block and a call-to-action button and go to sleep with the thought that the work is done “ five." But if you want to exceed the expectations of your target audience, and let’s face it, your own expectations too, then use the landing page examples that we considered the best.
We thought all 9 examples collected from the Internet were cool. Simplicity, consistent with the landing page principle, convenience and consideration of the basic requirements inherent in the landing page, make examples of selling Landing pages highly converting.
Example of a selling site No. 1The first landing we'll look at has an incredibly attractive and stylish design, however, a poorly thought-out marketing component and copywriting. On the first screen we see a bright banner without any unique selling proposition, the emphasis is on a bright photo. When visiting a one-page website, it is initially unclear whether it is dedicated to one unique product or an entire series, which confuses the client at the initial stage.
Each person has a specific goal, why he needs a product or service. In this block we will observe dry selection criteria, but not the final need. At the same time, “from and to” indicators can confuse the client. In this case, it is better to focus on maximum characteristics. Describing a product in the style of “brevity is the sister of talent” raises a certain question about competence.
The essence of the block should be to obtain advice from a professional who knows everything about the product and is ready to give proper advice about the product depending on the client’s operating conditions.
It’s hard to imagine how the simplest landing block can be made so complex and incomprehensible. In addition, texts must be written in the style of addressing the client. Not “leave a request”, but “leave a request”.
Cool landing page structure, corporate design and amazing work by the marketer made this landing page our favorite. It is clear that the client took a responsible approach to the selection of videos and photos for the development studio. On the first screen we see a unique selling proposition, several needs and criteria have been completed. The most powerful and beautiful element- this is a video instead of a background, which reveals the essence of training and the equipment of the gym.
Interest is sparked by the criteria.
Professional and bright photos and video materials further stir up interest in the service.
We “pressure” the visitor with a number of advantages and cover the needs, arouse “desire”.
The logical final part of the AIDA structure is the “action” block.
A unique image, a stylish insert with a USP, a navigation menu, a bright design of the first block and a headline in the style of an appeal in the overall combination make you want to sign up for a trial training session. A button with a call to action also contributes to this. The navigation arrow is missing, which should indicate that there is also new information below. The next block is advantages in the form of criteria. Made in the form of icons with a brief description.
An excellent solution was to place a block with a call to action with a discount offer and a time limit. Photos inspire confidence in the visitor, motivate, and are also an unusual and stylish addition to the design.
An excellent block with motivation for the first lesson. The big minus is the character of a different nationality.
An example of a landing page demonstrates the style and conciseness of the design, but, at the same time, motivates the reader to the main action due to the absence of distracting details and minimal colors.
Landing Page Example #4
A good landing page developed by our web studio, which can become a role model and inspiration for other developers and clients. The one-page website reveals the problem of the target audience (in our case, women with large breasts), and immediately solves it through a high-quality offer.
Each block is an exact hit to the pain of the target consumer. Immediately behind it is the correct and competent solution to clients’ experiences based on their discomfort.
A bonus for both the visitor and the landing page in terms of lead generation is a block of benefits and advantages, supplemented with real photographs that clearly demonstrate the result.
A great way to communicate benefits not only verbally, but also visually. Thus, all information is perceived better.
Social proof uses two powerful marketing elements. A video that once again puts pressure on the problem and talks about the benefits of properly selected underwear.
And a photo of the company director with his address to the client.
A large amount of negative white space, due to which attention is concentrated on the content, as well as a fairly simple design of the content, create the impression of a stylish and modern design. The landing page is captivating with its concept and converts visitors into clients thanks to competent marketing.
Landing page example #5
A stylish example of a landing page focused on selling a service - the design and construction of luxury private houses and cottages. The landing page was developed according to the AIDA marketing strategy - a classic that tirelessly demonstrates its effectiveness.
Each block demonstrates an integrated approach of a marketer, copywriter and designer. Powerful and motivating calls to action, original and stylistic graphic images and sales text leave the visitor no chance but to cause him to take the action that is expected of him.
The main goal of a one-page website is to form a positive impression of the company and its reputation, which becomes the main motivator for the target audience, which is wealthy consumers. This group of target audience is less interested in the issue of price, more interested in the image and capabilities of the performing company. Therefore, the landing page aims to highlight the benefits of a construction company.
In total, with the help of this selling one-page website, the consumer is provided with a solution to his problem in finding a reliable and professional contractor. The landing page fully reveals everything strengths companies that become a motivator for cooperation.
Example of a successful landing page No. 6
Here is an excellent example of a beautiful and functional landing page. Modern design with thematic pictures, developed in a combination of dark and light tones with bright accent inserts creates a pleasant impression of nobility.
This landing page has distinctive feature, which is rarely used by other developers. It reveals the issue of price as much as possible, inviting the user to independently choose the price range, having considered the options that he can afford.
This is a very convenient and practical function that visually shows the user online all the offers that are suitable for the price. Another advantage of a one-page website is that it caters to all requests. target buyer. Using this landing page, a visitor can get advice, place an order, get an idea of the cost of a kitchen set, and also receive an estimate for their order. Each opportunity comes with a call to action.
Overall, the project inspires confidence in the company. And this is the main thing that a one-page website offering services should form. potential buyer. After all, it is based on trust in the performer that the client turns from potential to real.
We chose this landing page example because it is fundamentally different from the usual traditional one-pagers.
The site is dedicated to the milk delivery service. But it is made in a comic form and is aimed only at a small group of the target audience.
After reading the storytelling, which is where the one-page page begins, it becomes clear that it is aimed at young people who are interested in slang.
There is no selling structure and elaboration of problems here, as can be seen in the previous beautiful examples landing pages. However, the message of the site is clear and interesting, so the landing page itself has a place.
A large amount of information content, which is presented “for fun” to make you smile, is complemented by an audio playback function, which also adds humor to the page. But, scrolling a little lower, we see a block with a call to action, typical of “classic” selling landing pages.
There is no social proof, no block of trust, no blocks of advantages and benefits. But there is a recipe for cutlets :-)
It’s difficult to say about the effectiveness of this landing page. What is obvious is that the page is interesting, with excellent design and “school” humor. And despite the fact that such projects are a rare occurrence in the field of Internet marketing, they are worthy of existence, as they will definitely find their audience.
Example of a selling site landing page No. 8
An example of another of our work that deserves attention. The landing page sells a service for selling or renting mobile stands/photo zones. With the help of this one-page page, a potential client finds all the answers to his questions.
An excellent solution for those who want to understand the service in detail. There are unique photographs for each category of service, the cost of each with the ability to immediately select the one you are interested in. For those who could not make a choice, the landing page offers an individual order service indicating personal requests, formatted as a call to action.
The benefits block focuses on the convenience of cooperation.
The block of benefits is supplemented by a block of company advantages, which together create a powerful motivation for the client to act.
An interesting design solution that combines white and dark gray with red elements to create a stylish aftertaste when viewing the landing page. Unlike other landing pages that work on the problems of the target audience, offering their solution, this project reveals all the advantages of the company’s services, and also helps the client find answers to all his questions.
Example landing page No. 9
This landing page, which was developed by our web studio, holds the visitor’s attention from the first turn of the screen and motivates him to action. A landing page dedicated to selling design and construction services opens up a ton of opportunities for the client. This is confirmed by the feedback form, which allows you to immediately order an individual project or download free example project.
When choosing a contractor, a potential client needs the reputation and experience of the company. It is on this information that the consumer forms benefits for himself.
A special bonus for the visitor is real photographs of projects created by the company. Bright, beautiful and attractive photos become a plus for the visitor’s trust.
Next is the block of “goodies”. That bonus that competitors rarely offer is the opportunity for the client to look at the houses built by the company with his own eyes. This service does not oblige the visitor to order the service. But with the help of the feedback form, the visitor already becomes a lead.
As a result, the client is presented with a website with an original design, thoughtful structure and concept, and competent content, which has a comprehensive effect on page conversion, leading to high efficiency.
The modern user, sophisticated with the countless number of sales pages that catch his eye, is already tired of the same type. Today, uniqueness has come into fashion; the more interesting and unusual the landing page, the higher the likelihood that it will attract the user’s attention. In addition, good and exclusive design is always a plus: both to surprise the visitor and to please yourself. And a pleasantly surprised visitor is at least +10% to conversion. We wish you original and delicious ideas! And if you have any difficulties with this, you can always order a landing page from our web studio.
Subscribe to the blog and follow our updates.
Greetings, my dear readers. Today we’ll talk about technical aspects with which we can increase the sales conversion of our goods or services. One of the important points is a well-designed landing page with products. The so-called landing page about the creation of which we will talk further and get ready codes pages.
What is a landing page? This is the page that people usually land on after clicking on an ad. Created for one offer: product, service or subscription. An effective landing page is the cornerstone of successful online marketing. The product may be the best on the market, the ads are perfected, but without a good landing page, efforts do not produce 100% results. It tells visitors what is on offer and why they should want it. A sense of urgency contributes to quick decision-making and the transition of the user to the category of a client.
How to create a Landing Page? It is wrong to believe that the answer lies in the ability to typeset. A good landing page is the result of coordinated work on goals, text, design and code. Landing pages, examples of which will be below, will help beginners learn the basics of working with layout, but will not replace conversion texts and understanding of the target audience. You can also create them using various Landing Page designers.
So before you create a landing page, ask yourself:
- What will a person do after landing on the landing page? Will he buy anything? Will you fill out the form? Subscribe to the newsletter? Before you track your conversion rate, set clear goals.
- Who are my competitors? In reality, these are three questions: who, how successful are they, and how can their achievements be applied? Imitation is the sincerest form of flattery. If your competitors are doing something that works, replicate it on your site.
- Who is my audience? The better you understand your niche and target audience, the greater the chance that your efforts will pay off.
You need to offer all the necessary information, but not so much that you overwhelm and drive away your potential client.
Examples of creating a landing page + coding for dummiesBefore we get started, let's take a quick look at HTML and CSS. Understanding how they work will help you create a landing.
HTML is a browser markup language for website visualization. Written using tags enclosed in angle brackets that define the content.
The tag opens () and closes () around the filling:
content
For fine-tuning, attributes are added after the name:
content
CSS - defines how to position HTML elements. Consists of selectors, properties and values:
#selector (property: value;)
The selector matches the name of a specific tag in html. Changing values and adding properties adjusts its appearance. You can create pages that look different from each other by applying different CSS styles to the same HTML.
5 initial stepsFor fast layout We will use a template with minimal design based on bootstrap. This is a system with its own selectors, which is used all over the world to speed up layout.
It looks modest.
From this fish a website for every taste is created in several stages.
Directory structure in the folder:
- index.html: This main file, which we will edit.
- /assets: auxiliary files are located here:
- /css: The directory contains bootstrap and icon styles. The file we will edit is main.css.
- /img: folder for site images.
- /fonts: icon fonts.
- /js: bootstrap javascript files.
Step 1: Using a Header
The headline and subheadings are key places that help convey the value of the offer in a clear manner.
Let's change the title and name of the site. Here you don’t need to have typing skills - you write your own text in the places highlighted in yellow on the screen.
Step 2. Brevity is the sister of conversion. Adding benefits and rates
You will need 4 sections:
- advantages;
- rates;
- reviews;
- call to action.
Let’s create a section of the main content “main”, into which we will insert the necessary sections:
…..
…..
…..
…..
Fill with filling instead of dots.
For the benefits section you will need this code:
Advantages
Fast
Reliable
Sed diam nonummy
Profitable
Elit, sed diam nonummy
Technically
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Reliable
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Profitable
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Technically
Lorem ipsum dolor sit amet, consectetuer adipiscing
Reliable
Lorem ipsum dolor sit amet, consectetuer adipiscing
Profitable
Lorem ipsum dolor sit amet, consectetuer adipiscing
Content for clarity:
It still looks sloppy, but there is no reason to panic, let’s continue.
We write down prices. The content changes in the same way as in the first step. general description with class “tarifs” and three tariffs.
Tariff plans
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Tariff No. 1
$10
per month/per person
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Order
Tariff No. 2
$20
per month/per person
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Order
Tariff No. 3
$30
per month/per person
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Order
Looks like that.
For now, we are not interested in the appearance of the future landing page - we will look at examples of changing styles below.
Step 3: Trust Signals and Call to Action
Using targeted signals indicates to visitors that the brand is trustworthy. Signals can take many forms, but the classic one is customer feedback.
Customer Reviews
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
Let's set a call to action.
Benefit when ordering today
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Order now!
Reviews will help potential customers decide to buy the product. For clarity, we need avatars, so we’ll immediately put them in place - under each quote.
Client name.
Step 4: Grid and Mobile Friendly Integration
To implement the grid we need Bootstrap containers. It is important to remember the total number of valid column segments - 12. The class determines the width of the content display. The advantage of this ready-made grid is that the containers are designed with adaptability in mind and are immediately usable for mobile devices. Detailed description on the official site . The grid looks like this.
The contents of “main” will be wrapped in a container. To do this, the following is written at the top:
… .
If you need the block to fit the entire width of the screen, then container is inserted inside. Here it will be a jumbotron and a call to action.
We will wrap all elements that require placement on top of each other with line separators.
We can now adjust the width of the columns, focusing on the bootstrap grid. After wrapping, the filling stopped sticking to the edges of the screen and neat indents appeared.
We set prices in a row using the column class col-lg-4. Inside row lines, it is no longer necessary to write separate divs for wrapping; they can be combined with existing ones separated by a space.
By analogy, we set up columns for the reviews and benefits section. If you need to move an element to the side, use the offset column class col-lg-offset-2. The number at the end determines how many base columns the shift will occur by.
Step 5. Fonts and Icons
We implement Google Font heading fonts. When selected, open the import tab and copy the data from it to the main.css file. We also add title selectors to the file for which the new font is used.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* import font for headings */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Googlefont output */
}
For clarity, the advantages are described by a class with the self-explanatory name text-center and FontAwesome icons from the bootstrap set.
At this point the preparation is completely completed.
Landing page: examples of codes with offer, parallax and counterWe use the three most popular types: with a sentence, a form and with a countdown counter. As the layout progresses, the template will be supplemented with effects.
Example 1: with a sentenceLet's set the background of the main part and the padding so that the first screen is covered.
Jumbotron (
background: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
max-width: 100%;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}
Let's change the jumbotron header size from h2 to h1. Next, we write styles for the elements that need to be changed.
Let's start with the icons.
Benefits i(
color: #cac4c4;
}
After the hash sign, a color is specified. You can choose your own option using html color tables or an image editor.
Indentation for section headings
section h2 (
padding-top: 30px;
margin-bottom: 25px;
}
We are tidying up the appearance of tariffs. For convenience, we create our own classes for the elements that we want to highlight specifically.
Tariff No. 1
$10
per month/per person
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Order
And a lot of CSS. What places the sections are responsible for are stated in the comments - /* between slashes with an asterisk */
/* =========Tarif styles======== */
/* general view of the tariff */
.pricing_item(
background: #f2f2f2;
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #262b38;
cursor: default;
overflow: hidden;
}
/* change background when clicked */
.pricing_item:hover (
color: #444;
background: #daebef;
}
/* individual price tag background in each tariff */
.pricing_item:first-child .price (
background: #9ba9b5;
}
.pricing_item:nth-child(2).price (
background: #1f6098;
}
/* on wide screens the middle tariff column is indented and highlighted */
@media screen and (min-width: 66.250em) (
.pricing_item(
margin: 1.5em 0;
}
.featured(
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/* title */
.pricing_item h3 (
font-size: 2em;
margin: 0.5em 0 0;
color: #1d211f;
}
/* price tag background */
.price(
font-size: 2em;
font-weight: bold;
color: #fff;
position: relative;
z-index: 100;
line-height: 95px;
width: 100px;
height: 100px;
margin: 1.15em auto 1em;
border-radius: 50%;
background: #77a5cc;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
/* currency */
.currency(
font-size: 0.5em;
vertical-align: super;
}
/* clarification of the proposal */
.sentence (
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
color: #2a6496;
}
/* list */
.pricing_item ul (
font-size: 0.95em;
margin: 0;
padding: 1.5em 0.5em 2.5em;
text-align: left;
}
/* list items */
.pricing_item li (
padding: 0.15em 0;
}
/* rate order button */
.pricing_item button(
font-weight: bold;
margin-top: auto;
padding: 1em 2em;
color: #fff;
border-radius: 5px;
background: #428bca;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* change color when button is pressed */
.pricing_item button:hover,
.pricing_item button:focus (
background-color: #285e8e;
}
/* tariff background*/
.bg-2 (
background: #dddddd;
}
Result
Customer reviews. Let's give them a neat look and indicate their location.
/* =========Testimonials styles======== */
testimonials (
padding: 4em 0;
text-align: center;
}
.testimonials .avatar img (
border-radius: 50%;
float: left;
display: inline;
margin-right: 1em;
width: 65px;
height: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p (
text-align: left;
padding-top: 1em;
color: #5d5d5d;
font-weight: 900;
}
All that remains is to decorate the last call to action and the footer.
/* Action */
.action(
background: #476177;
min-height: 180px;
width: 100%;
padding: 4em 0;
text-align: center;
}
.action h2 (
color: #fff;
font-weight: 300;
}
.action p(
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
font-size: 1.2em;
}
.action .container (
margin-top: 3em;
}
/* Footer */
footer (
background: #333333;
padding: 1em 0;
text-align: right;
}
footer p(
color: #fff;
line-height: 1;
text-transform: uppercase;
font-size: 0.7em;
margin-top: 0.5em;
}
The footer button is assigned the built-in bootstrap class btn-default.
Bringing the template to life. We will introduce smooth scrolling and buttons for sections, as well as text animation on the first screen.
For the transitions to work, we will replace some of the section classes with id - for benefits and tariffs. And we will add links to the id to the buttons. Screenshot - what is attached to what, highlighted with a yellow marker.
We set indents for buttons - jbutton. Scrolling when pressed works, but very abruptly.
Smooth transitions are created using javascript or jquery. The latter is connected to Bootstrap templates by default.
Scrolling is now smooth.
Adding animation to text using Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). This is a ready-made open source code, it can be used on any website. Place the file from Github in the css folder and specify the path.
We select the effects here: https://daneden.github.io/animate.css/. We have fadeInDown selected. It is written in the code like this:
Now when the page is loaded or refreshed, the text will be animated. Ready.
Example 2: with shape and parallax effectThe more form fields a visitor is presented with, the less likely he is to fill them out. Ask for only the minimum necessary information.
It is assembled by analogy. We will change backgrounds and colors. And, of course, we'll add a shape.
Let's start with parallax.
Let's change the background of the jumbotron to transparent:
background: transparent;
Inside head we will insert the script:
$(window).scroll(function(e)(
parallax();
});
function parallax())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}
The first line in the body is a container for parallax:
And in CSS its behavior is:
Bgparallax (
background: url(/../img/fon.jpg) repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}
Parallax is ready. But making changes to the code and new background requires reassignment of the color scheme.
Making the menu dark:
Navbar-default (
background-color: #333;
border-color: #444;
color: darkgrey;
border-radius: 0;
}
Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
color: darkgrey;
background-color: rgba(0, 0, 0, 0.5);
}
We replace the sentence in jumbotron with a new one - with the form code:
Landing Page turns visitors into customers
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.
-
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
And we prescribe the appearance
/* form */
.headform-list (
list-style-type: none;
line-height: 26px;
font-weight: 400;
padding: 0px;
margin-bottom: 40px;
}
.headform(
overflow: hidden;
position: relative;
background-color: rgba(0,0,0,.4);
padding: 35px 40px;
border-radius: 8px;
}
input, button, select, textarea (
width: 100%;
margin-bottom: 10px;
}
.headform-list li .fa (
position: absolute;
top: 0px;
left: 0px;
width: 42px;
font-size: 24px;
text-align: center;
}
.headform-list li(
position: relative;
min-height: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p (
color: #fff;
font-size: 16px;
font-style: italic;
}
The text of the jumbotron also ended up here, as it demanded changes.
We are changing the tariffs.
/* general view of the tariff */
.pricing_item(
background-color: rgba(0,0,0,.4); /* line changed */
border-radius: 4px; /* line changed */
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #f2f2f2; /* line changed */
cursor: default;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* change background when clicked */
.pricing_item:hover (
color: #444;
background: #ddd; /* line changed */
}
Now they look like this - a transparent background and rounded corners.
The template is ready.
Example 3: with countdown counterWe change the filling of the jumbotron again and recolor the template to match the new background, similar to the previous template. Connect the counter script:
HTML
Time doesn't wait
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
var myCountdown1 = new Countdown((
time: 86400 * 3, // 86400 seconds = 1 day
width: 300
, height: 60
, rangeHi: "day"
, style: "flip" //