Universal landing page. Landing page templates

50 fresh one-page website templates for 2017. Landing pages or one-page sites are presented according to the usual scheme: template - example - link. All one-page templates can be downloaded absolutely free. Welcome!

All of these one-page sites use modern web development tools: HTML5 and CSS3, adaptive layout, animation, etc. Beautiful and stylish landing page templates are suitable for creating commercial sites on any topic. If you are looking for something to use for your landing page in 2017, choose what you like best from the templates below and that best suits your purposes. You can download one-page templates for free.

UPD from 07/13/2018: I remind you that this collection of templates was collected from various sources. Therefore, keep track of the relevance using the links provided. Blog Web Council does not bear any responsibility for changes, deletions or changes in the pricing policy of template authors.

Backyard is a free and beautiful high-converting one-page website template built with Bootstrap 3. The one-page website template has 5 different header styles and 6 color variations. This landing page template is well organized and has detailed code comments, making it very easy to customize and use in your projects.

Backyard is a multi-purpose one page website template that can be customized to suit all your needs. You can use it for topics like: education, health, startup, web application, mobile application, real estate, travel service, etc.

Weather Apps is a modern free landing page template designed using HTML5, CSS3 and Bootstrap 3x for weather forecasting, specifically for apps running on Android, iOS and/or Windows platforms mobile devices.

This one-page website template was inspired by a small business startup whose main product is a custom-designed weather forecast for a mobile app.

Template features:

GRAPE is a wonderful responsive one-page template created with Bootstrap v3.2.0, HTML5 and CSS3. Well organized and valid code. This is a premium landing page template.

Features of the GRAPE one-page website template:

Fully responsive design;
Modern and elegant design;
HTML5 & CSS3;
Bootstrap v3.2.0;
Google fonts used;
Integrated Google map;
Background with parallax effect;
Contact form on Ajax;
Integrated mailing service Mailchimp;
Awesome font for icons;
Smooth scrolling is used;
4 options - solid, image, image slider, transparent;
Well documented;
Easy setup, etc.

Blue App is a perfect example of a one-page website template in blue colors with a parallax effect. This one-page template is perfect for any corporate website.

Features of Blue App One Page Website Template:

Adaptive design;
HTML5 & CSS3;
Bootstrap 3;
Clean design;
Smooth scrolling;
Awesome font for icons;
Google Fonts;
Slider with reviews;
Price table.

Do you want to use the latest version of the Bootstrap 4 framework for your one-page website? Then this template Landing Page exactly for you! Simple, responsive and elegant one page website template

Peculiarities Landing template Page:

Fixed navigation menu;
Custom social buttons from the Font Awesome set;
Call to action with full background image;
Stock photos from Death to the Stock Photo;
Template mockup in PSD.

Treviso is a clean and modern one-page template. This is a simple but very useful landing page template. The most important sections such as home, about, portfolio, team, contact us are already here. The user can change the template to fit well with any theme without any problem.

Features of the Treviso one-page template:

Clean and modern design;
Bootstrap framework;
100% responsive template;
Valid layout;
Cross-browser support;
100% SEO;
CSS3 Animation;
Working contact form;
Fully customizable;
Contains the Awesome Icons font.

Clean and professional one-page website templates are hard to find. Rage is a multi-purpose one-page website template created in 2017. This is one of the best free, elegant and professional templates of 2017. Smooth appearance gives it a classy style. At first glance, you will be surprised to know that this high-quality HTML5 one-page template is completely free to download.

Rage is developed using Bootstrap 3, HTML5, CSS3 and jQuery. This one-page website template has all the necessary sections and functions.

Features of the Rage one-page template:

Creative design;
Adaptive design;
CSS3 Animation;
Bootstrap 3.3.5;
Clean code;
Solid typography;
Cross-browser support.

Made One is a free template for creating an effective one-page website. Made One is a template that brings creativity and professionalism to your website. Especially suitable for a business services website. Professional designers worked on the Made One template. It is built with a 1170px Bootstrap grid. Retina Ready Icons from FontAwesome are included in the package.

The second version of the beautiful one-page website template from the Made series. Made Two is a stylish and solid business template for a one-page website in 2017. The developers have included the latest technologies in this template:

Bootstrap
Modernizr
Font Awesome
jQuery
Owl-carousel

Main characteristics of the Made Two one-page template:

High quality, elegant and vibrant design;
Fully responsive;
Powered by Bootstrap;
Fully valid layout;
Code with comments for a web developer;
Cross-browser support;
SEO oriented;
High-quality typography;
Full documentation for the template;
Subscribe to news;
Social network support.

The Knight is a great free one-page website template based on bootstrap. The template can be used for business, portfolio, local business, personal websites, etc. It is a powerful and versatile multi-purpose one page template with perfect design and superior functionality.

This is by far the most advanced template available today with many customization options. Using Bootstrap brings a stunning and attractive style that is easy to customize in a way that best suits your upcoming project.

The Knight will be the last free one-page multi-purpose bootstrap template you'll ever want to use because it's so much better than anything you've seen before. It will present the best SEO results as the Bootstrapmade team has optimally optimized its structure.

Solid State is a simple and responsive one page website template 2017 based on HTML5, CSS3, jQuery and Bootstrap 3. It has over 100 pre-designed elements for you to choose from. Technically, you can build almost any website using this responsive one-page template.

Notes is a beautifully crafted, responsive one-page website template using HTML5, CSS3, Bootstrap and jQuery developed by Themefisher.

The Notes one-page template has a very attractive color scheme. It has a clean and minimal design. Good typography and great content strategy.

Main characteristics of the Notes one-page template:

Unique and elegant design;
Optimized code;
Valid layout;
Anti-aliased CSS3 animation;
Optimized for SEO;
Fully customizable;
Stylish navigation;
Google Fonts;
Built using HTML5 & CSS3 & Bootstrap 3;
Focus on usability and UX;
Responsive layout;
FontAwesomeIcon;
Stylish interface;
Well commented coding;
Easy to use.

Boxer is another great template from TemplateMO that would be perfect for a software related website. This free template is designed with HTML5, CSS3 and Bootstrap 3 and beautifully decorated with jQuery and CSS3 animations and effects.

Key features of the Boxer one-page website template:

Unique design;
Full screen background image;
Compatible with all browsers;
Smooth CSS3 animations and great jQuery effects;
100% fully customizable;
Google Fonts;
Built with HTML5 and CSS3;
Adaptive layout;
CSS Framework - Bootstrap 3;
Stylish interface;
Easy to use.

Oleose is an incredibly attractive and fully responsive one-page website template built on Bootstrap 3. Great for any app-related landing page. The template comes with developer-friendly and easily customizable code. It works on all major "IE8+" web browsers, tablets and phones.

Features of the Oleose one-page template:

Animation of sections;
Attention capture;
Latest JQuery plugins;
Three predefined colors;
Three free logos in PSD format;
Mobile layouts;
Built with LESS;
Full documentation;
SEO support;
Valid layout.

SevenApp is a beautiful and free one-page template for a mobile application website. The template comes with high quality code and SEO support. SevenApp is also well documented. You will find everything you need in the documentation folder after downloading.

SevenApp template features:

Built on Bootstrap 3 (latest stable version);
Animation of sections;
Latest JQuery plugins;
Cool carousel slider;
Captures the eye;
SASS support;
Well documented;
SEO support;
Valid HTML5 layout.

Engage is another gorgeous responsive premium one-page website template based on the ultra-modern Bootstrap 4 and HTML5 framework.

Engage one page template is well organized, very easy to customize and perfect for business, portfolio, online agency or any website. Engage comes with 40+ ready-to-use pages and tons of shortcodes to build any website in minutes. It is scalable, professional, easy to use, the best and very first Bootstrap 4 based template with all the latest features.

Here are the main characteristics of the Engage one-page website template:

Fresh and clean design;
Fully responsive layout;
Built-in Bootstrap 4;
40+ ready-made business pages;
Multipurpose template;
Easy to use and configure;
HTML5 and CSS3;
Unlimited colors;
Tons of shortcodes;
Ajax contact form;
SEO optimized;
Supports all browsers;
Well commented code;
Support 24/7;
Rich documentation;
Several icon packs;
CSS3 Animation.

UI Hero is a responsive, clean and free one-page business template built on the Twitter Bootstrap 3.2.x framework. All necessary tools built-in to create a successful landing page. UI Hero template comes with attractive CSS3 animations and is easily customizable to suit the needs of the website owner.

Corporal is a responsive, clean, stylish and free one page website template. perfect for business. Built with Twitter Bootstrap 3.2.x, FontAwesome 4.x with all working components such as: Ajax based contact form, portfolio gallery and more.

Corporal is a really good choice for business, portfolio and personal website.

The Notebook Flat one-page website template is a unique creation from the W3layouts team. You can use this template for any type of search sites for mobile applications, product launch websites, etc.

This flat design one page template is built in Fancy style but can be used as per the user's requirement.

Talon is a feature-rich one-page business template built using the latest technologies. It is suitable for freelancers and companies alike and offers the optimal level of customization options.
Talon provides a one-page layout that's more similar to what you'd typically pay for. The title starts with a list of features as it offers both slider and static image formats. The Live customizer pairs nicely with the Page Builder plugin for a drag-and-drop interface, and the blog layouts add variety for those interested in creating a stunning blog.

Along with the widgetized footer, you get access to several Google fonts. You can manage all your fonts and colors in the admin panel and you will be impressed by the large number of icons.

The Talon theme provides translation files to reach people all over the world. Not to mention, you can highlight your latest news and blog posts with thumbnail images on your homepage.

As a one-page website template, this solution comes with multiple rows that you can customize. For example, one is ideal for displaying your clients' logos, while the other is suitable for setting up a filterable portfolio. A characteristics slider is included, and the Meet the Team module features images of your employees, their names, and social media buttons.

Zerif Lite is a friendly one-page multi-purpose WordPress theme with a full-screen image in the background and a simple white menu bar at the top. It comes with an elegant and modern design that will fit perfectly into any business.

Zerif Lite one-page template has an interactive and colorful interface that combines parallax effect and lively animation. You can also use it for your online store.

Zerif Lite provides responsive design, clean and tested code, smooth parallax scrolling, WooCommerce integration, blog layout, theme options settings panel, custom feeds, smooth loading effect, full translation, user-friendly contact form, custom content blocks and many more customization options.

Owner is a powerful free WordPress theme that is easy to use, customizable and well designed multi-purpose business theme. The theme displays your website at its best on smartphones, tablets and laptops, as well as on large desktop screens. The theme includes many features that are most needed for a multi-purpose theme.

Naturelle is a stunningly beautiful and free one-page WordPress website template. The template is great for websites about nature! If you are a nature lover and want to publish everything related to nature, Naturelle is the theme for you.

Naturelle One Page Template is Mobile Friendly and has Parallax Scrolling, One Page Layout features, as well as a powerful yet easy to use admin panel and endless customization options. It does not require coding skills, but also provides many features for experienced developers.

Photo Magic is a powerful and retina-ready one-page WordPress website template specifically for, but not limited to, photographers, illustrators and creative professionals.

Photo Magic's template customizer is very user-friendly, so there's nothing to worry about. This theme focuses on large photos and provides many gallery, slider and portfolio options, and is the best solution for those with a photo story.

Apart from the post slider, there are other options available in Photo Magic One Page Template such as different blog layouts, customization API, translation into other languages (compatible with popular plugin) and many more. Its floating and visually responsive layout looks great on all devices and screen sizes.

Adney WordPress Theme is a clean, modern, flat, minimal and fully responsive free WordPress theme with a light and minimal style that is ideal for web agency business, corporate business, personal and business portfolio.

This one-page WordPress website template is ideal for promoting your services, business, or running a corporate blog. This is a fully responsive theme that looks great on any device.

EightPhoto is a beautiful, clean and elegant, free and responsive one-page WordPress website template. The template is specially designed for photographers and artists to help them showcase their amazing skills.

EightPhoto one-page website template has a beautifully designed slider, sections: about us, services, “call to action”, gallery, blog section and “Quick Contact” section. This cool template is built entirely on a customizer that gives you the ability to customize your site with a real-time preview.

Mercantile is a powerful and feature-rich, responsive one-page WordPress website template. It is designed to provide you with all the important features you need to promote and run your business, corporate, personal or any website in the internet world.

The main features of Mercantile One Page Template are integration with Page Builder by SiteOrigin, WooCommerce compatible, advanced custom widgets, WordPress Live Customizer and single or multi-page layout.

The Mercantile website template comes with limitless customization options, powerful features, elegant design, and incredible support.

Juno is a professional, multi-purpose one page website template with tons of customizable features, widgets and a clean, clean and modern design. With a focus on uncomplicated yet elegant design, Juno ensures a great looking website.

Juno One Page Template allows you to easily customize colors, fonts, sizes, and functional products, messages, or pages. Juno is ideal for use in businesses, creative agencies, individuals, teams and start-ups.

Azera Shop Luxury is an elegant, free one-page WordPress WooCommerce website template. Just the perfect one-page template for creating an online store.

Azera Shop Luxury Website Template is E-Commerce (Woo Commerce) Compatible, WPML, RTL, Photo Grid, Contact Form 7, Meta Slider, SiteOrigin Page Builder, SEO Friendly, Parallax Effect and Full Screen Image.

Azera Shop Luxury one-page template is one of best themes for e-commerce and a good alternative for storefront. Flat and simple design based on bootstrap template, great for any business/startup, blog, jewelry store or photography site.

Parallax One is a simple and elegant one-page website template that can be used for any purpose. It has a clean, beautiful appearance and an amazing parallax effect in the header.

The professional, feature-rich design of Parallax One one-page template is suitable for any business. The template has a cool parallax effect, as its name says. Overall, Parallax One has a modern and simple appearance. Moreover, it can work as a multi-page or single-page theme.

Parallax One one page website template is responsive, widget ready, has WooCommerce integration, custom logos, menus and icons, multiple color schemes, lots of social icons, Google map, parallax, smooth scrolling, convenient contact form, pricing tables. Full localization and a simple, elegant appearance.

ShopIsle is an amazing and modern one page template made especially for online stores that comes with a beautiful and elegant design.

ShopIsle one page website template has a full screen slider on the home page and provides smooth and soft scrolling, making your navigation more enjoyable. Your store will have a clean and beautiful appearance, displaying your products in a stylish manner.

The ShopIsle template offers nice and subtle animations that enhance its elegance. ShopIsle has responsive design, social links and ready-made translation. It also provides an easy contact form that helps you stay connected with your audience, and an About Us section where you can tell your visitors who you are and what your best projects are. The store's products can be easily viewed by users.

Hestia is a comprehensive one-page website template in material design style. Idelano is suitable for small businesses and start-ups. The template comes with a beautiful and modern interface built on a one-page layout. The theme is ideal for both corporate and creative purposes as it provides a clean and flexible look, an elegant portfolio and a memorable online store.

Hestia One Page Template has a fully responsive design that is always mobile friendly and plays perfectly on all devices. If you want to create amazing content quickly, then you need the most advanced drag-and-drop content builder. It just so happens that Hestia is fully compatible with SiteOrigin Page Builder - the best free solution for creating websites.

Flash is a flexible, free, multi-purpose one-page WordPress website template that is aesthetically beautiful in design, easy to use, and powerful in its features. Integration with SiteOrigin page builder and Flash Toolkit plugin makes the site template truly amazing.

Flash website template is a fully responsive and modern WP template, ideal for display on any device. The template offers many customization options so you can have full control over your site's design and create websites for any niche.

Flash One Page Website Template is a great free multi-purpose WordPress theme suitable for business, blog, portfolio, landing page, one page business website, creative agency, construction, food and restaurant or any other website.

IonMag is a beautiful, responsive, retina-ready WordPress one-pager template specially designed for news sites, magazines, newspapers, publications, personal and professional blogs, editorial style and review websites. The template comes with TD Composer's powerful drag-and-drop page builder, which allows you to create almost any page you like, customize categories, headers, and menus right on your site.

ionMag's free one-page template features 21 custom blocks and five building blocks designed to give you all the freedom you need to get creative. With unique features like Big Grids and News Ticker, unlimited categories and colors, smart classifieds system, your news site will be up and running in no time!

The IonMag template will give you a modern design, so you don't have to build your site from scratch. IonMag is compatible with most popular WordPress plugins and uses best SEO practices.

GivingPress Lite is the perfect free and responsive one page website template for WordPress, specially created for non-profit and conscious business owners. The theme is ideal for charities, churches, scholarships, scientific research and humanitarian sites.

The GivingPress Lite one-page website template includes multiple page templates to display content in a variety of layouts. The code is well documented with comments for all files. The website template comes with a responsive layout that looks amazing on any device and in any circumstance.

Gaga Corp is a Gaga Lite child theme with new external features and additional features.

Gaga Corp One Page Template has an elegant service section design with modern and trendy looks, Bulletin section, progress bar showing your stats, differently designed pricing table, great animations and much more.

Clarina is a free and beautiful one page WordPress website template with a flat and clean bootstrap based design and an elegant parallax effect. It provides simple, minimal and modern look, which can be used for any type of personal business or to launch a mobile application.

Keeping in mind the simplicity, Clarina Website Template Customizer is ideally designed in such a way that it is easy for any user to use and modify the content of the website. You can use it for your business/startup, agency, corporate website or photography portfolio.

Safreen is a super flat design and responsive, feature rich theme for one page website template. You will be amazed by the real-time customization, many smart options that will help you create your website easily.

The Safreen one-page template is built using modern web technologies: HTML5, CSS3 and jQuery. It is fully responsive and thus looks amazing on all screen types: desktop, laptop, tablet and smartphones.

Bloger is a simple, clean and minimal one-page blog template suitable for both personal and professional blogs, websites, company, organization, news and magazine blogs.

The Bloger template is fully customizable and contains all the features you need to run a full-fledged blog. It is fully responsive, bbPress compatible, translation ready, cross-browser compatible, SEO friendly, retina ready. No coding is required at all to create a full-fledged website and to run a blog.

The Blogger template has excellent user support through a support forum, live chat, and email.

Enlighten is a responsive, free one page WordPress website template that is ideal for creating a college, school, university and other school/educational websites.

Enlighten's One Page Template is fully user customizable, allowing you to use most of the theme settings instantly with real-time preview. This is a clean and sleek modern WordPress theme with great flexibility and features.

You can also use this one page template for various types business sites. The template is fully mobile-friendly, so your website content is sure to look great on any device. It features sliders on the home page, several menu options, a portfolio carousel, a service section, a video section, and a client section.

Onetone is a one-page business theme website template based on Bootstrap framework and coded with HTML5/CSS3. All the necessary information is displayed on one page in a clear order according to user preferences. The main sections intended for business purposes are already created for you, such as services, about the site, gallery, clients, etc.

Onetone one-page template also has an extensive admin panel where you can easily add an unlimited number of sections. There are several options available if you prefer to do some customization yourself, such as changing the background, parallax scrolling background, video background, Awesome Icons font, uploading logo and icon, adding custom CSS, etc.

Onetone One Page Website Template is responsive, clean and SEO optimized.

West is a one page business website template that aims to provide everything you need to help you create an amazing website for your company.

Here are just a few of the features you'll find in West's one-page template: Live Composer integration, font and color management, blog options, custom header option, and more.

Moesia is a vibrant and responsive business themed one page website template that you can use to create an effective online presence. Choose from 11 predefined blocks and create home page, which best suits your company.

Each of the blocks home page in the Moesia template, it can have a parallax background image and its own set of colors. Moesia also offers a set of Google fonts, two types of blog page layouts, cool animations and effects, parallax and much more.

When you are looking for a free one page WordPress website template, it makes sense to try Llorix One Lite solution due to its simplicity and beauty. The user-friendly design offers localization to connect people from all over the world, and the flexible layout ensures that anyone can see your content, whether on a computer, phone or tablet.

With the Llorix One Lite website template, you get a customizable feed that allows you to send personal messages to people or change the background to better reflect your brand. Smooth parallax scrolling is usually only found in premium templates, but the Llorix One Lite theme gets it right, using overlay text and calls to action to send people to other pages without slowing down the site with complex animations.

One Page is a professional and outstanding one page WordPress template. This is a fast growing business WordPress template. The one-page website template was built keeping design simplicity in mind.

The entire interface of the One Page theme is clutter-free and provides space for your most important business content.

If you want to make your visitors' lives easier, then the One Page theme from InkThemes.com is a great choice! It's ideal for businesses that want a clean design that's fairly familiar to traditional multi-page sites, while still offering the convenience of a single-page design.

OneEngine by EngineThemes bills itself as a “multi-purpose one-page template,” and it lives up to that reputation. The template comes with a built-in drag-and-drop builder for drag and drop, and you can create exactly the site you want with the features you need.

This theme offers parallax backgrounds, 60+ animation effects, a smart carousel that works with touch screens, support for over 600 Google fonts, unlimited color schemes and an Ajax contact form.
The OneEngine one-page template also offers an easy-to-use backend, so customizing it is very simple.

OneEngine is fully responsive so your site looks good no matter what device it's displayed on.

Intro is a modern one-page business website template suitable for companies or individuals who want to create a strong online presence. Intro features include a parallax effect in the header, a selection of Google fonts, custom colors, ready-made widgets for homepage creation, and more.

Consider the Awe WordPress one page website template if you want to create a website with a huge header and beautiful template blog. Awe is a stylish one-pager and has a powerful header area for integrating YouTube and Vimeo videos. Strong theme options help with color changes and loading logos, while a full responsive design helps those viewing your site on mobile devices such as phones and tablets.

Each section of Awe's one-page website template is sorted on the home page, so you can leave a welcome message or talk about your team members at the very top of your site. Additionally, some other modules include information about you, best skills (with counters), core features, and portfolio items.

Play with the unlimited slider options of this template and see how many people are willing to buy your services or products by showing the pricing table. The Contact Form 7 plugin fits well with the theme and Google Map helps people find your store easily.

Switch WordPress One Page Template offers an organized and trendy one-page layout with responsiveness to keep people happy while moving around with their mobile devices. The Revolution Slider plugin is included, allowing you to share animations and other effects when users visit your page. The sticky navigation bar stays in view to help people navigate your site, and the product feature area is a nice grid-based layout for highlighting what you offer your customers.

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:

built-in page builder;

cross-browser compatibility and adaptive layout, which ensure coverage of a larger client audience;

verified professional design;

free updates for an unlimited period.

50+ Premium Landing Page Templates for WordPressBridge Template

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.

1. Car showroom

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.

3. Dentist, dental office

A landing page in bright white and blue colors with information about services and a built-in booking system.

4. Animals

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.

6. Landing page about furniture

Landing page in light colors. Uses a review slider and animated counters.

7. Photographer’s personal website

Black and white portfolio website. The main content of the main page is a full-screen horizontal slider and a navigation menu.

8. Business, startup

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

9. Yoga

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

11. Travel

Demo for a travel portal. At the top there is a wide banner with pop-up text; the menu changes color as you scroll.

12. Clock

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.

13. Digital agency

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.

14. Business

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

15. Music

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.

BeTheme Template

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:

16. Sushi

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.

17. SPA salon

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.

18. Beer

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.

19. Artist/illustrator portfolio

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.

20. Barbershop

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.

21. Water park

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.

22. HR

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.

23. Perfume

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.

Template The7

Universal adaptive WordPress theme, integrated with the Visual Composer page builder and the 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.

24. Small online store

Online store for organic snacks. The landing page contains a product slider, a block describing its benefits, ingredient cards, and customer reviews.

25. Landing page - selling books

This “Repair and Construction” landing page template introduces the company’s services, partners and employees, presenting information through sliders and sections with cards.

27. Psychology

Demo for a psychological counseling clinic. A calm website design puts the client at ease and inspires confidence in the consulting specialists.

28. Landing page for training, conferences

29. Online clothing store

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.

Ronneby Template

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 support for the theme, the presence of videos and text manuals make it good option for those who are going to buy a landing page template for the first time.

30. Web studio

The design includes white, gray and brown colors. A memorable element is a portfolio sample slider with several tabs.

31. Restaurant

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.

32. Creative portfolio

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.

34. One-page with 3D scrolling effect

When you scroll the page with the mouse, the sections replace each other, completely occupying the screen. The last “sheet” displays the contact form.

35. Mobile application

Graphic blocks in dark gray and light gray shades describe the advantages of the advertised software. Slider shows screenshots on the screen virtual phone.

36. Model agency

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.

TheGem Template

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.

37. Creative agency

Creative studio website. The dark gray color scheme of the pages is diluted with blocks of light colors. Multi-level menu makes navigation easier, extended footer contains forms feedback and subscriptions.

38. Product/product landing page

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.

39. Business card website for the application

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.

A one-page website is convenient for businessmen because it can be created literally in one day. If you download a ready-made one-page website template, you can make a website for your company for a minimal 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?

Appearance. It is advisable to make the design in the general style of the company. The interface should not have too incompatible colors. However, users have long been tired of pastel colors, 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.

Number of blocks and the ability to customize them. Before choosing a template, decide exactly which blocks are needed to a minimum so as not to overload the page. When trying on the template, find out whether the blocks can be removed and swapped.

Cross-browser functionality and adaptive design will greatly expand the audience of potential clients. Therefore, be sure to choose only responsive one-page templates.

We offer one-page templates for free

If you decide to make a Landing Page for your company, 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 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 decide 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, my dear readers. Today we’ll talk about technical aspects with which we can increase the sales conversion of our goods or services. One of the important points is a well-designed landing page with products. The so-called landing page, the creation of which we will talk about later and get ready-made page codes.

What is a landing page? This is the page that people usually land on after clicking on an ad. Created for one offer: product, service or subscription. An effective landing page is the cornerstone of successful online marketing. The product may be the best on the market, the ads are perfected, but without a good landing page, efforts do not produce 100% results. It tells visitors what is on offer and why they should want it. A sense of urgency contributes to quick decision-making and the transition of the user to the category of a client.

How to create a Landing Page? It is wrong to believe that the answer lies in the ability to typeset. A good landing page is the result of coordinated work on goals, text, design and code. Landing pages, examples of which will be below, will help beginners learn the basics of working with layout, but will not replace conversion texts and understanding of the target audience. You can also create them using various Landing Page designers.

So before you create a landing page, ask yourself:

What will a person do after landing on the landing page? Will he buy anything? Will you fill out the form? Subscribe to the newsletter? Before you track your conversion rate, set clear goals.
Who are my competitors? In reality, these are three questions: who, how successful are they, and how can their achievements be applied? Imitation is the sincerest form of flattery. If your competitors are doing something that works, replicate it on your site.
Who is my audience? The better you understand your niche and target audience, the greater the chance that your efforts will pay off.

You need to offer all the necessary information, but not so much that you overwhelm and drive away your potential client.

Examples of creating a landing page + coding for dummies

Before we get started, let's take a quick look at HTML and CSS. Understanding how they work will help you create a landing.

HTML is a browser markup language for website visualization. Written using tags enclosed in angle brackets that define the content.

The tag opens () and closes () around the filling:

content

For fine-tuning, attributes are added after the name:

content

CSS - defines how to arrange HTML elements. Consists of selectors, properties and values:

#selector (property: value;)

The selector matches the name of a specific tag in html. Changing values and adding properties adjusts its appearance. You can create pages that look different from each other by applying different CSS styles to the same HTML.

5 initial steps

For quick layout, we will use a template with minimal design based on bootstrap. This is a system with its own selectors, which is used all over the world to speed up layout.

It looks modest.

From this fish a website for every taste is created in several stages.

Directory structure in the folder:

index.html: This is the main file that we will edit.
/assets: auxiliary files are located here:
/css: The directory contains bootstrap and icon styles. The file we will edit is main.css.
/img: folder for site images.
/fonts: icon fonts.
/js: bootstrap javascript files.

Step 1: Using a Header

The headline and subheadings are key places that help convey the value of the offer in a clear manner.

Let's change the title and name of the site. Here you don’t need to have typing skills - you write your own text in the places highlighted in yellow on the screen.

Step 2. Brevity is the sister of conversion. Adding benefits and rates

You will need 4 sections:

advantages;
rates;
reviews;
call to action.

Let’s create a section of the main content “main”, into which we will insert the necessary sections:

…..
…..
…..
…..

Fill with filling instead of dots.

For the benefits section you will need this code:

Advantages
Fast

Reliable

Sed diam nonummy

Profitable

Elit, sed diam nonummy

Technically

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

Reliable

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

Profitable

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

Technically

Lorem ipsum dolor sit amet, consectetuer adipiscing

Reliable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Profitable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Content for clarity:

It still looks sloppy, but there is no reason to panic, let’s continue.

We write down prices. The content changes in the same way as in the first step. General description with the “tarifs” class and three tariffs.

Tariff plans

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tariff No. 1
$10

per month/per person

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

Order
Tariff No. 2
$20

per month/per person

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

Order
Tariff No. 3
$30

per month/per person

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

Order

Looks like that.

For now, we are not interested in the appearance of the future landing page - we will look at examples of changing styles below.

Step 3: Trust Signals and Call to Action

Using targeted signals indicates to visitors that the brand is trustworthy. Signals can take many forms, but the classic one is customer feedback.

Customer Reviews

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

Let's set a call to action.

Benefit when you order today

Order now!

Reviews will help potential customers decide to buy the product. For clarity, we need avatars, so we’ll immediately put them in place - under each quote.

Client name.

Step 4: Grid and Mobile Friendly Integration

To implement the grid, we need Bootstrap containers. It is important to remember the total number of valid column segments - 12. The class determines the width of the content display. The good thing about this pre-made grid is that the containers are designed with responsiveness in mind and are immediately usable on mobile devices. Detailed description on the official website. The grid looks like this.

The contents of “main” will be wrapped in a container. To do this, the following is written at the top:

… .

If you need the block to fit the entire width of the screen, then container is inserted inside. Here it will be a jumbotron and a call to action.

We will wrap all elements that require placement on top of each other with line separators.

We can now adjust the width of the columns, focusing on the bootstrap grid. After wrapping, the filling stopped sticking to the edges of the screen and neat indents appeared.

We set prices in a row using the column class col-lg-4. Inside row lines, it is no longer necessary to write separate divs for wrapping; they can be combined with existing ones separated by a space.

By analogy, we set up columns for the reviews and benefits section. If you need to move an element to the side, use the offset column class col-lg-offset-2. The number at the end determines how many base columns the shift will occur by.

Step 5. Fonts and Icons

We implement Google Font heading fonts. When selected, open the import tab and copy the data from it to the main.css file. We also add title selectors to the file for which the new font is used.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* import font for headings */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Googlefont output */
}

For clarity, the advantages are described by a class with the self-explanatory name text-center and FontAwesome icons from the bootstrap set.

At this point the preparation is completely completed.

Landing page: examples of codes with offer, parallax and counter

We use the three most popular types: with a sentence, a form and with a countdown counter. As the layout progresses, the template will be supplemented with effects.

Example 1: with a sentence

Let's set the background of the main part and the padding so that the first screen is covered.

Jumbotron (
background: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
max-width: 100%;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Let's change the jumbotron header size from h2 to h1. Next, we write styles for the elements that need to be changed.

Let's start with the icons.

Benefits i(
color: #cac4c4;
}

After the hash sign, a color is specified. You can choose your own option using html color tables or an image editor.

Indentation for section headings

section h2 (
padding-top: 30px;
margin-bottom: 25px;
}

We are tidying up the appearance of tariffs. For convenience, we create our own classes for the elements that we want to highlight specifically.

Tariff No. 1
$10

per month/per person

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

Order

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

/* =========Tarif styles======== */
/* general form tariff */
.pricing_item(
background: #f2f2f2;
position: relative;
display: -webkit-flex;
display: flex;

flex-direction: column;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #262b38;
cursor: default;
overflow: hidden;

}
/* change background when clicked */
.pricing_item:hover (
color: #444;
background: #daebef;
}
/* individual price tag background in each tariff */
.pricing_item:first-child .price (
background: #9ba9b5;
}
.pricing_item:nth-child(2).price (
background: #1f6098;
}
/* on wide screens the middle tariff column is indented and highlighted */
@media screen and (min-width: 66.250em) (
.pricing_item(
margin: 1.5em 0;
}
.featured(
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/* title */
.pricing_item h3 (
font-size: 2em;
margin: 0.5em 0 0;
color: #1d211f;
}
/* price tag background */
.price(
font-size: 2em;
font-weight: bold;
color: #fff;
position: relative;
z-index: 100;
line-height: 95px;
width: 100px;
height: 100px;
margin: 1.15em auto 1em;
border-radius: 50%;
background: #77a5cc;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
/* currency */
.currency(
font-size: 0.5em;
vertical-align: super;
}
/* clarification of the proposal */
.sentence (
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
color: #2a6496;
}
/* list */
.pricing_item ul (
font-size: 0.95em;
margin: 0;
padding: 1.5em 0.5em 2.5em;
text-align: left;
}
/* list items */
.pricing_item li (
padding: 0.15em 0;
}
/* rate order button */
.pricing_item button(
font-weight: bold;
margin-top: auto;
padding: 1em 2em;
color: #fff;
border-radius: 5px;
background: #428bca;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* change color when button is pressed */
.pricing_item button:hover,
.pricing_item button:focus (
background-color: #285e8e;
}
/* tariff background*/
.bg-2 (
background: #dddddd;
}

Result

Customer reviews. Let's give them a neat look and indicate their location.

/* =========Testimonials styles======== */
testimonials (
padding: 4em 0;
text-align: center;
}
.testimonials .avatar img (
border-radius: 50%;
float: left;
display: inline;
margin-right: 1em;
width: 65px;
height: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p (
text-align: left;
padding-top: 1em;
color: #5d5d5d;
font-weight: 900;
}

All that remains is to decorate the last call to action and the footer.

/* Action */
.action(
background: #476177;
min-height: 180px;
width: 100%;
padding: 4em 0;
text-align: center;
}
.action h2 (
color: #fff;
font-weight: 300;

}
.action p(
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
font-size: 1.2em;
}
.action .container (
margin-top: 3em;
}
/* Footer */
footer (
background: #333333;
padding: 1em 0;
text-align: right;
}
footer p(
color: #fff;
line-height: 1;
text-transform: uppercase;
font-size: 0.7em;
margin-top: 0.5em;
}

The footer button is assigned the built-in bootstrap class btn-default.

Bringing the template to life. We will introduce smooth scrolling and buttons for sections, as well as text animation on the first screen.

For the transitions to work, we will replace some of the section classes with id - for benefits and tariffs. And we will add links to the id to the buttons. Screenshot - what is attached to what, highlighted with a yellow marker.

We set indents for buttons - jbutton. Scrolling when pressed works, but very abruptly.

Smooth transitions are created using javascript or jquery. The latter is connected to Bootstrap templates by default.

Scrolling is now smooth.

Adding animation to text using Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). This is a ready-made open source code, it can be used on any website. Place the file from Github in the css folder and specify the path.

We select the effects here: https://daneden.github.io/animate.css/. We have fadeInDown selected. It is written in the code like this:

Now when the page is loaded or refreshed, the text will be animated. Ready.

Example 2: with shape and parallax effect

The more form fields a visitor is presented with, the less likely he is to fill them out. Ask for only the minimum necessary information.

It is assembled by analogy. We will change backgrounds and colors. And, of course, we'll add a shape.

Let's start with parallax.

Let's change the background of the jumbotron to transparent:

background: transparent;

Inside head we will insert the script:

$(window).scroll(function(e)(
parallax();
});
function parallax())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

The first line in the body is a container for parallax:

And in CSS its behavior is:

Bgparallax (
background: url(/../img/fon.jpg) repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}

Parallax is ready. But making changes to the code and a new background requires reassigning the color scheme.

Making the menu dark:

Navbar-default (
background-color: #333;
border-color: #444;
color: darkgrey;
border-radius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
color: darkgrey;
background-color: rgba(0, 0, 0, 0.5);
}

We replace the sentence in jumbotron with a new one - with the form code:

Landing Page turns visitors into customers
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

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

And we prescribe the appearance

/* form */
.headform-list (
list-style-type: none;
line-height: 26px;
font-weight: 400;
padding: 0px;
margin-bottom: 40px;
}
.headform(
overflow: hidden;
position: relative;
background-color: rgba(0,0,0,.4);
padding: 35px 40px;
border-radius: 8px;
}
input, button, select, textarea (
width: 100%;
margin-bottom: 10px;
}
.headform-list li .fa (
position: absolute;
top: 0px;
left: 0px;
width: 42px;
font-size: 24px;
text-align: center;
}
.headform-list li(
position: relative;
min-height: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p(
color: #fff;
font-size: 16px;
font-style: italic;
}

The text of the jumbotron also ended up here, as it demanded changes.

We are changing the tariffs.

/* general view of the tariff */
.pricing_item(
background-color: rgba(0,0,0,.4); /* line changed */
border-radius: 4px; /* line changed */
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #f2f2f2; /* line changed */
cursor: default;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* change background when clicked */
.pricing_item:hover (
color: #444;
background: #ddd; /* line changed */
}

Now they look like this - a transparent background and rounded corners.

The template is ready.

Example 3: with countdown counter

We change the filling of the jumbotron again and recolor the template to match the new background, similar to the previous template. Connect the counter script:

HTML

Time doesn't wait
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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

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

var myCountdown1 = new Countdown((
time: 86400 * 3, // 86400 seconds = 1 day
width: 300
, height: 60
, rangeHi: "day"
, style: "flip" //

Universal landing page. Landing page templates

New articles

Popular articles