17 Окт, 2016
Категории: Гостевые статьи, Интересно почитать
Автор: Вовка

Как создать самому лендинг пейдж и не пожалеть о потраченном времени

Партнерская программа Vulkanpartner

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

Доказанный факт: 98% посетителей ничего не покупают при первом посещении сайта. Знаете, что они думают при этом? — «Я просто смотрю».

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

Разберемся детально, что это такое, как его создать самостоятельно и избежать досадных ошибок.

 

Лендинг пейдж — это гарантия дохода?

Landing, посадочная, целевая страница — за громкими названиями скрывается обычный web-документ. Его начинка такая же, как у привычных сайтов — Html, CSS, JS. Что же превращает стандартный набор кодов в инструмент для мощного давления на клиента? Все то, что не дает размыться вниманию — конкретность и лаконичность.

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

  • Создание целевых страниц под рекламу Яндекс.Директ или AdWords помогает точечно настроить соответствие по группе ключевых слов. Это позволяет снизить стоимость клика.
  • Повышенный коэффициент конверсии работает на увеличение прибыли даже при неизменном количестве посетителей.
  • Удобство использования целевой страницы упрощает для клиента визуальное восприятие информации.

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

 

Программы и плагины для создания Landing Page

Существует четыре базовых способа создания LP своими силами:

  • Онлайн сервисы: LPgenerator, PlatformaLP, LPmotor. Удобны для быстрой компоновки страниц, есть готовые шаблоны, обучающие видео и подсказки. Не требуют никаких навыков — разберется даже новичок. Но есть и минусы — бесплатное создание возможно только в тестовый период. Все остальное время придется сидеть на абонентской плате, да еще и зависеть от корректной работы сервиса.
  • Визуальные редакторы: Adobe Muse, Microsoft Expression Studio, Serif WebPlus, Web Builder, Web Page Maker. Удобные и интуитивно понятные инструменты. Подходят для создания уникальных сложных макетов. Минус — высокая цена, как правило, не оправдывается, если создавать страницы разово.
  • Плагины для WordPress: EasycomingSoon, ResponsiveAdminMaintenancePro, WordPress Landing Pages, Wppage. Для владельцев сайтов на WordPress — самый простой способ получить лендинг. Не требуют навыков, приличный выбор аддонов. Минусы — скромный выбор тем по умолчанию, требовательность к параметрам хостинга, платная дополнительная функциональность.
  • HTML редакторы: DreamWeaver, Brackets, Sublime Text, Gedit, KompoZer, блокнот. Начнем с минусов — нужны хотя бы базовые знания Html и CSS. Часть редакторов платная. Плюсы — большинство представленных программ не потребует ни копейки вложений. Независимость от параметров сервера — сайты работают даже из папки на компьютере.

Несомненно, для умеющих кодить предпочтителен вариант с использованием Html-редакторов. Он дает полную свободу творчества и независимость от работоспособности сторонних сервисов. К тому же, это единственный вариант, при котором может не потребоваться не только покупка, но и скачивание программ. Например, блокнот по умолчанию стоит в Windows, а и Gedit — в Ubuntu. Именно вариант с редакторами мы рассмотрим как базу для создания собственной посадочной страницы.

 

Лендинг бесплатно своими руками: пошаговая инструкция

Создадим пример странички продажи инфопродукта с кнопкой заказа.

Для верстки будет использоваться бесплатный редактор Brackets и набор расширений — их можно установить прямо из интерфейса программы (вторая иконка справа).

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

Что это за расширения?

  • Live Preview — возможность предпросмотра сверстанного кода с учетом респонсивности.
  • Html hint — подсказки при вводе тегов. Достаточно набрать первую букву, чтобы всплыл наборчик. Избавляет от необходимости писать по буквам километры кода, ускоряет работу.
  • io — прибирает выделенный код, создает аккуратные отступы. Это помогает сохранить структуру кода и не запутаться при верстке блоков.
  • JS CSS Minifier — сжимает код. Это ускорит загрузку сайта. Используется, когда код уже не требует правок и готов к публикации.
  • Right click — расширение для поддержки правого клика. Используется, чтобы копировать и вставлять куски кода — например, повторяющиеся.

Этот редактор выбран из-за бесплатности, настраиваемости и удобства работы. Для присоединившихся к верстке примера — пишите код там, где удобно и привычно.

Общая концепция

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

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

Далее нужно решить, в каком виде расположить эти элементы, как они будут сочетаться между собой, какая нужна цветовая гамма. Чтобы организовать все это, используются разные инструменты — можно сделать макет в Photoshop или Gimp (бесплатный аналог), скомпоновать картинку в собственной голове или же применить Moqups. Последний вариант оптимален для быстрого наглядного прототипирования.

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

Можно переходить к верстке. Для ускорения процесса используем Bootstrap. Это фреймворк с полностью готовыми CSS-кодами элементов, которые встречаются на большинстве сайтов — меню, кнопки, списки, слайд-шоу и т. п. Чтобы их использовать, достаточно в html-код шаблона добавить путь к бутстрап. Это может быть ссылка на репозиторий или (как в нашем случае) путь к папке. Вариант позволяет не зависеть от доступности стороннего сервиса и демонстрировать сайт даже при отсутствии интернет-подключения.

Код:

  <link href="assets/css/bootstrap.css" rel="stylesheet">

<link href="assets/css/font-awesome.min.css" rel="stylesheet">

Добавлен файл стилей и шрифт для отображения иконок.

Из стандартных элементов фреймворка собран шаблон «рыба» — чтобы не тратить время на Html-код. Сервисов для генерации подобной «рыбы» множество. Сборка происходит простым перетаскиванием блоков в нужные места. Мы использовали сервис Layout.it.

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

Для блока предложения за основу взят встроенный класс бутстрапа jumbotron.

Приводим в порядок получившийся шаблон.

Шаг 1. Меняем фон и цвет

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

.jumbotron {

background: url(../img/fon.jpg) top center no-repeat;

background-color: #00324d;

}

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

@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed';/* импорт шрифта для заголовков */

И дополнительно выведен в нужном месте:

h1, h2, h3, h4, h5, h6 {

font-family: 'Roboto Condensed', sans-serif;  /* Гуглфонт вывод */

}

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

Код:

.jumbotron h1 {

font-size: 70px;

font-weight: 700;

letter-spacing: 3px;

color: #fff;

text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);

}

Зная высоту и вид заголовка, настраивать шаблон удобнее. Мы добавили место под будущее фото инфопродукта справа от текста. Сделано это опять же с помощью Bootstrap. Для разделения джамботрона на колонки использован этот код:

<div class="col-sm-6 col-md-5 col-lg-offset-1">

Вокруг текста

</div>

<div class="col-sm-6 col-md-5 col-lg-offset-1">

Вокруг будущей фотографии продукта

 </div>

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

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

Шаг 2. Изменяем вид кнопки заказа и добавляем курс

Для модификации кнопки мы ввели отдельный класс jbutton. Его добавление позволяет точечно менять размер и цвет кнопки, не сталкиваясь с кодом Bootstrap.

.jumbotron .jbutton {

height: 59px;

width: 340px;

font-size: 23px;

padding: 12px;

background-color: #2baae6;

}

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

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

<div class="col-sm-6 col-md-5 col-lg-offset-1">

<img class="imgcat" src="assets/img/kurs.png"/>

</div>

В CSS прописываются дополнительные параметры:

.imgcat{

max-width: 350px;

height: auto;

}

Это ограничитель размера фото и поддержка респонсивности.

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

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

Шаг 3. Преимущества

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

<div class="col-md-4 text-center">

текст

</div>

Оформить можно классическим списком или подчеркнуть встроенными иконками. Наш вариант с иконками. Прописать их очень легко:

<i class="fa fa-star-o fa-3x"></i>

Если вместо star поставить другое слово из набора, иконка сменится. Полный список доступен в файле стилей Bootstrap или на официальном сайте фреймворка.

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

Шаг 4. Сигналы доверия

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

Мы сделали вариант с отзывами в три колонки, прописав им класс col-lg-4. Начинка состоит из аватаров и блоков цитат:

<div class="col-lg-4">

<div class="avatar"> <img src="assets/img/1.jpg" /> <p>Имя клиента</p></div>

<blockquote> Текст отзыва </blockquote>

</div>

Путь к картинке аватара задан стандартно тегом img.

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

Шаг 5. Вносим жизнь

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

В шаблон добавлены эти строки:

<link href="assets/css/animate.css" rel="stylesheet">

<script src="assets/js/scroll.js"></script>

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

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

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

Дополнительно на первом экране задана анимация текста при загрузке страницы:

<p class="animated fadeInDown">

На этом процесс завершен. Посадочная страница готова.

5 признаков того, что Landing page не сработает

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

Признак №1 — нет ни рекламы, ни продвижения

Более 90% компаний не находит свои сайты в топ-10, даже набрав в «Яндексе» название собственного бренда? Что уж говорить о посадочных страницах, вес которых априори ниже, чем у морд перелинкованных сайтов? Причина провалов кроется в подходе «покупатель сам придет». Не придет. Он не подозревает о вашем существовании. Его нужно привести. Продумайте, каким путем будет добыт трафик.

Признак №2 — проблемы с дизайном

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

Сомневаетесь? Вспомним, как выглядит хоть и информационный, но уж точно самый эффективный лендинг планеты — поиск Google.

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

Ни одного лишнего элемента.

Признак №3 — плохой текст

Дэвид Огилви — основатель одного из крупнейших международных рекламных агентств, сказал еще в 1983 году:

«8 из 10 человек читают ваш заголовок. Но только 2 из 10 читают остальное»

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

Признак №4 — неправильный или унылый заголовок

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

Но даже супер-заголовок не сработает, если предложение будет отличаться от того, что посетитель ожидал получить. Если юзер пришел по клику с рекламы «70% скидка на брюки - жми сюда», то на целевой странице должно быть предложено 70% снижение цен на штаны. Не 30%, не 50% — 70 процентов! Слишком часто рекламные обещания не погашаются на лендингах. Разочарованный посетитель ничего не купит, даже если предложение выгодно и без скидки.

Признак №5 — некорректный призыв

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

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

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

Помогла статья? Оставь комментарий!

Руслан Галиулин

Я желаю всем успехов в создании лендинг пейдж!


Робот блога считает, что это может быть вам интересно:

Похожие записи в блоге:

   

Нравится как я пишу? Давайте вместе формировать интересные материалы на моем блоге. Вы можете сделать ретвит данной статьи или подписаться на мою ленту в системе микроблогов Твиттер.
Читайте меня в Твиттере и будьте в курсе последних моих действий.

Комментирование Facebook:


  • Спасибо!

  • Angelos

    Какие инструкции ни читай, а без АВ тестирования никогда не поймешь, продает твой лендинг или нет

  • Блог Артема Полуэктова

    Спасибо за инструкцию!

  • Наташа Ильченко

    Спасибо за интересный материал, подробнее с продвижением сайта я ознакомилась в книге Топодин СЕО на экспорт, всем советую данную книгу к прочтению!

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

  • Alex

    Нуу не знаю, лучше Prilo.ru конструктора landing page пока не встречал. Реально удобный визуальный редактор. Есть аналитика с источниками переходов. Дешевый безлимитный тариф. Короче, остался доволен!!

  • PlatformaLP излюбленная платформа глопартовцев))

  • на WordPress есть все, и можно найти беслатно. Вопрос в том,нужна ли такая CMS для лендинга. Нет.

Я в Google Plus

Блоггеру

Рекомендую

Мануалы

Опрос

Творческий кризис необратим?

Просмотреть результаты

Загрузка ... Загрузка ...

Вовкин блог на Facebook

SEO Powered by Platinum SEO from Techblissonline