Что такое лендинг и как его создать?

Landing page (LP, лендинг) переводится как «посадочная страница». Это сайт, состоящий всего из одной страницы.

Лендинг нужен для привлечения клиентов через интернет-рекламу.
Обычно используется в связке с контекстной рекламой Яндекс.Директ и Google Ads.
Задача лендинга — ответить на все вопросы вашего потенциального клиента и сконвертировать его в заявку.  

Готовы? Поехали!

Из каких слоёв состоит Landing Page

Из каких слоев состоит Landing Page

Посадочная страница напоминает слоёный торт. Чтобы создать действительно продающий LP, нужно проработать каждый из слоёв.

1. Смысловой слой: прототип и текст

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

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

Из каких блоков (секций) состоит лендинг

Например:

  • Первый экран
  • Каталог услуг
  • Почему стоит обратиться к нам
  • Команда проекта
  • Этапы работ

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

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

Схематичное изображение (прототип) вашего лендинга

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

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

Чтобы создать прототип, вы можете воспользоваться простым сервисом moqups.com. Но не спешите с этим. Далее вы узнаете способ создания всех слоев Landing page сразу в одном сервисе.

2. Визуальный слой: дизайн и артефакты

Следующий слой отвечает за внешний вид вашего одностраничника. Дизайнер «надевает» на прототип: цветовую палитру, шрифтовые пары, отступы, дизайн-элементы, фотографии, видео и многое другое.

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

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

Как показывает практика, продажи способны приносить и очень простенькие лендинги с минимальными дизайном. Поэтому ниже даём вам несколько рекомендации по визуальному слою вашего LP:

  1. Используйте не более двух шрифтов: один для заголовков, а другой для основного текста. Важно, чтобы эти шрифты сочетались друг с другом.
  2. Не используйте Caps Lock в тексте.
  3. Постарайтесь использовать не более трёх цветов на всей странице.
  4. Используйте ваши реальные фотографии и видео.
  5. Соблюдайте одинаковые отступы между элементами, стандартизируйте их.
  6. Не пишите большие полотна текста. Нужно писать кратко и по делу, на языке выгод для вашего клиента.
  7. Не создавайте «кучи» элементов, которые сложно воспринимать. Создавайте пустые пространства для легкости восприятия информации.

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

3. Технологический слой: вёрстка

Следующим этапом специалист по вёрстке (по-другому front-end — разработчик) преобразовывает дизайн в полноценный лендинг.

Технологический слой - верстка лендинга

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

Нужно, чтобы ваш лендинг корректно отображался на всех видах устройств:

  1. Компьютерах
  2. Ноутбуках
  3. Планшетах
  4. Телефонах

Адаптивную вёрстку можно самостоятельно настроить, если вы выберете путь создания Landing page на конструкторе сайтов.

4. Конверсионный слой

Конверсия — это отношение посетителей, оставивших заявку, к посетителям, зашедшим на сайт. Если на ваш лендинг зашло 100 человек, а заявку оставили 10, то 10/100 * 100% = 10%
Конверсия — это тот самый заветный показатель, ради которого делается лендинг. Если у вас высокая конверсия, то вы получаете больше лидов и клиентов, затрачивая меньше денег на их привлечение.

Что влияет на высокую конверсию? Абсолютно все слои. И ваши смыслы, и дизайн, и качество вёрстки на всех устройствах.
Но существуют специальные инструменты по увеличению конверсии, которые формируют отдельный слой.
Это специальные виджеты и технологии, направленные на увеличение конверсии вашего LP.

Что составляет конверсионный слой:

А/B-тесты

А/В тест

Это механизм тестирования различных элементов страницы. Например, вы задались вопросом: «А что будет лучше приносить клиентов: если я напишу про гарантию в заголовке или про скидку 40%?».
Чтобы выяснить ответ, необходимо запустить А/B-тестирование: получить трафик на оба варианта страницы и оставить тот, который принес более эффективные показатели.

Мультилендинг

Мультилендинг

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

Например, вы продаёте стулья.
Представьте, что первый человек искал в Яндексе «купить жёлтый стул».
Благодаря мультилендингу, попав на ваш сайт, он увидит заголовок
«Жёлтые стулья с гарантией пять лет» и фотографию жёлтого стула.
А если он искал «Купить красный стул», то на этом же сайте он увидит заголовок «Красные стулья с гарантией пять лет» и фотографию красного стула.

Эта технология также называется гиперсегментацией трафика или динамическим контентом.

Подробнее о мультилендинге читайте в этой статье.

Виджет обратного звонка

Виджет обратного звонка

Виджет позволяет потенциальному клиенту получить звонок от вашего отдела продаж за 30 секунд.

Онлайн-консультант

Онлайн-консультант

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

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

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

Структура продающего лендинга

Какую информацию писать на странице?
Стоит держать фокус внимания на том, что лендинг — это разговор с потенциальным клиентом. И у этого разговора есть свой сценарий.
Ниже я предлагаю проверенную в бою структуру блоков, показывающую от 3% конверсии в заявку.
Данная структура является частью системы по упаковке бизнеса «Метод Флагмера»:

1. Шапка и первый экран

Первый экран

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

Первый экран состоит из:

  • Главного заголовка (оффер/УТП)
  • Ключевых выгод от обращения в эту компанию в виде буллитов
  • Изображения продукта или видео
  • Призыва к действию
  • Формы заявки и кнопки

Как правило, в верхней части первого экрана располагается шапка с контактной информацией, в которой указаны:

  • Телефон
  • Почта
  • Мессенджеры
  • Адрес компании
  • Кнопка «Заказать звонок»

2. Кейсы и отзывы

Секция кейсы и отзывы

Что в первую очередь интересует клиента, когда он изучает компанию?
Конечно же её кейсы. Люди — существа социальные. Поэтому нам крайне важно знать, что думают другие о той или иной компании, понравилось ли им качество продукта и сервиса, были ли с ними вежливы и многое другое.

Данная секция состоит из:

  • Описания результата, который вы дали своим клиентам
  • Фото- видеодоказательств выполненной работы
  • Отзывов клиентов
  • Призыва к действию
  • Формы заявки и кнопки

3. Выгоды клиента

Секция выгоды клиента

После изучения социальных доказательств порядочности компании, у клиента возникает вопрос: «А что я получу вообще, если обращусь к ним?».
И тут наступает черёд показать ключевые выгоды клиента от обращения к вам.

Примеры хорошо описанных выгод:

  • Гарантия 5 лет
  • Прочтёте первую книгу на английском уже через 20 дней обучения
  • Оплата только за результат
  • При покупке франшизы — маркетинговые инструменты в подарок

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

Данная секция состоит из следующих элементов:

  • Описания выгод клиента
  • Артефактов, подтверждающих заявленные смыслы (фото/видео)
  • Призыва к действию
  • Формы заявки и кнопки

4. Стоимость услуг

Секция стоимость услуг

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

Данная секция состоит из следующих элементов:

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

5. Этапы работ

Секция этапы работ

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

Данная секция состоит из:

  • Экспертного описания этапов сотрудничества
  • Артефактов, подтверждающих написанные смыслы (фото/видео)
  • Призыва к действию
  • Формы заявки и кнопки

6. Команда

Секция команда

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

Данная секция состоит из следующих элементов:

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

7. Отработка возражения

Секция отработка возражения

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

Данная секция состоит из:

  • Заголовка с возражением клиентов
  • Текста с отработкой страха
  • Артефакта, подтверждающего смысл (фото/видео)
  • Призыва к действию
  • Формы заявки и кнопки

8. Подвал

Секция подвал

Завершается лендинг вашими контактными данными. В подвале необходимо разместить:

  • Адрес
  • Телефон
  • Почту
  • Мессенджеры и социальные сети
  • Реквизиты
  • Политику конфиденциальности

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

Где взять шаблон лендинг пейдж

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

Найти множество шаблонов для любых ниш можно в сервисах- конструкторах сайтов. Например, в Платформе LP вы увидите 60 бесплатных шаблонов после регистрации.

Шаблоны для Landing Page

Как сделать одностраничник самостоятельно

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

Посмотрим, как это сделать на примере сервиса platformalp.ru
Мы записали для вас видеоинструкцию по созданию лендинга в редакторе этого конструктора сайтов.

Примеры конверсионных лендинг пейдж

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

Лендинг мастермаинд Михаила Дашкиева

Мастермаинд Михаила Дашкиева


http://u-multiplicator.ru/

Лендинг конструктор сайтов из будущего Flagmer

Конструктор сайтов из будущего Flagmer


https://flagmer.com/

Лендинг шапки и шарфы оптом

Шапки и шарфы оптом


http://raymod.p.conversionart.ru/

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

Как анализировать эффективность LP

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

  1. Установка счетчика
  2. Настройка целей
  3. Вебвизор
  4. Тепловая карта

Надеюсь, что данная статья внесла для вас ясность в тему лендингов. Но если у вас остались вопросы, то пишите их в комментариях к статье. Я с радостью отвечу на них!

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

Михаилу Дашкиеву https://units.bz/
Антону Петроченкову https://convertmonster.ru/blog/
5 1 vote
Оцените статью

Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
0
К обсуждениюx
()
x