Создание Лендинг пейдж: примеры + коды готовых страниц

Приветствую, мои уважаемые читатели. Сегодня поговорим о технических моментах, с помощью которых мы сможем увеличить конверсию продаж своих товаров или услуг. Одним из важных моментов является качественно продуманная посадочная страница с товарами. Так называемая landing page о создании которой мы поговорим далее и получим готовые коды страниц.

Создание Лендинг пейдж: примеры + коды готовых страниц

Что такое Лендинг пейдж (landing page)? Это страница, на которую люди попадают, как правило, после клика по объявлению. Создается под одно предложение: товар, услугу или подписку. Эффективная посадочная страница — краеугольный камень успешного интернет-маркетинга. Товар может быть лучшим на рынке, объявления доведены до совершенства, но без хорошей landing page усилия не дают 100% результата. Она рассказывает посетителям, что предлагается, и почему они должны хотеть это получить. Ощущение срочности способствует быстрому принятию решений и переходу юзера в разряд клиента.




Как создать Лендинг? Неверно полагать, что ответ кроется в умении верстать. Хорошая посадочная страница — результат слаженной работы над целями, текстом, дизайном и кодом. Лендинг пейдж, примеры которых будут ниже, помогут освоить новичкам азы работы с версткой, но не заменят собой конверсионные тексты и понимание ЦА. Также вы можете создавать их с помощью различных конструкторов Лендинг пейдж.

Поэтому перед тем, как создать целевую страницу, спросите себя:

  • Что сделает человек после попадания на landing page? Будет ли он что-то покупать? Заполнит форму? Подпишется на рассылку? Прежде, чем отслеживать коэффициент конверсии, определите четкие цели.
  • Кто мои конкуренты? На самом деле, это три вопроса: кто, насколько они успешны и как можно применить их достижения? Имитация — самая искренняя форма лести. Если конкуренты делают то, что работает, повторите подобное на своем сайте.
  • Кто моя аудитория? Чем лучше вы понимаете свою нишу и ЦА, тем больше шансов, что старания окупятся.

Нужно предложить всю необходимую информацию, но не настолько, чтобы подавить и отогнать потенциального клиента.

Примеры создания лендинг пейдж + кодинг для чайников

Перед тем, как приступить к делу, кратко рассмотрим HTML и CSS. Понимание, как они работают, поможет создать landing.

HTML — язык браузерной разметки для визуализации сайтов. Записывается с помощью тегов, заключенных в угловые скобки, которые определяют содержание.

Тег открывается (<>) и закрывается (</>) вокруг начинки:

<тег>содержимое</тег>

Для точечной настройки после имени добавляются атрибуты:

<тег атрибут=”значение”>содержимое</тег>

CSS — определяет, как расположить HTML элементы. Состоит из селекторов, свойств и значений:

#селектор {свойство: значение;}

Селектор соответствует названию конкретного тега в html. Изменением значений и добавлением свойств регулируется его внешний вид. Можно создавать непохожие друг на друга страницы, применяя различные CSS-стили к одному и тому же HTML.

5 начальных шагов

Для быстрой верстки будем использовать шаблон с минимальным оформлением на основе bootstrap. Это система с собственными селекторами, которая применяется во всем мире для ускорения верстки.

Выглядит скромно.

Создание Лендинг пейдж: примеры + коды готовых страниц

Из этой рыбы создается сайт на любой вкус за несколько этапов.

Структура каталогов в папке:

  • index.html: Это главный файл, который будем редактировать.
  • /assets: здесь лежат вспомогательные файлы:
  • /css: каталог содержит стили бутстрап и иконок. Файл, который будем редактировать — main.css.
  • /img: папка для картинок сайта.
  • /fonts: шрифты иконок.
  • /js: яваскрипт-файлы bootstrap.

Шаг 1: Использование заголовка

Заголовок и подзаголовки — ключевые места, помогающие донести в ясной форме ценность предложения.

Изменим заголовок и название сайта. Здесь умение верстать не потребуется — пишется свой текст в местах, выделенных желтым на скрине.

2

Шаг 2. Краткость — сестра конверсии. Добавление преимуществ и тарифов

Потребуется 4 секции:

  • преимущества;
  • тарифы;
  • отзывы;
  • призыв к действию.

Оформим раздел основного контента “main”, в который вставим необходимые секции:

<main role=”main”>
<section class=”benefits”> ….. </section>
<section class=”tarifs”> ….. </section>
<section class=”testimonials”> ….. </section>
<section class=”action”>….. </section>
</main>

Заполняем начинкой вместо многоточий.

Для секции преимуществ потребуется этот код:

<section class=”benefits”>
<h2>Преимущества</h2>
<h4>Быстро</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h4>Надежно</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h4>Выгодно</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h4>Технично</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h4>Надежно</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h4>Выгодно</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h4>Технично</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
<h4>Надежно</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
<h4>Выгодно</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
</section>

Содержимое для наглядности:

3

Пока смотрится неаккуратно, но поводов для паники нет, продолжаем.

Прописываем расценки. Содержимое меняется по аналогии с первым шагом. Общее описание с классом “tarifs” и три тарифа.

<!– Тарифы================================================== –>
<section class=”tarifs”>
<h2>Тарифные планы</h2>
<p>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.</p>
<h3>Тариф №1</h3>
<h4>$10</h4>
<p>в месяц/с человека</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Lorem ipsum dolor</li>
<li><strong>10 Lorem</strong> ipsum</li>
</ul>
<button>Заказать</button>
<h3>Тариф №2</h3>
<h4>$20</h4>
<p>в месяц/с человека</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Lorem ipsum dolor</li>
<li><strong>10 Lorem</strong> ipsum</li>
</ul>
<button>Заказать</button>
<h3>Тариф №3</h3>
<h4>$30</h4>
<p>в месяц/с человека</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Lorem ipsum dolor</li>
<li><strong>10 Lorem</strong> ipsum</li>
</ul>
<button>Заказать</button>
</section>

Выглядит так.

4

Пока нас не интересует внешний вид будущей лендинг пейдж — примеры изменения стилей рассмотрим ниже.

Шаг 3: Сигналы доверия и призыв к действию

Использование целевых сигналов указывает посетителям, что бренд заслуживает доверия. Сигналы могут принимать различные виды, но классика – это отзывы клиентов.

<!– Отзывы================================================== –>
<section class=”testimonials”>
<h2>Отзывы клиентов</h2>
<p>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:</p>
<blockquote> “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.” </blockquote>
<blockquote> “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.” </blockquote>
<blockquote> “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.” </blockquote>
</section>

Установим “призыв к действию”.

<!– Призыв к действию ================================================== –>
<section class=”action”>
<h2>Выгода при заказе сегодня</h2>
<p>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:</p>
<button>Заказать сейчас!</button>
</section>

Создание Лендинг пейдж: примеры + коды готовых страниц

Отзывы помогут потенциальным клиентам принять решение купить продукт. Для наглядности нужны аватарки, поэтому сразу пропишем их на место — под каждой цитатой.

<div class=”avatar”> <img src=”путь к картинке” />
<p>Имя клиента.</p>
</div>

Шаг 4: Интеграция с сеткой и Mobile Friendly

Для внедрения сетки нам потребуются контейнеры Bootstrap. Важно запомнить общее количество допустимых сегментов колонок — 12. Класс определяет ширину отображения контента. Плюс этой готовой сетки в том, что контейнеры рассчитаны с учетом адаптивности и сразу применимы для мобильных устройств. Подробное описание на официальном сайте. Сетка выглядит так.

Создание Лендинг пейдж: примеры + коды готовых страниц

Содержимое “main” обернем в контейнер. Для этого в его верхней части прописывается:

<div class=”container”> … </div>.

Если нужно, чтобы блок встал на всю ширину экрана, то container вставляется внутрь. Здесь это будет джамботрон и призыв к действию.

Все элементы, требующие расположения друг над другом, обернем разделителями строк.

<div class=”row”>

Колонки мы теперь можем настроить по ширине, ориентируясь на сетку бутстрапа. После обертывания начинка перестала прилипать к краям экрана, появились аккуратные отступы.

Создание Лендинг пейдж: примеры + коды готовых страниц

Выставляем расценки в ряд, применив класс колонок col-lg-4. Внутри строк row уже не обязательно прописывать отдельные дивы для обертывания, можно комбинировать с имеющимися через пробел.

<div class=”col-lg-4″>

Создание Лендинг пейдж: примеры + коды готовых страниц

По аналогии выставляем колонки для раздела отзывов и преимуществ. Если требуется сдвинуть элемент в сторону, используем класс оффсетных колонок col-lg-offset-2. Цифра в конце определяет, на какое количество базовых столбцов произойдет сдвиг.

Шаг 5. Шрифты и иконки

Мы реализуем шрифты для заголовков Google Font. При выборе открываем вкладку импорт и копируем данные из нее в файл main.css. Также добавляем в файл селекторы заголовков, для которых применяется новый шрифт.

@import ‘https://fonts.googleapis.com/css?family=Roboto+Condensed’; /* импорт шрифта для заголовков */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: ‘Roboto Condensed’, sans-serif; /* Гуглфонт вывод */
}

Создание Лендинг пейдж: примеры + коды готовых страниц

Для наглядности преимуществам прописан класс с говорящим названием text-center и иконки FontAwesome из набора бутстрапа.

Создание Лендинг пейдж: примеры + коды готовых страниц

На этом подготовка полностью завершена.

Лендинг пейдж: примеры кодов с предложением, параллаксом и счетчиком

Используем три наиболее востребованных типа: с предложением, формой и со счетчиком обратного отсчета. По мере верстки шаблон будет дополняться эффектами.

Пример 1: с предложением

Установим фон главной части и отступы, чтобы был покрыт первый экран.

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

Создание Лендинг пейдж: примеры + коды готовых страниц

Изменим размер заголовка джамботрона с h2 на h1. Далее прописываем стили для элементов, которые нужно изменить.

Начнем с иконок.

.benefits i{
color: #cac4c4;
}

После знака решетки задан цвет. Можно подобрать свой вариант, воспользовавшись таблицами html-цветов или редактором изображений.

Создание Лендинг пейдж: примеры + коды готовых страниц

Отступы для заголовков секций

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

Приводим в порядок внешний вид тарифов. Для удобства создаем собственные классы элементам, которые хотим выделить точечно.

<div class=”col-lg-4 pricing_item”>
<h3>Тариф №1</h3>
<h4 class=”price”><span class=”currency”>$</span>10</h4>
<p class=”sentence”>в месяц/с человека</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Lorem ipsum dolor</li>
<li><strong>10 Lorem</strong> ipsum</li>
</ul>
<button>Заказать</button>
</div>

И много CSS. За какие места отвечают участки, прописано в комментариях — /* между слешами со звездочкой */

/* =========Tarif styles======== */
/* общий вид тарифа */
.pricing_item {
background: #f2f2f2;
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: #262b38;
cursor: default;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* смена фона при нажатии */
.pricing_item:hover {
color: #444;
background: #daebef;
}
/* индивидуальная подложка ценника в каждом тарифе */
.pricing_item:first-child .price {
background: #9ba9b5;
}
.pricing_item:nth-child(2) .price {
background: #1f6098;
}
/* на широких экранах отступы и выделение средней колонки тарифа */
@media screen and (min-width: 66.250em) {
.pricing_item {
margin: 1.5em 0;
}
.featured {
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/* заголовок */
.pricing_item h3 {
font-size: 2em;
margin: 0.5em 0 0;
color: #1d211f;
}
/* подложка ценника */
.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 {
font-size: 0.5em;
vertical-align: super;
}
/* уточнение предложения */
.sentence {
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
color: #2a6496;
}
/* список */
.pricing_item ul {
font-size: 0.95em;
margin: 0;
padding: 1.5em 0.5em 2.5em;
text-align: left;
}
/* пункты списка */
.pricing_item li {
padding: 0.15em 0;
}
/* кнопка заказа тарифа */
.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;
}
/* смена цвета при нажатии кнопки */
.pricing_item button:hover,
.pricing_item button:focus {
background-color: #285e8e;
}
/* фон тарифов*/
.bg-2 {
background: #dddddd;
}

Результат

Создание Лендинг пейдж: примеры + коды готовых страниц




Отзывы клиентов. Придадим им аккуратный вид, обозначим расположение.

/* =========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;
}

Создание Лендинг пейдж: примеры + коды готовых страниц

Осталось украсить последний призыв к действию и футер.

/* Action */
.action {
background: #476177;
min-height: 180px;
width: 100%;
padding: 4em 0;
text-align: center;
}
.action h2 {
color: #fff;
font-weight: 300;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.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;
}

Кнопке для футера присвоен встроенный класс бутстрапа btn-default.

Создание Лендинг пейдж: примеры + коды готовых страниц

Оживляем шаблон. Внедрим плавную прокрутку и кнопки для разделов, а также анимацию текста на первом экране.

Чтобы переходы сработали, часть классов секций заменим на id — для преимуществ и тарифов. А ссылки на id пропишем к кнопкам. Скрин — что к чему привязывается, выделено желтым маркером.

Создание Лендинг пейдж: примеры + коды готовых страниц

Задаем отступы кнопкам — jbutton. Прокрутка при нажатии работает, но очень резко.

Плавные переходы создаются при помощи javascript или jquery. Последний по умолчанию подключен к шаблонам Bootstrap.

<script src=”assets/js/scroll.js”></script>

Теперь прокрутка стала плавной.

Добавление анимации к тексту с помощью Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Это готовый открытый код, он может использоваться на любом сайте. Файл с гитхаба помещаем в папку css и прописываем путь.

<link href=”assets/css/animate.css” rel=”stylesheet”>

Подбираем эффекты здесь: https://daneden.github.io/animate.css/. У нас выбран fadeInDown. Прописан в коде так:

Создание Лендинг пейдж: примеры + коды готовых страниц




Теперь при загрузке или обновлении страницы текст будет анимирован. Готово.

Пример 2: с формой и параллакс-эффектом

Чем больше полей формы предлагается посетителю, тем меньше шансов, что он их заполнит. Просите лишь минимально необходимую информацию.

Собирается по аналогии. Менять будем фоны и цвета. И, разумеется, добавим форму.

Начнем с parallax.

Изменим бэкграунд jumbotron на прозрачный:

background: transparent;

Внутри head вставим скрипт:

<script type=”text/javascript”>
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$(‘.bgparallax’).css(‘top’,-(scrolled*0.2)+’px’);
}
</script>

Первой строкой в body ставится контейнер для параллакса:

<div class=”bgparallax”></div>

А в CSS его поведение:

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

Параллакс готов. Но внесение изменений в код и новый фон требует переназначения цветовой гаммы.

Делаем меню темным:

.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);
}

Заменяем предложение в jumbotron на новое — с кодом формы:

<div class=”jumbotron”>
<div class=”container”>
<!– вступительный блок ============================== –>
<div class=”row”>
<div class=”col-sm-6 col-md-7 col-lg-6″>
<div class=”header-txt”>
<h1>Landing Page превращает посетителей в клиентов</h1>
<h4>Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.</h4> </div>
</div>
<div class=”col-sm-6 col-md-5 col-lg-offset-1″>
<div class=”headform”>
<ul class=”headform-list”>
<li>
<p><i class=”fa fa-check”></i> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
</li>
<li>
<p><i class=”fa fa-check”></i> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
</li>
</ul>
<form method=”post” action=”#”>
<input type=”text” name=”name” id=”header_form_name” placeholder=”Имя”>
<input type=”text” name=”email” id=”header_form_email” placeholder=”Email *”>
<input type=”submit” name=”submit” value=”Поехали!” class=”btn-primary”> </form>
</div>
</div>
</div>
</div>
</div>

И прописываем внешний вид

/* 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;
}

Сюда же попал текст джамботрона, так как он требовал перемен.

Создание Лендинг пейдж: примеры + коды готовых страниц

Перекрашиваем тарифы.

/* общий вид тарифа */
.pricing_item {
background-color: rgba(0,0,0,.4); /* строка изменена */
border-radius: 4px; /* строка изменена */
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; /* строка изменена */
cursor: default;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* смена фона при нажатии */
.pricing_item:hover {
color: #444;
background: #ddd; /* строка изменена */
}

Теперь они выглядят так — прозрачный фон и скругленные уголки.

Создание Лендинг пейдж: примеры + коды готовых страниц

Шаблон готов.

Пример 3: со счетчиком обратного отсчета

Снова меняем начинку джамботрона и перекрашиваем шаблон под новый фон по аналогии с предыдущим шаблоном. Подключаем скрипт счетчика:

<script src=”assets/js/countdown.js”></script>
Html
<div class=”jumbotron”>
<div class=”container”>
<!– вступительный блок ============================== –>
<div class=”row”>
<div class=”col-sm-6 col-md-7 col-lg-6″>
<h1>Время не ждет</h1>
<h4>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.</h4> </div>
<div class=”col-sm-6 col-md-5 col-lg-offset-1″>
<div class=”headform”>
<ul class=”headform-list”>
<li>
<p><i class=”fa fa-check”></i> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
</li>
<li>
<p><i class=”fa fa-check”></i> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
</li>
</ul>
<script type=”application/javascript”>
var myCountdown1 = new Countdown({
time: 86400 * 3, // 86400 seconds = 1 day
width: 300
, height: 60
, rangeHi: “day”
, style: “flip” // <- no comma on last item!
});
</script>
</div>
<input type=”submit” name=”submit” value=”Поехали!” class=”btn-danger”> </div>
</div>
</div>
</div>

В файле стилей убираем нижний радиус формы, доводим до ума кнопку.

Дополнительно было перекрашено меню под новый фон и изменен стиль текстов в джамботроне — по аналогии с предыдущим примером. Результат.

Создание Лендинг пейдж: примеры + коды готовых страниц

Тарифы

Создание Лендинг пейдж: примеры + коды готовых страниц

Нижняя часть

Создание Лендинг пейдж: примеры + коды готовых страниц

На этом примеры Лендинг пейдж завершены, но код требует дополнительной работы.

Лендинг пейдж должна быть быстрой и хорошей, как Ferrari — время загрузки страницы имеет огромное влияние на показатели отказов. Оптимизируйте изображения, минимизируйте размер готовых скриптов и стилей для максимальной эффективности.

В уроке представлены примеры создания хороших лендинг пейдж, которые помогут привезти Вам реальных клиентов, а вы научитесь чему-то новому. Ставим лайки и делаем репосты. До скорых встреч.

Чтобы скачать все исходники, представленные в уроке в виде готовых страниц нажмите на одну из кнопочек социального замка, чтобы его открыть и получить ссылку.

Создание Лендинг пейдж: примеры + коды готовых страниц

С уважением, Галиулин Руслан.

Также интересно почитать:




Рейтинг
( Пока оценок нет )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: