Структура продающего лендинга: ключевые элементы для создания лендинга с высокой конверсией

Почему одни лендинги продают хорошо, а другие нет? Часто это зависит от того, из каких разделов состоит посадочная страница. Правильно подобранные блоки помогут убедить пользователя, что ваш продукт — именно то, что ему нужно. Например, сервис Aparat для закупки онлайн-рекламы увеличил конверсию на 78%, поработав над структурой сайта.

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

Что такое лендинг

Landing page переводится как «посадочная страница». Это одностраничный сайт с призывом выполнить какое-то действие. Например, купить товар, подписаться на рассылку или заказать звонок. Его цель — преобразовать посетителей в подписчиков или покупателей. 

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

Существуют разные типы посадочных страниц:

Продающий (коммерческий) лендинг. Используется для продвижения товаров или услуг.

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

Пример товарного лендинга — продажа сока алоэ

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

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

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

Пример подписного лендинга — подписка на рассылку от школы английского языка Skyeng

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

Пример информационного лендинга — сайт контент-бюро «Шторм»

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

Пример вирусного лендинга — конкурс от «Авиасейлс» и Aperol Spritz

Подготовка к созданию лендинга

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

Изучите целевую аудиторию

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

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

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

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

Сформулируйте ключевые преимущества продукта 

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

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

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

Разработайте убедительное УТП

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

Хорошее УТП соответствует 3-м главным принципам:

• Короткое и емкое. Оно должно быть лаконичным, информативным и оригинальным — всего одно предложение, которое зацепит человека с первого взгляда.
• Сообщает конкретную информацию. В УТП не должно быть «воды», а вместо эпитетов стоит использовать факты. Например, лучше сказать не «быстрая доставка», а «доставим заказ за 10 минут».
• Закрывает потребности, страхи или боли клиента. Покажите, какую проблему продукт поможет решить пользователю. Если вы открыли салон красоты, и ваша целевая аудитория — молодые мамы, у которых не хватает времени на себя, можно сделать акцент на скорости процедур. Ваше УТП может звучать так: «Маникюр и педикюр в 4 руки за час».

Чтобы упростить процесс и сформулировать уникальное товарное предложение, можно воспользоваться готовыми формулами:

• «потребность + результат + гарантия» — доставим кофе горячим за 15 минут или вернем деньги;
• «продукт + выгода» — качественная мебель с бесплатной сборкой;
• «продукт + предлог “без” + страх клиента» — натуральные соки без консервантов.

Читайте также «Как написать цепляющий заголовок объявления: топ-10 способов».

Делимся примерами ярких и убедительных УТП от известных брендов для вдохновения:

• Графический онлайн-редактор Canva — «мастерство дизайна, доступное каждому».
• Наушники Mi Xiaomi — «только музыка, никакого шума».
• Обувная компания TOMS — «обувь для продвижения вперед».
• Burger King — «плати один раз и пей сколько хочешь».
• Тинькофф-банк — «первый банк без отделений».

Подберите визуал 

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

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

Например, сервис доставки здорового питания SOLO на обложке лендинга разместил аппетитные фото своих блюд. Разве не здорово?

Позаботьтесь о должном качестве изображений, которые вы планируете использовать на сайте. Они должны быть четкими, контрастными, с высоким разрешением и без вотермарок. Это поможет завоевать доверие клиентов.

Подготовьте текст 

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

Подготовить сильный продающий текст поможет статья «Как написать текст для сайта».

Соберите отзывы клиентов

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

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

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

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

Ключевые элементы структуры продающего лендинга

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

Стартовый экран

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

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

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

Пример обложки лендинга — шаблон «Турагентство» в конструкторе Craftum

Форма заказа

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

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

Пример формы заявки на первом экране лендинга — шаблон «Стрижка животных» в конструкторе Craftum

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

Пример формы заявки в конце лендинга — шаблон «Помещения в аренду» в конструкторе Craftum

О проекте

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

Пример блока «О проекте», расположенного сразу после главного экрана — шаблон «Коттеджный поселок» в конструкторе Craftum

Факты в цифрах

Дополнить раздел с описанием проекта поможет блок с фактами. Их можно представить в цифрах — они привлекают внимание и хорошо воспринимаются. В таком формате можно перечислить достижения компании или преимущества продукта.

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

Пример фактов в цифрах — шаблон «Потребительские кредиты» в конструкторе Craftum

Преимущества 

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

Пример блока с преимуществами продукта — шаблон «Организация свадеб» в конструкторе Craftum

Целевая аудитория

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

Пример блока с описанием ЦА — шаблон «Продажа онлайн-курса» в конструкторе Craftum

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

Тарифы и цены

Один из ключевых элементов лендинга — раздел с ценами. Если товар заинтересовал человека, но он не нашел на сайте его стоимость, то вряд ли оформит заказ.

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

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

Пример блока с тарифами — шаблон «Услуги фотографа» в конструкторе Craftum

Блоки доверия

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

Пример блока с видеоотзывами — шаблон «Подготовка к ЕГЭ» в конструкторе Craftum

Если отзывов нет, можно заменить этот раздел портфолио. Добавьте блок с примерами работ — достаточно 3-4 кейсов с описаниями и фото.

Пример блока с портфолио — шаблон «Строительство домов» в конструкторе Craftum

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

Пример блока с лицензиями — шаблон «Бухгалтерские услуги» в конструкторе Craftum

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

Пример блока с логотипами клиентов — шаблон «Адвокат» в конструкторе Craftum

Фотографии и видео

Фотографии могут иллюстрировать разные блоки лендинга. Само собой, их нужно добавить в карточки товаров.

Пример карточек товаров — шаблон «Универсальный магазин мебели» в конструкторе Craftum

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

Пример блока «Наша команда» — шаблон «Fight Club» в онлайн-конструкторе Craftum

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

Пример фотогалереи — шаблон «Отель» в конструкторе Craftum

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

Виджеты 

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

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

Пример виджета — чат со службой поддержки на сайте Craftum

Какие еще бывают виджеты и чем они полезны, узнайте в статье «Закрафти сайт: 5 способов сделать ваш сайт функциональнее».

Призыв к действию 

Блок с CTA (call-to-action — призыв к действию) — это элемент, который влияет на конверсию лендинга. Он размещается в разных частях посадочной страницы. Например, на главном экране, в середине сайта и в самом конце. Если лендинг длинный, использовать CTA можно еще чаще. 

Кнопка с call-to-action должна гармонично сочетаться с дизайном лендинга, но в то же время быть заметной. Чтобы привлечь внимание пользователей, используйте контрастные оттенки и анимацию. На одном экране располагайте максимум 2 кнопки. Ту, что в приоритете, можно выделить более ярким цветом.

Пример 2-х кнопок, расположенных рядом — шаблон «Бассейн» в конструкторе Craftum

Можно призывать посетителей совершить покупку и использовать глаголы «купи», «закажи», «попробуй». Хороший прием — подчеркнуть выгоду, например, «получить бесплатный доступ» или «забрать подарок».

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

Пример кнопки «рассчитать стоимость» — шаблон «Пластиковые окна» в конструкторе Craftum

Контакты и кнопки социальных сетей

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

Пример блока «Контакты» — шаблон «Бар» в конструкторе Craftum

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

Чтобы разработать лендинг своими руками, советуем посмотреть видео «Craftum: как сделать сайт на основе шаблона».

Конверсия лендинга

От чего зависит конверсия лендинга

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

На конверсию влияет 3 ключевых фактора: 

• Обложка сайта. У вас есть всего пара секунд, чтобы заинтересовать пользователя, пока он не закрыл страницу. Чтобы зацепить человека, нужен понятный и яркий оффер. Кроме того, по статистике, 74% времени пользователи просматривают первые два экрана лендинга, поэтому на обложке и следующем за ней блоком нужно разместить самую важную информацию.
• Call-to-action. Конверсия часто зависит от формулировки CTA. Чтобы привлечь внимание пользователей, в призыве к действию можно упомянуть потребность или боль целевой аудитории. Например, на лендинге курсов английского можно использовать такой текст — «записаться на интенсив и преодолеть языковой барьер». Также мотивировать пользователей нажать на кнопку можно с помощью эмоционального call-to-action. Например, «стать частью дружной команды» вместо «присоединиться».
• Структура лендинга. Схема расположения блоков в разных случаях может отличаться в зависимости от особенностей продукта. Например, магазин одежды сделает акцент на блоке с фотографиями товаров, а онлайн-школа — на описании программы обучения и отзывах студентов.

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

Например, норвежская круизная компания Hurtigruten увеличила количество онлайн-бронирований на 193%, добавив список преимуществ.

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

Тестирование и оптимизация лендинга

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

Для анализа и тестирования можно воспользоваться специальными сервисами:

• Вебвизор. Это бесплатный инструмент от Яндекс.Метрики. Он фиксирует все действия посетителя на сайте и предоставляет отчет в виде текстового файла, а также видеозаписи посещения страницы. Вы можете посмотреть, по каким кнопкам кликал пользователь, какие формы обратной связи заполнял и в какой момент закрыл сайт.
• Optimizely. Инструмент для А/В-тестов. Они заключаются в сравнении 2-х версий сайта, которые отличаются оформлением и содержанием одного или нескольких блоков. Такой способ помогает определить, какой контент и дизайн приносит большую конверсию.
• Crazy Egg. Сервис для тестирования сайтов с функцией тепловой карты. Программа анализирует, как пользователи взаимодействуют с лендингом: какие разделы изучают дольше, по каким кнопкам кликают, а какие — игнорируют. 

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

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

Заключение

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

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