Здравствуйте, уважаемые читатели блога сайт! В этой статье я сделал подборку 10 -и HTML шаблонов Landing Page (одностраничник в простонародье), которые, на мой взгляд, более удачные и с высокой конверсией. Когда-то давно, когда я начинал делать лэндинги (4 года назад), художник с меня такой себе и по-этому я искал шаблоны. Естественно вокруг попадались только ширпотреб, конструкторы, платные шаблоны. Сейчас, конечно, с этим делом попроще, много есть толковых шаблонов на различные тематики, но все же, нужно поискать.
Предлагаю Вашему вниманию 10 HTML
шаблонов одностраничников. Я не могу сказать по какой причине браузер G Chrome
, считает что файлы с вирусами или содержат нежелательное ПО (у меня таких файлов не было и нет), в базе Гугла нет отметки, что сайт по санкциями, файлы проверены надежным и распространенным сервисом virustotal.com/ru/
. С этим мне еще предстоит разобраться. Если я вас не убедил, то проверьте файлы сами. Я приложу скриншот первого файла, остальные проверьте сами.
Редактирую эту статью 29.07.2016 года. Не стал удалять вышесказанное, хотя теперь G Chrome не считает мой сайт и файлы угрозой безопасности. О том как я это сделал и каким сервисом пользовался, я напишу в одной из следующих статей.
2. Еще один лэндинг «Видеонаблюдение». Красивый дизайн, анимация всплывающих форм, отличная галерея со всплывающим описанием, отзывы;
3. Шаблон «Установка дверей». Простой и тематический дизайн, форма обратной связи, отзывы;
4. Шаблон «Международные грузоперевозки». Приятный дизайн, формы обратной связи, обратный отсчет времени со слайдером, описание деятельности во всплывающих окнах;
5. Шаблон «Грузоперевозки». Отличный тематический дизайн, формы обратной связи и заказа, анимации;
6. Шаблон «Кухни на заказ». Тематический дизайн, формы обратной связи, обратный отсчет времени со слайдером, описания во всплывающих окнах;
7. Еще один шаблон «Кухни на заказ». В дизайне минимализм, формы обратной связи, галерея;
8. Шаблон «Ремонт и отделка квартир и офисов». Приятный и легкий дизайн, формы обратной связи, отзывы;
9. Шаблон «Ресницы». Хороший дизайн, формы обратной связи, прайс, галерея;
10. Шаблон «Восстановление автосалона». Приятный дизайн, навигация в виде слайдера, галереи, формы обратной связи;
Надеюсь Вы нашли что-то для себя интересное и воспользовались шаблонами.
Если возникнут вопросы или нужна будет помощь, то напишите в комментариях к статье, всем отвечу, всем помогу.
Приветствую! С вами Денис Герасимов, сайт сайт и мы поговорим про то, как создать лендинг самому, при этом еще адаптивный и современный. Вы читаете текстовую версию видео.
Выставим некоторые требования к нашему будущему лендингу:
- Быстрый , то есть быстро загружался. Поэтому будем делать его сами, на HTML и CSS.
- Адаптивный , то есть подстраивался под экраны разных устройств. Чтобы на наш лендинг могли зайти с ПК, планшета, смартфона и т.п. и на всех устройствах он выглядел красиво и удобно.
- Современный , то есть мы могли бы встроить на него слайдер, добавить различные модальные окна, либо всплывающие какие-то подсказки.
- Красивый . То есть мы могли бы добавить иконки и кнопки, которые органично бы смотрелись на нашем лендинге.
Как создать современный и красивый лендинг самому?
- Необходимы хотя бы начальные знания html и css, то есть вы должны представлять, как добавить в структуру html хотя бы класс css, чтобы изменить его внешний вид. если вы используете некоторые трудности с этим, то я могу вам порекомендовать бесплатные курсы от Евгения Попова (ссылки на скачивание в презентации, которую можете найти в конце текста ⇓), которые содержат несколько уроков, после просмотра которых вы уже начнете понимать, что это такое (ссылка).
- Изучить документацию по фреймворк bootstrap. Вы можете выбрать фреймворк самостоятельно. Это специальный фреймворк, который содержит наборы стилей и ява скриптов, которые можно легко встроить в наш сайт, и они будут смотреться очень органично. Так же он содержит ячеистую структуру, которая позволит нам создать адаптивный дизайн.
- Выбрать структуру сайта. То есть представлять, как будет выглядеть каркас нашего будущего сайта. Например, мы хотим, чтобы сверху у него был заголовок, так называемая шапка, затем размещено какое-то изображение и форма подписки. Нам необходимо создать эту структуру, каркас.
- Воспользоваться конструктором для создания структуры сайта. Конструктор находится по адресу www . layoutit . com , с помощью него можно создать структуру сайта, даже не обладая специальными навыками и знаниями.
- Скачать полученную структуру на компьютер и изменить ее дизайн. Готовый лендинг после этого можно смело закачивать на сервер.
Перейдем к практике
На примере лендинга, созданного мной lp..Директ. Bootstrap содержит разные элементы дизайна, например иконки, которыми можно воспользоваться. А также содержит различные ява скрипты, с помощью которых можно сделать модальные окна, всплывающие, которые можно закрыть либо сверху, либо снизу. Это пример простейшего лендинга, который в-принципе не плохо работает, у него хорошая конверсия.
Давайте познакомимся с документацией Bootstrap
Фреймворк bootstrap можно скачать по адресу www . getbootstrap . com . Этот продукт от создателей Twitter. Этот фреймворк постоянно развивается и на данный момент последняя его версия 3.3.4. Для подключения к нему сайта нужно скачать этот архив и прописать определенные строчки в коде html. В итоге вы получите доступ к css, components, javascript. Также bootstrap можно подключить не скачивая его, используя технологию CDN, просто прописав в коде определенные строчки. Эта технология выбирает ближайший физически расположенный сервер к вашему посетителю и уже с него подгружает файлы стилей или ява скриптов. Это ускоряет загрузку вашего лендинга. При этом данный код минимизирован.
После подключения bootstrap вы получите доступ к набору стилей CSS. Он имеет ячеистую структуру Grid System, состоящую из 12 колонок. Нужно понимать, как создаются эти колонки. Допустим вы хотите, чтобы на вашем сайте было 2 колонки. Одна из которых занимает 2/3 части страницы, а другая 1/3. В большую колонку хотите, например, вставить изображение, а в меньшую форму для заполнения. Для этого необходимо прописать строчку, в ней прописать колонку со стилем 8 и колонку с 4, указанным на сайте bootstrap. После того, как вы пропишите стили необходимые вам, то зайдя на ваш сайт с мобильного устройства, колонка, которая идет второй спускается ниже. В итоге, ваш дизайн становится адаптивным . Если вы хотите структуру с тремя колонками, равными, то необходимо 12 разделить на 3 и уже прописать код с цифрой 4, в коде страницы. И так далее.
Чтобы не запутаться в работе с ячеистой структурой, я предусмотрел для вас работу в конструкторе www.layoutit.com . Более подробную работу с конструктором я опубликую в следующей статье.
Также bootstrap содержит файлы для Typography, с набором различных стилей заголовков, которые вы можете выбрать для своего лендинга и прописать в коде. Внутри этого раздела есть так же классы выравнивания Alignment classes, например, если вы хотите, чтобы текст был по центру, достаточно скопировать определенный код и вставить его в код лендинга. Так же есть файлы списков Lists и многое другое. Можно создать таблицы с разными стилями в разделе Tables, формы Forms (можно сделать формы столбиком, в одну строчку, форму с дополнительными символами, форму во всю строчку и т.д.). В разделе Buttons вы можете выбрать стили кнопок на вашем лендинге. Вы сможете задать цвет кнопок, размеры, активные или неактивные кнопки. В разделе Images можно задать стили изображений. Например, чтобы изображение было круглым необходимо вставить определенный код. В разделе Helper Classes можно изменить цвет текста, фон текста и т.п.
Так же мы получаем доступ к различным компонентам, например, к глиф иконкам. Для добавления какой-либо иконки на сайт необходимо прописать определенный спан класс (span class). Под изображением каждой иконки написано какой класс необходимо прописывать в коде, чтобы получить нужное изображение на своем лендинге. Также можно получить доступ к Dropdown выпадающим спискам, Button groups группам кнопок, Navs навигации и многому другому. Все эти возможности вы можете посмотреть по разделам в списке в правой части страницы сайта bootstrap.
Доступ к JavaScript позволяет нам сделать модальные окна, в которые можно вставлять формы. Эти окна также имеют ячеистую структуру, что позволяет адаптировать его под любое мобильное устройство. Так же можно добавить различные кнопки, выпадающие списки и другие функции, работающие на ява скриптах.
Это было небольшое ознакомление с bootstrap и его структурой. В следующей статье мы уже будем создавать структуру лендинга в специальном конструкторе, адаптивную структуру нашего будущего лендинга.
Готовые лендинг пейдж шаблоны нужны для быстрого запуска нового продукта, его продвижения при помощи LP-страницы или мобильного приложения, либо мотивации пользователей зарегистрироваться / подписаться на рассылку. Для «целевой страницы» крайне важны удобство и простота пользования с грамотным расположением . Современные продающие шаблоны лендингов, разрабатываются с прицелом на возможность создания адаптивного сайта с высокой конверсией.
Демо |
Crossway – Startup Landing Page Template
Ультра-современная HTML5 тема на Bootstrap 3.1.1. Поставляется с 4 макетами: одно/много страничник, варианты панели навигации. Легкий эффект параллакс-прокрутки интегрирован в тему лендинга, адаптированную под мобильные и получение органического трафика (SEO).
Демо |
DotSquare
Html landing page шаблон для веб и мобильных приложений, нацелен на легкую генерацию лидов. Обладает быстрой загрузкой и валидным html, css кодом. В верхней части одностраничника продублирована форма контактов с .
Демо |
Primo Responsive Landing Page Template
Одностраничный HTML5 лендинг-шаблон с CSS3-эффектами. Имеет трехколоночный каркас, создан на Bootstrap 3. Подойдет для продаж iOS/Android-приложений. В шаблон включено 2 лейаута (с Parallax и без), Ajax формы контактов, PrettyPhoto лайтбокс и 5 цветовых схем. Легок в настройке: смените hex-коды и связанные элементы окрасятся в новый цвет. PSD в комплекте.
Демо |
Hype – App Landing Page
Современный, готовый к Retina шаблон для мобильных приложений предлагает 8 вариантов цветов, опции для изображений / .
Демо |
Gotte Multipurpose Landing Page
Многоцелевой лэндинг шаблон в плоском стиле поставляется с 3 вариантами index, 6 цветовыми схемами. Шаблон создан на twitter bootstrap3, включен PHP скрипт формы контактов и загрузки.
Демо |
Slander – Responsive Bootstrap HTML5 Landing Page
Slander – идеальный вариант для стартапа и компаний, подходит профессионалам или индивидуальному проекту. Отзывчивый дизайн с Bootstrap и HTML5 / CSS3 включает адаптивный слайдер, слайдер вкладок, форму новостной подписки и пр.
Appster – Ultimate Clean App Landing Page Template
Демо |
Cloud – An Easy To Use App Landing Page
Элегантный, чистый и минималистичный HTML5 / CSS3 шаблон лендинг пейдж с отличным функционалом. Шаблон разработан под страницу Coming Soon (скоро запуск), идеален для создания страницы приложения и сайта-витрины.
Демо |
OnEvent – Special Event Landing Page
Адаптивный лэндинг-шаблон для спец. мероприятий. Имеет секции под , коммерческое видео, расписание событий, список гостей.
Демо |
Appreative Responsive Landing Page Template
Appreative – адаптивный шаблон, предназначенный для краткого информирования. Подходит для различных типов задач.