Разработка дизайна лендинг пейдж по принципу «хочу, как у него» осталась еще в 2014 году, когда эффективность продающей страницы раскрылась по максимуму, а компании поняли, что с помощью лендинга можно не только быстро продавать товар/услугу, но и раскрывать себя с креативной точки зрения. Современные landing page - это не только продающая структура, но и отличная возможность вызвать у посетителя WOW-эффект, восхищаться идеей страницы и ее реализацией.

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

Все 9 примеров , собранных из Интернета, мы посчитали крутыми. Простота, соответствующая принципу лендинга, удобство и учет основных требований, свойственных целевой странице, делают примеры продающих Landing page высококонверсионными.

Пример продающего сайта № 1

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

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

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

Сложно представить как самый простой блок лендинга можно сделать таким сложным и непонятным. К тому же, тексты писать нужно в стиле обращения к клиенту. Не "оставить заявку", а "оставьте заявку".

Пример лендинга № 2

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

Разжигается интерес критериями.

Профессиональные и яркие фото и видеоматериалы еще сильнее разжигают интерес к услуге.

"Дожимаем" посетителя рядом преимуществ и закрываем потребности, вызываем "желание".

Логический завершающий структуры AIDA - блок "действие".

Пример лендинг пейдж № 3

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

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

Отличный блок с мотивацией на первое занятие. Большой минус - персонаж другой национальности.

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

Пример страницы лендинга № 4

Хороший landing page, разработанный нашей веб-студией, который может стать примером для подражания и вдохновением для других разработчиков и клиентов. Одностраничник и раскрывает проблему целевой аудитории (в нашем случае, это женщины с большим объемом груди), и сразу решает ее путем качественного оффера.

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

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

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

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

И фотография директора компании с его обращением к клиенту.

Большой объем отрицательного белого пространства, за счет которого концентрируется внимание на контенте, а также достаточно простое оформление контента создают впечатление стильного и современного дизайна. Лендинг цепляет своей концепцией и конвертирует посетителей в клиентов благодаря грамотному маркетингу.

Пример посадочной страницы № 5

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

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

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

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

Пример удачного лендинга № 6

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

Этот landing page имеет отличительную особенность, которой редко пользуются другие разработчики. Она максимально раскрывает вопрос цены, предлагая пользователю самостоятельно выбрать ценовой диапазон, рассмотрев варианты, которые ему по карману.

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

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

Пример посадочной страницы № 7

Мы выбрали этот пример лендинг пейдж потому что он в корне отличается от привычных традиционных одностраничников.

Сайт посвящен услуге по доставке молока. Но он выполнен в шуточной форме и ориентирован лишь на малую группу целевой аудитории.

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

Здесь не наблюдается продающей структуры и проработки проблем, как это видно в предыдущих красивых примерах лендингов. Однако посыл сайта понятен и интересен, поэтому сам лендос имеет место быть.

Большой объем инфоконтента, который изложен "по фану" для вызова улыбки, дополняется функцией аудиопроигрывания, что также добавляет странице юмора. Но, пролистнув чуть ниже, наблюдаем блок с призывом действию, типичный "классическим" продающим лендингам.

Здесь нет социальных доказательств, блока доверия, блоков преимуществ и выгод. Зато есть рецепт котлеток:-)

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

Пример продающего сайта landing page № 8

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

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

Блок выгод акцентирует внимание на удобство сотрудничества.

Блок выгод дополняется блоком преимуществ компании, которые в комплексе создают мощную мотивацию клиента к действию.

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

Пример landing page № 9

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

При выборе исполнителя потенциальному клиенту важна репутация и опыт компании. Именно на этой информации потребитель формирует выгоды для себя.

Отдельный бонус для посетителя - реальные фотографии проектов, созданных компанией. Яркие, красивые и привлекательные фото становятся плюсом к доверию посетителя.

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

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

Напутственные слова

Современный пользователь, изощренный бесчисленным количеством продающих страниц, попадающимся ему на глаза, уже устал от однотипности. Сегодня в моду вошла уникальность, чем интереснее и необычнее лендинг, тем выше вероятность того, что он привлечет внимание юзера. К тому же, хороший и эксклюзивный дизайн - это всегда плюс: и посетителя удивить, и себя порадовать. А приятно удивленный посетитель, как минимум, +10% к конверсии. Желаем оригинальных и вкусных идей! А если с этим возникли трудности, вы всегда можете заказать landing page в нашей веб-студии.

Подписывайтесь на блог и следите за нашими обновлениями.

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о такой важной вещи как посадочная страница , которую очень часто на буржуйский манер называют лендинг пейдж (от английского landing page — целевая страница). Что же это такое и почему это так важно?

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

Что такое лендинг пейдж и почему это так важно

Очень часто даже при правильной работе по привлечению нужных людей (целевой аудитории) на свой сайт ( , и т.п.) вы, как владелец бизнеса, не почувствуете от этого отдачи. Вроде бы и трафик идет, и аудитория является целевой, а продаж или подписок (смотря какое конверсионное действие вы выбрали в качестве основной задачи в ) практически нет. Ничего не работает. В чем может быть дело?

Скорее всего, вы забыли продумать и подготовить приземляющие (посадочные, целевые) страницы, которые часто называют лендингами . Что это такое?

А это очень важный момент, который может существенно повысить конверсию (количество покупок или регистраций), ибо landing page призваны максимально эффективно подводить пользователя к выполнению целевого действия . Если вы со всех рекламных объявлений будете направлять посетителей, например, на главную страницу сайта, то можете катастрофически снизить конверсию и вылететь в трубу.

Сам термин «лейдинг пейдж» образован от английской фразы «landing page», в переводе означающей как раз целевую, посадочную (приземляющую) страницу. Лендинги создаются не абы как, а с учетом психологии посетителей. Они должны цеплять и не отпускать их до самого момент покупки (или регистрации), ибо повторно привлечь посетителя будет уже архисложно.

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

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

Примеры лендингов

В зависимости от преследуемых вами целей можно разделить посадочные страницы (лендинги) на несколько типов:

12 шагов по созданию идеального лендинга

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

Каждый лендинг должен быть заточен только под одно целевое (конверсионное) действие — либо подписка, либо продажи. Не надо жадничать, ибо внимание пользователя будет рассеяно и сильно увеличится вероятность его ухода (так ничего и не выбрав из предложенных вариантов). Лучше как можно меньше заставлять клиентов думать и выбирать — путь на landing page должен быть прямым как стрела (очевидным для него) и без каких-либо ответвлений.

На посадочной странице обязательно должен присутствовать призыв к действию (с глаголами в повелительном наклонении — позвони, купи, получи, приди и т.п.). Фразы должны быть короткими и мотивирующими. Например, «купите сейчас», «получить видеокурс» или «подпишись и получи».

Рулят также яркие кнопки и стрелки , создающие на них акцент. Неплохо работают кнопки красных и желтых оттенков, ибо заметны и содержат как бы призыв к действию.

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

Иногда очень неплохо работают анимированные кнопки (но в любом случае нужно будет проводить тестирование эффективности тех или иных элементов лендинг пейджа):

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

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

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

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

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

Страница landing page может быть довольно длинной, но при просмотре первого экрана (это та область страницы, что видна без использования прокрутки) пользователю должно быть совершенно ясно и понятно, что именно вы хотели ему сказать.

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

Ну и, конечно же, стоит делать упор на то, что «только здесь и только в течении нного количества времени» пользователю будет доступно все это великолепие (подписка, специальная цена на товар, дополнительный набор услуг). Как это сделать лучше всего? Правильно, поставить таймер, ведущий обратный отчет времени до часа Х, когда предоставленная возможность будет упущена. Ничто так не стимулирует к принятию решения колеблящегося пользователя, как буквально на глазах убегающие секунды.

Рядом с таймером неплохо будет расположить форму подписки, заказа или контактный телефон. Это будет работать не всегда, поэтому надо проводить тесты (думаю написать ряд статей про проведение А/Б-тестирования — если не хотите пропустить, то подписывайтесь на рассылку), и возможно, что такой простой и очевидный способ позволит вам увеличить конверсию данной лендинг пейдж и с лихвой окупить деньги, потраченные на продвижение в социальных сетях или контекстной рекламе.

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

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

Примеры ошибок делающих landing нерабочим

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

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

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

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

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

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

У вас есть еще немного времени? Хотите его провести с пользой? Тогда берите попкорн, садитесь поудобнее и смотрите двухчасовой мастер-класс «Пошаговый алгоритм создания Landing Page» :

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