Рейтинг: «Лучший конструктор лендингов. Что такое лендинг пейдж? Виды лендинга, цель landing page — как создать лэндинг бесплатно

Приветствую Вас. Сегодня мы поговорим о том, что такое Landing Page и для чего он нужен. Если Вы являетесь инфобизнесменом, то скорее всего уже не раз сталкивались с такой страницей захвата. И более подробней о данной странице сейчас расскажет мой постоянный читатель Денис Тумилович. Встречайте!

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

Сегодня с радостью хочу поднять тему лендингов – что такое страницы захвата (лендинги), зачем нужны эти посадочные страницы, кого куда они садят? Для кого они? Чтобы собирать подписчиков или для продажи товаров? Кто из вас уже задумывался на эту тему – поднимите руки!

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

Так вот, очень мне понравился этот вопрос, захотелось сразу написать статью, но как-то все времени не было. Хотя, тема интересна, согласитесь...

Итак, как вы думаете, что же такое Landing Page?

По основному определению из википедии – это “целевая страница”, или по-другому такие страницы называют «посадочными страницы», это такая страница, на которую попадает человек из каких-то источников. И именно на этой странице происходит взаимодействие с пользователем. Именно на этой странице пользователь принимает какой-то решение.

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

Страница эта может быть создана отдельно средствами HTML+CSS, или же с помощью специальных плагинов к WordPress.

Что примечательно — для таких посадочных страниц даже целые домены регистрируют, не то чтобы страничку на блоге!

Основная задача Лендингов.

В чем же задача посадочных страниц? Основным пунктом является то что они нужны для того, чтобы получать клиентов. Другими словами это настоящая реклама вашего инфопродукта.И задача этой рекламы продукта одна — ЗАИНТЕРЕСОВАТЬ посетителя, который является потенциальным клиентом!

Конечная цель любого лендинга – сделать из пользователя клиента или в случае с блоггерами – сделать из пользователя подписчика.

Свою первую страницу я делал руками, средствами HTML+CSS. Получилось не очень, если честно, но это была действительно рабочий landing.

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

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

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

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

Итак. Главная цель посадочных страниц (лендингов) – это их конверсия (превращение посетителя в покупателя или подписчика)!

Теперь этот факт точно всем понятен. Я очень на это надеюсь.

Особенности Landing Page.

1. Самое главное — посадочные страницы не перегружены графическими элементами, рисунками, потому что много графики отвлекает. А нам нужно, чтобы посетитель был максимально сконцентрирован на нашем предложении. На заголовке!

2. Вторая особенность – это отсутствие рекламы. Тут даже комментировать не стоит. Реклама итак всем уже надоело. Будет совсем не логично рекламировать кого-то на странице, которая предназначена для рекламы ТВОЕГО продукта или услуги! Кто со мной согласен — прошу отписаться в каментах.

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

Какой должна быть конверсия?

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

Конечно, не стоит надеяться, что спамом у вас будет конверсия больше 1% по-моему это миф.

Некоторые статистические показатели, которые могут вам пригодиться.

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

Красная кнопка 5,6% конверсия

Зеленая кнопка 3,2% конверсия

Следовательно – используйте красную кнопку для основного действия!

Кнопка “Узнать цену” 5,6% конверсия

Кнопка “Заказать” 0,8% конверсия (ШОК!)

Да, это действительно шокирующая информация! Я до сих пор под впечатлением! Тчательно подбирайте слова!

Форма “Имя, Телефон” лучше чем “Имя, телефон, емейл” и хуже чем “Телефон”.

Людям все-таки приятно когда вы, позвонив им, назовёте человека по имени!

Открытая форма лучше чем закрытая.

Тут все понятно. Человеку не нужно гадать что нужно куда-то нажать чтобы форму заполнить. Все формы должны быть видны.

Заголовок “Закажи ЭТОТ курс и получи в подарок ВОТ ЭТО…” – хорошая конверсия.

Заголовок такого вида “Получи ЭТОТ подарок при заказе ЭТОГО курса…” — плохая конверсия.

На первом месте должно стоять основное действие «закажи курс» , а не «получи подарок». А уже вместе с основным заказом получаешь много плюшек. Плюшки не может быть целью лендинга.
Это реальный опыт одной их веб студий, которая специализируется именно на лендингах. Так что верить или нет… Странный вопрос 🙂

И помните еще одну штуку: адаптивность вашего лендинга – это +5% к конверсии! Сейчас достаточно большое количество людей используют планшеты и смартфоны для заказов через интернет – помните об этом. Адаптивность сейчас никак нельзя игнорировать!

Заключение.

Вот собственно практически все что хотел вам рассказать о лендингах, о страницах захвата. Конечно, это самые основные моменты этой темы. Этими лендингами пользуется чуть ли не каждый блоггер (а скорее каждый), все потому что базу подписчиков нужно увеличивать. А скорость увеличения этой базы — зависит от качества лендингов. Для увеличения количества подписчиков и нужны эти лендинги.

Но как быть новичку, который не в курсе что такое landing page и как её создавать? Могу посоветовать научиться использовать конструкторы типа wp-page или его бесплатные аналоги. Ну или – обращайтесь ко мне – я помогу.

Вот наглядный пример некоторых Лендингов (кликабельно):

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

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

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

продажа определенного товара или услуги;
сбор данных, формирование базы потенциальных клиентов (Lead Capture);
регистрация на ресурсе;
оформление подписки;
бронирование места;
получение пробных образцов и демо-версий;
продвижение бренда или популяризация товара (вирусные целевые страницы).

Особенности и структура лендинга

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

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

По типу взаимодействия с клиентом лендинг может быть:

Одношаговым (One step): все этапы от подогрева интереса до регистрации пользователя представлены на одной странице.
Двухшаговым (Two step): на первой странице формируется интерес к продукту, а на дополнительной второй - осуществляется призыв к действию.

Контент лендинга, как правило, разбивается на отдельные блоки, которые располагаются в определенном порядке, удобном для восприятия посетителем. Базовыми элементами структуры являются:

Заголовок - главное предложение, которое должно заинтересовать ваших клиентов. Он должен содержать не только информацию о предложении, но и донести полезность принимаемого решения. Заголовку уделяют максимальное внимание и именно он определяет, задержится ли посетитель сайта или уйдет.
Контактная информация - доступные каналы связи с компанией (номер телефона, E-mail, Skype, Viber). Ее не должно быть слишком много. Как правило, контакты располагают в правом верхнем углу.
Логотип компании - необязательный элемент, используемый только при продвижении брендовых товаров или услуг.
Демонстрация продукта - если это конкретный товар, может быть использована его фотография или 3D-gif, для услуг подбираются ассоциативные изображения или промо-ролики. Изображение располагают по центру так, чтобы, попадая на страницу посетитель сразу понимал, что ему предлагают.
Коммерческое предложение - краткое (часто тезисное) описание условий сделки или достоинств продукта. Подается в формате готового кейса, включающего тезисную информацию о том, что и за сколько получает посетитель, выполнив целевое действие.
Лид-форма (обратная связь, форма регистрации или заказа, форма захвата) - интерактивная зона с полями для ввода данных и их отправки компании. Она должна быть обязательно выделена.
Кнопки call-to-action - специальные кнопки для совершения действия «попробовать», «заказать», «купить», «скачать».
Счетчик - используется при проведении акций или для подогрева интереса покупателей. Может демонстрировать количество времени оставшегося до конца акции или товаров на складе.
Отзывы клиентов и ответы на вопросы - необязательный элемент, чаще используемый при продаже услуг. Желательно, чтобы мнения были реальными.
Награды и знаки отличия - необязательный блок, в котором демонстрируются косвенные достоинства компании или товара.

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

Специфика продвижения лендинг пейдж

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

Изначально для оценки сайтов поисковые системы использовали алгоритм ранжирования BM25, сегодня его место занимает более современная модификация BM25F, которая учитывает такие элементы как заголовки, а также мета-теги Title, Keywords и Description. Таким образом, при создании landing page вы можете разбить информацию на блоки, в заголовки которых будут органично вписаны соответствующие ключи. Соответственно оформляются и мета-теги. Также вы можете оптимизировать отзывы клиентов и блоки ответов на вопросы. Повысить ранг лендинга в поисковой выдаче помогают и уникальные изображения, с корректно прописанными атрибутами alt.

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

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

Контекстная реклама в Google AdWords и Яндекс Директ . Это основной способ привлечения трафика, который использует принципы таргетирования.
Реклама и публикация ссылок в социальных сетях . Это направление очень эффективно при продвижении лендингов, посвященных проведению акций, а также вирусных посадочных страниц.
Продвижение в популярных блогах . Малоэффективный способ, реализуемый скорее, как дополнительный.
Рассылка по E-mail . Чаще выполняется для постоянных клиентов компании с целью привлечь внимание к конкретному продукту или проводимой акции.
Тизерная реклама .

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

1. Nest Thermostat

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

2. Boy-Coy

Сайт дизайнерской студии, после которого вы вряд ли захотите даже искать предложения конкурентов. Четырехэкранный лендинг способен убедить обратиться именно к этим ребятам, даже если вы не прочитаете ни отзывов, ни списка компаний, с которыми сотрудничала студия. Скорее всего, вы просто пролистаете, любуясь эффектом параллакса и сами того не заметите, как начнете вносить свои данные в симпатичную форму обратной связи.
http://boy-coy.com

3. Водка «Валенки»

Еще один пример красивого landing page с эффектом параллакса. Сугубо имиджевая страница, не заставляющая немедленно совершить покупку, но создающая положительный образ у целевой аудитории. Заметьте, информация о качестве продукта представлена в достаточном объеме, но её можно и упустить, наблюдая за тем, как красиво плавают кубики льда. Тем не менее, нужный эффект уже достигнут. Этот сайт слишком красив, чтобы предлагать что-то некачественное – такой подсознательный вывод возникнет у каждого посетителя любого со вкусом сделанного сайта.
http://www.valenkivodka.com

4. Интернет-магазин плюшевых медведей

По-настоящему интересные лендинги способны привлечь внимание даже людей, далеких от целевой аудитории. Убедитесь на примере магазина, продающего огромных плюшевых медведей. Сайт буквально переполнен интересными задумками и словно ведет с посетителем диалог, что в итоге, с высокой вероятностью, означает покупку.
http://medvedy.com

5. Smart Progress

Красивый landing page популярного сервиса постановки и достижения целей. Во-первых, зайдите и посмотрите, как это работает, во-вторых, оцените дизайн, олицетворяющий движение к поставленной цели. В совокупности с очень грамотным наполнением блоков он действительно мотивирует сделать все, что запланировано, но откладывалось в долгий ящик.
https://smartprogress.do

Примеры продающих лендингов с высокой конверсией 1. Производство и монтаж деревянных окон

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

2. Страхование КАСКО

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

http://простокаско.рф

3. Франшиза развлекательных аквариумов-автоматов

Хороший пример продающего лендинга, обеспечивающего высокую конверсию за счет того, что четко объясняет выгоды потенциальному клиенту, но и оставляет интригу, желание узнать подробности бизнес-плана, обещающего пассивный доход. Дизайнеру – наша отдельная похвала.
http://morewishes.ru

4. Ремонт ноутбуков

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

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

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

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

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

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

Преимущества лендинга

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

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

Главное преимущество лендинга состоит в том, что он активнее превращает посетителей в лидов.

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

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

Цели и задачи лендинга

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

Цели и приоритеты лендинга меняются в зависимости от поставленной задачи:

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

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

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

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

В общем случае этот продажи протекают так:

посетитель попадает на лендинг (не важно намеренно или же с помощью «клик-бейта»);

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

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

Что такое конверсия лендинга

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

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

Универсального критерия оценки конверсии нет - для разных офферов хорошей конверсией может являться любое число от 0 до 100%. Например, конверсия оффера, предлагающего бесплатно получить товар или услугу, оформив подписку или оставив личную информацию может приближаться к 100% (в зависимости от выгодности предложения). С другой стороны хорошей конверсией автосалона может быть число меньше 1%.

Виды лендигов

Виды лендингов разнятся в зависимости от возложенных на них задач. К примеру, можно выделить:

рекламный сайт,
«вирусная» страница,
лид-страница,
ctr-страница,
главный сайт.

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

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

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

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

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

Заключение

Давайте выделим основные тезисы, представленные в статье:

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

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

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

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

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

Чтобы добиться хорошей посещаемости 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."

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

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

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

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

Имя клиента.

Шаг 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" //