Создание лендинг пейдж – самостоятельно и бесплатно. Как сделать landing page самому: бесплатные сервисы

14.09.15 32K

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

Лэндинги наилучшим образом подходят для проведения рекламных кампаний для конкретной услуги или предложения с уникальной (низкой) ценой, а также для привлечения целевой аудитории из систем контекстной рекламы Google AdWords , Яндекс.Директ , социальных сетей и email-рассылок:

Что такое Landing Page?

Landing page – отдельная страница, которая используется для:

• реализации конкретного товара или услуги;
• создания подписной базы.

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

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

Типы лендинг пейдж:

• Автономный . Это самый распространенный тип посадочных страниц. Основная задача – побуждение пользователя к покупке или определенному действию, рекомендуемому страницей;
• Микросайт . Небольшой, чаще отдельный сайт, состоящий не более чем из 5 страниц, содержащих информацию о товаре или услуге;
• Главный сайт . Для страницы приземления использует одну или более страниц ресурса;
• Лендо-сайт . Ресурс, который полностью состоит из независимых целевых страниц:

Типы целевых страниц

• Рекламные . Содержат большое количество текста, графическую и видео информацию об услуге;
• Вирусные . Реклама замаскирована под статью или игру. Зачастую в ней задействованы электронная почта, социальные сети, чаты;
• Целевые лид-страницы . Предназначены для сбора информации о целевой аудитории, как правило, содержат минимум информации.

Грамотно составленная посадочная страница позволяет повысить конверсию посетителей в реальных покупателей.

Зачем нужны Landing Page?

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

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

Преимущества использования Landing Page

Лендинг в сравнении с обычными страницами ресурса, предлагающими услуги или товары, имеет ряд преимуществ:

• Нацеленность на определенную аудиторию. На странице приземления предполагается не множество решений, требующих от пользователя выбора, а одно уникальное предложение, перед которым сложно устоять;
• Высокая конверсия. Согласно статистике, использование посадочных страниц в рекламных целях позволяет увеличить конверсию на 10-15%;
• Полная информация о предлагаемом товаре/услуге, но без дополнительных переходов и ссылок;
• Возможность сбора контактов посетителей и пополнения базы потенциальных клиентов, которым в дальнейшем можно разослать информацию о предстоящих акциях/розыгрышах;
• Невысокая стоимость создания лендинг пейдж. Даже начинающие бизнесмены могут позволить себе создание лендинга, таким образом, тестируя товарные ниши, чтобы начать продавать в интернете:

Где и как используются Landing Page?

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

Где используются Landing Page?

• В рекламных кампаниях с использованием контекстной рекламы с оплатой да клик (PPC ) в Яндекс.Директ , Google AdWords , Бегун . При этом трафик перенаправляется на целевые страницы, оптимизированные под ключевые запросы;
• В баннерных рекламных кампаниях, при условии, что графический материал размещается на тематических ресурсах, рассчитанных на целевую аудиторию. Например, баннерная реклама новинок в сфере электроники размещается на новостных порталах в сегменте для специалистов в области IT-технологий;
• В рассылках информационных и маркетинговых писем, содержащих ссылку на посадочную страницу. Например, рассылки для интернет-магазина, учитывающие предыдущее покупки пользователя;
• Проведение кампаний в блогах, в рамках которых пользователь перенаправляется на целевую страницу ресурса, с владельцем которого блогер предварительно заключает партнерское соглашение на размещение баннерной рекламы, постовых, PR-статей;
• Кампании в социальных сетях (ВКонтакте, Facebook, Twitter и т.д. ) либо на популярных медиахостингах (например, YouTube, Flickr и т.п. ). Пользователи перенаправляются на посадочную страницу рекламодателя, имеющего договор о размещении рекламных материалов с выбранным медиа-ресурсом:

Основные способы создания Landing Page

• Бесплатные шаблоны и генераторы лендингов. Сейчас в сети существует множество вариантов бесплатных шаблонов и конструкторов, позволяющих сгенерировать лендинг пейдж. Самым популярным сервисом . Это отличный вариант для компаний, ограниченных в бюджете, но имеющих в штате специалистов, разбирающихся в маркетинге и дизайне;
• Обращение к специалистам. Можно заказать текст для лендинга у копирайтера, разработку дизайна — у дизайнера, и интеграцию с движком — у программиста. При этом в штате компании должен состоять маркетолог, который будет контролировать проект на всех его этапах. К преимуществам данного способа относят относительно невысокую стоимость и достаточно высокий результат, к недостаткам – риск ошибки в выборе специалистов;
• Аутсорсинг агентства. Данный способ создания посадочной страницы подразумевает обращение в агентство, которое возьмет на себя анализ конкурентов, выбор концепции, разработку стратегии рекламной кампании, решит вопрос с интеграцией с движком и запустит проект. Все, что требуется от вас — это бриф на создание лендинга, а разработку посадочной страницы «под ключ» агентство возьмет на себя. К преимуществам данного способа можно отнести высокую эффективность и экономию времени, к недостаткам — более высокую стоимость, чем в предыдущих вариантах;
• Содержать в штате специалистов, которые будут заниматься . Это самый дорогой и самый эффективный способ. Собственная команда, состоящая из дизайнера, копирайтера, маркетолога и программиста-верстальщика, позволит полноценно продвинуть ваш продукт/услугу на рынок.

Можно ли создать Landing Page самостоятельно?

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

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

Можно ли создать Landing Page бесплатно?

Так, как интерес к посадочным страницам постоянно растет, разработчики предлагают новые и новые инструменты создания landing page на базе шаблонов. Вот список наиболее популярных методов и сервисов:

• бесплатный лендинг создать можно, если зарегистрироваться на Wix ;
• сделать посадочную страницу можно с помощью программы Adobe Photoshop ;

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

Оптимизация лендингов

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

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

Для оптимизации лендинга вам стоит сделать следующее:

• разбить посадочную страницу на блоки;
• каждый блок должен получить свой уникальный индикатор, заголовок, описание и название, URL.

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

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

Бизнес-логика посадочной страницы

Само определение лендинга (посадочной страницы) привязано к основной функции: получить максимальный отклик целевой аудитории на уникальное торговое предложение (УТП).

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

Модель AIDA(s)

Классическая модель AIDA (Attention, Interest, Desire, Action – внимание, интерес, желание, действие) работает всегда. Любые другие успешные модели, чаще всего, являются производными или дополняющими ее.

С развитием интернет-коммерции и общим повышением уровня сервиса набирает популярность интерактивная модель AIDAS (Satisfaction), в которой удовлетворенность клиента тоже имеет значение для дальнейшей эффективности рекламной кампании. В рамках этой модели ведется управление репутацией (SERM): работа с отзывами клиентов, нейтрализация негатива в сети.

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

Реализация модели AIDA(s) при построении лендинга такова:

• Attention – внимание привлекают качественный дизайн и заголовки интригующего характера
• Interest – интерес вызывает контент: текст, картинки и видеоролики. Контент лендинга должен вовлечь посетителя, чтобы он начал размышлять над нашим УТП.
• Desire – желание с одной стороны зависит от актуальности предложения для ЦА, а с другой – от правильной подачи УТП (дефицитность товара, срочность предложения и т.д.)
• Action – действие стимулируется с помощью призыва к действию (call to action). Обычно его повторяют несколько раз.
• Satisfaction – удовлетворенность клиента. Если вы дорожите репутацией, то важно быть уверенным в качестве продукта, он не должен быть заведомо плохим.

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

Хороший пример реализации модели AIDA в лендинг пейдж:

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

Хороший лендинг должен быть удобным не только для посетителей, но и для менеджеров. То есть в «админке» должен быть доступ к функциям CRM (Customer Relationship Management): трекинг заказов, группы клиентов, подписчиков и т.д. Разным группам клиентов можно предложить различные условия, делать рассылки (триггерные письма), звонки, предлагать скидки и так далее.

Эффективность и структура

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

Наиболее эффективны такие элементы:

1. Качественный адаптивный дизайн с чувством вкуса и соответствующим стилем. Должен правильно отображаться для мобильных устройств.
2. Шапка посадочной страницы обычно делается в легком и ненавязчивом стиле для размещения логотипа и контактов.
3. «Продающий», интригующий заголовок . Поскольку он задает тон всему лендингу, то должен выделяться, быть понятным, привлекать внимание.
4. Торговое предложение в наглядном виде. Если уместно, используйте графику и видео. Разбивайте текст на удобные для восприятия блоки: короткие абзацы, нумерованные и маркированные списки, подзаголовки и т.д. Практически весь контент лендинга раскрывает суть УТП и его можно усилить, выделяя такие продающие блоки:
   • Преимущества УТП перед предложениями конкурентов
   • Срочность и дефицит (обратный счетчик доступных товаров или времени акции)
   • Ссылка на авторитетных клиентов (фото-видео известных людей или фирм, логотипы партнеров)
   • Ответы на типичные вопросы о товаре (что получит клиент)
   • Отзывы реальных клиентов (желательно без накрутки)
   • Пробная версия продукта или тестовый период сервиса
   • Гарантии (срок и условия замены товара или возврата денег, безопасность транзакций)
5. Призыв к действию (call to action) – лучше всего оформлять в виде яркой кнопки с мотивирующим текстом «Подисаться», «Купить», «Заказать» но не абстрактным «Отправить», «ОК», «Готово». По мере знакомства с УТП у посетителя созревает решение о покупке или действии. Но мы не знаем точно, насколько он готов принять наше предложение, поэтому после каждого продающего блока лендинга нужно повторить призыв к действию.
6. Футер может содержать дублирование контактных данных из шапки, сертификаты, документы, ссылки на успешные бизнес-кейсы, социальные профиля и группы.

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

Инструменты

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

Наибольшие возможности дает разработка оригинального дизайна и его верстка (обычно используют связку 3-D графики, Photoshop, Dreamweaver и т.п.).

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

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

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

Программы для создания лендингов

Обладая навыками дизайна и верстки, лендинг можно создать точно так же, как и любой вебсайт. Профессиональный софт вебстудий – это Adobe Photoshop для графического дизайна и Dreamweaver для верстки, однако мы рассмотрим те программы, которые гораздо удобнее в работе с лендингами и легче в освоении.

Adobe Muse

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

WYSIWYG Web Builder

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

WebSite X5

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

Axure RP Pro

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

Microsoft Expression Studio

Expression Studio содержит несколько программ для создания сайтов, графики и видео: Expression Web, Expression Design и, соответственно, Expression Encoder.

Expression Web пришел на смену старому визуальному HTML-редактору Microsoft FrontPage. Есть интеграция с Microsoft Visual Studio.

Serif WebPlus

Serif WebPlus простой веб-конструктор, все операции может выполнять путем управления мышкой.

Сервисы

Сервис с богатым функционалом lpgenerator.ru предоставляет нам много специальных инструментов, необходимых для работы с лендингом:

• Шаблоны и визуальный конструктор (в том числе и для мобильных устройств)
• Аналитика – позволяет отслеживать все необходимые метрики для лендинга (CPC, CPL, ROI)
• Центр – примечателен функцией сплит-теста с большим числом вариантов
• Яндекс.Директ – инструменты для автоматизации настройки рекламных кампаний
• Интеграция с разными сервисами E-mail рассылок, CRM и Robokassa.
• CRM и LP телефония – заслуживает отдельного внимания, поскольку предоставляет все необходимые возможности для колл-центра или отдела продаж (трекинг лидов/заявок, статистика, E-mail и SMS оповещения)

У сервиса Lpgenerator есть бесплатный пробный период.

Плагины CMS WordPress

WordPress Landing Pages – один из самых популярных плагинов для создания посадочных страниц, предоставляет инструменты для А/Б тестирования разных вариантов лендингов, собирает статистику.

Скачать с официального сайта: http://wordpress.org/plugins/landing-pages/

Responsive Admin Maintenance Pro – этот плагин предоставляет нам 6 различных шаблонов. Поддерживает опции CSS3 анимации, Youtube бекграунда и т.д.

Для минимального набора функций можно использовать плагин Easy coming Soon. Его прямое назначение для страницы открытия сайта в разработке (анонса) но он-то, позволяет собирать E-mail и базу пользователей в соцсетях. У нас эта страница превращается в простейшую форму для создания подписной базы.

Метрики

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

• Лидогенерация – получение контактов от посетителя
• Конверсия – процент посетителей, сделавших нужное действие
• CPS – стоимость за продажу или то, сколько денег заработает лендинг от одного заказа.
• CPC и EPC (Cost Per Click и Earn Per Click) – первая метрика показывает стоимость за клик по контекстной рекламе, вторая – средний заработок за этот клик. Если EPC больше чем CPC, то лендинг можно считать успешным.
• LTV (customer lifetime value) – количество прибыли, которую принес нам клиент за все время работы с ним. Помните модель AIDAS? Довольный клиент может покупать у нас еще и еще (если есть подходящий ассортимент). То есть повторные продажи становятся гораздо проще, а серия продуктов –эффективнее. Высокую стоимость привлечения клиента можно перекрыть высоким значением LTV.

Есть и другие метрики, однако в конечном итоге все сводится к ROI – возврату инвестиций от всех средств, затраченных на весь цикл, связанный с лендингом.

Трафик

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

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

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

Источники трафика для лендинга

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

Ошибки

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

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

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

Типичные ошибки:

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

Контакт с лидами лендинга помогут наладить триггерные письма, шаблоны которых можно настроить в CRM, подключаемой к лендингу.

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

Итог

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

От автора: я приветствую вас. Landing Page то есть одностраничные сайты вошли в моду сравнительно недавно. В этой статье я постараюсь рассказать, почему они вообще появились и как создать лендинг пейдж самостоятельно?

Почему лендинги стали так популярны?

Сегодня каждый опытный веб-мастер видел уже сотни таких одностраничников. Я видел, наверное, тысячи. Они также имеют другие название: посадочная страница, страница приземления, целевая страница, одностраничник и т.д. Среди вебмастеров наиболее часто используется слово “лендинг” или даже “ленд”. И все прекрасно понимают, о чем идет речь.

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

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

JavaScript. Быстрый старт

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

Для чего используют лендинги?

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

Способы создания landing page

Собственно, рассмотрим всего 2 способа. И о первом я скажу совсем чуть-чуть. Он более прост и заключается в использовании платных и бесплатных конструкторов. Минус такого создания очевиден — вы собираете дизайн из неуникальных блоков, а чтобы уникализировать их, понадобятся уже навыки работы с html и css. А еще основы веб-дизайна. В платном конструкторе можно создавать по умолчанию качественные одностраничники, но вам едва ли хватит функционала, чтобы изменить в шаблоне что угодно и переделать все на свой вкус. К тому же для этого, как я уже говорил, тоже нужны знания.

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

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

Этапы создания лендинга с нуля

Планирование структуры одностраничника (какие на нем будут блоки, что в них будет и т.д.), составление ТЗ дизайнеру.

JavaScript. Быстрый старт

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

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

Заказ дизайна у веб-дизайнера. В среднем это стоит 1-10 тысяч рублей, в зависимости от сложности и исполнителя.

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

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

Установка в код необходимых счетчиков. Обычно ставят Яндекс.Метрику. Это позволяет устанавливать цели (например, клик по кнопке обратного звонка, клик по кнопке отправки формы), отслеживать поведенческие факторы и в случае необходимости принимать меры по улучшению лендинга.

Как определить качество лендинга?

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

Собственно, главный показатель качества одностраничника — конверсия. Это соотношение кол-ва целевых действий (заказ товара/услугу) к общему кол-ву людей, зашедших на сайт. Например, если вы купили платную рекламу и по ней на сайт перешло 120 человек, а получили вы 2 целевых действия, то ваша конверсия составляет примерно 1,66%. То есть 1,66% людей будет заказывать ваш товар. Правда, тут нужно оговориться, что 120 посещений и двух заказов недостаточно, чтобы высчитать средний показатель конверсии на сайте. Для этого нужно гораздо больше трафика.

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

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

И вы не узнаете об этом до тех пор, пока не протестируете этот вариант одностраничника. Если он повысит конверсию, то оставляете его и ищете следующие способы поднятия CR.

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

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

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

JavaScript. Быстрый старт

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

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

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

Что такое лендинг пейдж и почему это так важно

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

Скорее всего, вы забыли продумать и подготовить приземляющие (посадочные, целевые) страницы, которые часто называют лендингами . Что это такое?

А это очень важный момент, который может существенно повысить конверсию (количество покупок или регистраций), ибо landing page призваны максимально эффективно подводить пользователя к выполнению целевого действия . Если вы со всех рекламных объявлений будете направлять посетителей, например, на главную страницу сайта, то можете катастрофически снизить конверсию и вылететь в трубу.

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

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

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

Примеры лендингов

В зависимости от преследуемых вами целей можно разделить посадочные страницы (лендинги) на несколько типов:

12 шагов по созданию идеального лендинга

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

1. Каждый лендинг должен быть заточен только под одно целевое (конверсионное) действие — либо подписка, либо продажи. Не надо жадничать, ибо внимание пользователя будет рассеяно и сильно увеличится вероятность его ухода (так ничего и не выбрав из предложенных вариантов). Лучше как можно меньше заставлять клиентов думать и выбирать — путь на landing page должен быть прямым как стрела (очевидным для него) и без каких-либо ответвлений.
2. На посадочной странице обязательно должен присутствовать призыв к действию (с глаголами в повелительном наклонении — позвони, купи, получи, приди и т.п.). Фразы должны быть короткими и мотивирующими. Например, «купите сейчас», «получить видеокурс» или «подпишись и получи».
3. Рулят также яркие кнопки и стрелки , создающие на них акцент. Неплохо работают кнопки красных и желтых оттенков, ибо заметны и содержат как бы призыв к действию.

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

   

   Иногда очень неплохо работают анимированные кнопки (но в любом случае нужно будет проводить тестирование эффективности тех или иных элементов лендинг пейджа):

   

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

   

6. На вашей landing page должны быть не только призывы к действию и эффектные заголовки, но и аргументация необходимости подписки, покупки, заказа или звонка. В случае страницы подписки это может быть, например, небольшой видеоролик с описанием и содержанием «халявы», или все то же самое оформлено в виде краткого списка (перечня). В случае продажника это тоже может быть видеоролик с обзором товара, списком тех услуг, которые вы предлагаете (в том числе и ваши конкурентные преимущества).
   
   
7. Очень хорошо на посадочных страницах работают отзывы от уже состоявшихся клиентов, покупателей или подписчиков (лучше, если при этом будут указаны какие-то контакты тех, кто эти отзывы оставил, чтобы все выглядело правдоподобно).

   

8. Также неплохо работают на посадочных страницах сравнения «до и после» . Не для всех тематик это применимо, но в области похудения, косметологии, фитнеса и многих других ниш это можно с высокой эффективностью использовать. Например, так делает фирма, предоставляющая услуги ресторации.
   
   
9. Страница landing page может быть довольно длинной, но при просмотре первого экрана (это та область страницы, что видна без использования прокрутки) пользователю должно быть совершенно ясно и понятно, что именно вы хотели ему сказать.
10. Для стимулирования подписчиков или покупателей некоторых товаров (например, ) можно использовать вариант дополнительных бонусов, которые получит подписчик или покупатель при заказе. Когда пользователь находится на грани принятия решения, то как раз такие «плюшки» могут перевесить чашу весов в вашу пользу.
11. Ну и, конечно же, стоит делать упор на то, что «только здесь и только в течении нного количества времени» пользователю будет доступно все это великолепие (подписка, специальная цена на товар, дополнительный набор услуг). Как это сделать лучше всего? Правильно, поставить таймер, ведущий обратный отчет времени до часа Х, когда предоставленная возможность будет упущена. Ничто так не стимулирует к принятию решения колеблящегося пользователя, как буквально на глазах убегающие секунды.

    

    Рядом с таймером неплохо будет расположить форму подписки, заказа или контактный телефон. Это будет работать не всегда, поэтому надо проводить тесты (думаю написать ряд статей про проведение А/Б-тестирования — если не хотите пропустить, то подписывайтесь на рассылку), и возможно, что такой простой и очевидный способ позволит вам увеличить конверсию данной лендинг пейдж и с лихвой окупить деньги, потраченные на продвижение в социальных сетях или контекстной рекламе.

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

    

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

Примеры ошибок делающих landing нерабочим

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

1. Еще раз напоминаю, что в интернете практически никто не читает (во всяком случае вновь открытую страницу), а именно просматривает информацию. Если она окажется действительно стоящей и требующей более детального изучения, то тогда уже доходит дело и до прочтения (в общем-то, так же как и с газетами). Поэтому не допускайте перегруженности лендинга информацией — это может дезориентировать пользователя и вызвать реакцию отторжения еще до того момента, когда он разберется о чем там идет речь.
2. Текст должен быть небольшого объема, максимально лаконичен и наполнен информацией, а не водой. Пару абзацев «ни о чем» вызовут у пользователя бурное желание закрыть такую посадочную страницу. На landing page также плохо работает мелкий шрифт. В общем-то, его использование и не нужно, ибо для изложения сути много слов не потребуется.
3. Не обманывайте ожидания пользователя. Если в рекламе или в посте в социальной сети вы говорили об одном, а при попадании на лендинг пользователь видит несколько другое, то происходит утрата доверия и резко снижается конверсия. Очень важно следить за этим соответствием.

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

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

У вас есть еще немного времени? Хотите его провести с пользой? Тогда берите попкорн, садитесь поудобнее и смотрите двухчасовой мастер-класс «Пошаговый алгоритм создания Landing Page» :

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

Если бы не было той самой отзывчивой техподдержки, которая 24/7 отвечает на вопросы в течение 5 минут, LPTrend был бы уверенным середняком. Но она есть, и именно поэтому он занимает одни из самых высоких строчек в разных топах конструкторов.

• Количество шаблонов: более 60-ти. При этом лендинги сделаны по интересным шаблонам, которые делали опытные маркетологи. Конверсия на таких одностраничниках достаточно высока.
• Покупка доменов: Да.
• Цены: Сразу после регистрации активируется бесплатный тариф на 8 дней. После пробного периода предлагается взять один из тарифов, которые отличаются лишь количеством создаваемых одностраничников: за 1 – 500 руб./мес; за 10 – 1000 руб./мес; За 10+ – 2000 руб./мес. А еще сервис предлагает создавать тематическое продающее видео за 7900 руб./минуту ролика и создание лендинга под ключ за 6900.

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

Tobiz

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

Тобиз – как раз тот вариант. За 2 года работы сервиса создатели сумели найти свою аудиторию, которая на данный момент составляет более 1500 тысяч вебмастеров.

• Количество шаблонов: более 270 шаблонов самых разных тематик. При этом большинство из них выгодно использовать как образец – сайты создаются из отдельных блоков.
• Можно ли менять структуру и добавлять свой дизайн: Да.
• Покупка доменов: Да.
• Цены: тестовый 14-дневный период, после завершения которого будет доступно несколько тарифов, самый дешевый из которых – 450 рублей в месяц.

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

Wix

Говорить что-то о популярности этого конструктора просто бессмысленно. по ТВ для IT продукта не то чтобы нова, но есть много других, более дешевых каналов продвижения.

Но уж если разработчики запустили дорогостоящую рекламу в СМИ, то значит они уверены в себе и своем продукте. Качественный, красивый и простой конструктор – вот что можно сказать о Виксе.

• Количество шаблонов: 17 + есть возможность полного изменения каждого из шаблонов.
• Можно ли менять структуру и добавлять свой дизайн: Да.
• Покупка доменов: Да.
• Цены: Тестовый период неограничен, но работать придется с рекламой и без своего домена. Создавать лендинги без рекламы можно по цене 99 долларов в год, но если поймать акцию – по 49.

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

Umi

К концу 2015-го года, количество сайтов, созданных на конструкторе Umi, перевалило за 1 миллион. Достаточно солидный показатель за работу с 2011-го года.

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

• Количество шаблонов: Более 550 макетов, часть из которых адаптивны.
• Можно ли менять структуру и добавлять свой дизайн: Да.
• Покупка доменов: Да.
• Цены: Сначала активируется 15-дневный режим бесплатного пользования, после чего стоимость пользования сервисом для создания лендингов будет составлять 490 рублей за месяц использования.

Итог: Для создания и запуска первого лендинга, Юми подходит просто идеально. Сначала можно будет пользоваться лишь бесплатными виджетами, а с течением времени и увеличением потребности, прикручивать различные платные примочки. В соотношении цена/качество – один из самых интересных вариантов.

Nethouse

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

• Количество шаблонов: 5 секций для сайтов, в которых до 40 разных шаблонов. Говоря откровенно – негусто. Радует только возможность сделать самостоятельный дизайн.
• Можно ли менять структуру и добавлять свой дизайн: Да.
• Покупка доменов: Да.
• Цены: одни из самых демократичных – 248 и 415 рублей за месяц использования. Бесплатный тестовый период неограничен.

Итог: Лучше всего работать с Nethouse при создании интернет-магазина. Для лендинга довольно средний функционал и количество шаблонов. Но если вы хотите «дешево» и топорно – работать с Nethouse достаточно просто и выгодно.

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

В каком сервисе вам нужно будет лишь заплатить отступные за шаблон и вы получите полноценный сайт без привязки к кому-либо? А если добавить к этому еще и стандартные примочки CMS, вроде кучи виджетов, полноценного продвижения и кастомизация шаблонов с помощью HTML и CSS.

• Количество шаблонов: Тут все очень печально. Для лендингов есть лишь 6 готовых шаблонов, которые можно кастомизировать, но это будет очень сложно.
• Можно ли менять структуру и добавлять свой дизайн: Да.
• Покупка доменов: Да, можно даже выкупить сайт и перенести его на другой сервис.
• Цены: Тестовый период в размере 21 дня, после которого достаточно демократичные тарифы – 480 и 980 рублей в месяц.

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

Ucraft

Совет 3. Если есть возможность – используйте уникальный дизайн.

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

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

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

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

Совет 4. Внимательно относитесь к рекламе.

На эффективность лендинга влияют два параметра: его вид и реклама. И если с его внешним видом мы более-менее разобрались, то рекламу еще не затрагивали.

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

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

От того, насколько грамотно вы подберете картинку к своему рекламному объявлению, может зависеть кликнет по нему 30 человек или 300. Именно поэтому прежде чем пенять на то, что лендинг не продает, позаботьтесь о том, чтобы ваша реклама работала на все 100%.

Совет 5. Анализируйте работу вашего лендинга.

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

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

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

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

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

Заключение

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

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

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