Adaptive landing page template for kitchens. Landing page templates
A one-page website is convenient for businessmen because it can be created literally in one day. If you download a one-page website template from finished form, then you can make a website for your company for minimum amount, since you only have to pay for hosting. For the client, a one-page website is convenient because all the information on it is presented as concisely and structured as possible, there is nothing superfluous. Due to their convenience for customers, one-page websites often show higher conversion rates than other types of sites.
How to choose a one-page template?If you decide to do for your company Landing Page, you can download the template on our website. We carefully check all templates for viruses, so you don't have to worry about downloading an infected file. All landing page templates in our catalog have modern design, made in a variety of styles. Ability to adjust the number of blocks, change color scheme and other features will help you create a unique, original website based on a simple template.
We invite you to download one-page website templatesThe main problem of those who decided to download a landing page template for free is the huge number of viruses and errors in free templates. Therefore, it is very important to find a safe and reliable site. We invite you to visit us, as we carefully monitor safety. In addition, we will delight you with the widest range of HTML one-page templates, which you can download right now!
Read the text further...Greetings! This is Denis Gerasimov, website website, and we’ll talk about how to create a landing page yourself, while still being adaptive and modern. You are reading the text version of the video.
Let's set some requirements for our future landing page:
Let's move on to practice
Using the example of a landing page I created lp..Direct. Bootstrap contains different elements designs, such as icons that you can use. It also contains various Java scripts with which you can make modal windows, pop-ups, which can be closed either from above or from below. This is an example of the simplest landing page, which in principle does not work badly, it has a good conversion rate.
Let's take a look at the Bootstrap documentation
The bootstrap framework can be downloaded from www. getbootstrap. com. This product is from the creators of Twitter. This framework is constantly evolving and this moment its latest version is 3.3.4. To connect the site to it, you need to download this archive and write certain lines in html code. As a result, you will have access to css, components, javascript. You can also connect bootstrap without downloading it, using CDN technology, simply by writing certain lines in the code. This technology selects the closest physically located server to your visitor and loads style files or Java scripts from it. This makes your landing page load faster. At the same time, this code is minimized.
After bootstrap connections you will get access to the set CSS styles. It has a Grid System cellular structure consisting of 12 columns. You need to understand how these columns are created. Let's say you want your site to have 2 columns. One of which takes up 2/3 of the page, and the other 1/3. IN large column want, for example, to insert an image into a smaller form to fill out. To do this, you need to write a line containing a column with style 8 and a column with style 4, specified on the bootstrap website. After you write down the styles you need, then by accessing your site from a mobile device, the column that comes second goes down. As a result, your design becomes responsive. If you want a structure with three equal columns, then you need to divide 12 by 3 and write the code with the number 4 in the page code. And so on.
In order not to get confused in working with the cellular structure, I have provided for you to work in the constructor www.layoutit.com. More detailed work I will publish with the constructor in the next article.
Bootstrap also contains files for Typography, with a set various styles headings that you can choose for your landing page and write in the code. Inside this section there are also Alignment classes, for example, if you want the text to be centered, just copy a certain code and paste it into the landing page code. There are also Lists files and much more. You can create tables with different styles in the Tables section, Forms forms (you can make forms in a column, one line, a form with additional characters, a full line form, etc.). In the Buttons section you can choose styles of buttons on your landing page. You can set the color of the buttons, sizes, active or inactive buttons. In the Images section you can set image styles. For example, to make an image round, you need to insert a certain code. In the Helper Classes section you can change the text color, text background, etc.
We also get access to various components, for example, to glyph icons. To add any icon to the site, you need to register a specific span class. Under the image of each icon it is written which class must be written in the code in order to get the desired image on your landing page. You can also access Dropdown dropdown lists, Button groups, Navs navigation and much more. You can view all these features by section in the list on the right side of the bootstrap website page.
Access to JavaScript allows us to make modal windows into which forms can be inserted. These windows also have a cellular structure, which allows you to adapt it to any mobile device. You can also add various buttons, drop-down lists and other functions running on Java scripts.
This was a short introduction to bootstrap and its structure. In the next article we will create a landing page structure in special designer, adaptive structure our future landing page.
Hello, dear readers of the blog site! In this article, I made a selection of 10 HTML Landing Page templates (single-page in common parlance), which, in my opinion, are more successful and with high conversion. Once upon a time, when I started making landing pages (4 years ago), I was not much of an artist and that’s why I was looking for templates. Naturally, there were only consumer goods, designers, paid templates. Now, of course, this matter is simpler, there are many sensible templates on various topics, but still, you need to look.
I bring to your attention 10 HTML one-page templates. I can’t say for what reason the G Chrome browser believes that the files contain viruses or contain unwanted software (I never had and don’t have such files), there is no mark in the Google database that the site is under sanctions, the files were checked by the reliable and widespread virustotal service. com/ru/ . I still have to figure this out. If I haven't convinced you, check the files yourself. I'll attach a screenshot of the first file, check the rest yourself.
I am editing this article on July 29, 2016. I did not delete the above, although now G Chrome does not consider my site and files a security threat. I will write about how I did this and what service I used in one of the following articles.
2. Another landing page “Video surveillance”. Beautiful design, animation of pop-up forms, excellent gallery with a pop-up description, reviews; 
3. Template “Installation of doors”. Simple and thematic design, shape feedback, reviews; 
4. Template “International cargo transportation”. Nice design, feedback forms, time countdown with slider, activity description in pop-up windows; 
5. Template "Cargo transportation". Excellent thematic design, feedback and order forms, animations; 
6. Template “Custom kitchens”. Thematic design, feedback forms, countdown with slider, descriptions in pop-up windows; 
7. Another “Custom Kitchens” template. The design has minimalism, feedback forms, a gallery; 
8. Template “Repair and decoration of apartments and offices.” Nice and easy design, feedback forms, reviews; 
9. “Eyelashes” template. Good design, feedback forms, price list, gallery; 
10. Template “Restoration of a car dealership”. Nice design, navigation in the form of a slider, gallery, feedback form; 
I hope you found something interesting for yourself and used the templates.
If you have any questions or need help, write in the comments to the article, I will answer everyone, I will help everyone.
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 important points is well thought out landing page with goods. The so-called landing page about the creation of which we will talk further and get ready codes pages.
What is a landing page? This is the page that people usually land on after clicking on an ad. Created for one offer: product, service or subscription. An effective landing page is the cornerstone of successful online marketing. The product may be the best on the market, the ads are perfected, but without a good landing page, efforts do not produce 100% results. It tells visitors what is on offer and why they should want it. A sense of urgency contributes to quick decision-making and the transition of the user to the category of a client.
How to create a Landing Page? It is wrong to believe that the answer lies in the ability to typeset. A good landing page is the result of coordinated work on goals, text, design and code. Landing pages, examples of which will be below, will help beginners learn the basics of working with layout, but will not replace conversion texts and understanding of the target audience. You can also create them using various Landing Page designers.
So before you create a landing page, ask yourself:
- What will a person do after landing on the landing page? Will he buy anything? Will you fill out the form? Subscribe to the newsletter? Before you track your conversion rate, set clear goals.
- Who are my competitors? In reality, these are three questions: who, how successful are they, and how can their achievements be applied? Imitation is the sincerest form of flattery. If your competitors are doing something that works, replicate it on your site.
- Who is my audience? The better you understand your niche and target audience, the greater the chance that your efforts will pay off.
You need to offer all the necessary information, but not so much that you overwhelm and drive away your potential client.
Examples of creating a landing page + coding for dummiesBefore we get started, let's take a quick look at HTML and CSS. Understanding how they work will help you create a landing.
HTML is a browser markup language for website visualization. Written using tags enclosed in angle brackets that define the content.
The tag opens () and closes () around the filling:
content
For fine-tuning, attributes are added after the name:
content
CSS - defines how to position HTML elements. Consists of selectors, properties and values:
#selector (property: value;)
The selector matches the name of a specific tag in html. Changing values and adding properties adjusts its appearance. You can create pages that look different from each other by applying different CSS styles to the same HTML.
5 initial stepsFor fast layout We will use a template with minimal design based on bootstrap. This is a system with its own selectors, which is used all over the world to speed up layout.
It looks modest.
From this fish a website for every taste is created in several stages.
Directory structure in the folder:
- index.html: This main file, which we will edit.
- /assets: auxiliary files are located here:
- /css: The directory contains bootstrap and icon styles. The file we will edit is main.css.
- /img: folder for site images.
- /fonts: icon fonts.
- /js: bootstrap javascript files.
Step 1: Using a Header
The headline and subheadings are key places that help convey the value of the offer in a clear manner.
Let's change the title and name of the site. Here you don’t need to have typing skills - you write your own text in the places highlighted in yellow on the screen.
Step 2. Brevity is the sister of conversion. Adding benefits and rates
You will need 4 sections:
- advantages;
- rates;
- reviews;
- call to action.
Let’s create a section of the main content “main”, into which we will insert the necessary sections:
…..
…..
…..
…..
Fill with filling instead of dots.
For the benefits section you will need this code:
Advantages
Fast
Reliable
Sed diam nonummy
Profitable
Elit, sed diam nonummy
Technically
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Reliable
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Profitable
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Technically
Lorem ipsum dolor sit amet, consectetuer adipiscing
Reliable
Lorem ipsum dolor sit amet, consectetuer adipiscing
Profitable
Lorem ipsum dolor sit amet, consectetuer adipiscing
Content for clarity:
It still looks sloppy, but there is no reason to panic, let’s continue.
We write down prices. The content changes in the same way as in the first step. general description with class “tarifs” and three tariffs.
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 be received different kinds, 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:
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
Let's set a call to action.
Benefit when ordering today
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Order now!
Reviews will help potential clients make a decision to buy a product. For clarity, we need avatars, so we’ll immediately put them in place - under each quote.
Client name.
Step 4: Grid and Mobile Friendly Integration
To implement the grid we need Bootstrap containers. It is important to remember the total number of valid column segments - 12. The class determines the width of the content display. The advantage of this ready-made grid is that the containers are designed with adaptability in mind and are immediately usable for mobile devices. Detailed description on the official site . The grid looks like this.
The contents of “main” will be wrapped in a container. To do this, the following is written at the top:
… .
If you need the block to fit the entire width of the screen, then container is inserted inside. Here it will be a jumbotron and a call to action.
We will wrap all elements that require placement on top of each other with line separators.
We can now adjust the width of the columns, focusing on the bootstrap grid. After wrapping, the filling stopped sticking to the edges of the screen and neat indents appeared.
We set prices in a row using the column class col-lg-4. Inside row lines, it is no longer necessary to write separate divs for wrapping; they can be combined with existing ones separated by a space.
By analogy, we set up columns for the reviews and benefits section. If you need to move an element to the side, use the offset column class col-lg-offset-2. The number at the end determines how many base columns the shift will occur by.
Step 5. Fonts and Icons
We implement Google Font heading fonts. When selected, open the import tab and copy the data from it to the main.css file. We also add title selectors to the file for which the new font is used.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* import font for headings */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Googlefont output */
}
For clarity, the advantages are described by a class with the self-explanatory name text-center and FontAwesome icons from the bootstrap set.
At this point the preparation is completely completed.
Landing page: examples of codes with offer, parallax and counterWe use the three most popular types: with a sentence, a form and with a countdown counter. As the layout progresses, the template will be supplemented with effects.
Example 1: with a sentenceLet's set the background of the main part and the padding so that the first screen is covered.
Jumbotron (
background: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
max-width: 100%;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}
Let's change the jumbotron header size from h2 to h1. Next, we write styles for the elements that need to be changed.
Let's start with the icons.
Benefits i(
color: #cac4c4;
}
After the hash sign, a color is specified. You can choose your own option using html color tables or an image editor.
Indentation for section headings
section h2 (
padding-top: 30px;
margin-bottom: 25px;
}
We are tidying up the appearance of tariffs. For convenience, we create our own classes for the elements that we want to highlight specifically.
Tariff No. 1
$10
per month/per person
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Order
And a lot of CSS. What places the sections are responsible for are stated in the comments - /* between slashes with an asterisk */
/* =========Tarif styles======== */
/* general view of the tariff */
.pricing_item(
background: #f2f2f2;
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #262b38;
cursor: default;
overflow: hidden;
}
/* change background when clicked */
.pricing_item:hover (
color: #444;
background: #daebef;
}
/* individual price tag background in each tariff */
.pricing_item:first-child .price (
background: #9ba9b5;
}
.pricing_item:nth-child(2).price (
background: #1f6098;
}
/* on wide screens, indentation and highlighting middle column tariff */
@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. Let's implement 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 when javascript help 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.
Example 2: with shape and parallax effectThe more form fields a visitor is presented with, the less likely he is to fill them out. Ask for only the minimum necessary information.
It is assembled by analogy. We will change backgrounds and colors. And, of course, we'll add a shape.
Let's start with parallax.
Let's change the background of the jumbotron to transparent:
background: transparent;
Inside head we will insert the script:
$(window).scroll(function(e)(
parallax();
});
function parallax())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}
The first line in the body is a container for parallax:
And in CSS its behavior is:
Bgparallax (
background: url(/../img/fon.jpg) repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}
Parallax is ready. But making changes to the code and 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 - transparent background and rounded corners.
The template is ready.
Example 3: with countdown counterWe change the filling of the jumbotron again and recolor the template to match the new background, similar to the previous template. Connect the counter script:
HTML
Time doesn't wait
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
var myCountdown1 = new Countdown((
time: 86400 * 3, // 86400 seconds = 1 day
width: 300
, height: 60
, rangeHi: "day"
, style: "flip" //