Ready-made landing pages html templates. Landing page templates

Greetings, my dear readers. Today we'll talk about technical points, with the help of which we can increase the conversion of sales of our goods or services. One of important points is well thought out landing page with goods. 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 give 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 skill of typesetting. 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 something? 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.

We need to offer everything necessary information, but not so much as to suppress and drive away a potential client.

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. Recorded using tags enclosed in angle brackets, which determine 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 regulates its appearance. You can create pages that look different from each other by applying different CSS styles to the same HTML.

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 any typesetting 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;
• tariffs;
• 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

Elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

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.

per month/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

per month/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

per month/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

It looks like this.

While we are not interested in the appearance of the future landing page, we will consider 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 be received various types, but the classics are customer reviews.

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:

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:

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 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.

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.

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

And a lot of CSS. Which places the sections are responsible for are stated in the comments - /* between slashes with an asterisk */

/* =========Tarif styles======== */
/* general view 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 ready open source, 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.

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 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 clients
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 - transparent background and rounded corners.

The template is ready.

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.