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

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

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

Этап 1. Анализ продукта и целевой аудитории.

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

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

Анна, 35 лет, мама двоих детей 4-х и 6-ти лет. Домохозяйка, живет с детьми и супругом в городской квартире. Увлекается рукоделием и йогой. Ее беспокоит здоровье детей. Старший сын уже готовится к школе и стол, за которым он занимается, не очень удобен. От подруги узнала про растущие парты, изучила информацию о них на форумах. Сейчас стоит перед выбором модели и производителя. Основные критерии выбора (воспринимаемые преимущества): качество и безопасность конструкции, отсутствие острых углов, торчащих элементов креплений за которые можно зацепиться или пораниться, доставка и сборка, стоимость, гарантия.

На него и будем ориентироваться при создании лендинга.

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

rast

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

Этап 2. Концепция и прототип

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

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

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

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

  • Есть ли тут то, что я ищу?
  • В каком городе находится компания

Задача первого экрана привлечь внимание к предложению. Эту важную роль выполняет заголовок, который я оставлю по технике 4U, которая великолепно описана в этой статье Даниила Шардакова

В итоге получаем первый экран:

2016-02-02_17-42-21

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

Главная задача лендинга — получить контакт от заинтересованного посетителя. Многие начинающие предприниматели путают задачу и убеждены, что лендинг должен продавать (отсюда идут такие понятия как «продающий сайт»). Огорчу — продавать должен отдел продаж, а лендинг генерирует лиды.

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

Этап 3. Создание лендинга

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

2016-02-02_20-43-48

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

2016-02-02_20-52-45

А для того, чтобы отслеживать отправленные заявки, необходимо в настройках счетчика Яндекс Метрики создать цель типа «JavaScript событие», придумав для нее уникальный идентификатор. И потом указать этот идентификатор в настройках формы в редакторе страницы на конструкторе:

2016-02-02_20-59-05

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

Остались вопросы? Пишите их комментариях ниже и я обязательно вам отвечу втечении 24 часов.

Хотите знать больше о создании Landing Page? Крайне рекомендую вот эту книгу:

book_lp_300

Маркетолог-перфекционист. С 2007 года помогаю предпринимателям привлекать клиентов и увеличивать продажи за счет инструментов интернет-маркетинга.

  • Alex

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

    • Конструкторов много, у каждого свои плюсы и минусы — для меня например важна возможность собирать блоки самому, а не по шаблонам. В Prilo не увидел такой возможности.

      • Alex

        Там есть такая возможность! Нажимаете карандаш и редактировать HTML

  • Elena Glickman

    Спасибо , кратко и понятно ! А вы помогаете в продвижении услуг? Я коуч

    • Рад, что вам понравилось. Да, Елена, помогаю. Написал вам в skype

  • Станислав

    а как привязать доменное имя к своему лендингу?