Я уже некоторое время работаю с дизайном лендингов и накопил теоретическую и практическую базу. В целом эта статья не претендует на педивикию, но способна раскрыть пару моментов.

Итак, повторюсь, эта статья нацелена в первую очередь на заказчиков.

В последнее время ко мне стали обращаться клиенты за аудитом лендингов. Я честно всё оцениваю, причем не с целью переманить клиентов, а с целью разобраться в вопросе.

ЧТО ТАКОЕ ЛЕНДИНГ И ЗАЧЕМ ОН НУЖЕН

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

Методом проб, ошибок и А/Б тестов выяснилась наиболее оптимальная схема лендинга:

1. Логотип и основная деятельность компании.

2. Заголовок. Собственно к чему всё это.

3. Коротенечко описание и картинка.

4. Блок преимуществ.

5. Для целевого лендинга - обязательна форма.

6. Желательно ограничение по времени или количеству.

Итак, смысл лендинга - коротко и ясно сделать выгодное заявление.

А ОДНОСТРАНИЧНИКИ

Это тоже относительно свежая тема. Одностраничник - это сайт, но без отдельных страниц. Вся информация просто вываливается на одну "простыню". Меню работает только в рамках этой одной страницы.

Отдельными блоками, а часто просто строками на всю ширину экрана выводится информация о компании, команда, услуги, портфолио, контакты и так далее.

НУ И В ЧЕМ ПРОБЛЕМА

Для меня, как веб дизайнера и веб аналитика, проблема оказалась в том, что большинство лендингов в рунете - это одностраничники. Клиенты, полагая, что они не зря платят бабки, активно давят на разработчиков и не понимают, что идеальный лендинг должен умещаться в один экран.

Разработчики, пытаясь оправдать оказанное им высокое доверие, в панике лепят лендинги дикой длинны, мешая всё в одну кучу, щедро перемежая малоинтересные блоки с экшн элементами.

Таким образом, проводя аудит лендингов, я постоянно натыкаюсь на одностраничники. Я не против них, я против тупого накидывания блоков да побольше да ещё.

ЛЁГКИЙ СТОРИТЕЛЛИНГСлучай раз.

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

Помимо дизайна, верстки и программирования, компания-разработчик ещё и некоторое время продвигала этот лендинг. Результат: за два месяца 1 звонок и всё.

При этом, кстати поставили колбэкхантера (ничего личного, но на лендингах бесит неимоверно), а вот метрику забыли. Ни статистики, ни вебвизора.

Случай два.

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

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

Смысл этой сцены

1. Соблюдайте баланс между количеством и разумом.

2. Ставьте статистику, особенно перед продвижением.

3. Займитесь сначала маркетингом.

Всё, всем спасибо. Кто хочет внести свои пять копеек - прошу.

Бесплатно за репост в ФБ или ВК, потому что пока ещё набираю интересные кейсы.

В переводе с английского landing page — это дословно «посадочная страница». Означает это понятие отдельную страницу в интернете, где почти нет ссылок на другие разделы сайтов. Это своеобразная «заглушка», тупик в интернете, где у посетителя есть только два варианта действия — либо сделать то, что от него хотят на лендинге, либо уйти.

Практика убедительно доказала, что лендинги продают намного лучше обычных многостраничных сайтов. Но… не всегда. В этой статье мы с вами разберем от А до Я — что такое лендинги, для чего они нужны (или почему не нужны) лично вам. А также рассмотрим конкретные примеры хороших и плохих лендингов, чтобы вам было от чего отталкиваться.

И давайте начнем с вопроса — кому и зачем нужны лендинги. Думаете, что только для бизнеса? Вовсе нет.

Для чего нужны лендинги (и при чем тут Чернобыль)?

Знаете, главную причину, почему человек не покупает то, что ему предлагают в интернете? Вовсе не потому, что он не хочет это покупать. Чаще всего причина в том, что он просто не понимает:

  • Что ему что-то предлагают
  • Что именно ему предлагают?
  • Зачем ему то, что ему предлагают?
  • и так далее

То есть люди просто не замечают ваших рекламных предложений. Вокруг слишком много информации. Сайты пестрят баннерами, ссылками, видосами, картинками. У среднестатистического пользователя интернета параллельно открыто 10 — 15 вкладок браузера, между которыми он хаотично передвигается («сёрфит»).

Лендинги призваны решить именно это проблему — максимально сконцентрировать внимание посетителя на той информации, которую вы предлагаете. Первыми все преимущества лендингов оценили, конечно, предприниматели. Обычный сайт дает 0,1 — 0,5% конверсии в заказ. А лендинг дает 1 — 7% конверсии в заказ. Вывод? Будем делать много лендингов.

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

Но что вы скажите например вот об этом (ссылка откроется в новой вкладке)?

Это тоже лендинг, на котором нам показывают обычную вроде статью. То есть здесь никто ничего не продает. Журналисты подготовили материал о катастрофе в Чернобыле и разместили его на лендинге — отдельной странице. Хотя они вполне могли точно так же разместить этот материал на сайте своей газеты. Что при этом поменялось бы?

Они потеряли бы наше внимание. На лендинге все внимание приковано к тому, что вы пытаетесь донести до посетителя. Кстати, этот материал про ЧАЭС стал одним из самых посещаемых в Рунете по этой теме. Не думаю, что им удалось бы достичь такого же успеха, если бы они разместили статью просто на сайте. Полистав этот лендинг так и хочется заново пройти «S.T.A.L.K.E.R — Тень Чернобыля».

Вывод — лендинги надо использовать там, где вы хотите добиться максимального внимания вашей аудитории. Будете ли вы при этом что-то продавать, к чему-то призывать, что-то возвещать — совершенно не важно. Важно то, что слушать вам в любом случае будут намного внимательнее.

Кстати, а в чем же заключается «магия» лендинга? Только ли в том, что там нет посторонних ссылок и менюшек?

Вторая причина, почему лендинги работают лучше обычных сайтов

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

Ведь кликнуть на какой-нибудь интересный заголовок в меню гораздо проще, чем оформлять заказ и платить деньги. Поэтому мы людям выбора не даем — либо покупай, либо уходи. Никаких «вправо — влево». Поэтому когда будете делать лендинг — обязательно проследите за тем, чтобы на нем не было никаких посторонних ссылок, уводящих посетителя от целевого действия.

Но эта причина не единственная. Еще один важный момент — это красивое графическое оформление информации.

Знаете, как устроены обычные сайты? Они работают на каких-нибудь «движках», которые автоматически генерируют страницы. При этом дизайн и структура всех этих страниц всегда остается неизменной.

Если вы захотите добавить какие-нибудь особенные элементы, то вам придется сильно потрудиться (и не факт, что у вас получится). А лендинг — это отдельный «мир». Там вы можете творить все, что пожелаете. А это очень важно.

Дизайн лендинга — это правильное подчеркивание и усиление того, что вы хотите сказать с помощью графических элементов. Это могут быть рисунки, стрелочки, особые шрифты, видео. Все это будет работать на то, чтобы посетитель по максимуму «потребил» то сообщение, которое мы хотим до него донести.

Чуть ниже я вам дам пример лендинга, где очень удачно информация усиливается с помощью дизайна. А пока давайте вернемся к лендингу про Чернобыль. Вы его пролистали? Дайте угадаю, как вы действовали.

Вы листали, выхватывая куски текста, и останавливались на видео-вставках, которые проигрывались автоматически при пролистывании. Возможно, вы не досматривали эти видео-вставки до самого конца, но вы их некоторое время смотрели, ведь так?

А вот обычные видео, которые расположены по бокам на этом же лендинге, и которые автоматически не включаются, вы почему-то смотреть не стали. Вот в этом и есть разница в оформлении обычного сайта и лендинга. Попробуйте сделать на многостраничнике видео-вставку, которая включалась бы при пролистывании. Это очень непросто.

А если вы вставите обычные видео в свою статью — никто их смотреть не будет. И то же самое с остальными графическими элементами. То, что выделено цветом, шрифтом, рисунком — привлекает внимание и остается в памяти. Обычный текст прочитывается «по диагонали» (в лучшем случае).

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

Возможно вы сейчас думаете, что сделать хороший лендинг — это очень сложно. Все эти графические элементы, структура, оформление — наверняка без дорогих специалистов по дизайну и web-программированию здесь не обойтись.

На самом деле это не так. Ваш лендинг не обязан быть очень красивым и напичканным новейшими скриптами. Чаще даже наоборот — более простые лендинги, сделанные «на коленке» работают лучше, чем профессиональные. На то есть своя причина. Излишняя красота отвлекает от содержимого не меньше, чем ссылки и менюшки на обычных сайтах.

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

Да, конечно, лендинг может быть простым. Но постарайтесь сделать так, чтобы он не сквозил «кустарщиной». Потому что это сильно подорвет к вам доверие. Я прошу прощения у Олега Осипова, кем бы он ни был, но такие лендинги для живых людей делать нельзя.

Посетители вашего сайта мыслят примерно так. Лендинг сделан ужасно, значит у них нет денег на специалистов, которые бы сделали это нормально. Раз нет денег, значит у них никто ничего не покупает. А раз у них никто ничего не покупает — значит у них плохой товар/услуга.

Конечно, все это они «считывают» подсознательно, но факт остается фактом — ваш лендинг будет очень плохо работать. Чуть ниже опять-таки я дам вам инструкцию, как сделать аккуратный и профессиональный лендинг своими руками.

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

Пример крутого лендинга

Редко получается найти по-настоящему качественный лендинг. Либо слишком перегружен графикой и скриптами, либо слишком примитивен, либо дурацкий текст, либо его слишком много… Конечно, ошибок при создании лендинга можно совершить много.

Но вот пример лендинга, который вы спокойно можете использовать как образец.

Полный вариант этого лендинга вы можете посмотреть . На мой взгляд, здесь всего в меру. А главное — минимум текста, и каждая мысль красиво оформлена графически. Так, что мимо глаз вы ничего важного не пропустите.

Обратите внимание, и в первом и во втором примерах лендинги «продают» бесплатное действие. В первом случае — скачать бесплатную книгу. Во втором — записаться на бесплатный вебинар. Но насколько разные ощущения они вызывают.

Хотите уметь делать такие же красивые лендинги самостоятельно? Не вопрос.

Как сделать лендинг технически

Сегодня есть два основных варианта, как вы можете сделать хороший лендинг самостоятельно. Первый вариант — это из готового html шаблона, второй — с помощью одного из многочисленных онлайн-конструкторов лендингов.

У каждого из этих вариантов есть свои плюсы и минусы. Для создания лендинга из шаблона вам нужен, во-первых, шаблон, а во-вторых, хотя бы начальные знания html. Я постарался максимально облегчить вам задачу, и написал . Там же я даю вам готовый бесплатный шаблон, который вы сможете отредактировать под свои нужды.

Что касается онлайн-конструкторов, то я их не очень люблю. Ваши возможности там всегда ограничены возможностями самого конструктора. Кроме того, многие элементы смотрятся не очень красиво, а немного «подправить» их не получится. Кроме того, такие конструкторы, как правило, генерируют много лишнего кода. Страница из-за этого становится тяжелой и медленно загружается.

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

Вот так выглядит рабочая область этого конструктора.

Но сделать оболочку одностраничника — это только полдела. Самое важное — это грамотное его наполнение.

Что написать на лендинге, чтобы он продавал

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

Я подготовил для вас материал, в котором расписал (откроется в новой вкладке). Там же я привел еще примеры лендингов из разных областей, и описал ошибки, которые там допущены. Так что вы их уже, надеюсь, не совершите.

А после того, как у вас готов красивый лендинг, и даже наполнен правильным содержанием — самое время привести на него посетителей.

Как правильно продвигать лендинг

Многостраничные сайты исторически продвигаются с помощью SEO-оптимизации. С лендингами такое не пройдет, потому что там, как правило, слишком мало ценного контента, чтобы заинтересовать поисковые системы.

Поэтому лендинги в основном продвигают через контекстную рекламу. Это такие системы как Яндекс-Директ, РСЯ, Гугл Адвордс, КМС, таргетинг вконтакте и другие. Там вы даете рекламу, привлекаете аудиторию, которую могло бы заинтересовать ваше предложение, и оплачиваете отдельно каждый клик по вашему объявлению. Поэтому она и называется «PPC» — то есть «pay-per-click» («оплата за клик»).

Конечно, лендинги можно продвигать и через SEO, но это отдельная тема для разговора. А пока я хотел сделать небольшое заключение.

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

Но если вы хотите получить максимум внимания аудитории к вашему предложению — лучше лендинга ничего не придумаешь. Не забудьте скачать мою книгу . Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет =)

До скорого!

Ваш Дмитрий Новосёлов

Приветствую, мои уважаемые читатели. Сегодня поговорим о технических моментах, с помощью которых мы сможем увеличить конверсию продаж своих товаров или услуг. Одним из важных моментов является качественно продуманная посадочная страница с товарами. Так называемая 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. Краткость - сестра конверсии. Добавление преимуществ и тарифов

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

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

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


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

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

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


Преимущества
Быстро

Надежно

Sed diam nonummy


Выгодно

Elit, sed diam nonummy


Технично

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


Надежно

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


Выгодно

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


Технично

Lorem ipsum dolor sit amet, consectetuer adipiscing


Надежно

Lorem ipsum dolor sit amet, consectetuer adipiscing


Выгодно

Lorem ipsum dolor sit amet, consectetuer adipiscing


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

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

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



Тарифные планы

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.


Тариф №1
$10

в месяц/с человека



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Заказать
Тариф №2
$20

в месяц/с человека



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Заказать
Тариф №3
$30

в месяц/с человека



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Заказать

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

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

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

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



Отзывы клиентов

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

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



Выгода при заказе сегодня

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:


Заказать сейчас!

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


Имя клиента.


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

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

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

… .

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

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

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

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

По аналогии выставляем колонки для раздела отзывов и преимуществ. Если требуется сдвинуть элемент в сторону, используем класс оффсетных колонок 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;
}

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


Тариф №1
$10

в месяц/с человека



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Заказать

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

/* =========Tarif styles======== */
/* общий вид тарифа */
.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;

}
/* смена фона при нажатии */
.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;

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

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

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

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

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

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

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

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

Начнем с parallax .

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

background: transparent;

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


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

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

А в 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 на новое - с кодом формы:







Landing Page превращает посетителей в клиентов
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.












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

/* 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: со счетчиком обратного отсчета

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


Html





Время не ждет
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" //