Как сделать продающий лендинг: инструкция, советы, примеры

GeekBrains

Интенсив “Основы веб-дизайна”. Создание Landing page.

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

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

Например, посадочная страница (landing page) должна продавать 1 конкретную услугу или товар. Продающий дизайн соответствующе оплачивается. За макет одностраничника дизайнер-фрилансер с опытом получает от 10 000 рублей.

На бесплатном интенсиве от GeekBrains вы узнаете принципы веб-дизайна и вместе с опытным преподавателем с нуля создадите посадочную страницу.

Чему вы научитесь:

• Создавать посадочные страницы;
• Работать с Adobe Photoshop;
• Стимулировать дизайном продажи.

Что вы получите:

• Видеозаписи всех онлайн-занятий
• Методички и практические задания
• Общение с одногруппниками
• Сертификат об окончании обучения

6 простых шагов к конверсионному лендингу

Шаг 1. Заходим в виджет, который находится в разделе личного кабинета «Обратный звонок».

Шаг 2. Создаем промо-лендинг, кликнув на одноименный раздел

Шаг 3. Настраиваем посадочную страницу под свои цели и задачи

Копируем ссылку на страницу

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

Виджет обратного звонка для сайта

50 минут в подарок новым клиентам

• Повысьте конверсию сайта на 30%
• Экономьте на тарифах: от 5 рублей в минуту
• Адаптируйте форму под ваш сайт. Без разработчика
• Используйте гибкие настройки показа
• Стройте отчеты по звонкам: от показа виджета до ключевого слова

Узнать подробнее

Указываем номер переадресации в колл-центр и его график работы

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

Настраиваем график отложенных вызовов на выходные и нерабочие дни

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

Создаем оповещение оператору через синтез речи

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

Выберите информацию, которую нужно донести до оператора перед совершением звонка. Оператор перед соединением услышит оповещение и будет во всеоружии.

Шаг 4. Настраиваем внешний вид

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

• Горизонтальный статичный
• Горизонтальный с подвижной полосой
• Вертикальный

Пример 1.

Пример 2.

Пример 3.

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

Шаг 5. Настраиваем уведомления

Шаг 6. Включаем виджет, начинаем получать звонки и контролировать трафик по всем рекламным каналам из личного кабинета Calltouch

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

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

Как создать бизнес на одностраничных сайтах

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

Клиентов на создание одностраничников ищут в интернете по объявлениям или напрямую выходят с предложением к потенциальным заказчикам.

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

Преимущества одностраничника

Создание одностраничного сайта — разумное начинание для предпринимателей и организаций. Лендинг характеризуется преимуществами:

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

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

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

Какой товар можно продавать

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

Одностраничные сайты отличаются минималистичным дизайном, привлекательными формулировками и призывами к действию

Сфокусируйте внимание клиента на акции

Промо-лендинг – идеальный инструмент для проведения акций

Страница, которую вы можете сделать менее, чем за 10 минут позволяет сфокусировать внимание пользователя именно на нужном вам предложении. Лаконичный дизайн и принцип «одна страница – одно предложение» оставляет пользователю единственный выход – оставить вам лид

Например, вы запускаете определенную акцию, с прозрачной и понятной ценностью для пользователя, которая действует короткий промежуток времени. Создаете страницу и ведете на нее именно «акционный трафик». Возьмем предложение дилера «при покупке Land Rover до конца октября – зимняя резина в подарок». 

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

А вот на целевой стоит обратить особое внимание

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

Кстати, промо-страницу можно использовать и нестандартно. Например, отслеживать активность рекламы в Фейсбуке. Допустим, у вас есть интеграция на уровне коллбэка. Но от клиентов часто поступает запрос, что им нужно отследить эффективность конкретной формы/объявления в рамках всей рекламной кампании. Не всегда понятно, какой месседж «выстреливает». Ведь часто их не один и даже не пять. 

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

Переходите на новый уровень

Да, обычно лендинг — это быстро и недорого. Но в любом правиле есть исключения. Например, компания S7 Airlines сделала необычную презентацию нового самолета — это интерактивная картинка гаража с Airbus A320neo. Дизайнер создал 3D-анимацию снятия покрывала с самолета, взлета и возможность прогулки по салону.

Посмотрите проект сайта на Behance.

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

Старайтесь удивлять пользователя. Не обязательно использовать технологии, которые стоят тысячи долларов. Съемка 3D-фотографии, пусть без динамики, сейчас стоит не очень дорого (можно найти варианты от 600–700 рублей), но этот эффект заставит пользователей запомнить ваш лендинг.

Как создать лендинг пейдж?

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

Первым вариантом станет конструктор веб-ресурсов. В данном случае можно создать лендинг самому бесплатно. О том, что такое конструктор сайтов простыми словами, мы уже говорили ранее. В интернете их много. Как варианты, это Wix, Tilda, Flexbe, LPgenerator и другие.

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

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

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

Tilda

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

Кратко о конструкторе Tilda в таблице.

Количество шаблонов	Более 180
Индивидуальный заказ дизайна	Отсутствует
Пробный период	14 дней
Минимальный тариф	От 750 руб. в месяц (скидка при оплате сразу за год)
Привязка собственного домена	Есть
Адаптивность дизайна	5 экранов
Интеграция	CRM, почтовые рассылки, сервисы приема платежей, банковский эквайринг (Альфа-Банк, Сбербанк, Тинькофф)
Аналитика	А/Б тестирование, мультилендинги, отчеты в реальном времени, Google Analytics и Яндекс.Метрика
Регистрация доменов	Отсутствует, подарочные предоставляются через Reg.ru

Интересный факт: несколько сайтов, созданных пользователями Tilda, были награждены известными премиями. Например, первое место в рамках номинации «Промышленность и оборудование» по версии Рейтинга Рунета 2016, а также победа в Bitrix Design Cup 2016.

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

Перейти на tilda.cc

OPENSSOURCE

Курс: «Создание и продвижение Landing Page». Интересный и полезный материал от профессионала. Отзывы только положительные. Воды нет, все объясняется доступным и понятным языком и разложено по полочкам.

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

• верстка лэндинга: создание различных блоков сайта, формы заказа, быстрых ссылок, адаптация дизайна, подключение fancybox;
• программирование клиентской части: реализация базы данных, создание и подключение движка, работа с формой заказа, мониторинг рекламных кампаний;
• программирование административной панели: верстка, настройка авторизации, вывод статистических данных, работа с заказами;
• размещение сайта в Сети: реклама тизерная, контекстная, баннерная, настройка Яндекс-Директ, регистрация домена и хостинга.

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

Бизнес-школа KOGIO

Создайте идеальный Landing Page! Посадочные страницы — генераторы продаж в современном бизнесе. Пройдя этот курс вы сможете не просто овладеть техниками создания landing page, а делать это правильно и эффективно.

Сначала были просто сайты, потом появились магические landing page — посадочные страницы, которые начали завоевывать себе признание среди онлайн-маркетологов.

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

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

Что вы получите:

• Понимание анатомии landing page
• Стратегию создания посадочных страниц
• Техники привлечения и удержания внимания
• Особенности формирования доверия на landing page
• Умение измерять эффективность
• Способы оптимизации конверсии и тестирования гипотез
• Понимание особенностей психологии при создании лендингов
• Умение создать правильный текст

Конструктор посадочных страниц LPBuilder.pro

Конструктор страниц LPBuilder.pro предоставляет все, что нужно странице, чтобы приносить прибыль.

• Интернет-платежи,
• Подписка на рассылку,
• Бланки контактных данных (генерация лидов),
• Статистика,
• Тесты A/B.

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

№1. Создание лендинг пейдж при помощи бесплатных конструкторов

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

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

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

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

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

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

Создаем Customer Journey Map

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

Но важно составить CJM — Customer Journey Map

Customer Journey Map дословно расшифровывается как «Карта пути клиента». Она помогает определить, как клиент будет взаимодействовать со страницей, показывает его страхи и ожидания. Составить CJM можно в простой Google-таблице, графическом редакторе или специальном сервисе.

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

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

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

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

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

Этапы прохождения пользователя по лендингу:

Основываясь на лестнице Ханта, можно назвать элементы правильной структуры лендинга. Конечно, можно строго ее не придерживаться. Какие-то блоки можно убрать, какие-то поменять местами. Главное, чтобы landing page справлялся со своей задачей, а именно, чтобы посетитель совершил целевое действие. Чем-то лестница Ханта похожа на этапы воронки продаж, где сначала происходит привлечение внимания пользователя, потом вызывается интерес к товару и желание оставить заявку или поместить товар в корзину, а в конце совершение покупки или заказ услуги.

Правильная структура лендинга:

• Оффер (заголовок). Данный элемент должен быть привлекательным. В нем отражается предложение компании. В основном, это цены и скидки.
• Сведения о продукции (товар, услуга). В данной части вы должны рассказать о товаре или услуге: описание, характеристика, изображения. Если есть, то добавьте и видеоматериал.
• Преимущества вашего предложения. Это повысит шанс на совершение действия. В основном, плюсы расписывают при помощи изображений, графики. Если расписывать преимущества только тестом, то читать аудитория не станет.
• Схема работы. Здесь посетителю стоит рассказать о схеме вашей работы: клиент-заказчик.
• Отзывы других клиентов. Это повысит доверие к вам и вашему предложению.
• Дипломы, грамоты, сертификаты. Они также повышают доверие к вам и вашему предложению.
• Стоимость. После предыдущих элементов правильной структуры лендинга стоит еще раз сказать о привлекательности стоимости (невысокой цене). Рядом можно разместить форму заказа.
• Форма заказа (СТА). В основном, она в виде кнопки, нажатие на которую кидает на основной веб-ресурс, или форма для заполнения без перехода. Здесь можно предложить потенциальному клиенту скидку или бонус. Также хорошим приемом станет контрастный цвет кнопки или формы заполнения, повторение кнопки несколько раз.
• Спецэлементы. Для увеличения конверсии landing page можно использовать различные виджеты. Например, счетчик времени завершения предложения.
• Контактные данные. Помещаются они либо в хедере (шапка сайта), либо в футере (подвал сайта). И следует указывать все доступные для связи контакты: от телефона и электронной почты до местоположения офиса на карте и кнопок на соцсети.

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

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

Уделите больше внимания блоку описания продукта

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

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

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

Пример лендинга с простым контрастным дизайном — он отлично выполнил свою задачу привлечь зрителей.

Заключение

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

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

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

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