Что такое лендинг пейдж (Landing Page) и как создать его самостоятельно

Сайты создаются для разных целей. Интернет-магазин призван продавать товары онлайн, визитка – предоставлять информацию о компании. Можно сделать каталог, блок, корпоративный портал или… Страницу типа Landing Page. Что такое лэндинг, в каких целях его используют, пойдет речь в этой статье.

Что такое Landing Page и какие задачи он выполняет

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

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

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

Переход на использование страниц Landing Page обоснован коммерческим интересом. Статистика часто показывает, что одностраничники имеют конверсию от заходов к целевым действиям выше, чем обычные сайты. К тому же требуют заметно меньше времени на разработку. Их популярность подогревается и большим количеством онлайн-конструкторов, предлагающих за небольшую цену воспользоваться одним из готовых шаблонов. В 2019 году таких сервисов насчитывается более 10.

История появления лендингов

Начали появляться первые одностраничные сайты в 2012 году. Сначала их пытались использовать в качестве замены «визиткам». Затем потому, что «такой есть у конкурентов». Буквально через год интернет оказался завален однотипными продающими страницами. Часто яркими, раздражающими призывами «срочно купить, заказать».

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

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

Лучшие конструкторы для создания лендингов

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

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

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

LPgenerator

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

Плюсы:

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

Из минусов можно отметить лишь относительно высокую стоимость услуг. Но несколько тарифных планов позволяют подобрать

Тарифы:

• базовый – от 558 руб./мес.* (1 домен, 3 страницы);
• продвинутый – от 1 662 руб./мес. (5 доменов, 50 страниц);
• безлимитный – от 2 799 руб./мес. (без ограничений по доменам и страницам).

* минимальная цена устанавливается при оплате услуг платформы на год вперед.

Отдельно позиционируется корпоративный тариф под названием White Label и стоимостью 11 011 руб./мес., предлагающий работать под собственным брендом. Поддерживается до 15 аккаунтов.

Wix

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

Плюсы:

• мощный редактор макетов страниц;
• поддержка интеграций, востребованных в коммерции (прием платежей, CRM, рассылки, заказ звонка, онлайн-чат);
• возможность редактирования кода (HTML, CSS, JS);
• большой каталог виджетов для расширения функционала.

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

Тарифы:

• подключить домен – 90 руб./мес. (остается реклама Wix);
• базовый – 150 руб./мес. (для личных целей);
• безлимитный – 250 руб./мес. (для бизнесменов и фрилансеров);
• VIP – 500 руб./мес. (приоритетная поддержка).

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

LPMotor

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

Плюсы:

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

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

Тарифы:

• нано – 360 руб./мес. (1 домен, 10 сайтов);
• мини – 540 руб./мес. (3 домена, 50 сайтов);
• стандарт – 720 руб./мес. (10 доменов, 100 сайтов);
• безлимит – 2400 руб./мес. (домены и страницы без ограничений по количеству).

На подключение автоворонки продаж прайс отдельный. Разбивка идет по неделям (990 руб./неделя), что позволяет включать функцию лишь на период активных рекламных кампаний.

PlatformaLP

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

Плюсы:

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

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

Тарифы:

• микро – 490 руб./мес. (1 домен, 1 страница, оповещения в Telegram);
• эконом – 790 руб./мес. (1 домен, 10 страниц, 100 смс-сообщений);
• бизнес – 1390 руб./мес. (5 доменов, 50 страниц, корзина, A/B-тестирование);
• бизнес+ – 1990 руб. мес. (5 доменов, 50 страниц, ряд дополнительных функций).

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

uCoz

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

Плюсы:

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

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

Тарифы:

• минимальный – 2,39$ в мес. (уменьшенный баннер, FTP-доступ, 1 Гб диска;
• базовый – 4,79$ в мес. (снимается баннер, протокол HTTPS, 2 Гб диска, техподдержка);
• оптимальный – 6,39$ в мес. (10 Гб диска, домен бесплатно, премиум-шаблоны);
• магазин – 7,99$ в мес. (10 Гб диска, модуль интернет-магазина);
• максимальный – 12,79$ в мес. (20 Гб диска, онлайн-чат с техподдержкой).

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

Mobirise

В отличие от вышерассмотренных платформ, Mobirise представляет собой бесплатную программу, устанавливаемую на компьютер. Поддерживаются операционные системы MacOS и Windows, что делает инструмент универсальным. В коробке поставляется всего 4 бесплатных шаблона. Заработок разработчика заключается в платной поставке расширений, из которых можно составлять шаблоны лендингов.

Плюсы:

• неплохой набор блоков в стоковой поставке;
• простой визуальный редактор макетов;
• встроенный FTP-интерфейс для загрузки файлов на хостинг.

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

Макет эффективной Landing Page

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

Типовая посадочная страница состоит из частей:

• шапка – статичная картинка или видео, передающее суть коммерческого предложения (его часто называют «оффер»). На этой же области экрана ставят кнопку, она завершает «призыв к действию» (CTA или Call-To-Action);
• таймер обратного отсчета – чаще всего его размещают так, чтобы отсчет стал виден сразу же после начала прокрутки экрана. Если шапка не дает полного описания предложения, то вместо таймера допускается вставлять короткий текст;
• блок преимуществ (их называют буллитами) – визуально это иконки с коротким текстом. По умолчанию многие указывают 3-4 выгоды, не более. Можно поставить «карусель», где будет присутствовать большее количество иконок;
• отзывы клиентов – сканы благодарственных писем, фото сотрудников с указанием фирмы и должности;
• форма обратной связи – для подписки, подачи заявки, заказа обратного звонка, скачивания бесплатных материалов;
• адрес, контактный телефон, краткое содержание оффера.

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

Подробнее можно посмотреть на видео:

Определение цели создания посадочной страницы

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

Обычно это один из трех вариантов:

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

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

Подбор аудитории одностраничника

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

Работа предстоит в направлениях:

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

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

Написание текста для Landing Page

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

Понадобится заполнить:

• «первый экран» с оффером (уникальным торговым предложением, УТП);
• краткое описание товара или услуги;
• информация о компании, авторе страницы;
• отзывы;
• кейсы (истории успеха), если таковые захотелось показать отдельно от отзывов;
• форма с призывом к действию;
• контакты (подвал сайта или как его еще называют «футер»).

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

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

Разработка прототипа лендинг пейджа

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

Прототипы выгодны по нескольким причинам:

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

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

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

Дизайн лендинга

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

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

От шрифтов зависит читаемость текста. Они могут быть «фирменными», какие используются везде, где присутствует логотип, наименование компании. Или «универсальными». К ним относят Open Sans, Roboto, Pt sans. Стоит поэкспериментировать с жирным, наклонным написанием, различными сочетаниями. Большое количество шрифтов можно найти в сервисе Google Fonts.

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

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

Верстка одностраничника

Осталось сверстать страницу и запустить ее в работу. Если разработчик решил создавать ее на своем хостинге, без привлечения конструкторов, предстоит подыскать плагин для быстрого включения и отключения блоков. Наиболее популярна в этом направлении CMS WordPress и конструкторы типа Elementor. Они устанавливаются дополнительными модулями и имеют визуальный редактор, как в любом онлайн-сервисе по созданию Landing Page.

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

По завершении верстки надо проверить работу кнопок. Для отслеживания нажатий на кнопки надо прописывать в коде идентификатор, используемый в дальнейшем при построении целей в сервисах аналитики. То же относится к отправке контактных данных, их сбору в CRM, записи телефонных звонков. Все должно работать на 100%. Только после этого можно запускать рекламные кампании. В противном же случае бюджет может оказаться слит впустую. Точнее «непонятно куда», ведь без аналитики Landing Page превращается в обычную страницу типового сайта-визитки.