НТВ плюс 

Посадочная страница лендинг примеры. Оснащение тренажерных залов “Goodfit”. Примеры активно продающих лендингов

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Лучший сервис для создания первого лендинга. Комплект из пары десятков одностраничных шаблонов подскажет наилучшие варианты оформления и подачи предложения. Редактор позволяет в считанные минуты собрать из готовых адаптивных блоков эффективную страницу. Главное - расположить секции в логическом порядке и красиво преподнести оффер. Изображения, табы, таймер для акций, отзывы, наглядная карта, коммуникации, включая заказ обратного звонка, и многое другое присутствует в полном объёме.

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

    Плюсы:

    • Идеально подходит для предпринимателей, далёких от разработки сайтов;
    • Большой набор профильных виджетов;
    • Солидный пакет коммуникаций: консультант, заказ звонка, социалки, формы, всплывающие окна, почтовые рассылки, CRM;
    • Адаптивные шаблоны, структура которых идеальна для подачи лендингов;
    • Простота освоения - от 1 часа до 1 дня;
    • Крайне доступная стоимость.

    Минусы:

    • Отсутствуют встроенные инструменты для анализа конверсии. Можно компенсировать сторонней аналитикой;
    • Тариф, позволяющий осуществлять приём оплаты онлайн, существенно дороже «Премиума», который отлично подходит для сборки лендингов.
  • Премиум ($4/мес) - набор ключевых возможностей.
  • Премиум + ($8/мес) - премиум-шаблоны и расширенная статистика.
  • Магазин ($9.6/мес) - корзина, приём оплат.
  • Про ($12/мес) - доступ ко правке кода.
    • Конструктор лендингов uLanding → детальный обзор

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

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

    Плюсы:

    • Понятная каждому подача статистических данных;
    • Удобный интерфейс для одновременного тестирования нескольких страниц с подробной статистикой по результатам;
    • Возможность вставки своего кода в макет страницы;
    • Есть встроенный магазин (Ecwid);
    • Доступна архивация лендингов и быстрое восстановление;
    • Создание резервных копий в 1 клик;
    • SMS с уведомлениями бесплатные;
    • Интегрированная в панель управления amoCRM;
    • Простой в использовании редактор;
    • Хорошие по качеству адаптивные шаблоны, причём, поддерживается раздельное редактирование версий для ПК и смартфонов;
    • Хорошая техподдержка.

    Минусы:

    • Небольшое количество готовых шаблонов;
    • Мало готовых секций (не путать с виджетами).

    Стоимость за месяц при оплате за год:

  • Начальный ($6.15/мес) - 1 проект, 5 лендингов, безлимитные SMS-уведомления, техподдержка 24/7.
  • Бизнес ($10.25/мес) - 3 проекта, 30 лендингов, живой чат с техподдержкой.
  • Продвинутый ($17.10/мес) - 10 проектов, 1000 лендингов.
    • Конструктор лендингов Wix → детальный обзор

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

    Богатый набор виджетов, встроенный графический редактор, анимации, наборы иконок, растровых фигур и эффекты скроллинга позволят создать яркий лендинг, претендующий на высокую конверсию. Для работы с клиентской базой имеется встроенная CRM, возможность настройки маркетинговых и триггерных рассылок, для анализа результатов - Google Analytics. Использование Wix Code позволит настроить расписание вывода данных в зависимости от времени суток, региона и прочих вещей. Структура лендинга реализуется через анкорные ссылки на области макета.

    Плюсы:

    • Мощный редактор макетов страниц;
    • Высокое качество и разнообразие готовых шаблонов;
    • Множество виджетов, стоковых мультимедийных элементов;
    • Возможность приёма онлайн-платежей;
    • Встроенная CRM для обработки контактов;
    • Множество маркетинговых приложений;
    • Автоматизация сценариев поведения страницы при помощи Wix Code;
    • Полный пакет приложений для коммуникаций: чат, заказ звонка, рассылки, всплывающие окна, комментарии, синхронизация с лентами социальных сетей и прочее;
    • Возможность добавления своего кода на сайт: HTML/CSS, JavaScript.

    Минусы:

    • Новичкам потребуется время для освоения основной части возможностей редактора - он удобный, но не самый простой в обращении благодаря количеству и глубине настроек;
    • Часть полезной функциональности доступна только в виде приложений - её нет из коробки в панели редактора, нужно подобрать и активировать приложение;
    • Встроенные инструменты для анализа конверсии отсутствуют - воронки продаж, A/B-тесты, мониторинг по регионам/источникам трафика. Компенсируется подключением аналитических систем к странице.

    Стоимость за месяц при оплате за год:

  • Connect Domain (123 руб/мес) - подключение домена, ключевая функциональность.
  • Combo (249 руб/мес) - домен в подарок, удаление копирайта системы.
  • Unlimited (375 руб/мес) - расширенное дисковое пространство, платные приложения бонусом.
  • eCommerce (488 руб/мес) - много места на диске, корзина, приём онлайн-оплат.
  • VIP (751 руб/мес) - почтовые рассылки плюс аудит сайта от эксперта Wix.
    • Конструктор лендингов LPGenerator → детальный обзор

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

    Полный набор инструментов для анализа конверсии и маркетинга (всесторонняя статистика, A/B-тесты, воронка продаж, источники трафика, цели конверсии, CRM, рассылки и прочее) позволяют выжать максимум эффекта со страниц. Редактор визуальный, виджетов очень много, есть удобный конструктор секций, мониторинг версий страницы с анализом конверсии и т. д. Аудитория системы - веб-студии и опытные разработчики. Для новичков есть «Академия лидогенерации» - мощный курс, который окажется полезным большинству пользователей.

    Плюсы:

    • Большой выбор шаблонов и возможность загрузки собственных;
    • Ультимативный набор средств для анализа и увеличения конверсии;
    • Поддержка множества сторонних приложений и синхронизаций с сервисами;
    • Встроенная качественная CRM;
    • Продуманная витрина одностраничного магазина с кучей настроек;
    • Оповещения о событиях по SMS;
    • Отличная обучающая программа для новичков и не только;
    • Опционально можно заказать услуги от разработчиков.

    Минусы:

    • Дорогие пакетные тарифные планы, рассчитанные на профи;
    • Сравнительная сложность использования - слишком много всего внутри.

    Стоимость за месяц при оплате за год:

  • Базовый (558 руб/мес) - 1 домен, 3 страницы.
  • Продвинутый (1662 руб/мес) - 5 доменов, 50 страниц.
  • Безлимитный (2799 руб/мес) - всё без ограничений.
  • Корпоративный, White Label (11011 руб/мес) - свой брендинг для 15 аккаунтов, улучшенная техподдержка.
    • Конструктор лендингов uCoz → детальный обзор

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

    Редактор поддерживает подключение сторонних PHP-скриптов и загрузку собственных шаблонов. При наличии опыта собрать лендинг - дело 1-2 вечеров. Сервис поддерживает синхронизацию с социалками, онлайн-чатами, конструкторами форм, калькулятором услуг и прочими полезными штуками. Кастомизация страниц происходит, в основном, через правку кода, хотя визуальный редактор тоже есть. Это вариант для тех, кто знает, как нужно верстать лендинги либо новичков, желающих опубликовать страницу на основе подарочного премиум-дизайна.

    Плюсы:

    Минусы:

    • Сравнительно высокая сложность освоения;
    • Среди стоковых шаблонов нет одностраничных;
    • Необходимость владения кодом хотя бы на базовом уровне.

    Стоимость за месяц при оплате за год:

  • Минимальный ($2.39/мес) - уменьшенный баннер, FTP-доступ, 1 Гб места.
  • Базовый ($4.79/мес) - снятие баннера, 2 Гб места, премиум-поддержка, HTTPS, Яндекс.Фиды.
  • Оптимальный ($6.39/мес)- 10 Гб места, премиум-шаблон и домен бесплатно.
  • Магазин ($7.99/мес) - 10 Гб места, модуль интернет-магазина.
  • Максимальный ($12.79/мес) - 20 Гб места, живой чат техподдержки.
    • Конструктор лендингов PlatformaLP → детальный обзор

    PlatformaLP - специализированный конструктор посадочных страниц. Около полусотни классных шаблонов, куча стандартных виджетов, а также профильных вроде счётчиков/вкладок/декораций/спойлеров и визуальный редактор, позволяющий гибко отрегулировать структуру, содержимое каждой секции страницы для десктопного и мобильного формата в отдельности. Есть корзина - можно продавать онлайн. Поддерживается вставка HTML-кода, а также интеграция сторонних сервисов - Bitrix24, amoCRM, GetResponse, RoboKassa, MailChimp, Яндекс.Касса, JustClick, Mailer, Unisender, SendPulse и LeadVertex.

    Поддерживаются мультилендинги: можно создать несколько вариантов посадочной страницы для демонстрации в различных регионах. Эффективность можно измерять A/B-тестами, аналитические данные получать от Google или Яндекса. Ещё можно добавить реакции лендинга на поведение посетителя - всплывающие окна различного содержания при уходе со страницы, прокрутке до футера, повторном заходе, подачи заявки, заполнении формы и т. д. Основано это на работе с Cookie (сообщение на согласие их использования есть). Можно включить lazy load для изображений (ускоряет загрузку страниц), добавить анимации, использовать Google Fonts.

    Плюсы:

    • Отличный набор виджетов и готовых блоков различной функциональности;
    • Удобство и гибкость настройки секций;
    • Поддержка мультилендингов;
    • Всплывающие окна по заданным сценариям поведения клиента;
    • Встроенный магазин;
    • Отдельная настройка мета-тегов для социальных сетей;
    • Уведомления о заявках на почту и по SMS.

    Минусы:

    Стоимость за месяц:

  • Микро (490 руб/мес) - 1 домен, 1 страница, оповещения в Telegram.
  • Эконом (790 руб/мес) - 1 домен, 10 страниц, SSL, 100 SMS.
  • Бизнес (1390 руб/мес) - 5 доменов, 50 страниц, мультилендинг, A/B-тест, интеграции, корзина, многопользовательский режим.
  • Бизнес + (1990 руб/мес) - 5 доменов, 50 страниц, приём платежей.

    • Пакеты расширения для бизнес-планов:

  • +390 руб/мес (Бизнес) - +5 доменов, + 50 страниц.
  • +590 руб/мес (Бизнес+) - +5 доменов, + 50 страниц.
    • Конструктор лендинг пейдж Ucraft → детальный обзор

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

    Поддерживаются интеграции 16 полезных сервисов (PayPal, Google, MailChimp и др.), стандартные SEO-настройки и приём онлайн-платежей. Значительно изменить стоковый шаблон можно при помощи инструментов дизайнера, идущих в комплекте. Новичкам пригодится шпаргалка прогресса сайта со списком задач и ссылками на области панели управления, в которых они решаются. Также есть эффекты, возможность командной разработки, гибкая настройка шрифтов и языков сайта. Всё это упаковано в приятный и простой интерфейс.

    Плюсы:

    • Возможность бесплатной публикации одностраничника со своим доменом и SSL;
    • Множество готовых блоков, адаптивный дизайн;
    • Поддержка мультиязычности сайтов и командной разработки;
    • Возможность приёма оплаты онлайн;
    • Встроенный конструктор логотипов, инструменты дизайнера;
    • Шпаргалка прогресса для новичков.

    Минусы:

    • Отсутствие встроенных средств сбора статистики и анализа конверсии;
    • Отсутствие некоторых характерных лендинговых виджетов вроде счётчика.

    Стоимость за месяц при оплате за год:

  • Про Веб-сайт (₽670/мес) – 1 сайт, мультиязычность, блог, SEO, интеграции, круглосуточная техподдержка, снятие бренда «Ucraft»; добавление HTML/CSS/JS, 50 товаров для интернет-магазина, 70+ способов платежа и доставки;
  • Про Магазин (₽1400/мес) – неограниченное кол-во товаров, продажи без комиссии, мультивалютность, трекинг в реальном времени, неограниченный объём хранилища, скидочные купоны и оптовые скидк, управление магазином через iOS и Android, возможность отключения налогов, обратное начисление НДС;
  • Безлимит (₽2600/мес) – полное отсутствие лимита во всём, продажа на eBay, Facebook, Yandex.
    • Конструктор лендингов LPMotor → детальный обзор

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

    Есть встроенная CRM хорошего качества, возможность тестирования вариантов одной и той же страницы (A/B-тест) и автоворонка продаж - интерфейс для настройки автоматических действий в случае выполнения пользователем заданного сценария (заполнил форму - получил письмо и т. д.). Поддерживаются всплывающие окна и множество интеграций: Jivosite, VK, Facebook, MailChimp, UniSender, GetResponse, Яндекс.Касса/Деньги, JustClick, amoCRM, PayPal, RoboKassa, Bitrix24, Yagla и прочее. Встроенная система сбора статистики приличная. Можно настроить получение уведомлений о заявках по SMS на почту или в Telegram. Есть анти-спам.

    Плюсы:

    • Классный редактор, гибкая настройка отдельных элементов и секций;
    • Поддержка большого количества интеграций;
    • Встроенные конструктор автоворонок, CRM, A/B-тесты и сбор статистики;
    • Хорошие шаблоны, кастомизация, инструменты для создания дизайна с нуля;
    • Возможность раздельного редактирования мобильной и десктопной версий страницы;
    • Поддерживается вставка кода HTML;
    • Есть встроенный магазин с корзиной и приёмом оплаты онлайн.

    Минусы:

    • Отключение подписи «LPMotor» в футере стоит дополнительные 600 рублей в год для каждой опубликованной страницы. Это отдельная услуга, не входящая в пакетные планы.
    • В процессе работы нельзя сменить шаблон;
    • В наборе элементов отсутствует таймер обратного отсчёта;
    • Автоворонка подключается отдельно за дополнительную плату.

    Стоимость за месяц при оплате за год:

  • Нано (360 руб/мес) - 1 домен, 10 сайтов, полная функциональность.
  • Мини (540 руб/мес) - 3 домена, 50 сайтов;
  • Стандарт (720 руб/мес) - 10 домен, 100 сайтов;
  • Безлимит (2400 руб/мес) - неограниченное количество доменов и страниц, без подписи сервиса.

    • Стоимость подключения автоворонки продаж (пробный период - 7 дней):

    • Неделя - 990 рублей.
    • Месяц - 2390 рублей.
    • Год - 14990 рублей.
    Конструктор лендингов Flexbe → детальный обзор

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

    автоматически при добавлении домена. Можно вставить свой HTML-код на страницу.
    Сервис поддерживает интеграцию приложений базовой важности (amoCRM, Bitrix24, CallbackHunter, Jivosite, GetResponse, UniSender), создание мультилендигов/геолендингов и предоставляет доступ к API. Приём онлайн платежей возможен через Яндекс.Касса, RoboKassa и карту Тинькофф. Можно подключить почтовые сервисы Google, Mail.ru и Яндекс. Кроме того, есть встроенная CRM среднего уровня и система сбора статистических данных. Можно настроить формат показа страницы при шаринге в социальных сетях. Присутствует мобильное приложение iOS/Android и настройки появления всплывающих окон.

    Плюсы:

    • Предельная простота сборки/настройки страниц из готовых блоков;
    • Наличие встроенных CRM, статистики, A/B-тестов;
    • Автоматически подключаемый SSL;
    • Интерфейс для работы со всплывающими окнами;
    • Поддержка интеграции ключевых для лендинга сервисов;
    • Оповещения по SMS и почте о новых заказах;
    • Возможность добавления администраторов страниц.

    Минусы:

    • Скудный набор готовых шаблонов;
    • Встроенная CRM так себе;
    • Отсутствие отдельных элементов/виджетов (только готовые секции);
    • Кастомизация дизайна базового уровня.

    Стоимость за месяц при оплате за год:

  • Стартовый (525 руб/мес) - 1 домен, 10 страниц, 250 SMS, SSL.
  • Бизнес (1050 руб/мес) - 5 доменов, 50 страниц, 500 SMS, мульти/геолендинг, A/B-тесты;
  • Ультра (2100 руб/мес) - домены и страницы не ограничены по количеству, 1000 SMS, 5 доп. пользователей.
    • Конструктор лендингов Mobirise → детальный обзор

    Mobirise - бесплатная программа (Mac, Windows, Android), позволяющая собирать посадочные страницы из готовых блоков. Шаблоны представлены расширениями - платными наборами ($20-40) блоков, заточенных под конкретную задачу (бизнес, магазин, юрист, портфолио, ресторан и т. д.). Из коробки даётся 4 бесплатных шаблона. Также есть расширения для добавления интеграции социальных сетей и средств комментирования, перводчик, Soundcloud, Google Analytics, SEO-инструменты, а из платных - пакет иконок, корзина с оплатой через PayPal, редактор кода страниц и слайдер изображений.

    Набор блоков (количество, структура, назначение) зависит от выбранного шаблона. Каждую секцию можно настроить, выбрав отображаемые элементы, цвета, эффекты, размеры и прочее. В целом, даже на бесплатном шаблоне блоков множество - их хватит с лихвой для сборки нормального лендинга со всеми фишками (отзывы, преимущества, колонки, табы, таймлайны, таймер, мультимедиа, прайс, карта, социалки и всё остальное). Страницы получаются адаптивные по умолчанию. Базовые SEO-настройки присутствуют. Для публикации страниц нужно купить хостинг и домен. Рекомендуем обратить внимание на пак со всеми платными расширениями.

    Плюсы:

    • Приложение бесплатно для коммерческого использования;
    • Богатый набор адаптивных блоков в стоковой поставке;
    • Простота сборки и редактирования дизайна страниц;
    • Расширения значительно увеличивают область применения программы;
    • Встроенный FTP-интерфейс для загрузки/обновления файлов на хостинге.

    Минусы:

    • Необходимо арендовать хостинг/домен отдельно;
    • Обновление лендинга потребует наличия рабочих файлов проекта на ПК;
    • Полное отсутствие средств сбора статистики и анализа конверсии ввиду формата сайтбилдера в виде приложения (можно подключить страницу ко внешним сервисам).

    Стоимость:

  • Себестоимость страницы равна сумме, необходимой на аренду хостинга и доменного имени (примерно $20-30/год).
  • Стоимость полного пакета расширений составляет $197 - все шаблоны и интеграции.
    • Пошаговый план действий

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

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

    Алгоритм создания лендинга
  • Регистрация в конструкторе.
  • Выбор шаблона подходящей тематики и/или структуры.
  • Добавление недостающих и удаление лишних для вашей задачи блоков.
  • Редактирование стокового контента под себя (тексты, цифры, изображения, ссылки) и заполнение с нуля свежедобавленных секций.
  • Настройка дизайна – цветов, эффектов, шрифтов, фонов, форм элементов и прочего.
  • Заполнение SEO-параметров.
  • Подключение необходимых интеграций (платёжные системы, социалки, рассылки, аналитика, статистика, живой чат, обратный звонок и прочее).
  • Оплата тарифного плана и подключение домена.
  • Публикация страницы.
    • Что должно быть?

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

    • Шапка - качественное изображение или видеофон по теме, заголовок, передающий суть предложения, логотип, анкорное меню, и, возможно, здесь же кнопка (CTA - Call-To-Action, призыв к действию) - подписка, покупка, загрузка, переход куда-либо.
    • Вторым блоком может быть таймер обратного отсчёта до конца какой-то акции с кнопкой CTA. Также сюда можно поставить описание вашего предложения (а уже после - CTA) - текст плюс изображение либо видео. Порядок зависит от того, насколько понятна суть оффера из шапки - нужно ли дополнительно показывать суть либо пора призывать к действию.
    • Блок преимуществ предложения - буллитов. Можно оформить в виде слайдера (карусель) либо иконками с ёмкими, точными описаниями сильных сторон оффера. Лучше иконками с текстовыми подписями - так быстрее воспринимается информация, листать не нужно.
    • Изображения или видео с продуктом в подходящем стилю страницы формате.
    • Здесь может быть таймер до окончания предложения (если его не было вверху) либо тарифы, если речь идёт об услуге. Или короткий прайс в табах (2-5 позиций) на продукты. В общем, показ цен.
    • Дальше можно поставить блок отзывов клиентов в формате табов или карусели.
    • Здесь могут быть какие-то цифры, демонстрирующие популярность вашего продукта: количество скачиваний, довольных клиентов, подписок, сэкономленных средств, полученной пользы (смотря о чём речь), спасённых котятах и всего в таком духе.
    • Форма - для совершения заказа, подписки, анкетирования либо чего-то ещё.
    • Карта охвата географии вашей деятельности - реклама масштаба популярности (можно и без неё).
    • Призыв к действию - кнопка CTA возле резюме предложения, подходящей иллюстрации либо в другом уместном формате.
    • Футер логотипом, кратким содержанием оффера, адресом офиса, телефоном, мессенджерами, ссылками на социальные сети, основной сайт, блог и что-либо ещё в таком духе.

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

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

    Оптимальными для большинства новичков будут uKit, uLanding и Wix - в них получаются хорошие лендинги. Недорого, быстро и красиво. Самый мощный профильный сервис - LPGenerator. Идущие следом PlatformaLP и LPMotor несколько уступают ему. uCoz может всё хорошо, и лендинги в том числе. Ucraft - неплохой вариант, Flexbe приятен и простоват, Mobirise - на любителя.

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

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

    И сфера веб-разработок не исключение, там мы тоже постоянно видим броские фразы в стиле “продающий сайт” или “продающий лендинг”.

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

    Какие из них являются важными, а какие пылью в глаза, я расскажу в этом материале.

    Надоело врать

    Часто мои коллеги, после очередного разговора с клиентом по услуге , говорят мне возмущённую фразу: “Никита, нам надоело спорить с ними. Может сделаем то, что они хотят?”.

    Всё дело в том, что для простого обывателя хороший лендинг = много фишек. А если оригинальных решений на сайте нет, то автоматически сайт плохой и не продающий.

    Всё! Накипело. Расставим все точки (говорю мечтательным голосом). Раз и навсегда определим что такое настоящий продающий одностраничный сайт, и как выглядит ерунда, которая имеет от этого только название.

    Будет и интересно, и скучно, но точно полезно. Начнём с лаконичного описания данного термина.

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

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

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

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

    Подготовительная часть

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

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

    Всё как при запуске ракеты: 50% успеха это правильное определение координат. Итак, каким должен быть продающий сайт.

    1. Один продукт (цель)

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

    Это то же самое, если Вы приедете покупать автомобиль в салон, а я Вам дополнительно к нему буду продавать дом на Рублевке.

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

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

    Вы частично правы, только Вы видите всё замыленным взглядом. Для Вас все Ваши услуги или товары по-умолчанию нужны для Вашего клиента, а на самом деле, в 9 из 10 случаев (бывают исключения) человек приходит за чем-то одним.

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

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

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

    Ошибка

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

    Так как всё равно, что купить кота в мешке. Никакой дополнительной информации, выгод и ответов на вопросы.

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

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

    Поэтому когда Вы делаете сайт, чётко определитесь для какого продукта Вы это делаете. И также периодически меняйте слово “Продукт” на “Цель”.

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

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

    По моим внутренним подсчётам это 200 упоминание на нашем блоге про целевую аудиторию.

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

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

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

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


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

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

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

    Надеюсь, что Вы ответили нет. Все люди разные, как и их критерии выбора. Один готов заплатить любые деньги, лишь бы гарантированно получить результат.

    Другой купит только то, что не занимает много свободного времени. А третий вообще кроме низкой стоимости ничего не видит. Этот список можно продолжать и продолжать.

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

    https://youtu.be/tKhP5geLfmY

    3. Уровень осознанности

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

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

    В маркетинге данный странный подход называется “ ”. Но я не буду грузить Вас умными терминами, а просто покажу на примере как это работает.

    И для этого сравните между собой три одинаковых и в то же время разных запроса в поисковую строку Яндекса или Гугла:

  • Из чего построить малоэтажный дом?
  • Кирпич или сруб в строительстве домов?
  • Строительство малоэтажных домов из кирпича

    • Все эти запросы относятся к малоэтажному строительству и все они в теории потенциальные клиенты для строительных фирм.

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

    Для Вас при разработке это значит, что во всех случаях будет разная , тексты на нём и изображения.

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

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

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

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

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

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

    https://youtu.be/p3DhGn_AL1w

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

    Но, как обычно, раскрою еще один секрет, который делает сайт продающим. Брифинг проходит устно.

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

    Такой брифинг занимает 1-2 часа. И раз вскрываю все карты, то приготовьтесь к тому, что если у Вас компания новая или в ней ничего нет, то “упаковщик смыслов” просто ничего не сможет взять и сайт получится точно НЕ продающим.

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

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

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

    Реализация

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

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

    1. Оффер

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

    Главный оффер может быть 4 уровней. Отличительную разницу сразу видно на примерах.

    Первый уровень - когда Вы просто пишите “Аренда машин в Москве”.
    Второй уровень звучит уже интереснее - “Аренда машин в Москве. Премиум-автопарк”.

    Третий уровень для многих даётся очень сложно и базируется на результате - “Аренда премиум-машин в Москве. Единичные экземпляры привлекут тысячи глаз всего от 5000 рублей в день”.

    Можно ли назвать это идеальным предложением? Конечно, нет. Я придумал его за 2 минуты для этой статьи.

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

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

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

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

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

    2.

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

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

    Но это полная правда. Страшный сайт с хорошими текстом сделает своё дело. А плохие тексты на красивом дизайне потеряют клиента.

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

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

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

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

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

  • Не банальный заголовок. Если Вы видите заголовок “Почему выбирают нас?”, “О нас” или другой избитый вариант, который используется на десятках других сайтов, то бегите со всех ног.

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

  • Вы-подход. Чем больше на сайте заголовков и текстов, которые начинаются со слова “МЫ”, то тем хуже сайт.

    Клиенту куда важнее, чтобы говорили о нём и для него, а уже потом он читал о Вас любимых.

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

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

  • По делу. На одностраничнике не должно быть текста ради текста, даже если он создаётся для SEO.

    Если можно с сайта убрать этот текст и ничего не изменится, то нужно резать и сокращать.

  • Конкретика. Так же избитые словосочетания из серии “Индивидуальный подход”, “Гибкая система скидок”, “Высокое качество” являются клеймом.

    Единственное, это допускается, когда раскрывающий текст даёт 100% конкретику, а эта фраза лишь является подводкой или заголовком.

    • Отдельным пунктом хочу вынести такой критерий как “Отработка возражений”. Он реализуется по всему сайту во всех элементах текста.

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

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

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

    3. Дизайн

    Красивый сайт не всегда равно продающий сайт. Это Вам нужно запомнить навсегда. В своём материале

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

    Что такое Лендинг пейдж (landing page)? Это страница, на которую люди попадают, как правило, после клика по объявлению. Создается под одно предложение: товар, услугу или подписку. Эффективная посадочная страница - краеугольный камень успешного интернет-маркетинга. Товар может быть лучшим на рынке, объявления доведены до совершенства, но без хорошей landing page усилия не дают 100% результата. Она рассказывает посетителям, что предлагается, и почему они должны хотеть это получить. Ощущение срочности способствует быстрому принятию решений и переходу юзера в разряд клиента.

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

    Поэтому перед тем, как создать целевую страницу, спросите себя:

    • Что сделает человек после попадания на landing page? Будет ли он что-то покупать? Заполнит форму? Подпишется на рассылку? Прежде, чем отслеживать коэффициент конверсии, определите четкие цели.
    • Кто мои конкуренты? На самом деле, это три вопроса: кто, насколько они успешны и как можно применить их достижения? Имитация - самая искренняя форма лести. Если конкуренты делают то, что работает, повторите подобное на своем сайте.
    • Кто моя аудитория? Чем лучше вы понимаете свою нишу и ЦА, тем больше шансов, что старания окупятся.

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

    Примеры создания лендинг пейдж + кодинг для чайников

    Перед тем, как приступить к делу, кратко рассмотрим HTML и CSS. Понимание, как они работают, поможет создать landing.

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

    Тег открывается () и закрывается () вокруг начинки:

    содержимое

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

    содержимое

    CSS - определяет, как расположить HTML элементы. Состоит из селекторов, свойств и значений:

    #селектор {свойство: значение;}

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

    5 начальных шагов

    Для быстрой верстки будем использовать шаблон с минимальным оформлением на основе bootstrap. Это система с собственными селекторами, которая применяется во всем мире для ускорения верстки.

    Выглядит скромно.

    Из этой рыбы создается сайт на любой вкус за несколько этапов.

    Структура каталогов в папке:

    • index.html: Это главный файл, который будем редактировать.
    • /assets: здесь лежат вспомогательные файлы:
    • /css: каталог содержит стили бутстрап и иконок. Файл, который будем редактировать - main.css.
    • /img: папка для картинок сайта.
    • /fonts: шрифты иконок.
    • /js: яваскрипт-файлы bootstrap.

    Шаг 1: Использование заголовка

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

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

    Шаг 2. Краткость - сестра конверсии. Добавление преимуществ и тарифов

    Потребуется 4 секции:

    • преимущества;
    • тарифы;
    • отзывы;
    • призыв к действию.

    Оформим раздел основного контента “main”, в который вставим необходимые секции:


    …..
    …..
    …..
    …..

    Заполняем начинкой вместо многоточий.

    Для секции преимуществ потребуется этот код:


    Преимущества
    Быстро

    Надежно

    Sed diam nonummy


    Выгодно

    Elit, sed diam nonummy


    Технично

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy


    Надежно

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy


    Выгодно

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy


    Технично

    Lorem ipsum dolor sit amet, consectetuer adipiscing


    Надежно

    Lorem ipsum dolor sit amet, consectetuer adipiscing


    Выгодно

    Lorem ipsum dolor sit amet, consectetuer adipiscing


    Содержимое для наглядности:

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

    Прописываем расценки. Содержимое меняется по аналогии с первым шагом. Общее описание с классом “tarifs” и три тарифа.



    Тарифные планы

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


    Тариф №1
    $10

    в месяц/с человека



    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

    • Lorem ipsum dolor

    • 10 Lorem ipsum


    Заказать
    Тариф №2
    $20

    в месяц/с человека



    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

    • Lorem ipsum dolor

    • 10 Lorem ipsum


    Заказать
    Тариф №3
    $30

    в месяц/с человека



    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

    • Lorem ipsum dolor

    • 10 Lorem ipsum


    Заказать

    Выглядит так.

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

    Шаг 3: Сигналы доверия и призыв к действию

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



    Отзывы клиентов

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:



    “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
    “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

    Установим "призыв к действию".



    Выгода при заказе сегодня

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:


    Заказать сейчас!

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


    Имя клиента.


    Шаг 4: Интеграция с сеткой и Mobile Friendly

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

    Содержимое “main” обернем в контейнер. Для этого в его верхней части прописывается:

    … .

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

    Все элементы, требующие расположения друг над другом, обернем разделителями строк.

    Колонки мы теперь можем настроить по ширине, ориентируясь на сетку бутстрапа. После обертывания начинка перестала прилипать к краям экрана, появились аккуратные отступы.

    Выставляем расценки в ряд, применив класс колонок col-lg-4. Внутри строк row уже не обязательно прописывать отдельные дивы для обертывания, можно комбинировать с имеющимися через пробел.

    По аналогии выставляем колонки для раздела отзывов и преимуществ. Если требуется сдвинуть элемент в сторону, используем класс оффсетных колонок col-lg-offset-2. Цифра в конце определяет, на какое количество базовых столбцов произойдет сдвиг.

    Шаг 5. Шрифты и иконки

    Мы реализуем шрифты для заголовков Google Font. При выборе открываем вкладку импорт и копируем данные из нее в файл main.css. Также добавляем в файл селекторы заголовков, для которых применяется новый шрифт.

    @import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* импорт шрифта для заголовков */
    .navbar-brand,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-family: "Roboto Condensed", sans-serif; /* Гуглфонт вывод */
    }

    Для наглядности преимуществам прописан класс с говорящим названием text-center и иконки FontAwesome из набора бутстрапа.

    На этом подготовка полностью завершена.

    Лендинг пейдж: примеры кодов с предложением, параллаксом и счетчиком

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

    Пример 1: с предложением

    Установим фон главной части и отступы, чтобы был покрыт первый экран.

    Jumbotron {
    background: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
    max-width: 100%;
    padding-top: 250px;
    padding-bottom: 200px;
    text-align: center;
    }

    Изменим размер заголовка джамботрона с h2 на h1. Далее прописываем стили для элементов, которые нужно изменить.

    Начнем с иконок.

    Benefits i{
    color: #cac4c4;
    }

    После знака решетки задан цвет. Можно подобрать свой вариант, воспользовавшись таблицами html-цветов или редактором изображений.

    Отступы для заголовков секций

    section h2 {
    padding-top: 30px;
    margin-bottom: 25px;
    }

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


    Тариф №1
    $10

    в месяц/с человека



    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

    • Lorem ipsum dolor

    • 10 Lorem ipsum


    Заказать

    И много CSS. За какие места отвечают участки, прописано в комментариях - /* между слешами со звездочкой */

    /* =========Tarif styles======== */
    /* общий вид тарифа */
    .pricing_item {
    background: #f2f2f2;
    position: relative;
    display: -webkit-flex;
    display: flex;

    flex-direction: column;

    align-items: stretch;
    text-align: center;
    -webkit-flex: 0 1 330px;
    flex: 0 1 330px;
    padding: 2em 3em;
    margin: 1em;
    color: #262b38;
    cursor: default;
    overflow: hidden;

    }
    /* смена фона при нажатии */
    .pricing_item:hover {
    color: #444;
    background: #daebef;
    }
    /* индивидуальная подложка ценника в каждом тарифе */
    .pricing_item:first-child .price {
    background: #9ba9b5;
    }
    .pricing_item:nth-child(2) .price {
    background: #1f6098;
    }
    /* на широких экранах отступы и выделение средней колонки тарифа */
    @media screen and (min-width: 66.250em) {
    .pricing_item {
    margin: 1.5em 0;
    }
    .featured {
    z-index: 10;
    margin: 0;
    font-size: 1.15em;
    }
    }
    /* заголовок */
    .pricing_item h3 {
    font-size: 2em;
    margin: 0.5em 0 0;
    color: #1d211f;
    }
    /* подложка ценника */
    .price {
    font-size: 2em;
    font-weight: bold;
    color: #fff;
    position: relative;
    z-index: 100;
    line-height: 95px;
    width: 100px;
    height: 100px;
    margin: 1.15em auto 1em;
    border-radius: 50%;
    background: #77a5cc;
    -webkit-transition: color 0.3s, background 0.3s;
    transition: color 0.3s, background 0.3s;
    }
    /* валюта */
    .currency {
    font-size: 0.5em;
    vertical-align: super;
    }
    /* уточнение предложения */
    .sentence {
    font-weight: bold;
    margin: 0 0 1em 0;
    padding: 0 0 0.5em;
    color: #2a6496;
    }
    /* список */
    .pricing_item ul {
    font-size: 0.95em;
    margin: 0;
    padding: 1.5em 0.5em 2.5em;
    text-align: left;
    }
    /* пункты списка */
    .pricing_item li {
    padding: 0.15em 0;
    }
    /* кнопка заказа тарифа */
    .pricing_item button {
    font-weight: bold;
    margin-top: auto;
    padding: 1em 2em;
    color: #fff;
    border-radius: 5px;
    background: #428bca;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    }
    /* смена цвета при нажатии кнопки */
    .pricing_item button:hover,
    .pricing_item button:focus {
    background-color: #285e8e;
    }
    /* фон тарифов*/
    .bg-2 {
    background: #dddddd;
    }

    Результат

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

    /* =========Testimonials styles======== */
    testimonials {
    padding: 4em 0;
    text-align: center;
    }
    .testimonials .avatar img {
    border-radius: 50%;
    float: left;
    display: inline;
    margin-right: 1em;
    width: 65px;
    height: 65px;
    margin-bottom: 30px;
    }
    .testimonials .avatar p {
    text-align: left;
    padding-top: 1em;
    color: #5d5d5d;
    font-weight: 900;
    }

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

    /* Action */
    .action {
    background: #476177;
    min-height: 180px;
    width: 100%;
    padding: 4em 0;
    text-align: center;
    }
    .action h2 {
    color: #fff;
    font-weight: 300;

    }
    .action p {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    font-size: 1.2em;
    }
    .action .container {
    margin-top: 3em;
    }
    /* Footer */
    footer {
    background: #333333;
    padding: 1em 0;
    text-align: right;
    }
    footer p {
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    font-size: 0.7em;
    margin-top: 0.5em;
    }

    Кнопке для футера присвоен встроенный класс бутстрапа btn-default.

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

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

    Задаем отступы кнопкам - jbutton. Прокрутка при нажатии работает, но очень резко.

    Плавные переходы создаются при помощи javascript или jquery. Последний по умолчанию подключен к шаблонам Bootstrap.

    Теперь прокрутка стала плавной.

    Добавление анимации к тексту с помощью Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css ). Это готовый открытый код, он может использоваться на любом сайте. Файл с гитхаба помещаем в папку css и прописываем путь.

    Подбираем эффекты здесь: https://daneden.github.io/animate.css/ . У нас выбран fadeInDown. Прописан в коде так:

    Теперь при загрузке или обновлении страницы текст будет анимирован. Готово.

    Пример 2: с формой и параллакс-эффектом

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

    Собирается по аналогии. Менять будем фоны и цвета. И, разумеется, добавим форму.

    Начнем с parallax .

    Изменим бэкграунд jumbotron на прозрачный:

    background: transparent;

    Внутри head вставим скрипт:


    $(window).scroll(function(e){
    parallax();
    });
    function parallax(){
    var scrolled = $(window).scrollTop();
    $(".bgparallax").css("top",-(scrolled*0.2)+"px");
    }

    Первой строкой в body ставится контейнер для параллакса:

    А в CSS его поведение:

    Bgparallax {
    background: url(/../img/fon.jpg) repeat;
    position: fixed;
    width: 100%;
    height: 300%;
    top:0;
    left:0;
    z-index: -1;
    }

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

    Делаем меню темным:

    Navbar-default {
    background-color: #333;
    border-color: #444;
    color: darkgrey;
    border-radius: 0;
    }

    Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: darkgrey;
    background-color: rgba(0, 0, 0, 0.5);
    }

    Заменяем предложение в jumbotron на новое - с кодом формы:







    Landing Page превращает посетителей в клиентов
    Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.








    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.












    И прописываем внешний вид

    /* form */
    .headform-list {
    list-style-type: none;
    line-height: 26px;
    font-weight: 400;
    padding: 0px;
    margin-bottom: 40px;
    }
    .headform {
    overflow: hidden;
    position: relative;
    background-color: rgba(0,0,0,.4);
    padding: 35px 40px;
    border-radius: 8px;
    }
    input, button, select, textarea {
    width: 100%;
    margin-bottom: 10px;
    }
    .headform-list li .fa {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 42px;
    font-size: 24px;
    text-align: center;
    }
    .headform-list li {
    position: relative;
    min-height: 38px;
    padding-left: 62px;
    margin-bottom: 20px;
    }
    .jumbotron p {
    color: #fff;
    font-size: 16px;
    font-style: italic;
    }

    Сюда же попал текст джамботрона, так как он требовал перемен.

    Перекрашиваем тарифы.

    /* общий вид тарифа */
    .pricing_item {
    background-color: rgba(0,0,0,.4); /* строка изменена */
    border-radius: 4px; /* строка изменена */
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    text-align: center;
    -webkit-flex: 0 1 330px;
    flex: 0 1 330px;
    padding: 2em 3em;
    margin: 1em;
    color: #f2f2f2; /* строка изменена */
    cursor: default;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    }
    /* смена фона при нажатии */
    .pricing_item:hover {
    color: #444;
    background: #ddd; /* строка изменена */
    }

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

    Шаблон готов.

    Пример 3: со счетчиком обратного отсчета

    Снова меняем начинку джамботрона и перекрашиваем шаблон под новый фон по аналогии с предыдущим шаблоном. Подключаем скрипт счетчика:


    Html





    Время не ждет
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.




    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.




    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.





    var myCountdown1 = new Countdown({
    time: 86400 * 3, // 86400 seconds = 1 day
    width: 300
    , height: 60
    , rangeHi: "day"
    , style: "flip" //