What is the best way to make a landing page yourself? How to make a landing page yourself: step-by-step instructions

Signs of pregnancy after embryo implantation

Creating a landing page (landing page) or landing page, landing page, simplifies the user’s path to your desired goal as much as possible. Such a page is designed to influence a person’s basic instincts, to encourage him to perform targeted actions: click, call, order, buy “right now”.

Landing pages are best suited for conducting advertising campaigns for a specific service or offer with a unique (low) price, as well as for attracting the target audience from contextual advertising systems Google AdWords, Yandex.Direct, social networks and email newsletters:

What is Landing Page?

Landing page is a separate page that is used for:

  • sales of a specific product or service;
  • creating a subscription base.

Having decided to create a landing page, you must use the necessary influence triggers that push the user to quickly make a decision (purchase a product, enter information to receive a discount, take a course, webinar, etc.).

From the user’s point of view, a landing page is the page on which he ends up after clicking on an informer, banner, advertising post, etc. A landing page is fundamentally different from an online store. To sell one product and conduct one advertising campaign, you create your own page and use different influence triggers.

Landing page types:

  • Autonomous. This is the most common type of landing page. The main task is to encourage the user to purchase or take a specific action recommended by the page;
  • Microsite. A small, often separate website, consisting of no more than 5 pages containing information about a product or service;
  • Main site. For a landing page, uses one or more resource pages;
  • Lando website. A resource that consists entirely of independent landing pages:
Landing Page Types
  • Advertising. Contain a large amount of text, graphic and video information about the service;
  • Viral. The advertisement is disguised as an article or game. It often involves email, social networks, chats;
  • Targeted lead pages. Designed to collect information about the target audience, as a rule, they contain a minimum of information.

A well-designed landing page can increase the conversion of visitors into real buyers.

Why do you need a Landing Page?

The main purpose of a landing page is sales. The landing page contains selling text, a presentation of a product or service, and a call to action. Landing page is an excellent tool for quickly starting a service or product on the Internet. Landing pages allow you to collect subscribers and requests for services, etc.

If you present your product/service correctly, make a good presentation, indicating strengths, and also set up a traffic flow (advertising on social networks, contextual advertising, etc.), all you have to do is collect applications from your clients and sell them the advertised product/ service.

Benefits of using Landing Page

Landing, in comparison with regular resource pages offering services or products, has a number of advantages:

  • Targeting a specific audience. The landing page does not offer many decisions that require the user to choose, but one unique offer that is difficult to resist;
  • High conversion. According to statistics, using landing pages for advertising purposes can increase conversion by 10-15%;
  • Full information about the product/service offered, but without additional transitions and links;
  • The ability to collect contacts of visitors and replenish the database of potential clients, to whom you can later send information about upcoming promotions/sweepstakes;
  • Low cost of creating a landing page. Even novice businessmen can afford to create a landing page, thus testing product niches in order to start selling on the Internet:
Where and how are Landing Pages used?

You can make a landing page the internal or main page of a corporate resource, a one-page website, or a page on a social network. Recently, it has become increasingly popular (offline pages) for key products, at a time when the company already has a corporate website. This is what legal and medical companies, banks, mobile operators and many others do.

Where are Landing Pages used?
  • In advertising campaigns using contextual advertising with pay-to-click (PPC) in Yandex.Direct, Google AdWords, Begun. In this case, traffic is redirected to landing pages optimized for key queries;
  • In banner advertising campaigns, provided that the graphic material is placed on thematic resources designed for the target audience. For example, banner advertising for new products in the field of electronics is placed on news portals in the segment for specialists in the field of IT technologies;
  • In newsletters of informational and marketing letters containing a link to the landing page. For example, newsletters for an online store that take into account the user’s previous purchases;
  • Conducting blog campaigns in which the user is redirected to the landing page of the resource, with the owner of which the blogger previously enters into a partnership agreement for the placement of banner advertising, postal, and PR articles;
  • Campaigns on social networks (VKontakte, Facebook, Twitter, etc.) or on popular media hosting sites (for example, YouTube, Flickr, etc.). Users are redirected to the landing page of the advertiser who has an agreement to place advertising materials with the selected media resource:
Basic ways to create a Landing Page
  • Free landing page templates and generators. Nowadays there are many options on the Internet for free templates and designers that allow you to generate a landing page. The most popular service. This is an excellent option for companies with a limited budget, but with a staff of specialists versed in marketing and design;
  • Contacting specialists. You can order text for a landing page from a copywriter, design development from a designer, and integration with the engine from a programmer. At the same time, the company must have a marketer on staff who will monitor the project at all its stages. The advantages of this method include relatively low cost and fairly high results, the disadvantages are the risk of error in choosing specialists;
  • Agency outsourcing. This method of creating a landing page involves contacting an agency that will take on the analysis of competitors, select a concept, develop an advertising campaign strategy, resolve the issue of integration with the engine, and launch the project. All that is required from you is a brief for creating a landing page, and the agency will take over the development of a turnkey landing page. The advantages of this method include high efficiency and time saving, the disadvantages are higher cost than in previous options;
  • Maintain a staff of specialists who will deal with... This is the most expensive and most effective way. Your own team, consisting of a designer, copywriter, marketer and layout programmer, will allow you to fully promote your product/service to the market.
Is it possible to create a Landing Page yourself?

You can create a landing page yourself, but you will need to have certain skills in web development, analytics and design. If you don’t have such experience, use services that offer ready-made templates in which you only need to fill out the text and configure the domain and hosting.

Creating a landing page yourself will save money and time. On the Internet you can find resources with templates of various subjects, which come with instructions for quick installation and software that allows editing. The cost of such kits can be much lower than the price of developing a landing page in a specialized agency:

Is it possible to create a Landing Page for free?

Since interest in landing pages is constantly growing, developers are offering more and more tools for creating landing pages based on templates. Here is a list of the most popular methods and services:

  • You can create a free landing page if you register on Wix;
  • You can make a landing page using Adobe Photoshop;

The third option is most suitable for beginners who have a minimum of knowledge and do not want to waste time learning complex web programming systems.

Landing page optimization

Creating a landing page is half the battle; it is important to optimize it correctly. One-page websites have one, but quite significant, drawback - it is quite difficult for search engines to find them. Multi-page resources have unique headings, proper linking and a complex structure indicating the weight of pages, etc.

The architecture of a one-page site does not make it possible to carry out high-quality internal optimization in the classical sense, to “tailor” the site to the requirements of search engines. A solution from Google allowed us to get rid of this problem - layout using JavaScript and the PushState method.

To optimize your landing page, you should do the following:

  • break the landing page into blocks;
  • Each block must receive its own unique indicator, title, description and title, URL.

That is, each block must have the same properties as any individual page on the site, while the search robot will perceive your site as several unique pages. Visitors to the landing page may not notice this decision; only the most attentive will notice that while scrolling along the page, the URL and title change. To implement such a project, you will need certain knowledge in the field of SEO and layout with JavaScript.

If you only need information on services with which you can make a landing page, then go straight to step 5 - choosing a layout tool. If you want to understand the algorithm for creating a landing page from A to Z, then read the entire article.

How to make a Landing page - step-by-step instructions in 9 stagesStage 1. PreparationPurpose of the landing page

First of all, we determine the purpose of the landing page, what we want to receive from page visitors. Typically this is one of three things:

1. Selling goods/services (example: selling honey, selling logo design services, selling an online course);
2. Receive a contact (example: subscription to the newsletter, request for measurement);
3. Information (example: invitation to a free offline event, promo page of a store with promotions).

We determine the target audience and what is important to them

At this step, it is important for us to understand who the target audience is for our offer, what pains they have, what desires, what fears and what these people want to receive. It is important to understand all this so that website elements, such as text and design, are made focusing on the target audience (target audience).

How to determine the target audience?
  • Analyze those clients with whom you have already worked or are currently working;
  • Ask clients what is important to them. Yes, that’s right, just call or write, prepare a list of questions in advance;
  • Remember, or better yet, write down the questions that you are most often asked about your product;
  • Read thematic sites/forums, see what worries your customers.
Looking at competitors (benchmarking)

When you have written down all your thoughts and ideas regarding the future landing page, it’s time to start analyzing competitors (benchmarking). If you already know your competitors, great; if not yet, search the search engines using the keywords of your niche.

The purpose of the analysis is to find and see what competitors are doing poorly and not repeating their mistakes, and what they are doing well, to look at ideas, missing blocks, interesting design solutions. This does not mean that you just need to copy them, of course you don’t need to do that, save them for yourself, then at the stage of writing the text and developing the design, adapt them to your project.

How I do this: I create a separate folder called “Ideas” and take screenshots of interesting blocks.


Stage 2. Writing text for the landing page

For many (including me), writing text is the most difficult stage of development, so I personally always try to delegate this stage to a copywriter.

Put the chaos in your head on paper

Simply, without thinking about the sequence, transfer all thoughts and ideas for the future landing onto paper. Write down everything you want to talk about. When you write such a list of thoughts, plus we looked at ideas from competitors, the next step is to combine all this and compose the blocks and structure of the landing page.

Making landing blocks

A landing page consists of certain blocks; you can’t just write solid text like an article and just publish it. This will be terribly awkward to read.

Here is the main list of blocks that can be found on 90% of landing pages:
  • First screen with USP (unique selling proposition)
  • Product Disclosure (Description of service or product)
  • Author/company information
  • Reviews
  • Cases (Success Stories)
  • Form/call to action
  • FAQ (Answers to frequently asked questions)
  • Contacts / site footer
    • What other blocks may there be on the site:
    • Facts in numbers
    • Benefits (advantages)
    • Video
    • Portfolio
    • For whom
    • Stages of cooperation (or How to place an order, How to leave a request)
    • Tariffs and prices
    • Partners
    • Gallery
    • Schedule
    • Team
    • Certificates, diplomas, letters of gratitude
    • Documentation
    • Timer

    When the landing page framework is ready, we begin to write the text. You can do it yourself or outsource it to a copywriter.

  • We put the main thing at the beginning. There is no need to write about yourself at the beginning of the site; show your product first.
  • Replace general words with facts. There is no need to convince visitors of anything; leave this right to them. (Example: do not write that you are leaders in the market who can be trusted, show reviews of companies to which you provided services and they were satisfied, in addition, attach the original review so as not to be unfounded).
  • Work especially well on the first screen and USP. After a visitor lands on your landing page, you have three seconds to grab their attention. If you didn’t have time, the person will close the page and continue surfing. The first screen should be as relevant as possible to the query through which the visitor reached the site. (Example: if a person searches for “Accounting for an individual entrepreneur,” there is no need to show a landing page with the heading “Accounting for an LLC”).
  • USP (Unique Selling Proposition). Simply put, the main title and description, which should succinctly tell what this landing page is about. You can create a USP using 4U technology.
  • The shorter the better. Try to write blocks of text as short as possible. Nobody reads long foot wraps of text; today people always have a lack of time and this must be taken into account. If you still need to provide a lot of information, then break it up into paragraphs and blocks.
  • More titles. Paragraphs of text should not be written just like that, without a heading. Most visitors, when visiting a website, first scroll through the site trying to evaluate whether they got there or not. And here it is the headings that play an important role, because he will skim the site and evaluate the site precisely by them.

    • Don't want to compose the text yourself? Find a copywriter who will do this for you.

    Where to look for a copywriter
  • Copywriting exchange ContentMonster.ru
  • Copywriting exchange Etxt.biz
  • Private companies or specialists. You can look for them through a search or on social networks (VK, Facebook, Instagram).

    • You can turn to a copywriter not only to develop text from scratch. For example, you can contact us with a ready-made list of blocks, with initial sketches, or even with already compiled text, which the copywriter will “revive”, make more interesting, and correct errors.


    Stage 3. Making a prototype

    Before the design stage, it is important to create a prototype, let me tell you why. There are several reasons:

  • Without a prototype, you will spend more time, oddly enough :) At the beginning of my career, after writing the text, I immediately did the design. I thought that this way I would save time, but in reality it turned out that everything took even longer, because it is not convenient to immediately come up with design elements without a frame.
  • Problems with the customer if you make a landing page to order. Everyone had this situation. You approved the text and immediately started making the design, spent a lot of time, send it to the client, and he says that everything is wrong and needs to be redone, the text swapped, etc. This is much more difficult to do when the design is already ready than when you only have a prototype from text and circles.

    • A prototype can be compared to the sketch you make before painting. Few people can take paints and immediately paint a picture. So here, first we make a sketch, see how it turns out approximately, which blocks can be moved, changed, added or removed text, etc.

    An example from my case of a prototype and a design made using this prototype.

    Prototype example

    Prototype design example

    On the prototype we indicate:

    • Placement of text, highlight headings;
    • Where will the graphics (pictures, icons) be located?
    • Where will the buttons be?
    • On which block the background will be light and on which block it will be dark.
    Prototyping services:
    • Photoshop. I do it in Photoshop. After we approve the prototype with the customer, it is convenient to make a design here based on the prototype.
    • Moqups service. A special service with ready-made elements, just drag and drop and add your text.
    • On paper. You can sketch out a prototype by hand if the landing page is not complicated and you don’t want to bother too much.

    I always start a prototype on paper, it’s more convenient for me. Then I transfer it to Photoshop.

    Use Bootstrap Grid

    I also advise you to make the design on a grid so that later it can be easily adapted to different devices. If you choose a design tool for layout, where the design itself adapts to different screens (more on layout tools later), and does not use a separate mobile version of the site, then the design must be developed on a grid.

    The Photoshop grid template that I use in my work, you can.


    Stage 4. Making the design

    All landing page design elements can be divided into three parts, this is the selection:

  • Font
  • Colors
  • Charts (photos, icons, pictures)

    • Each element sets a certain mood; it is important for us to choose such a combination of all elements so that the visitor develops the right, trusting attitude towards our company and product.

    As an example: On a site providing funeral services, bright colors and a girl with a radiant smile with the inscription in large letters PROMOTION! are unlikely to be appropriate. Or a site about organizing holidays in gray, faded colors, with black buttons and a slab serif font, after viewing which you want to fall into depression, and not order a holiday for your child. The examples are, of course, exaggerated; you are unlikely to see them in life (although it is possible), but I think you get the gist.

    Let's discuss each element in more detail.

    Font

    Text is the basis of any website, so font is no less important than color or graphics. A font can also set the mood; it can be light or brutal, evoke a feeling of expensiveness or simplicity, etc.

    Based on your topic and the emotion you want to evoke in visitors.

    If you don’t want to bother coming up with combinations, take the ready-made neutral options that I have prepared for you. They will suit any theme. This:

    • Roboto
    • Open sans
    • Pt sans

    Choose one or two of them and mix.

    For example:

    Title - Roboto (Bold)
    Text - Roboto (Light)

    Title - Open sans (Bold)
    Text - Roboto (Light)

    Heading - Pt sans (Regular)
    Text - Open sans (Light)

    Where can I get fonts?

    There are free and paid fonts. In the first stages, I advise you to use free fonts from Google Fonts. There are good options there, and the ones I described above are also there.

    Why do I recommend Google fonts?

    Because their license allows you to use the fonts both for yourself and for commercial purposes. If you decide to buy the font you like from developers or in special online stores, then ok, there are no problems, but if you plan to download fonts for free from third-party sites, then it is important to check the license, because you can violate copyright if you use a font that is paid, but you didn't buy it.

    If you are making a website for yourself, substitute yourself; if you are making it for a customer, substitute the customer.

    ColorHow to choose the right color scheme for a website?

    White, gray and black colors are already included in the set, they are always used, for example, the font is white, gray or black, the background of the site is white, gray or black. Whatever you say, these colors will already be used on the landing page. They are called achromatic (do not contain color shades). All that remains is to select chromatic colors (color shades).


    Typically, a website uses one, two or three chromatic colors. I advise you to choose one or at most two, otherwise there is a chance that you won’t be able to combine them harmoniously and the site will look ugly and inharmonious.

    Watch an interesting video on this topic

    You also need to select them based on your topic.

    Examples of what mood each color evokes:

    The material about colors is taken from here.

    Graphics (photos, icons, pictures)

    The recent trend is that it is better to use as many of your photos as possible than to use images from stock photos or free ones from the Internet. This happened because stock photos have already become boring; identical smiling women from a call center or happy, jocked movers in blue overalls evoke a feeling of, at a minimum, distrust.

    To be honest, I also sinned with this before, but now I ask (I beg) customers to send as many of their “live” photos of products, staff, premises, etc.

    True, it is better to take a photo on your phone, even if it is of lower quality, but the client will understand that you are not hiding behind a mask of a picture from the Internet, you are showing your face, another point for trust in your person.

    Of course, there are topics where there is nothing special to show, then you can already resort to stock photos. I still advise buying photos there rather than looking for free ones in the search, because they are more often used on other sites.

    Someone will say, “Ilya, the stock photos look like an airplane!” - there is such a thing :) There is a way for you to download pictures for a dollar, about the service. Well, if you are doing a project for a large commercial company, then it is better to budget this amount and buy pictures from an official photo stock, again to protect yourself.

    • Service ShopDiz.pro - downloading images from stock for 0.5-1 dollar.
    • ShutterStock service is the most popular stock with a large number of photos, vectors, and videos.

    When choosing pictures, also focus on your topic and what emotions you want to evoke in customers. Trust, joy, reliability, happiness, etc.

    How to come up with design ideas for blocks? There is no universal rule here. The main thing is to remove everything that seems unnecessary to you, shorten the text, use graphics in moderation, and do not overload. Look at examples of good landing pages, make notes for yourself, take screenshots of blocks that you like, so that you can then do something similar in your projects.


    Stage 5. Select a layout tool

    There are a lot of layout tools available today, I will only talk about those that I have used myself and that are most convenient for me and for customers.


    1. CMS WordPress + WPBakery or Elementor builder

    You install the WordPress CMS, install the template, the WPBackery builder is paid, but it comes free with 99% of the templates that I . There is a second convenient designer, this is Elementor, it is free, but to expand its functionality, buy the Pro version of Elementor. For me, both designers are convenient, I can’t recommend one, each has its own advantages. Look at the descriptions and options of sites with both constructors and choose the appropriate one.

    I use this option mainly if, in addition to the landing page, we need additional pages, that is, we are making a multi-page site. Or, in order not to be tied to any platform, the site should be located on your personal hosting.

    For example, on this blog I use the The7 template, which comes with the WPBakery plugin.

    You can select a domain on the service:

    • Reg.ru - domain registration
    • Timeweb.com - if you buy a domain immediately with hosting, then it’s more profitable to buy here

    Domain registration is the same for all services:

  • Register an account on the service;
  • Select a domain option, the name must be free;
  • Select a zone (ru, com, рф, etc.);
  • Enter your passport details, if you are registering as a legal entity, then company details;
  • Pay for a domain for a year (or several years at once);
  • Ready!

    • To associate a domain with the selected designer or hosting, you need to register ns servers in the domain settings. Support will help you cope with this task if you can’t figure it out on your own.


    Stage 7. Layout the landing page

    When the design is ready and you have decided on the layout method. The next step is to finish this whole thing.

    It would be impossible to talk about all the layout tools in one article; you will need to study them yourself. Options for how you can do this:

  • - this is my course, which I recorded using the The7 template and the WPBakery constructor;
  • Tilda.Education - lessons and webinars on the Tilda designer;
  • WPlovers channel- the guy is recording lessons on Elementor;
  • LPGenerator knowledge base - answers to frequently asked questions about the LPGenerator platform.


    • Stage 8. Attach additional toolsOnline chat

    Online chat increases conversion, proven! If there is something that a person does not understand and needs advice. Not everyone will call or email support; it is more convenient to ask and immediately receive an answer in an online chat. You can connect, for example, Jivosite, I use it myself, it “brings” me new clients. You can write to me in the chat “Hello!”


    CallbackMetrica

    It is important to track website indicators; without numbers you will be like a blind kitten. It is important to understand how many people visited the site, how many left a request, what general indicators the site has, you can even look at the behavior of visitors, how they view the site. You can install Yandex Metrics and/or Google Analytics.

    Retargeting

    If you plan to run advertising on social networks, then install the code for the desired social network on your website. This code will collect a list of visitors who visited your landing page (that is, interested in the offer) and who have a profile on social networks. Then you can show your advertising to them on the selected social network.

    CRM

    The CRM is responsible for ensuring that not a single application from the site disappears, so that for each application you understand what action needs to be taken (call back, send a request, meet, remind about yourself in 14 days, etc.). This is true if you have a flow of clients, but if you have 2-3 per month, then I think you don’t need CRM.

    The most popular CRMs are:

    • AmoCRM (price 499 - 1499 rubles/month)
    • Bitrix24 (price, from free plan to 11,990 rubles/month)
    • Google spreadsheet, Excel or pen and paper (if you need it on a budget)
    Calculator

    For some niches, it is important to use a calculator for calculating a service or product. This is not only convenient, but also increases application conversion. Because it’s always interesting to press buttons, move levers, and see what the final price will be. And it also increases behavioral indicators for search engines.


    The calculator can either be ordered from the developers, which is expensive, or you can use a ready-made service. There is a service uCalc, which can be adapted for popular CMS, designers or a custom website. Build your calculator using a convenient constructor and add it to the site.

    Collecting a subscriber base

    If you decide to collect customer contacts into a subscriber database in order to send emails or SMS messages later, you need to use a special service. You might want to consider SendPulse, I recently reviewed this service, which you can. SendPulse has a free plan with which you can test the service. If not his, then there are other offers on the market, for example MailerLite, UniSender, JustClick, GetResponse, etc.


    Stage 9. Verification

    So! Everything is set up, connected, the site is already on the Internet, hurray, well done. Now is the time to check it out. What exactly should I check?

    Text checking

    Be sure to proofread the text or contact a proofreader/copywriter to have it done. We check the text for errors, accidentally copied blocks during layout, etc. Nothing spoils the impression of a serious company more than errors in the text.

    Adaptability check

    Be sure to check the landing page layout on your tablet and phone. Is everything adapting well? Yes, sometimes it happens that it’s not possible to arrange everything perfectly, but it should at least be readable and more or less neat. If a block cannot be adapted properly, then you need to make two identical blocks, hide one on the computer version, and hide the second on mobile devices. And each block is convenient to configure for the selected resolution.

    Testing the buttons

    Check that all buttons have the required value attached: anchor to the desired location, open a modal window, go to another page, etc.

    Checking application forms

    Send a test request and check the email's deliverability. If you have integrated with CRM, then check that the application is included in CRM.

    Examples of landing pages

    You can see examples of landing pages that I have developed

    If you need to make a landing page to order, write in the comments or leave a request

    RESULT

    If you have completed all the steps, then congratulations, your landing page is ready to go! Now you need your landing page to bring you customers, for this you need to set up advertising, but that’s a story for another article. I hope that this article was useful to you and you were able to understand the entire process of developing a high-quality turnkey landing page. For any questions, you can write in the comments under this post. You can also write down your methods and tricks when creating a website, it will be interesting to read and learn your achievements :)

  • Google Fonts

    • Write your thoughts in the comments. See you in other articles!

    Landing, landing, landing, landing page, one-page site, langing page, one-page, selling site, landing page.

    So many names, even completely perverted ones, of the same thing. The point is that almost no matter what you do, you need such a site.

    Well, since it’s needed, then let’s solve the issue of creating it. Make a landing page yourself? After this article – no question!

    Moreover, it is correct, meaningful, and hits the target. As they say, you can make your cherished selling landing page yourself.

    Just in case or stage 0

    It is usually said that one-page sites are created to sell or get a person’s contacts online, but in fact there is a much wider range of tasks here:

  • Receive new requests for goods/services;
  • Increase brand awareness;
  • Inform about the provision of goods/services;
  • Provide advice on services;
  • Receive resumes from candidates;
  • Attract partners, dealers, representatives;
  • Provide access to the service;
  • And so on.

    • Before you start creating, you need to remember that you cannot try to sell a product and attract dealers on one site. And all because these are different tasks, and this means different landing pages.

    Important. Before creating, you need to clearly define the purpose of your landing page. And remember - there should be one goal.

    Let this reduce the reach of potential people, but increase the effectiveness of the page, which will justify everything financially.

    STEP 1 – Donate or make it yourself

    At this step, you need to determine which of the two solution options you will choose.

    What to do... What to do

    And they will be selected based on your financial and time resources. Let's look at each of them with their pros and cons.

    Constructor

    Once, one client wrote a complaint to us after receiving the site. Its essence was that we did not take a lot of money justifiably.

    It all looked very strange, because he had already familiarized himself with everything and signed the agreement. But we are not a poor company, so it is easier for us to let the client go in peace (not always) than to try to prove something. That's what we did.

    And all this happened because he found a landing page designer on the Internet and learned that he could do everything himself, spending literally 5-6 hours on it, and paying no more than 1,000 rubles a month.

    But you and I understand that you can assemble a “car” yourself, but how far will it go, how individual will it be, how much will it have the correct technical equipment...

    We described in detail all the stages of creating a landing page with deadlines in the article.

    Pros :

    • Cheap. Very much so. 500-1000 rubles per month and you are the happy owner of a one-page website;
    • Just. You don’t need to think about layout, adaptation for mobile devices, or connecting SMS notifications about new applications to your phone. All this is already there and done for your convenience;
    • Fast. You can do and configure everything really quickly. Moreover, making changes will not be difficult either;
    • Technical support. Do you have a question? They will answer you as quickly and thoroughly as possible. A huge plus;
    • Free trial period. Now almost all landing page designers have a 14-day free trial period. Register and...

    A little truth of life. “14 days of freebies! During this time, I’ll earn money using a landing page on the website builder and order a beautiful website from an agency,” they thought.

    After 14 days, having barely managed to defeat the designer, having done everything wrong and not receiving a single order through the site, they realized that one-pagers were not working.

    Minuses :

    • Knowledge. You need to know which blocks to use, their sequence, etc.

      Decided to take a look at your competitors? Great! But how do you know that your competitors have an effective landing page and show good performance?

    • Design. If you are working with a designer for the first time, then you won’t be able to look at the landing page design at the end of the work without tears.

      Even if this is not the first option. Don't expect a cool design that will go “Wow!”

    • Limitation. The number of ready-made blocks is limited, as is their functionality. Design solutions are also not presented in the widest range.

      Therefore, if you want a bird to fly out here when a person leaves an application (as if his application flew away to you with carrier pigeons), you can forget about such an idea.

    Personally, we can recommend this landing page builder. We usually refer clients to them who are just starting out or testing a niche.

    Freelancers

    Let's get straight to the point and from experience. Finding a freelancer who will single-handedly create a selling landing page from scratch and on a turnkey basis is IMPOSSIBLE. Well, it's true.

    It is possible to find individual specialists: a designer who will create the design of a future website, or a programmer who will put it together, but there is no monster who can QUALITY make a website inside and out.

    By all the work I also mean such people as: internet marketer, copywriter, project manager. It’s simply impossible to be good at everything, physically, at least.

    Therefore, the ideal way to work with a freelancer is when you analyze, collect, and prepare everything yourself.

    And the designer and layout designer found on the freelance exchange simply implement it, and without any initiative.

    Pros :

    • Time. Both a plus and a minus. The benefit is that you relieve yourself of most of the hassle of implementing the appearance and technical component.
    • Quality. The main plus. They will do one hundred percent better than you doing it yourself from scratch.

      At a minimum, because they have experience and knowledge that you have in their field, let’s be honest, almost none.

    Minuses :

    • Responsibility. If the site does not work, then no one is to blame but you. Since you are the one who controls them and speaks as needed.

      Search. You need special knowledge of where to look for them, how to assign tasks to them and... you also need to fill out a brief, show technical specifications, etc.

    • Time and nerves. Time to find a freelancer, time to create tasks, time to make a landing page prototype, time to control. You will waste a lot of time and nerves.

      The majority of freelancers are slobs (I apologize, but this is how it is), so delays in deadlines and periodic losses from communication radars will occur.

      And this is the minimum you can expect when you want to make a landing page inexpensively.

    • Money. You will have to fork out money, since a good specialist without “connections” costs quite a bit.

      An average quality design will cost around 8-10 thousand, layout will also cost around this amount. Again, it all depends on the complexity of the project and the performers themselves.

    • Scammers. The work is structured as follows: 50/50. Advance payment and then the remaining payment after completion of the project.

      I don’t want to offend anyone, but among freelancers there are a lot of people who... do not take on the project after receiving an advance payment. Simply put, they get lost.

    Now a little about payment: if you decide to work with a freelancer, I recommend the following payment scheme: make a 50 percent advance payment as a safe transaction (almost all exchanges have it).

    And transfer the rest of the amount directly to the freelancer. In this case, you will overpay 15%, but you will protect yourself.

    Lifehack. If a freelancer is going to scam you, then he will dissuade you from a safe transaction. This will be your signal.

    Stage 2 – to whom and what?

    The most boring (but most necessary) block in this article. It doesn't matter which way you go. You will make an effective landing page yourself or send it to a specialized agency. In any case, you need to know 3 things:

  • Your target audience;
  • Hunt's ladder;
  • The insides of your company.

    • The only difference is that if you create a landing page alone, you will have to write and think through everything yourself.

    The agency will give you to fill out a detailed brief, thanks to which they do the scheduling of the target audience and so on themselves. We, however, take a different route and fill out the brief ourselves, communicating with you via Skype.

    We sincerely believe that this is the only way to get all the information, since it is possible to ask the following questions during the conversation. And such questions always appear.

    The target audience

    We have already written about defining the target audience, or even deeper defining the client.

    This study will give you an understanding of who your potential client is, what fears, objections, and desires he has related to your product/service.

    What should you put pressure on in a future landing page, what words to use, what images are best to insert. A simplified summary diagram looks like this:


    Target Audience Hunt's Ladder

    But what will knowledge of Hunt's ladder give? Just like the client’s avatar, it will provide the very structure of the future landing page.

    I’ll tell you briefly, but in application to a one-page website, because very often business owners do not understand at what stage of awareness their potential client is (if you’re too lazy to read, then watch the video).

    In short, before making a purchase decision a person goes through 5 steps/levels of awareness:

  • Stage “Indifference”. There is no problem.
  • Stage “Awareness”. There is a problem, but there is no solution.
  • Stage “Comparison”. Options for solving the problem are compared with each other.
  • Stage “Selection”. The solution option has been selected. Looking for products.
  • Stage “Purchase”. Choice between product suppliers.

    • How can this complexity help you when creating a landing page? Let's look at each stage and how to proceed:

  • Stage “Indifference”. You need to create the problem in the person's head first. Show that if he doesn’t/doesn’t buy it, then everything will be bad.
  • Stage “Awareness”. You need to show in the first screens that there are different options to solve his problem.
  • Stage “Comparison”. You need to convey that your solution is better than others, and for this you can make a comparison table, offer a product review, research results, personal consultation on selection, etc.
  • Stage “Selection”. You need to show which offer is suitable for him, or rather in what form/package. To do this, we reveal more benefits of our products.
  • Stage “Purchase”. You need to show, first of all, the benefits of working with your company, and only then talk about the product and that it is the best.

    • It seems that you don’t need this, but... For example, if a person chooses between buying an apartment and building his own house, then the landing page of the house should have a block explaining why a house is better than an apartment.

    Package

    You can roughly imagine what your website will look like in your head. And it’s good if you have a corporate identity or brand book (ideal, I would even say).

    What about the benefits of your product or company as a whole? And several dozen more questions that you need to answer before moving on to creating a prototype and website.

    Because the right questions form the right answers, which you take and package into your website. This stage will help you take all the most valuable things in your company and show it off.

    So that you get the essence, here is an example of 10 questions that will help you better/deeper understand your company and your product, and serve it “with a wonderful sauce”:

  • Formulate 3-5 “reasons why it is objectively more profitable to buy from you rather than from competitors.”
  • What production features do your company have?
  • Do you provide internal staff training?
  • Compare the product with similar products. State the advantages and disadvantages.
  • Who is the person or persons of the company?
  • What bonuses are you willing to give to clients when purchasing large amounts?;
  • Describe in detail the stages of working with the client from the first contact to completion of the work.
  • Tell us about the financial conditions of work (prepayment, installments, deferment of first payments, product loans, discounts, product for sale, repurchase of illiquid assets, etc.).
  • What publications exist about the company or from the company? (expert comments, interviews, TV show judges, columns, articles).
  • Your clients are stars.
    • STAGE 3 – Prototype

    Finally we got to the most interesting part. Now we will create your future website.

    Or rather, for now, how to make a prototype yourself, but at least this is more interesting than just describing the target audience.

    Step 1. Prototype structure

    A prototype is the structure and sequence of blocks of a future landing page, which you can easily build from the selection criteria and objections of your target audience.

    The best way to do this is as follows: take a sheet of paper and write down a sequence of blocks/meanings. It looks something like this:

  • A cap;
  • Company benefits;
  • Catalog;
  • Own production;
  • Stock;
  • Team;
  • etc.

    • You and I are the ones who prescribe the blocks, but we must also not forget about the two classic structures on which any advertising material is built, and the landing page is no exception:

  • (products/services);
  • PmPHSA(). Stands for Pain, more Pain, Hope, Solution, Action (pain, increased pain, hope, solution, call to action).

    • So that you don’t rack your brains on how to convey one of the selected meanings and make your life much easier when creating a prototype yourself, this article will help you.

    Sorry for my frankness, but it’s damn nice for me to see people who also work at night (just do it without compromising your health). I began to think that the workaholics had died out. As for the results of cooperation, I’ll just mention this fact: on peak days we received 140 applications a day, and we had to hire an entire sales department for the Internet marketing channel. Thank you!

    open review Dmitry Novozhilov, D-color

    Do you know what email marketing is? For example, I didn’t know before meeting the guys from Convert Monster. I naively believed that this was just a beautiful word. I believed and at the same time heard that it helps to work more effectively with the customer base. Six months ago we acquired a customer base. It was compiled from daily applications for kindergarten franchises. There were a lot of applications, but the conversion remained at a very low level. I struggled with this phenomenon - I tried to send letters to the database myself. There was always not enough time - to compose the next newsletter well, it took half a working day. With every minute spent, the need to make a competent chain arose more and more. But so far the letters have been sent once a week or once every 2 months. There was no consistency in the work. Something was missing. For a long time we could not understand what exactly. The guys from Convert Monster quickly got to work. The first results were not long in coming. After enabling the initial email chain, we made several transactions using the old database. They covered the costs of launching e-mail marketing. After a couple of months, we notice a threefold increase in conversion. And this is just the beginning. We are currently working to further increase the current conversion rate. For example, three more times. Calculate for yourself: - how much money will raising the conversion rate by 2 times bring? It's minimum! - how much will you get if you close the minimum percentage of clients from your existing base? Are you still unsure whether to contact Convert Monster?

    open review Sergey Degtyarev

    We have been using Internet traffic to attract customers for a long time. About a year and a half. During this time, we changed 2 providers until Convert Monster was recommended to us. The terms of cooperation for most companies that provide similar services are similar: budget for the month, drawing up an advertising campaign and off we go. Then the campaign becomes obsolete, a decline begins, and, as a consequence, a lack of clients. Then you ask managers to change tactics, strategy, headlines, semantic core - you appeal to all saints. And they (managers, not saints) do nothing. Or maybe they do, but there is no result. One day it sets your teeth on edge, you leave this office for another, then you start looking for the next one. Important! Before you start looking for the very first one, try it yourself. Of course, your results at this moment are the best possible, they are simply ZERO! We came to Convert Monster in desperation. This was the moment when Yandex set up a setup - they removed the guarantee on which we sat so well and milked it as much as possible and IMPOSSIBLE. We understood that happiness would not come instantly, but we waited for it. And indeed! It began to slowly knock on our doors - applications and sales began to pour in. Then failure - summer, off season, work in the minus. But the guys didn’t give up, and we didn’t reduce the budgets, because we know WHAT it threatens. Never lower your budget or leave the site that brings you income! Final result: more than 6 million in revenue through Yandex.Direct. We are more than pleased with our cooperation! If you have any doubts whether to work with Convert Monster or not, then contact us! We'll tell you where to start. Then your path to them will be longer, and the final exit to Convert Monster will be your “exhalation” and the light at the end of the tunnel. All paths will still lead to them. If you are looking for them, of course. It is the matter of time. Just position yourself as a company that is ready to develop and scale. Otherwise, they will simply not be interested in you.

    open review Isabella Ritz, Ritz Group LLC

    Before I contacted you, I ordered a Landing Page from one company, and Yandex Direct setup from another. Both companies are well-known on the market, but each of our site + advertising campaign combinations did not seek to help, but only criticized the other performer: programmers - directologists, directologists - programmers. As a result, based on your recommendation, we contacted you and in just 4 months we increased the number of applications by 4 times (up to 120 per month) and our online sales turnover to several million rubles.

    open review Vladislav Shupenya, Kimberlit company

    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, the creation of which we will talk about later and get ready-made page codes.

    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 dummies

    Before 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 arrange 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 steps

    For quick 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 is the main file that 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 the “tarifs” class 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 you order 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 good thing about this pre-made grid is that the containers are designed with responsiveness in mind and are immediately usable on mobile devices. Detailed description on the official website. 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 counter

    We 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 sentence

    Let'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 effect

    The 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 a new background requires reassigning 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 counter

    We 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" //

    Publications on the topic