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

Что такое Landing page простыми словами

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

Что нужно знать для того, чтобы сделать хороший лендинг

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

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

Есть и такой вариант — сверстать html-страницу самостоятельно, наполнить ее нужной информацией и ждать потока клиентов. Но и этот вариант подходит далеко не всем — не каждый имеет достаточные познания в верстке и не каждому будет интересно разбираться в этом. Значит ли это, что пора опускать руки и забывать о реализации своих планов? Вовсе нет, ведь на помощь приходит старый добрый Вордпресс.

Классическая “формула”  — AIDA (Attention. Interest, Desire, Action). Каждый из этих пунктов отражает этап взаимодействия посетителя с сайтом и, зачастую, один из элементов структуры лендинга. Но обо всем по порядку:

  • Attention (Внимание) — первый и самый главный пункт, на который стоит обращать внимание при создании лендинга. Нужно “ухватить” внимание посетителя в первые несколько секунд его пребывания на сайте. За это в структуре лендинга отвечает заголовок и первый экран с оффером, кратко описывающим предлагаемый продукт. Классический оффер выглядит примерно так:
  • Interest (интерес) — на этом этапе нужно “подогреть” интерес посетителя дополнительным контентом — преимуществами вашего продукта, видео, изображениями и так далее. При этом не нужно использовать стоковые фото и видео — делайте свой, уникальный и интересный контент.
  • Desire (Желание) — заинтересовав посетителя, нужно сформировать у него желание купить ваш продукт или, на худой конец, подписаться на рассылку. Делать это можно несколькими способами, например публиковать отзывы пользователей или максимально персонализировать предложения
  • Action (действие) — покупка продукта, заказ консультации, оформление подписки и так далее. Под него обычно выделяется один из разделов лендинга, но кнопки действия должны быть распределены по всей странице. При этом важно помнить два момента:
    • Во-первых, все формы, кнопки и функции должны работать идеально. Без всяких оговорок и багов.
    • Во-вторых, формы должны быть максимально простыми. Если в ней больше 3-5 граф — лучше “повесить” переход на страницу с формой на кнопку, а не пытаться “впихнуть” ее в лендинг. Взаимодействие посетителя с лендингом должно быть максимально простым и быстрым.

Актуален ли лендинг в 2019-2020?

  • Широкая их распространенность неизбежна привела к весьма противоречивому отношению к ним. И, справедливости ради, причины, почему многих интернет-пользователей одностраничники откровенно раздражают.
  • Большинство lading page на просторах сети откровенно убоги — это тяжеловесные, перегруженные текстом, картинками и видео тормозящие страницы, которые вызывают у посетителей только раздражение. Увы, но востребованность услуги всегда приводит к появлению множества низкоквалифицированных исполнителей.
  • В то же время грамотно построенный и написанный лендинг, предлагаемый аудитории, которой интересно данное предложение, отлично работает в 2019 году и будет работать и в дальнейшем. Потому что в его основе лежит простой принцип — людям нравятся короткие и доходчивые предложения. И “интернет-мода” на это не влияет.

Создание лендинга посредством WordPress

Несмотря на обилие всевозможных плагинов и тем, позволяющих собрать посадочную страницу, мы выберем один — Free Landing Pages Builder by Wishpond — и рассмотрим, как создать лендинг самому бесплатно — пошаговая инструкция для всех. Мы не будем рассматривать процесс самого создания и запуска сайта, а также установки плагина, поскольку туториалов в Рунете на эти темы представлено предостаточно. Приступим непосредственно к обзору сборки лендинга.

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

Первым делом необходимо пройти регистрацию, потому после установки жмем «SIGN UP», далее «STAR TRIAL FREE». Вводим адрес электронной почты, создаем пароль. Кликаем по «NEXT», после чего выбираем создание новой страницы — «NEW LANDING PAGE».

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

  • Выбираем поле «Landing Page». После чего нам будут даны на выбор темы. Рассмотрите все предложенные варианты и ознакомьтесь с ними с помощью превью. Выбрав наиболее подходящую, кликайте на «Choose Template».Как сделать лендинг самому: пошаговая инструкция
  • Экран разделится на две части, подобно тому, как происходит в случае настройки темы: левая сторона монитора представляет собой панель инструментов, правая же отображает получаемый эффект от изменений. Все действия производятся простым перетаскиванием элементов мышью и их вставкой в нужное место. После всех произведенных манипуляций не забываем сохраняться путем нажатия на «Save as draft».
  • Отображение изменений можно просмотреть с помощью инструмента «Preview». Данная функция позволяет визуально адаптировать отображения под любые устройства: стандартные мониторы, планшеты, мобильные телефоны.
  • Публикация лендинга осуществляется нажатием на «Publish» после проведения всех действий по настройке внешнего вида.
  • Даем название нашей странице, а также прописываем метатеги в настройках.
Предлагаем ознакомиться  Как из двух квартир сделать одну

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

  • Сайт нагружен сторонними плагинами — удалите лишние модули, необходимость применения которых не является обязательным условием нормального функционирования портала.
  • Страница не загружена на хостинг, а работает на локальном сервере — проблема устранится при выгрузке и публикации веб-ресурса в интернете.
  • Конфликт с установленной темой — смело удаляете шаблон, ставите стандартный, так как вы будете пользоваться дизайнерскими разработками плагина.
Преимущества Недостатки
Легкая настройка блоков, виджетов, дизайна путем перетаскивания мышью. Позволяет преобразовывать одну и ту же страницу в версии, совершенно отличные от исходного варианта Плагин англоязычный, отсутствует русифицированная поддержка. Что, впрочем, легко решается знанием английского языка на среднем уровне либо помощью сервисов перевода
Множество тем (более двухсот), созданных исключительно для одностраничных сайтов Хоть плагин и предоставляет бесплатную версию, разбор которой мы привели выше, она несколько ограничена в функционале, и весьма высока вероятность появления необходимости покупки платной версии в дальнейшем
Возможность отслеживания количества посетителей в любых временных интервалах Приложение тяжеловесно, что скажется на скорости загрузки сайта, однако и данная проблема решается путем оптимизации кода
Удобство управления страницами. Дополнительные всплывающие окна и кнопки анимации

Создание лендинга в конструкторе Wix

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

Переходим на сайт. Он встречает нас приветливым дизайном.

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

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

  1. Самым популярным из таких конструкторов, несмотря на всю свою тяжеловесность, остается WordPress Landing Pages. Просто потому что компания, которой требуется одностраничник, в абсолютном большинстве случаев использует ту или иную CMS. И WordPress сегодня среди них наиболее популярна. Особого смысла искать другую платформу у компаний, использующих эту CMS, просто нет.
  2.  Следующим по интенсивности использования идет LPGenerator. Если WordPress любят заказчики, то LPGenerator горячо любим веб-студиями, создающими лендинги под ключ. Просто потому что на сегодняшний день это самый мощный и полнофункциональный из конструкторов, позволяющий делать с одностраничником все что угодно.
  3. Помимо банальных шаблонов, здесь присутствует богатый инструментарий для прорисовки страниц, добавления собственного кода и развитая система обучения начинающих веб-дизайнеров. Ценят его и за полный набор средств маркетингового анализа — от банального A/B-тестирования до самой подробной статистики о поведении посетителей на странице.
  4. Минусов у LPGenerator всего два: возможностей слишком много, чтобы в них мог быстро разобраться новичок, а тарифы на платформе одни из самых высоких на рынке — от 560 рублей в месяц за ограниченный базовый функционал до 11 тысяч в месяц за “полный фарш”. В конце концов, они рассчитаны на профи, которые зарабатывают созданием лендингов.
  5. uKit — Представитель противоположного лагеря конструкторов лендингов. Он предельно прост и не требует никаких специальных знаний для использования. Пользователь получает не только набор готовых элементов, которые он может размещать по своему усмотрению, но и полноценные шаблоны. В них нужно просто подставить нужные картинки и тексты — все блоки уже заранее размещены в логически верном порядке, кнопки и функциональные элементы расставлены по странице авторами шаблонов — ошибиться трудно. 
  6. Тарифы довольно демократичны — от 4 долларов в месяц. За эти деньги вы получаете функционал, достаточный для большинства лендингов. Но если хотите получить возможность принимать платежи онлайн — придется выложить уже 9,6 долларов в месяц. А вот инструменты для анализа конверсии отсутствуют в принципе — придется использовать стороннюю аналитику.

Фактически, uKit — это оптимальное решение для создания своего первого лендинга либо одностраничника для блога, а также во всех тех случаях, когда вам не нужны профессиональные инструменты. Грубо говоря, зачем покупать строительный пистолет, если вам нужно забить два гвоздя?

Четыре главных мифа о Landing Page

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

  1. “Продающий” текст. Чтобы не говорили маркетологи, никакого “продающего” текста не существует. Текст в одностраничнике должен легко читаться, быть простым, понятным и четко доносить ваше предложение посетителю. Но никаких “волшебных” слов нет.
  2. Лендинг должен быть длинным. Этот миф очень любят конторы, “штампующие” шаблонные сайты в надежде получить с клиента побольше денег. Ресурс должен доносить ваше предложение максимально интересно и заинтересовывать посетителя. Растягивать его нет смысла — он должен иметь минимальную длину, необходимую для выполнения этой задачи. Если вам удалось сделать это за один экран — идеально.
  3. В лендинге должно быть много-много пунктов с преимуществами продукта. На деле вымучивать кучу никому не интересных текстов, заголовок и иконок не нужно — они все равно не сработают. Сосредоточьтесь на том, что действительно интересно вашей аудитории.
  4. Лендинг решает все проблемы. Увы, но он не способен обеспечить вам продажи сам по себе. LP помогает потенциальным клиентам увидеть преимущества вашего продукта и заинтересоваться им, однако сам продукт должен обладать этими преимуществами. Вдобавок, нужен и качественный источник траффика, благодаря которому на страницу будет попадать ваша целевая аудитория, а не те, кому ваше предложение не интересно в принципе.
Предлагаем ознакомиться  Как сделать страховой медицинский полис задача не из легких или все элементарно

Общие правила создания лендинга

Следующие советы помогут сделать лендинг в соответствии с требованиями маркетинга:

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

Готовим прототип

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

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

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

A — attention — привлечение внимания посетителя.I — interest — пробуждение интереса потенциального клиента.D — desire — разжигание желания.A — action — побуждение пользователя к действию (покупке, заказу).S — satisfaction — удовлетворение клиента приобретением и закрепление его для дальнейшего сотрудничества.

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

Несколько советов по оформлению:

  1. Не допускайте сильных разбросов в цветовой гамме — ваша страница должна привлекать взгляд приятным сочетанием, а не крикливостью красок.
  2. Используйте минималистичный стиль, так как это, во-первых, упростит задачу, а во-вторых, согласно исследованиям, повысит доверие пользователя.
  3. Не забывайте о структуре сайта — одни блоки (первостепенные) должны привлечь внимание раньше других (второстепенных), находящихся в соподчинении первым. Потому выделяйте их разными цветами и абрисами, задавайте им разные размеры.
  4. Соблюдайте дистанцию между блоками и элементами, не позволяйте им слиться воедино.

Подведем итоги

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

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

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

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

Не нужно делать «универсальный» лендинг со множеством категорий товаров в надежде охватить весь рынок. Лучшим вариантом будет запуск нескольких параллельных проектов с узкой специализацией.

Варианты создания Lading Page

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

Итак, основные способы сделать продающую страничку:

  1. Сделать самому
  2. Заказать лендинг “под ключ”
  3. Воспользоваться онлайн-конструктором

Сервис WordPress для создания страницы захвата своими руками

Часто продающая страница делается на WordPress. Особенности плагина для подобной CMS:

  • Настройки на русском языке.
  • В интернете есть курсы видео, в которых содержится пошаговая инструкция. Такие курсы помогут быстро пройти обучение.
  • Много готовых кнопок (соцсети, отзывы, разделители, вставки контента, «Заказать», «Купить»).
  • Можно производить сплит-тестирования.
  • Доступный интерфейс.

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

  1. Thrive Landing Page WordPress.

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

  1. WP Profit Builder.

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

  1. WordPress Landing Pages.

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

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

  1. InstaBuilder.

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

  1. OptimizePress.

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

  1. LeadPages.
  2. Ultimate Landing Page.

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

  1. Parallax Gravity.

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

Плагины на WordPress позволяют создать одностраничник за 1 вечер с нуля, но не все из них распространяются бесплатно.

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

  • Самый дешевый и доступный вариант, который можно реализовать, даже не используя специализированные инструменты. В сети не так уж мало лендингов, которые владельцы сайта сделали в Photoshop и самостоятельно заверстали. Как правило они предельно простые, но если одностраничник выполняет свою задачу, то почему бы и нет?
  • Проблема этого способа очевидна — вам нужны навыки программирования, интернет-верстки, дизайна и копирайтинга. Хотя бы базовые.
  • Второй вариант создания лендинга самостоятельно — использовать популярную и недорогую CMS WordPress. Для нее существует специальный плагин — WordPress Landing Pages.
  • WordPress предлагает отличный и гибкий функционал — от готовых кнопок и элементов лендинга до возможности проведения сплит-тестирования. Однако работа с ним требует специальных знаний и интерфейс далеко не так удобен, как хотелось бы. Это скорее инструментарий для специалиста, чем для человека, который быстро хочет сделать пристойный одностраничник для себя.

Лендинг под ключ

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

Самый дорогой, но самый простой способ получить лендинг — нанять кого-нибудь, кто сделает его для вас. Заплатить, объяснить, что вы хотите — и пусть обо всем остальном голова болит уже у исполнителя. Этот подход однозначно оптимален для крупных компаний, когда сайт должен выдерживать большую нагрузку, а сам лендинг должен быть “сложнее среднего”.

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

Ссылка на основную публикацию
Adblock detector