Что такое landing page и в чем его особенности? Как самому быстро сделать крутой лэндинг с высокой конверсией? Какие конструкторы для создания посадочной страницы сейчас популярны?
Здравствуйте, уважаемые читатели! С вами один из авторов бизнес-журнала «ХитёрБобёр.ru» Александр Бережнов.
И я решил так – расскажу вам о лендингах, об основных приемах, которые использовал при их создании. Приведу примеры хороших одностраничных сайтов. А выводы каждый из вас сделает для себя сам. Договорились? Тогда начнем.
Тема создания лендинга не из легких, но весьма актуальная и интересная. Зная, как это делать, вы сможете зарабатывать деньги разными способами, например, как . Разбираясь в этом направлении, вы сможете начать свой малый бизнес, просто продавая товары или услуги через landing page.
1. Что такое лендинг пейдж - обзор для новичков
По теме создания посадочных страниц написаны сотни статей. В один материал сложно «впихнуть» все советы, весь опыт. Но я все-таки постараюсь рассказать вам о самом главном, что касается landing page.
Лендинг – это одностраничный сайт или просто страница, цель которой – побудить у пользователей желание совершить какое-то действие: купить, подписаться, позвонить, оставить заявку.
Landing page дословно переводится с английского: «целевая» или «посадочная страница».
Такие одностраничники вы наверняка видели в Интернете.
Почему делают лэндинги:
- Они хорошо мотивируют посетителя совершить нужное действие.
- Они быстро конструируются. И часто стоят дешевле обычного сайта. Еще один плюс: посадочную страницу можно сделать самостоятельно.
- Landing page легко переделать – улучшить, изменить, добавить недостающую информацию.
Лэндинги создают для:
- Продажи продукта. Для этого используют призывы: «купить», «оставить заявку», «позвонить».
- Сбора информации. Тут посетителям предлагают: «подписаться», «узнать больше».
- Распространения софта - продажа программного обеспечения.
Лендинг и воронка продаж
Воронка продаж – это процесс продажи товара/услуги. На каждом этапе этого процесса отсеивается часть людей – потенциальных клиентов коммерческой компании. У нас на сайте есть отдельная статья о .
Процесс продаж через лендинг пейдж выглядит примерно так:
- увидели ссылку на посадочную страницу 100 человек;
- перешли по ссылке 40 пользователей;
- заявку оставило 10 человек;
- купили продукт 2 человек.
Из сотни – две продажи. Отдача – 2%. Это неплохой вариант. Не совершенный, но и не проигрышный.
Воронка продаж выглядит как перевернутая кухонная воронка: широкое основание и узкое горлышко.
Самая широкая часть – переход на страницу. На этом этапе мы тестируем работу контекстной рекламы, сообщений в соцсетях, публикаций на других сайтах. Определяем CTR.
CTR – отношение числа кликов к числу показов. Измеряется в процентах.
Средняя часть – заявка. Анализируем эффективность посадочной страницы – ее дизайн, текстовую часть.
Узкая часть – обработка заявок и продажа. Здесь мы оцениваем работу живых людей – операторов, менеджеров.
Когда анализируют лендинг, рассчитывают еще один показатель – EPC.
EPC – это усредненный показатель заработка с одной тысячи посещений лендинга.
Чем выше показатель доходности, тем выше эффективность вашей рекламной кампании.
В каких случаях необходимо создать лендинг?
Ниже рассмотрим ряд случаев, когда вы можете столкнуться с необходимостью создания своего одностраничника.
Лендинги стремительно ворвались в мир интернет-маркетинга, потеснив привычные сайты. Если раньше использовались только 2 вида landing page – одностраничники и многостраничники, то сейчас подвиды лендинга вырастают как грибы после дождя.
Чтобы не затягивать материал (статья и без того большая), давайте сразу рассмотрим примеры 15 видов лендингов, которые сегодня существуют в Рунете. В подборке использованы как работы из Сети вообще, так и примеры готовых лендингов от “Панда-копирайтинг”.
Для просмотра примеров лендингов в ПОЛНОРАЗМЕРНОМ ВИДЕ нужно кликнуть 2 раза. Сначала на картинку, а затем, когда изображение “всплывет”, довести мышку до низа лендинга и нажать на появившийся крестик.
Вид 1. Лендинг «О нас»
Давайте начнем хит-парад примеров с лендингов «О нас». Согласитесь, куда лучше: вместо скучного текста из пары абзацев в соответствующем разделе сайта создать полноценный лендинг.
Это как паспорт в красивой обложке – он и расскажет о главных преимуществах/задачах/ценах, и привлечет внимание.
Landing Page в виде каталога товаров подойдет для тех магазинов, которые предлагают не очень обширный ассортимент. Если у вас много товаров или вы хотите сделать лендинг под конкретную модель, этот тип одностраничника для вас не подойдет.
Но, как вариант, если товаров слишком много, тоже есть решение: можно давать, например, в каталоге только какие-то ТОП-товары или выводить разные подборки с помощью кода.
Примеры лендинговых страниц с каталогами
Страница каталога чайной компании:
Еще один вид лендинга с каталогом. На этот раз мясная продукция:
Фишка: товар сразу перетягивают в корзину с лендинга
Оптимально, если лендинг-каталог содержит следующие элементы:
- Не более 12 товаров, не более 11 категорий. Для большего количества товаров лучше создать отдельный каталог, иначе есть риск запутать посетителя сайта.
- Удобный скролл. Важно, чтобы лендинг не был загроможден позициями, от которых рябит в глазах.
- Всплывающие кнопки “Купить/Заказать” под каждым товаром.
- Прозрачные условия доставки и оплаты.
А также:
- Интересные решения для корзины или описания товара.
Лендинги-информаторы
Хороший инфо-лендинг чаще всего включает в себя:
- . Они подойдут для перечисления фактов, тенденций, ресурсов. Вместо полотна текста лучше смотрятся пронумерованные блоки. Словом, цифры рулят как в информационной статье, так и в лендинг-пейдж.
- Графику. Чем больше иконок, фото, гифок, таблиц и других наглядных материалов, тем интереснее читать инфо-лендинг. Часто вводятся и интересные эффекты при скроллинге, флеш-анимации, видео на фоне.
- Подзаголовки. Несмотря на то, что посадочная страница визуально делится на блоки, без емких и лаконичных подзаголовков не обойтись. Они рассказывают, о чем лендинг, если читатель «пробегает» по нему взглядом.
Инфо-лендинг – это как инфографика, которую можно проскроллить, и которая содержит больше текста. Использовать такие лендинги можно для описания товаров, особенно, если продукт относительно , и прежде, чем создавать landing-page, который закрывает на продажу, важно .
На примере ниже – лендинг сайта, продающего 3D-ручки. Можно прочитать про каждую деталь конструкции благодаря интерактивным элементам, увидеть ручку в действии на видео. Словом – максимум информации, минимум рекламы.
А еще – инфо-странички подойдут для оформления статей в корпоративном или личном блоге. Например, в блог компании, которая предлагает онлайн-курсы, подойдут инфо-лендинги про интернет-образование, как пример ниже.
Пример инфо-лендинга для представления новой платформы медиапланирования:
Четкая структура и продающие элементы. Эта Landing Page выглядит очень лаконично.
Оптимально, если информационный лендинг содержит следующие элементы:
- Подробное описание товара или услуги, которое закрывает возражения покупателя.
- Видео о товаре (если это сайт для продажи одного товара).
- Интересные факты о товаре/услуге , преимущества.
- Минимум рекламы.
- Одну-две кнопки с неагрессивным призывом к действию (например, “Перейти в каталог”, “Заказать на сайте”).
Лендинги для захвата лидов. Lead-Page
Лендинг – это одна из самых удобных площадок для генерации лидов. Создавайте одностраничник с реально полезными бонусами, и клиентская база (вернее, адреса электронных ящиков, телефоны и др.) – у вас в кармане!
Ввести адрес почты гораздо проще, чем проходить процедуру регистрации, но никто просто так не отдаст свой адрес или телефон. Для получения контактов предлагайте бесплатные выгоды.
Также многие лендинги такого типа, как на примере ниже, предлагают ввести почту в обмен на полезную рассылку.
В зависимости от ситуации, на Lead-landing page можно установить поля:
- Для ввода номера телефона и имени (если вы предлагаете, к примеру, бесплатную консультацию, бесплатную процедуру в салоне и т.д.)
- Для ввода электронного адреса и имени. Эти данные после можно использовать для рассылки. Чтобы получить e-mail, лендинг должен предлагать потенциальному клиенту «плюшки» – , руководства, курсы и вебинары, демо-версии ПО и т.д.
- Для ввода пола, возраста и других личных данных. Подходит, например, для лендингов, которые собирают базу пользователей на сайт знакомств.
Пример страницы для захвата лидов от банка “Тинькофф”: небольшой блок с выгодами от заполнения анкеты.
И еще пример, на этот раз от “Тинькофф-журнала”: преимущества, минимум графики и отзывы. Куда уж убедительнее.
Оптимально, если лендинг для захвата лидов содержит следующие элементы:
- Заголовок.
- Подзаголовок.
- Изображение или видео , которое привлечет внимание.
- Форма для регистрации (она же захват лида).
- Практическая ценность, она же выгода для посетителя. Человеку важно знать, что он получит в обмен на его данные. Можно предложить скидки, полезную рассылку, бонусы и т.д.
И еще:
- Интерактив: небольшой интересный опрос, конкурс.
- Минимум текстового контента.
- Минимум полей в форме для заполнения.
- Мощный призыв к действию.
Одностраничники под товар
Часто лендинг создается либо под конкретный товар, либо под его модель. Например, под новое авто, новое блюдо в меню известного кафе или фаст-фуда. Это удобно, потому что внимание потенциального покупателя не рассеивается на весь ассортимент товаров.
Перед глазами – только конкретные преимущества, цены, фото и советы по использованию конкретного товара.
Пример одностраничника для продажи гироскутера:
В тексте на примере закрыты все возражения читателя. Кнопка с призывом к действию всего одна, но на самом нужном месте – в конце лендинга, где она и должна быть после такой мощной подачи.
Оптимально, если на посадочной странице под один товар будут следующие элементы:
- Качественные фото и видео товара в действии.
- Советы по использованию.
- Отзывы (только не фейковые, читатели это чувствуют).
- Кнопки с призывом к действию.
- Продающий стиль текста.
- Преимущества товара.
Одностраничник под услугу
По такому же принципу создаются landing-page для конкретной услуги – одностраничник выделяется только под нее, никакие дополнительные факты и лишняя реклама не будут отвлекать внимание пользователя.
На примере ниже – лендинг под услугу маникюра в салоне красоты. При этом, салон предоставляет и другие услуги (покраска, макияж и т.д.), но для них выделяются либо разделы сайта, либо другие одностраничники.
Еще один пример под страницу услуги салона красоты: продающий текст с формой для захвата лидов и выгодным предложением:
Оптимально если целевая страница под услугу содержит:
- Понятный заголовок (читатели уходят, если не понимают сразу, что за услугу вы им предлагаете).
- Видео об услуге.
- Социальные доказательства.
- Форму для захвата лидов. Даже если человек сейчас не готов воспользоваться услугой, ваша рассылка может напомнить ему о вас, когда он дойдет до нужной кондиции.
Многостраничные лендинги компании
«Классическим» лендингом считается сайт на одну страницу, поэтому его часто и называют одностраничником. Но сегодня нишу очень уверенно занимают многостраничники, которые выполняют роль официального сайта для компаний.
Выделяют несколько видов таких площадок. Например, сайты, в верхушке которых указаны разделы лендинга. Они не ведут на отдельные страницы-разделы сайта, а просто переносят пользователя на соответствующий блок в пределах страницы.
Пример яркого лендинга от компании “The мед”:
Если нажать на раздел меню “Производство”, то попадем на ту же страницу, только ниже:
Сайт компании может выглядеть как обычная посадочная страница, иметь те же блоки, но при этом быть совершенно полноценным порталом с , разделами “ “, и так далее.
Сегодня такие сайты очень уверенно выходят на первое место по частоте использования.
На примере ниже –одностраничник компании «Pitaron», который имеет блок с кратким описанием, перечисление услуг, преимуществами (как в типичном лендинге). Но, выбрав раздел «Web-desighn», мы попадаем на еще один лендинг, который «запилен» чисто под услуги веб-дизайна от этой же компании.
Посмотрим ниже: раздел «Web-design», в который можно перейти с предыдущего лендинга
Важное отличие лендинг-страничек в рамках одного многостраничного лендинга – использование типичных элементов (цепляющий заголовок, плюсы, портфолио, поле с контактами и другие). И замечу, они уникальные для каждой странички, хоть и создаются в рамках одного сайта.
Оптимально, если многостраничный лендинг содержит следующие элементы:
- Придерживается правила: одна страница – одна услуга или товар.
- Менее заметное боковое меню вместо главного меню в его классическом виде.
- Каждая страница многостраничного лендинга содержит все элементы классического одностраничника: УТП, оффер, преимущества, отзывы и кнопку призыва к действию.
- Список контактов.
Мультилендинг
Мультилендинги помогут в несколько раз повысить конверсию одностраничника за счет гибкой подстройки того под запрос, который ввел пользователь. Геолендинги отлично подходят для компаний, которые имеют несколько филиалов в пределах страны.
Например, сети ресторанов или сети барбершопов продвигают свои услуги при помощи одной landing-page, для каждого города не нужно создавать отдельный одностраничник. Всю работу сделает автозамена города в шапке и смена блока контактов.
Пример геолендинга барбершопа. Ниже – одностраничник для тех, кто ввел запрос с городом Москва.
А вот так выглядит шапка для Екатеринбурга – поменялись только контакты и город.
Если компания предлагает услуги тренажерного зала, бассейна, фитнес-тренеров и т.д., а пользователь вводит в поисковике «фитнес-зал в Спб», то формируется страничка только про фитнес. Все ненужные данные о других услугах убираются – магия, да и только!
Словом, это как геолендинг, который подстраивается под введенный пользователем город в поисковом запросе, только он подстраивается под услугу.
Рассмотрим на примерах. Туристическая фирма продвигает свои услуги при помощи лендингов, в которых меняются туристические точки, а город Кемерово не меняется.
В зависимости от введенного запроса динамический лендинг «перестраивает» и свое содержимое
Меняться в лендинге могут не только офферы, как на примере выше, но и триггеры, блок с контактами и т.д.
Пример мультилендинга сети фитнес клубов:
На примерах страниц шапка и подвал сайта не меняются, а вот данные о количестве клубов, карта и услуги каждого из филиалов отличаются, в зависимости от города, указанного в поисковом запросе.
Оптимально, если мультилендинг имеет следующие элементы:
- Полная подстройка под запрос клиента в ПС : картинки, офферы, призывы к действию, УТП, контакты.
- Подстройка всплывающих окон, форм подписки (если клиент уже подписался на рассылку, можно предложить ему что-то другое).
- Только простые элементы, чтобы избежать трудностей при подмене контента.
Работодателей сегодня редко интересуют банальные резюме, и если вы хотите однозначно выделиться в глазах HR-отдела, а после – и начальства, то лендинг в виде резюме – однозначно ваш вариант.
По сути, landing page такого типа «продает» ваши умения. Поэтому и строится он по той же схеме, что и продающий одностраничник для компании или услуги. На примере ниже – смесь резюме и сайта-визитки . Одностраничник вмещает историю «О себе», перечень навыков, портфолио, блок с контактами, виджеты – действительно крутая презентация себя!
А на примере ниже рассматриваются варианты, как можно оформить лендинг-резюме. Удобные иконки, скилы, образование – все это можно очень удобно преподнести, берите на заметку 🙂
Пример лендинга-резюме дизайнера:
Фишка резюме на примере: видео с описанием процесса работы. Такая презентация себя вызывает доверие и ощущение профессионализма. Можно взять на заметку.
Оптимально, если резюме в виде Landing Page содержит следующие элементы:
- Ссылки на профили в социальных сетях.
- Нестандартный контент, визуализация, собственный стиль.
- Фото или видео с владельцем страницы.
- Примеры работ.
- Контакты.
- Отзывы.
Лендинги-презентации
Иногда лендинг-пейдж создаются без таймеров, триггеров и голословных офферов. Они призваны просто презентовать работы компании или человека, и сделать это в виде интерактивного лендинга удобнее всего. В Рунете этот тип одностраничника пока не очень распространен, а вот за рубежом уже активно используется компаниями, связанными с дизайном, искусством и т.д.
Впрочем, и в русскоязычном сегменте уже есть очень серьезные подвижки. Если обычные многостраничники просто можно пролистать и закрыть, то с лендингом-презентацией такой фокус не выйдет. Они затягивают.
Также лендинги-презентации можно использовать для описания товаров или услуг, презентация подойдет, например, для приложений, которые нужны для обработки фото. На примере ниже блоки скроллятся не только вниз-вверх, но и в стороны, презентуя типы ПО и примеры обработанных фото.
Примеры креативных лендингов-презентаций:
Интересная анимация, также стилизация под комиксы. Сразу видно, здесь работают творческие люди.
Оптимально если целевая страница в виде презентации содержит следующие элементы:
- Анимация. Она всегда привлекает внимание и заставляет пользователей дольше пробыть на сайте.
- Авторские рисунки. С их помощью можно выразить индивидуальность и “зацепить” посетителя сайта.
- Интерактив. Вопросы, квест, небольшое тестирование – все это вызывает интерес и мотивирует к просмотру.
- Нестандартный текст.
- Горизонтальная прокрутка.
Вики-лендинги для VK
Красочный одностраничник, который открывается при нажатии на пост-описание, поможет красиво описать магазин, презентовать услугу и товар, и, конечно, повысить продажи и . И все это позволяет сделать .
Кстати, Петр Панда был одним из первых копирайтеров в Рунете, кто начал писать тексты для лендингов Вконтакте.
Пример лендинга VK от Петра Панды
Одностраничник от Панда-копирайтинг
И пример из сети: текст разбит на короткие блоки, по объему схожие с небольшими постами в ВК.
Оптимально, если на таком Wiki-лендинге есть следующие элементы:
- Подробная информация о компании, услуге.
- Элементы графики покрупней , чтоб не нагружать глаза читателя.
- Товары (для интернет-магазина с небольшим ассортиментом). Пользователи соцсетей не любят искать товары в альбомах, поэтому их лучше разместить на лендинге.
- Короткие текстовые блоки.
- Фото. Поскольку лендинг все-таки размещен в социальной сети, нужно, чтобы пользователи видели того, кто предоставляет им услуги или продает товары.
Лендинг на главной странице
Еще один лидер среди посадочных страниц. На главной странице нужно уместить много данных – краткое описание, мини-каталог или описание нескольких продуктов, преимущества, возможно даже цены, контакты, виджеты. Чтобы читатель не устал от этого массива информации, нужно взять на вооружение интерактивность лендингов.
На примере ниже – Landing Page, который понравится даже детям. Поэтому он вызывает доверие у родителей, которые и будут платить за шоу.
Помимо ярких красок и фото счастливых детей, тут есть несколько типов сценариев, видеоотзывы и т.д. Остальные подразделы («Узнать подробнее», где описываются типы шоу, цены и т.д.) могут быть выполнены уже не в виде лендинга.
И еще один пример такого лендинга:
Пример отличного яркого лендинга на главной странице:
Отличный дизайн, минимум информации, которая при этом полностью объясняет, в чем фишка этой фирмы. Обратите внимание на регалии, они не выставлены на показ, но дают представление о статусе фирмы.
Оптимально, если главная страница в виде Landing Page содержит такие элементы как:
- Простой контент – минимум полезной информации о компании или продукте.
- 1-2 неагрессивных кнопок действия.
- Основные выгоды и преимущества.
- Контакты.
- Интересные заголовки, описания, втягивающие читателя и подводящие к нужному действию (перейти в каталог, позвонить, подписаться).
- Отсутствие массива текста.
Лендинги-Игры
Такие сайты не будут иметь каталога, описаний плюсов бренда или блока с контактами. Они создаются для косвенной рекламы или просто ради узнавания бренда. Прикольные флеш-игры точно запомнятся пользователю.
Если хотите повысить доверие к продукту или подогреть ЦА – берите на заметку.
На примере – игра «Съешь бомбу», она особо не нагружает пользователя и затягивает. К тому же, это ненавязчивый рекламный ход компании The FWA.
Если пользователь на вашем сайте зашел не на ту страницу, красивая, смешная или даже игровая точно заставит их продолжить серфинг по сайту.
Предложите пользователю ссылки на другие разделы сайта. Так он с большей вероятностью не закроет страничку. На примерах ниже – не только прикольная графика, но и возможность в один клик перейти на домашнюю страницу или другие странички сайта.
Мелочь, конечно, но ведь успех и состоит из мелочей!
Пример отличной страницы с ошибкой 404: есть возможность сообщить об ошибке, кнопки для перехода на сайт, видео.
Оптимально, если страница 404 содержит следующие элементы:
- Полезные ссылки, возможность перейти на главную страницу сайта.
- Четкое и понятное сообщение о том, почему пользователь попал на эту страницу.
- Возможность сообщить о проблеме.
- Строка поиска, чтобы читатель не ушел, а все-таки нашел то, что ему нужно на вашем сайте.
- Интерактивные элементы.
Лендинги – Мероприятия
Если вы хотите, чтобы о мероприятии узнала ЦА – делайте лендинг. , программу события и т.д. смотрится очень скучно, если сделан сплошным полотном, и даже марикрованные списки не помогут удержать внимание читателя до конца.
Вы сможете от блока к блоку подогревать интерес, не теряя читателя, показать в виде удобных блоков программу, спикеров, подчеркнув преимущества иконками. А «вишенкой на торте» будут , фото с предыдущих событий с анимированными переходами и другие мультимедийные приемы.
И не забудьте про триггеры – скидка за регистрацию до определенного числа или за приведенного друга не будет лишней.
Ниже пример длинного лендинга, который дает много концентрированной информации, поэтому вы не теряете ЦА и они доходят до самого конца текста.
И еще один пример длинной, но правильной Landing Page:
Яркий дизайн, рассчитанный не столько на родителей, сколько на детей. Отличный слоган-мотиватор “Полет в космос по цене билета в кино”. Плюс, возможные возражения читателя закрыты с помощью FAQ.
Оптимально, если лендинг, посвященный мероприятию, содержит следующие элементы:
- Таймер с отсчетом времени до начала мероприятия.
- Место и время проведения мероприятия, расположенные на видном месте.
- Несколько кнопок с призывом к действию. Или, как вариант, “залипающая” кнопка CTA.
- Яркий дизайн, напоминающий постеры.
- Контакты, расположенные на видном месте.
Как должен выглядеть лендинг с точки зрения эффективности? Какие блоки он должен содержать и как эти блоки должны выглядеть? Прочитав статью, вы получите ответы на эти вопросы и увидите, как выглядят лучшие landing page.
1. Заголовок с УТП
У идеального лендинга, одноэкранного или длинного, всегда есть цепляющий заголовок, который:
- сразу дает посетителю понять, куда он попал;
- показывает ему уникальность вашего предложения.
Размещается заголовок в верхней части лендинга, на уровне глаз пользователя. Большой, яркий, интригующий.
От заголовка зависит показатель отказов.
Вот примеры заголовков лучших лендингов нашей компании.
2. Дескриптор
Дескриптор также влияет на показатель отказов, хоть и меньше, чем заголовок. Обычно состоит из логотипа, названия компании, слогана или нескольких слов об услугах или товарах. Размещается вверху слева или в середине.
В том случае, если на посадочной странице есть заголовок с УТП, дескриптор делают скромным – лого плюс название.
Лучшие лендинги всегда содержат оригинальный дескриптор.
3. Блок с контактными данными
Как правило, размещается в верхнем правом углу. Исчерпывающий блок контактов содержит:
- реальный номер телефона;
- электронную почту;
- кнопку «Обратный звонок».
Обязательно используется призыв – просьба позвонить.
4. Привлекательное изображение
Под изображением подразумевается фон – большая картинка, поверх которой размещают заголовок, форму захвата, другие блоки.
В идеальном лендинге изображение соответствует тематике сайта, является оригинальным и интересным. Цветовая гамма фона отличается от цвета шрифта заголовка, чтобы они не сливались.
На скриншотах вы видите красивые лендинги с привлекательными изображениями.
5. Формы захвата
Одноэкранный лендинг содержит одну форму захвата, длинный – 2 или 3 формы. Первая форма соседствует с заголовком – рядом с ним или под ним.
Форма захвата содержит графы для ввода имени и телефона. Призыв к действию описывает дополнительные выгоды (подарок, скидку, дополнительную услугу), которые побуждают посетителя к немедленной отправке данных.
Если на лендинге проходит акция, форма захвата содержит таймер обратного отсчета.
Вот такими формами захвата мы оснащаем лучшие лендинг пейдж наших клиентов.
6. Блок с выгодами для клиента
Этот блок идеально обходит возражения посетителей. В блоке помещают 3–8 пунктов.
Блок имеет следующую структуру: текст с описанием выгоды и тематическая картинка для каждого пункта. Расположение пунктов – горизонтальное или вертикальное. В идеальном блоке во всех пунктах одинаковое количество текста, а ключевые предложения выделены цветом или жирным шрифтом.
7. Отзывы клиентов
Блок с отзывами – ключевой в лендинге.
На лендинге должны быть реальные отзывы по меньшей мере от трех клиентов. Идеальный вариант – окно с возможностью прокрутки, например слайдер, вмещающий 5–10 отзывов.
Каждый отзыв:
- содержит имя и реальное фото клиента;
- содержание с ключевыми подробностями, которые позитивно скажутся на конверсии лендинга.
Вот примеры блоков с отзывами на лучших лендингах нашей студии.
8. Тарифы или пакеты услуг
Покупатели любят выбирать из нескольких альтернатив. Поэтому идеальный лендинг предлагает на выбор 2–3 тарифа или пакета. Неважно, продает лендинг товары или оказывает услуги, на сайте должен присутствовать блок с тарифами.
Тарифы должны отличаться друг от друга и содержать подробную информацию о том, что в них включено. Один из тарифов помечается, как самый популярный среди клиентов.
9. Примеры Лендинг Пейдж
Это один из самых важных блоков лендинга. Именно просмотрев портфолио или кейсы, посетитель принимает решение о совершении целевого действия.
Грамотное портфолио содержит только лучшие работы, красиво оформлено, не занимает много места. Для оформления лучше использовать слайдер, с помощью которого посетители будут прокручивать изображения.
Посмотрев примеры лендингов посетитель должен убедиться в качестве продукта или услуги.
10. Реальные контактные данные в футере
Заключительный триггер доверия – блок с контактной информацией о компании или авторе в футере.
В случае с компанией обязательно должна быть карта с указанным местоположением офиса. В случае с автором всевозможные контакты.
Также тут размещается заключительная форма захвата.
В идеальном лендинге присутствуют все вышеперечисленные элементы. Однако чтобы посадочная страница действительно была эффективной, все ее блоки нужно грамотно объединить в одну композицию. А так же добавить смыслы, благодаря которым посетители совершать конверсионные действия на нашем лендинг пейдж.
Чтобы создать успешный одностраничный сайт для продажи собственного продукта, разумные решением будет предварительно изучить работающие примеры лендинга. Легко ли создать такую страницу самостоятельно? Рассмотрим, что отличает красивые и активно продающие сайты-лендинги.
Что такое лендинг
Лендинг - что это такое? Так называют одностраничный сайт, где клиентам предлагается какая-то выгода: скидка, акция, уникальная продукция. Лендинг не всегда ставит целью продажу продукции. Иногда такие страницы содержат форму заявки, заполнив которую клиент попадает в базу данных или заказывает себе информационный звонок менеджера компании.
Большинство компаний уже оценили, насколько лэндинговые сайты помогают в маркетинге. Одна страница решает одну задачу. Лендинги нельзя перегружать дополнительной информацией. Их главная цель - мотивировать клиентов ответить на призыв к действию.
Преимущество одностраничного сайта над полноценными интернет-магазинами состоит в конкретности предложения. Ясная формулировка выгод помогает успешно доносить до клиентов преимущества сотрудничества (покупки, заявки).
Безусловно, все пользователи интернета видели такие страницы. Практика показывает, что это действительно эффективный маркетинговый инструмент. В условиях всеобщей информационной перегруженности landing page приятно радуют покупателей минимализмом, стилем и ясностью формулировок, отсутствием лишней рекламы и спама.
Красивый лендинг - важный инструмент интернет-маркетинга
Примеры самых красивых landing page
Что делает лендинговую страницу красивой? Сначала может показаться, что однозначного ответа на этот вопрос нет, потому что каждый пользователь понимает красоту по-своему. Но на самом деле лендинговая страница - это инструмент, для которого есть стандарты качества. Чтобы увидеть удачные примеры посетите следующие сайты:
- Designed to move.org;
- Evr.st;
- Grooveshark.com;
- Hipstamatic.com;
- GiftRocket.com.
Лучшие лендинг пейдж отличаются схожей структурой и особенностями. Людям нравятся разные варианты оформления сайтов, но успех лендинга кроется не в красивых картинках. Основные черты привлекательных одностраничных сайтов:
- минималистичный, но стильный дизайн;
- ясные формулировки, нет размытых словосочетаний, много конкретики;
- перечень выгод (клиент сразу понимает, что получит, если откликнется на предложение);
- удобная форма заявки, без лишней информации (лучшее решение - только имя покупателя и контакты);
- наличие призыва к действию, побуждение к отклику («позвоните», «узнайте подробности», «заказать звонок»);
- честность (лендинг должен содержать только актуальную и соответствующую действительности информацию);
- оптимизация под поисковые системы (наличие популярных запросов в тексте сайта поднимает его в рейтинге поисковых систем).
В статье представлены примеры сайтов с хорошим лендингом. Изучите их и разработайте собственные одностраничные сайты для продуктов и услуг. Можно выделить некоторые общие рекомендации. Страница должна быть гармоничной, привлекательной для взгляда. Не стоит использовать кислотные или раздражающие оттенки. Желательно ограничиться 2-3 основными цветами и придерживаться приятных контрастных тонов. Все изображения на лендинге должны быть высокого качества.
Гармоничные сочетания цветов, ясно описанные выгоды и удобное размещение на экране - признаки успешного лендинга
Примеры активно продающих лендингов
Продающий лендинг - цель большинства интернет-маркетологов. Важно сделать одностраничный сайт не только красивым, но и привлекающим трафик покупателей. Какие особенности помогут превратить обычный лендинг в активно-продающий?
Ключевая особенность - это очевидная выгода. Чем быстрее покупатель поймёт, что ему предлагают действительно выгодные и честные условия сотрудничества, тем быстрее он совершит покупку. Поэтому в оффере страницы нужно указать стоимость товара или услуги. По возможности нужно сравнить её с ценами конкурентов и обязательно акцентировать внимание на разнице (например, «на 5000 рублей дешевле, чем у конкурентов»).
Хорошим вариантов будет использование формулировки «вопрос-ответ». Пользователи часто ищут в интернете информацию в форме вопроса. Например, «как выбрать платье на выпускной». Используйте популярную формулировку в заголовке лендинга и хороший трафик вам обеспечен (если, конечно, сайт действительно предлагает решение вопроса).
Вся важная информация должна разместиться на первом экране: чем быстрее пользователь уловит суть предложения, тем быстрее откликнется
Большое количество лендингов в рунете очень однообразны, а всегда необходимо создавать что-то новое и необычное.
Ниже мы рассмотрим ТОП-10 продающих лендингов, которые грамотно составлены и которые стоит анализировать, а затем применять фишки на своих продающих лендингах.
Есть определенная структура landing page, которая работает. Это могут быть как длинные лендинги, так и помещаться в 2 экрана.
Единого мнения нет и быть не может. В каждом случае необходимо исходить из целевой аудитории на сайте.
Итак, вот примеры 10 продающих лендингов, которые стоит обязательно изучить:
У меня нет доступа к статистике данных лендингов, поэтому не могу сказать насколько хорошо они конвертируют посетителей в подписчиков, а подписчиков в покупателей.
Это больше компании и продающие элементы на страницах хорошо проработаны, поэтому стоит провести детальный анализ этих продающих лендинг пейдж.
Если хотите не просто сделать красивую картинку из своего сайта, но чтобы оно еще и работало, тогда рекомендую изучить . Оно может давать больше заявок с меньшим бюджетом. Обязательно изучите!
Примеры лучших продающих Landing Page
1 Shopify
Очень короткий лендинг пейдж, на котором предлагают попробовать бесплатно продукт в течение 14 дней.
Заголовок: короткий и емкий, состоит из нескольких слов.
Преимущества: представлены в виде 3-х пунктов, где присутствуют цифры (это очень важно, потому что привлекает внимает и дает конкретные данные, без «воды»)
Пошаговая форма заявки: они не показывают сразу форму.
Первый шаг — вы заполняете поле с email:
Второй шаг — предлагают заполнить еще 2 поля с паролем и названием своего интернет-магазина:
Обратите внимание на порядок заполнения. Вам не показывают сразу все поля, потому что это понижает конверсию, а постепенно показывают еще поля, как в квизе.
Что еще есть: в конце страницы еще один призыв к действию:
2 Duolingo
Следующий наш подопытный — это сервис по изучению иностранных языков Duolingo.
Заголовок: очень короткий заголовок, как и в предыдущем примере.
Пошаговая форма заявки: на первом также находится 2 кнопки.
Первая кнопка позволяет сразу начать изучение (но скоро мы посмотрим как они вовлекают в процесс) и создать аккаунт, а вторая войти уже для тех, кто зарегистрировался в системе.
А сейчас начинается самое интересное, когда вы нажимаете на кнопку «Начать»:
Вы попадаете на вопрос где нужно выбрать язык.
Этот вопрос очень естественный и на него легко ответить, когда у вас есть намерение пройти изучить иностранный язык.
Потом нужно выбрать цель изучения языка:
В зависимости от этого будет выстраиваться программа обучения для вас.
Следующий вопрос о том, сколько времени в день вы сможете уделять изучению:
Еще один вопрос, где нужно ответить являетесь новичком или что-то уже учили:
Вам не показывают форму, где нужно ответить на одной странице на 7-8 вопросов, а постепенно вовлекая в процесс показывают вопросы.
Что еще важно — вопросы составлены в логическом порядке и не возникает недопонимания, ответить очень легко.
Квизы на сайтах применяются где угодно, важно только увидеть их. Читайте также нашу . Так вы будете понимать что это и как применить для своего бизнеса.
3 Airbnb
Как вы уже поняли любую информацию на лендинге можно представить в очень удобном пошаговом виде.
Но не только продающую информацию, но и когда вы хотите рассказать и показать свой продукт.
Многие до сих пор заставляют на продающих страницах читать большое количество текста (и это не в виде сторителлинга).
С этим примером от Airbnb вы увидите как можно лаконично показать человеку большое количество информации и провести небольшой обучающий курс.
Это одна из услуг Airbnb, где вы для гостей можете сделать нечто большее, чем просто экскурсию (они назвали это «Впечатление»).
Чтобы зарегистрироваться для участия в этой программе вам необходимо нажать кнопку «Начать» и вас перенаправит на самое начало:
И только потом предлагают зарегистрироваться и создать свое «Впечатление»:
Эту же информацию можно было разместить и в виде текста, который разбит по пунктам, но куда легче и интереснее изучать в пошаговом формате.
4 Black Negative
Отличительной особенностью данного сайта перед всеми остальными является его нестандартная прокрутка. Как Вы могли заметить — она горизонтальная. Также перемещение происходит при помощи перетаскивания контента влево. Но что еще больше впечатляет — это количество эффектов в каждом блоках: , , а также вертикальная прокрутка блоков. Видео на фоне немного сбивает, но всё же выполнено всё достаточно оригинально и необычно.
5 Super Top Secret
Здесь хочу обратить Ваше внимание не на эффекты при наведении, а на фон. После полной загрузки сайта при перемещении курсора мыши на фоне появляются разводы, как на воде. Также по клику создаются разводы, и такой эффект производит отличное впечатление. Не на каждом сайте увидишь такое.
6 WE AIN’T PLASTIC
В процессе прокрутки на странице появляются (рисуются) различные иконки и заголовки. Не осознавая начинаешь смотреть на процесс рисования и ждать что же там появится в конце, тем самым читая текст, который нарисовался. Если Вам интересно как же создается данный эффект и Вы хотите создать такой же эффект на своем сайте или лендинге, тогда изучите данные статьи: и .
7 ANTON & IRENE
8 BLITZ
9 The Boat
Если при прочтении книги Вам тяжело представить что там происходит, тогда данный сайт для Вас 🙂 . Потому что здесь Вы можете сразу и читать и видеть сюжет, потому что на фоне происходит то, что написано текстом. То есть по мере прокрутки страницы и чтения текста меняется и фон сайта.
Интересная задумка. Кто знает, может в ближайшее время такие истории начнут появляться в больших масштабах. Конечно, есть плюсы и минусы у данного подхода, но то что это креативно сделано — нет претензий.
Бонусный лендинг
* An deiner Seite
Это не совсем продающий лендинг, но чтобы вас немного вдохновить и направить мысли в сторону креатива этот клип обязателен к просмотру!
Когда попадете на этот сайт вам необходимо удерживать кнопку пробела, чтобы начать.
Здесь рассказывается 2 истории и вам необходимо собрать все элементы для того, чтобы узнать правду 🙂 . Вы как детектив, где нужно не просто видеть красивую картинку, но и понимать, что скрывается за ней.
Не буду рассказывать больше ничего, переходите и смотрите сами. Задумка великолепная, обязательно отпишите в комментариях сошлись ли ваши предположения в начале просмотра и в конце.
И да, чтобы увидеть разные концовки — придется пересмотреть это видео несколько раз 😉 .
Вывод
Вы увидели 9 сайтов, которые отличаются от тех, которые мы все видим в рунете. Они созданы профессиональной командой дизайнеров. На сайтах много интерактивных элементов, которые взаимодействуют с пользователем и заставляют его еще дольше остаться на странице. Надеюсь с помощью данных сайтов Вам придет вдохновение для Ваших проектов.
