Landing page using ready-made html templates. Landing page templates. Landing page: examples of codes with offer, parallax and counter
For businesses, the use of landing pages has become one of the simplest and most profitable solutions. WordPress landing page templates have become a popular tool for creating such sites. They are based on a thoughtful and powerful “engagement system” to transform traffic into income.
They offer:
A template with high-end typography, one of the top creative themes. Free plugins included in the theme: Visual Composer, Layer Slider, Timetable, Visual Composer. Bridge includes an extensive collection of shortcodes, from basic building blocks to interactive infographics and advanced demo elements such as vertical progress bars.
The website contains attractive offers, car models, and service tariff plans. The parallax slider and the vertical slider attract particular attention.
Landing page for a private psychologist through which you can sell author’s books. A stylish subscription form helps to expand your customer base.
A landing page in bright white and blue colors with information about services and a built-in booking system.
Demo website for an animal shelter with a catalog of wards and donation collection functionality.
On the pages of the template you can see blocks with a schedule of church events and stories of parishioners. The site accepts online contributions.
Landing page in light colors. Uses a review slider and animated counters.
Black and white portfolio website. The main content of the main page is a full-screen horizontal slider and a navigation menu.
The demo site for a business project uses scrolling effects, which are so popular in modern landing page templates, and sliders and graphics familiar to WordPress.
A simple one-page website for a yoga studio. Its components include a block with achievement indicators and a large slider in the header.
Black and white landing page with thematic blocks “Training directions”, “Class schedule”, “Coaching staff”.
Demo for a travel portal. At the top there is a wide banner with pop-up text; the menu changes color as you scroll.
The landing page for demonstrating luxury watches uses a lot of photos and parallax backgrounds. The color scheme of the pages is white with dark gray accents.
The simple design of the site contains a minimum of animation - a color-changing top menu that expands to full screen, blocks with a parallax background.
A small corporate website with a large slider in the header. Like similar landing page templates made on WordPress, this landing page uses a “full screen width” layout.
A site for a rock musician, with the main emphasis on touring activities: large blocks use concert photos as a background, the latest blog entries are displayed on the main page.
A popular template whose main properties are responsive design, Retina compatibility and versatility. The user can choose from 2 visual designers - MuffinBuilder and Visual Composer, as well as plugins for sliders Slider Revolution, Layer Slider.
The following ready-made landing page templates have been created on BeTheme:
Demo for a sushi bar. The main content of the site is located on a light background framed by dark gray menus and footers. The top banner and slider of menu dishes allow you to demonstrate new assortment items.
A white background with contrasting text on the main block ensures good readability. Auxiliary elements - header, left sidebar, footer - are made in soft dark blue tones. Scrolling the page is accompanied by parallax shifting of the background.
Landing page WordPress for a local brewery. The page is decorated in brown tones interspersed with green. When scrolling, you can observe an impressive parallax effect.
A stylish template whose color design is based on shades of gray. The top of the page is stylized as a workplace with a spotlight that can be turned on and a computer.
Website of a professional barber salon in white and brown tones. Its design is worth noting: a large slider with pop-up text, a price list with switchable tabs, employee resumes, and an online registration form.
Template in bright colors of yellow, white and blue for the site of a water park, paid beach, swimming pool. Its pages feature a drop-down FAQ, a Masonry-style gallery, an interactive map, and panels with a call to purchase.
A recruitment agency website designed in a business style. The main color of the pages, green, is complemented by blocks of gray and white shades. The demo has buttons for going to pages with detailed information, a section for presenting services with video.
Template with an “airy” design in pinkish-lilac tones. Suitable for the website of an MLM company or the personal page of an agent promoting online cosmetics Faberlic, Avon and similar brands.
A universal responsive WordPress theme integrated with Visual Composer page builder and Ultimate Addons plugin. Among its demo sites you can find and download a landing page template, the task of which is to attract customers and increase the conversion of a web resource. The template has built-in premium plugins Go Pricing Tables, Slider Revolution, ConvertPlug, Layer Slider.
Online store for organic snacks. The landing page contains a product slider, a block describing its benefits, ingredient cards, and customer reviews.
This “Repair and Construction” landing page template introduces the company’s services, partners and employees, presenting information through sliders and sections with cards.
Demo for a psychological counseling clinic. A calm website design puts the client at ease and inspires confidence in the consulting specialists.
A clothing site that uses a light theme and dark blue decorative elements (menu, buttons, footer). The main components of the page are a slider with animated banners and product cards.
A template with increased performance, in addition to a set of plugins and modules, equipped with a Panel of Limitless Options. It uses premium plugins Revolution Slider, Visual Composer. Active theme support, the presence of videos and text manuals make it a good option for those who are going to buy a landing page template for the first time.
The design includes white, gray and brown colors. A memorable element is a portfolio sample slider with several tabs.
The most impressive components of the demo are a restaurant menu block with prices and a section with a video, to the screensaver of which a parallax shift is applied when scrolling.
The site consists almost entirely of photos; when you hover over them, a link appears with the name of the project. The hamburger icon expands the full-screen menu.
The landing page will promote the services of the fitness club by introducing its team to potential clients and highlighting the training programs. An animated counter of success indicators helps to increase trust in the company.
When you scroll the page with the mouse, the sections replace each other, completely occupying the screen. The last “sheet” displays the contact form.
Graphic blocks in dark gray and light gray shades describe the advantages of the advertised software. The slider shows screenshots on the virtual phone screen.
The page is divided into 2 parts - text and photos. As you scroll, the content changes: the left side goes up, the right side goes down, while text and photo content alternate.
A universal template for projects designed for high performance. The theme supports multilingualism and RTL mode. Demo sites on TheGem include responsive landing page templates. The template comes as a gift: Visual Composer constructor and plugins responsible for adaptive sliders - LayerSlider, NivoSlider, Revolution Slider.
Creative studio website. The dark gray color scheme of the pages is diluted with blocks of light colors. A multi-level menu makes navigation easier, and an expanded footer contains feedback and subscription forms.
Designed to create a web resource dedicated to the presentation of a single product or series of products. The menu changes color as you scroll, the page contains an animated display of elements and sections with a video background.
One-page website for software promotion. Top menu items move the visitor through sections of the page. An interesting element of the site is a slider of screenshots, one after another, adapting to the mobile phone screen.
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 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 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 stepsFor 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;
- 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 ordering today
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Order now!
Reviews will help potential customers decide to buy the product. For clarity, we need avatars, so we’ll immediately put them in place - under each quote.
Client name.
Step 4: Grid and Mobile Friendly Integration
To implement the grid, we need Bootstrap containers. It is important to remember the total number of valid column segments - 12. The class determines the width of the content display. The 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 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. Which places the sections are responsible for are stated in the comments - /* between slashes with an asterisk */
/* =========Tarif styles======== */
/* general view of the tariff */
.pricing_item(
background: #f2f2f2;
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #262b38;
cursor: default;
overflow: hidden;
}
/* change background when clicked */
.pricing_item:hover (
color: #444;
background: #daebef;
}
/* individual price tag background in each tariff */
.pricing_item:first-child .price (
background: #9ba9b5;
}
.pricing_item:nth-child(2).price (
background: #1f6098;
}
/* on wide screens the middle tariff column is indented and highlighted */
@media screen and (min-width: 66.250em) (
.pricing_item(
margin: 1.5em 0;
}
.featured(
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/* title */
.pricing_item h3 (
font-size: 2em;
margin: 0.5em 0 0;
color: #1d211f;
}
/* price tag background */
.price(
font-size: 2em;
font-weight: bold;
color: #fff;
position: relative;
z-index: 100;
line-height: 95px;
width: 100px;
height: 100px;
margin: 1.15em auto 1em;
border-radius: 50%;
background: #77a5cc;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
/* currency */
.currency(
font-size: 0.5em;
vertical-align: super;
}
/* clarification of the proposal */
.sentence (
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
color: #2a6496;
}
/* list */
.pricing_item ul (
font-size: 0.95em;
margin: 0;
padding: 1.5em 0.5em 2.5em;
text-align: left;
}
/* list items */
.pricing_item li (
padding: 0.15em 0;
}
/* rate order button */
.pricing_item button(
font-weight: bold;
margin-top: auto;
padding: 1em 2em;
color: #fff;
border-radius: 5px;
background: #428bca;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* change color when button is pressed */
.pricing_item button:hover,
.pricing_item button:focus (
background-color: #285e8e;
}
/* tariff background*/
.bg-2 (
background: #dddddd;
}
Result
Customer reviews. Let's give them a neat look and indicate their location.
/* =========Testimonials styles======== */
testimonials (
padding: 4em 0;
text-align: center;
}
.testimonials .avatar img (
border-radius: 50%;
float: left;
display: inline;
margin-right: 1em;
width: 65px;
height: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p (
text-align: left;
padding-top: 1em;
color: #5d5d5d;
font-weight: 900;
}
All that remains is to decorate the last call to action and the footer.
/* Action */
.action(
background: #476177;
min-height: 180px;
width: 100%;
padding: 4em 0;
text-align: center;
}
.action h2 (
color: #fff;
font-weight: 300;
}
.action p(
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
font-size: 1.2em;
}
.action .container (
margin-top: 3em;
}
/* Footer */
footer(
background: #333333;
padding: 1em 0;
text-align: right;
}
footer p(
color: #fff;
line-height: 1;
text-transform: uppercase;
font-size: 0.7em;
margin-top: 0.5em;
}
The footer button is assigned the built-in bootstrap class btn-default.
Bringing the template to life. We will introduce smooth scrolling and buttons for sections, as well as text animation on the first screen.
For the transitions to work, we will replace some of the section classes with id - for benefits and tariffs. And we will add links to the id to the buttons. Screenshot - what is attached to what, highlighted with a yellow marker.
We set indents for buttons - jbutton. Scrolling when pressed works, but very abruptly.
Smooth transitions are created using javascript or jquery. The latter is connected to Bootstrap templates by default.
Scrolling is now smooth.
Adding animation to text using Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). This is a ready-made open source code, it can be used on any website. Place the file from Github in the css folder and specify the path.
We select the effects here: https://daneden.github.io/animate.css/. We have fadeInDown selected. It is written in the code like this:
Now when the page is loaded or refreshed, the text will be animated. Ready.
Example 2: with shape and parallax effectThe more form fields a visitor is presented with, the less likely he is to fill them out. Ask for only the minimum necessary information.
It is assembled by analogy. We will change backgrounds and colors. And, of course, we'll add a shape.
Let's start with parallax.
Let's change the background of the jumbotron to transparent:
background: transparent;
Inside head we will insert the script:
$(window).scroll(function(e)(
parallax();
});
function parallax())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}
The first line in the body is a container for parallax:
And in CSS its behavior is:
Bgparallax (
background: url(/../img/fon.jpg) repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}
Parallax is ready. But making changes to the code and 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 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" //
It might be useful to read:
- Small hydropower in the world Small hydropower;
- System of grades: methodology for determining official salaries of grade 11 in Sberbank;
- Lesson - presentation on the topic "family traditions" Presentation of types of family traditions;
- Provisions and application of the professional standard for personnel officers Professional standards for personnel service workers;
- Conventional recording of defects when decoding images and documenting the results of radiographic inspection;
- Traffic management design (pod);
- Russian Aviation What is the speed of the Su 35;
- Executive Form of accumulation sheet in construction;