Landing page template with feedback forms. Landing page templates. Landing page: code examples with sentence, parallax and counter
A one-page site is convenient for businessmen because it can be done literally in one day. If a download one page website template ready-made, you can make a website for your company for a minimum amount, since you only have to pay for hosting. For the client, a one-page page is convenient because all information on it is presented as concisely and structured as possible, there is nothing superfluous. Due to their customer friendliness, one-page pages often show higher conversions than other types of sites.
How to choose a one-page template?
- Appearance. It is desirable to design the design in the general style of the company. The interface should not have too incongruous colors. However, some pastel colors have also bored users for a long time, so brightness and creativity are welcome.
- "Weight". Animated design, flickering banners, "heavy" elements, sliders can make the site so overloaded that it will take longer to open than competitors.
- The number of blocks and the ability to customize them. Before choosing a template, decide exactly which blocks are needed at a minimum so as not to overload the page. Trying on a template, find out if blocks can be removed and replaced.
- Cross-browser compatibility and responsive design will greatly expand the audience of potential customers. Therefore, be sure to choose only responsive one page templates.
We offer one page templates for free
If you decide to do for your company Landing Page, download template on our website. We carefully check all templates for viruses, so you can not be afraid to download an infected file. All landing page templates in our catalog have a modern design made in a variety of styles. The ability to adjust the number of blocks, change the color scheme and other functions will help you create a unique original website based on a simple template.
We invite you to download one-page website templates
The main problem of those who decided to download landing page template free, is a huge amount of viruses and bugs in free templates. Therefore, it is very important to find a safe and reliable website. We invite you to visit us, as we carefully monitor safety. In addition, we will delight you with the widest range hTML one page templates, download which you can right now!
Read the text more ...Greetings, my dear readers. Today we will talk about the technical points with which we can increase sales conversion their goods or services. One of the important points is a well-thought-out landing page with products. The so-called landing page, about the creation of which we will talk further 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 internet marketing. The product can be the best on the market, the ads are perfected, but without a good landing page, efforts do not give 100% of the result. She 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 well-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 target audience. You can also create them using various constructors Landing page.
So before creating a landing page, ask yourself:
- What will a person do after hitting the landing page? Will he buy something? Fill out the form? Subscribe to the newsletter? Before tracking your conversion rate, set clear goals.
- Who are my competitors? In fact, these are three questions: who, how successful are they and how can their achievements be applied? Imitation is the most sincere form of flattery. If competitors are doing what works, repeat this on your site.
- Who is my audience? The better you understand your niche and target audience, the more chances that your efforts will pay off.
You need to offer all the information you need, but not enough to overwhelm and drive away a potential client.
Examples of creating a landing page + coding for dummies
Before getting down to business, let's take a quick look at HTML and CSS. Understanding how they work will help you create landing.
Html - a browser markup language for visualizing sites. Written using tags enclosed in angle brackets that define the content.
The tag opens (<>) and closes () around the filling:
<тег>contentтег>
For pinpoint adjustment, 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 \u200b\u200band adding properties controls its appearance. You can create dissimilar pages by applying different CSS styles to the same HTML.
5 initial steps
For a quick layout, we will use a template with a minimal design based on bootstrap. It is a system with its own selectors that is used all over the world to speed up the layout.
It looks modest.
A site for every taste is created from this fish in several stages.
Directory structure in folder:
- index.html: This is the main file that we will edit.
- / assets: auxiliary files are located here:
- / css: directory contains bootstrap and icon styles. The file to be edited is main.css.
- / img: folder for site images.
- / fonts: Icon fonts.
- / js: javascript files for bootstrap.
Step 1: Using the header
The headline and subheadings are key points to help communicate clearly the value of the proposal.
Let's change the title and name of the site. Here, the ability to typeset is not required - your text is written in the places highlighted in yellow on the screen.
Step 2. Brevity is the sister of conversion. Adding benefits and rates
It will take 4 sections:
- advantages;
- rates;
- reviews;
- call to action.
Let's design the main content section “main”, into which we will insert the necessary sections:
…..
…..
…..
…..
We fill it with filling instead of dots.
The benefits section will require this code:
Benefits
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:
While it looks sloppy, but there is no reason for panic, we continue.
We prescribe the prices. The content changes in the same way as in the first step. General description with class “tarifs” and three tariffs.
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 plans
Tariff number 1
$10
per month / per person
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tariff number 2
$20
per month / per person
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tariff number 3
$30
per month / per person
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Looks like that.
While we are not interested in the appearance of the future landing page, we will consider examples of changing styles below.
Step 3: Signals of Trust and Call to Action
Using targeted signals indicates to visitors that the brand is trustworthy. Signals can take many forms, but the classics are 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:
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. "
Let's set up a call to action.
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:
Benefit when ordering today
Testimonials will help potential customers make a decision to buy a product. For clarity, we need avatars, so we will immediately write them in place - under each quote.
Client name.
Step 4: Grid Integration and Mobile Friendly
We need Bootstrap containers to inject the grid. It is important to remember the total number of allowed column segments - 12. The class determines the width of the content display. The advantage of this ready-made grid is that containers are designed with responsiveness in mind and are immediately applicable to mobile devices. Detailed description on the official website. The grid looks like this.
We will wrap the contents of "main" in a container. To do this, in its upper part it is written:
If you want the block to fit the full width of the screen, then container is inserted inside. Here it will be a jambotron and a call to action.
We wrap all the elements that require positioning one above the other with line separators.
We can now adjust the columns in width, 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 col-lg-4 column class. Inside row rows, it is no longer necessary to write separate divas for wrapping, you can combine them with the existing ones separated by a space.
By analogy, we set up columns for the reviews and benefits section. If you need to shift an element to the side, use the col-lg-offset-2 offset column class. The number at the end determines how many base columns the shift will take.
Step 5. Fonts and icons
We will implement fonts for Google Font titles. When you select, open the import tab and copy the data from it to the main.css file. We also add header selectors to the file, for which the new font is applied.
@import "https://fonts.googleapis.com/css?family\u003dRoboto+Condensed" / * font import for headings * /
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; / * Googlephone output * /
}
For clarity, a class with a self-explanatory name text-center and FontAwesome icons from the bootstrap set are registered.
This completes the preparation.
Landing page: code examples with sentence, parallax and counter
We use the three most popular types: with a proposal, a form and with a countdown counter. As you type, the template will be complemented by effects.
Example 1: with a sentence
Let's set the background of the main body and padding to cover the first screen.
Jumbotron (
background: # f5f5f5 url (../ img / fon.jpg) top center no-repeat;
max-width: 100%;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}
Resize the head of the jambotron from h2 to h1. Next, we write the styles for the elements that need to be changed.
Let's start with the icons.
Benefits i (
color: # cac4c4;
}
A color is specified after the hash sign. You can choose your option using html color tables or an image editor.
Indentation for section headers
section h2 (
padding-top: 30px;
margin-bottom: 25px;
}
We are putting in order the appearance of tariffs. For convenience, we create our own classes for the elements that we want to highlight pointwise.
Tariff number 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. What places the sites are responsible for is spelled out in the comments - / * between slashes with an asterisk * /
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d Tarif styles \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
/ * 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 pressed * /
.pricing_item: hover (
color: # 444;
background: #daebef;
}
/ * individual underlay of the price tag in each tariff * /
.pricing_item: first-child .price (
background: # 9ba9b5;
}
.pricing_item: nth-child (2) .price (
background: # 1f6098;
}
/ * on wide screens, indents and highlight the middle column of the tariff * /
@media screen and (min-width: 66.250em) (
.pricing_item (
margin: 1.5em 0;
}
.featured (
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/ * header * /
.pricing_item h3 (
font-size: 2em;
margin: 0.5em 0 0;
color: # 1d211f;
}
/ * label underlay * /
.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;
}
/ * clause clarification * /
.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;
}
/ * color change when the 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, designate the location.
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d Testimonials styles \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
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;
}
The last call to action and footer are left to decorate.
/ * 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 has been assigned the btn-default built-in bootstrap class.
Reviving the template. We will introduce smooth scrolling and buttons for sections, as well as animation of text on the first screen.
To make the transitions work, we will replace some of the section classes with id - for benefits and tariffs. And we will assign links to id to buttons. Screen - what is attached to what is highlighted with a yellow marker.
Set padding to buttons - jbutton. Scrolling when pressed works, but very abruptly.
Smooth transitions are created using javascript or jquery. The latter is connected by default to Bootstrap templates.
The 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, it can be used on any site. Place the file from the github in the css folder and write the path.
We select the effects here: https://daneden.github.io/animate.css/... We have selected fadeInDown. It is spelled out in the code like this:
Now, when loading or refreshing the page, the text will be animated. Done.
Example 2: with shape and parallax effect
The more form fields a visitor is offered, the less likely they are to fill them. Ask for only the minimum information you need.
Collected by analogy. We will change the backgrounds and colors. And, of course, let's add the shape.
Let's start with parallax .
Change the jumbotron background to transparent:
background: transparent;
Inside the head we will insert the script:
The first line in the body is the container for the parallax:
And in CSS, its behavior:
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 the 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\u003e .active\u003e a, .navbar-default .navbar-nav\u003e .active\u003e a: hover, .navbar-default .navbar-nav\u003e .active\u003e 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 Jambotron also got here, as it demanded changes.
Recoloring 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 pressed * /
.pricing_item: hover (
color: # 444;
background: #ddd; / * line changed * /
}
Now they look like this - transparent background and rounded corners.
The template is ready.
Example 3: with a countdown counter
Change the filling of the jambotron again and repaint the template to match the new background by analogy with the previous template. We connect the counter script:
Html
Time is running out
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 teugue duis dolore
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
In the stylesheet, remove the bottom radius of the shape, and tweak the button.
Additionally, the menu was repainted for a new background and the style of texts in the jambotron was changed - by analogy with the previous example. Result.
Bottom part
This completes the Landing Page examples, but the code requires additional work.
The landing page needs to be fast and good like a Ferrari - page load times have a huge impact on bounce rates. Optimize images, minimize the size of finished scripts and styles for maximum efficiency.
The lesson provides examples of creating good landing pages that will help you bring you real customers, and you will learn something new. We like and repost. See you soon.
To download all the sources presented in the lesson in the form of ready-made pages, click on one of the buttons social castle to open it and get a link.
Respectfully yours, Galiulin Ruslan.
Topic Landing Page rubbed to holes. Although the boom on landing pages has subsided a little, landing pages are still in demand. They are launched by all and sundry, even if this is clearly a losing move for their niches in business. Someone does it just to play, and someone to make money. But it's not so important what goals you are pursuing, what is important is that everyone will need to develop a page. Someone will order from professionals, and someone, for one reason or another, will begin to create their own Landing Page. This collection is dedicated to the latter.
People who decided create a website yourself, they can start development from scratch, or they can use ready-made ones, because they do not require special development knowledge. A basic knowledge of HTML and CSS is sufficient, as taught in school. Here again the question arises. Should I use paid or free? Of course, the paid one will be of much better quality, and will probably show higher conversions. Free will be less beautiful, less elaborate in terms of marketing, layout and design.
This collection consists of just free pure HTML to create Landing Page... Initially, the selection consisted of 40 positions, but waking up in the morning and looking at these templates with a fresh eye, I decided to delete most of it, since it was, frankly, rubbish, and there is so much rubbish on the Internet. Only the most worthy templates remain, on which you can at least build something. The selection includes landing page templates of a wide variety of topics, but, for some reason, LP for mobile applications prevails. They turned out to be of the highest quality.
We have previously made a selection of free Landing Page templates. They were tailored to a specific topic. This time I decided to make a prefabricated topic that does not belong to any direction.
Other collections of free HTML Landing Page templates:
By the way. If, for some reason, you want to pull these templates onto the Wordpress engine, then on this topic I once made a selection of plugins for creating a Landing Page on Wordpress. You can try using them. Perhaps this will save a lot of time. Although, personally, I don't see much point in doing this, since pure HTML is enough for a simple LP.
So. Here are 20 Free HTML Landing Page Templates.
Appi - Background Video Template
Another Landing Page template for mobile app with full screen background video. Unlike the template with a video background, which will be given below, this one is much better, although it is sharpened for a specific topic.Bukku
Free HTML template to create Landing Page selling books... Made in Flat style in shades of green. There is some entertaining animation.Also, the developer provides sources for free download in PSD format.
Landing Page Selling Coffee
Coffee Landing Page Template... The design and implementation of the layout is very interesting. There is animation of elements when scrolling the page. Everything is done in soft colors. Perfect for organizations that deliver coffee. However, this template can be easily modified to suit your theme by replacing the pictures.Landing Zero - Landing page with background video
Free HTML Template with Video Background universal subjects. Suitable for creating a portfolio of a freelancer of any specialization, be it a photographer or a designer.In general, it's hard to find free templates with background video. So download it.
The video on the first screen can be replaced with your own, and if there is none, you can download it on the free video stock. I gave a list of video stocks with legal videos earlier.
Engage
Another versatile responsive one page with Bootstrap... The page is suitable for a simple product presentation. The structure is similar to the presentation page of Apple products.Landing Page for a cafe or restaurant
Habitual for an ordinary runet user free Landing Page Template with Grab Form in the first screen. Sharpened for the creation of a landing page for a bar, restaurant, cafe or anything culinary. Using the application form, you can book a table for a specified time.Oleose
Very high quality, responsive, free, but again for a mobile application. Landing Page is implemented using Bootstrap framework. Has three color options: light blue, light green and purple. However, it is not so strictly tailored to its theme, therefore, it can be easily remade to suit you.Take is a free one-page website
And again another free one page html template for a mobile application. However, its design is very interesting and unusual. I would even say unique. Most of the visitors to the post are not developers of mobile applications, so you will have to redo everything to fit your theme.Foodee
Free One Page HTML5 Landing Page Template cafe, restaurant or some kind of eatery. Template with full screen background and Parallax effects.There are such blocks as: menu, upcoming events, customer reviews and a standard set of blocks in which you can place benefits, etc.