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

Что такое лендинг и как его создать

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

1. Обращение в веб-студию или к фрилансеру.
2. Самостоятельное написание кода, верстка дизайна.
3. Использование популярных CMS.

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

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

Третий – оптимальный вариант. Причем, внешний вид (готовый шаблон) можно будет выбрать из бесплатных, и «допилить» под свои нужды.

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

Одностраничники: небольшое теоретическое отступление

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

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

Любому онлайн-предпринимателю крайне важно понимать, что представляют собой одностраничные сайты:

1. С технической точки зрения, это веб-проекты, состоящие из кода (Html, CSS) и контента (видео, фото, текста), которые расположены на одной странице.
2. С точки зрения маркетинга, посадочные страницы – инструменты для получения данных о потенциальных покупателях.
3. С клиентской стороны, лендинги представляют собой обычные сайты, которые открываются после перехода по рекламным ссылкам.

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

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

Текст для лендинга: обязательные пункты

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

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

1. Заголовок привлекает внимание

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

Они придумывают что-то несуразное и неработающее типа: «Вы попали туда, куда нужно», «Наша компания гарантировано поможет вам», «Мы предлагаем самый лучший и самый дешевый товар на рынке». А далее «запихивают» на страницу 100 ключей из разных частотных групп…

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

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

2. Без воды

Вода в тексте – вторая ошибка, которую допускают все. Абсолютно все, кто не знает, что такое копирайтинг. Читатель чувствует воду, и будет читать недолго – пока его не начнет тошнить от вашего «просторечия и преувеличений».

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

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

Например, дайте данные по Айфону:

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

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

3. Не обманывать

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

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

4. Преимущества

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

Бывает так (причем, довольно часто), что список выгод, мягко говоря, «высасывается из пальца». «Низкие цены», «Высшее качество», «Лучшие на рынке», «Профессиональные эксперты» — все это отталкивает на подсознательном уровне, и уж точно не приносит клиентов.

Вам нужны реальные выгоды, а не те, которые видны со стороны продавца. Оценка должна быть справедливой, и «красиво смотреться» в глазах потенциального потребителя. Но, на преимущества самой компании также нужно обращать внимание. Главное – анализ.

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

5. Отзывы

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

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

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

Отзыв обязательно должен содержать заголовок, отражающий главную мысль автора. Второй вариант – заголовок в виде конкретной выгоды. Например: «С седьмым Айфоном я могу не стеснятся на любой тусовке мажоров».

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

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

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

6. Гарантия возврата финансовых средств

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

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

Оформляем графические элементы правильно

Помимо текста, лендинг должен содержать профессиональную графику. Разберемся, какие именно модули и блоки стоит размещать на одностраничнике, и как визуально подать их так, чтобы они «продавали», а не просто «мусолили глаза».

1. Продукт в эксплуатации

Разместите фото товара на первом экране одностраничника, и это положительно скажется на потоке клиентов. Мы уже поняли, что писать пустые сухие тексты бессмысленно. Так же бессмысленно и выкладывать скачанные фото товара из Сети.

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

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

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

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

Продукты питания всегда «подавайте» на фото горячими, вкусными, яркими, такими, чтобы их «вот прям сразу» захотелось съесть. И основное – все эти картинки размещайте в шапке сайта. Лаконично, красиво, с аккуратной кнопкой «Заказать».

2. Призыв к действию (целевая кнопка)

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

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

3. Забудьте о попандерах (всплывающих окнах)

Всплывающие попандеры, появляющиеся без воли посетителя, встречаются, увы, на каждом втором лендинге. Они раздражают и отталкивают. К сожалению, это понимают единицы. И, если запустить такое «информирование», то поначалу рост заявок будет, но через некоторое время аудитория «забьет» на вас.

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

4. Формам – минимум полей

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

5. Показываем лица, «светим» контакты

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

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

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

6. Логотипы клиентов

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

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

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

Практическая часть

Для примера возьмем популярный в свое время робот-пылесос iRobot. Итак, поехали.

Перед началом дизайнерских работ, нужно учитывать следующие рекомендации (полезные советы):

• стиль, бренд продукта и одностраничник должны быть выполнены в одинаковом дизайне;
• не нужно применять более 3-х цветов на сайте. Лучше выбрать тройку основных, а затем «играть» с их оттенками;
• шрифты должны быть удобочитаемыми, легкими и приятными для глаз;
• не размещайте функциональные элементы слишком близко друг к другу (признак дурного вкуса);
• «ритм» элементов должен быть вертикальным – в дизайн нужно «вдохнуть воздух»;
• между строками в текстовых блоках делайте умеренный, но и не маленький межстрочный интервал;
• сжимайте все графические элементы специальными инструментами, чтобы они быстрее прогружались на сайте;
• перед изменением размера изображения конвертируйте его Фотошопом в смарт-объект, чтобы при необходимости вернуться к исходному расширению без потери качества.

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

Ширина каждого элемента сайта будет равна ширине макета. Контент же будет занимать пространство в сетке Bootstrap. Шрифт будем брать из стандартных – Raleway.

Что будет в шапке сайта:

• логотип;
• фото пылесоса;
• заголовок;
• контакты;
• кнопка «Сделать заказ».

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

Блок с видеоконтентом:

• заголовок;
• подзаголовок;
• кнопка.

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

Блок модельный ряд содержит:

• заголовок;
• фотографии моделей;
• «Старые» и «Новые» цены.

Отображаем в этом разделе 4 модели пылесоса. Прописываем перечеркнутую цену, указываем стоимость девайса «по акции»:

Секция с гарантиями состоит из:

• текста гарантии;
• тематической картинки.

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

Описание преимуществ – это:

• заголовок с «подтекстом»;
• графические элементы с описаниями выгод.

Этот блок нужно сделать таким же образом, как и «Модельный ряд», но без отступов. При наведение курсора мышки элементы будут менять свой внешний вид (увеличиваться):

Раздел с отзывами. Каждый отзыв представляет собой:

• фото потребителя;
• имя;
• должность;
• текст отзыва.

Оптимально – использовать 10 колонок, 8 из которых предназначены для текста отзыва, и 2 для фото с именем, должностью покупателя. Не забываем прописывать заголовки для каждого отзыва:

Блок с контактами менеджера/поддержкой:

• фотография эксперта;
• его контакты.

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

Раздел «Контакты» имеет:

• заголовок с подзаголовком;
• карту с помеченными на ней офисами.

Тут все просто:

Создаем лендинг с помощью онлайн-платформы

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

1. LPmotor

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

Плюсы:

• небольшие цены;
• большой выбор готовых шаблонов;
• богатый функционал для запуска, анализа воронки продаж;
• интеграция с: Яндекс.Метрикой, Битрикс24, amoCRM.

Минусы:

• отсутствует бесплатный тестовый период.

2. LPgenerator

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

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

Плюсы:

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

Минусы:

• цены чуть выше среднерыночных;
• тестовый период короткий – всего неделя;
• интерфейс довольно сложный – придется разбираться.

3. Ulanding

Конструктор – новинка на рынке. Так как проект запущен недавно, на нем еще не так много бесплатных шаблонов. Но, те, что уже есть, разбиты по тематикам. В каждом из них можно править CSS и HTML код.

К созданному лендингу можно прямо из панели администратора добавить аналитику Яндекс.Метрика или Google Analytics. Сервис также интегрируется с популярными системами: MailChimp, LiveChat, Jivosite, социальные сети.

Плюсы:

• простой и понятный новичку интерфейс;
• интеграция с любой CRM;
• инструменты для сбора статистики и аналитики.

Минусы:

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

4. LPTrend

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

Плюсы:

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

Минусы:

• отсутствует бесплатный тарифный план.

5. Wix

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

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

Плюсы:

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

Минусы:

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

Заключение

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