Май 2018
Автор: Рубрика: Landing page Комментариев нет

Создать лендинг пейдж, пример

Создать лендинг пейдж, пример

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

Создание landing page начинается с анализа рынка и конкурентов.

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

Из анализа рынка мы составим правильно УТП уникальное торговое предложение.

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

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

Делаем дизайн сайта, он не должен быть пестрым.

На шаблон дизайна делаем верстку с чистым кодом.

Устанавливаем счетчик для аналитики.

Воронка продаж для landing page

Второй этап после создания лендинга настройка воронки продаж.

Воронка продаж показывает, прибылен ли канал продаж или нет.

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

Считаем статистику со всех площадок количество посещений и целевые действия, это считается в яндекс метрике.

Этапы воронки продаж

  1. Показы рекламы, обычно бесплатны.
  2. Клики посетителей. После клика пользователь попал к нам на сайт. Как хорошо, работает реклама, определяем из CTR . Клики делим на показы и умножаем на сто.
  3. Оставление заявки или звонок. Тут мы определяем конверсию в целевое действие.
  4. Работа с клиентом. Готов ли купить клиент или нет, определяем звонком.
  5. Получаем деньги.

Этапы воронки продаж

На каждом этапе есть конверсия. Из полученных статистических данных мы определяем сколько мы можем платить за один клик.

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

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

Анализ рынка и конкурентов

Что нам даст анализ рынка:

  1. Экономия денег и времени. Мы сможем понять, сколько денег мы сможем вложить и получить прибыль, за какой промежуток времени.
  2. Исследуем объем рынка. Сколько денег можно получить с канала продаж. Ориентируемся на горячих клиентов, клиент, который хочет купить сейчас. В запросе таких клиентов есть слово купить, заказать, цена.
  3. Считаем максимальную цену клиента и цену клика.

Анализ конкурентов:

  • Порядковый номер.
  • Сайт компании.
  • Какие каналы продаж. Где нашли их.
  • УТП, чем они лучше других.
  • Чем сайт понравился, пишем.
  • Цены.
  • Работа менеджера. Оставляем заявку и общаемся с продавцом.

Разбираем пять лучших конкурентов и заносим в ексель таблицу.

Делаем анализ страхов и мечты наших клиентов.

Три важные вещи, которыми оперирует покупатель:

  1. Цена
  2. Срок доставки, установки, создания.
  3. Гарантия и качество.

Остальные вещи менее важные.

  • Товары до трех тысяч рублей покупаются на эмоциях. Срок покупки от часа до пяти.
  • Товар до 30 тысяч рублей покупается от одного дня до недели.
  • Свыше 30 тысяч рублей товар покупается осознано и клиент созревает больше недели.

Показатель ROI

Показатель ROI

Показатель ROI определяет, какова прибыль на вложенные средства.

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

Делаем свое УТП

Из таблички конкурентов делаем свое УТП

Текст к лендинг пейдж пишем с использованием слов магнитов.

Скетч или прототип сайта составим в программе moqup... или в идеальном варианте в фотошопе.

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

Делаем ТЗ дизайнеру

  1. Регистрируемся на сайте фрилансеров.
  2. Делаем объявление на поиск дизайнера. Название объявление создание дизайна одной страницы. Указываем цену и срок выполнения. Описание проекта: Есть готовый скетч в PSD и ТЗ. Необходимо сделать дизайн по скетчу и ТЗ в формате PSD. Есть фотографии, которые нужно использовать.
  3. Выбираем одного и передаем ТЗ и скетч с предоплатой 30%.

Структура ТЗ для дизайнера.

  • Дизайн нужен в бело зеленых тонах как на сайте, примерhttp…
  • Шрифт roboto.
  • Ширина сайта 1000 px. В широких форматах лендинг пейдж может размыться внимание посетителя.
  • Дизайн должен быть схож с таким сайтом, пример http…
  • Фон первой страницы должен быть картинкой из скетча.
  • Форма захвата выделяется от фона как в скетче.
  • Цвета кнопок на выбор или как на сайте, пример http…
  • Меню как ссылки с якорями к блокам сайта.
  • Дизайн и размеры секций и блоков как в скетче.

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

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

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

Этап верстки landing page.

Перед поиском верстальщика делаем ТЗ на верстку сайта.

  • Ширина сайта 1000 пикселей.
  • Кодировка charset = utf-8.
  • Шрифт.
  • Без CMS, только html + css + js.
  • По бокам тоже должен быть фон.
  • При размере экрана меньше 1000 пикселей верстка не должна ехать.
  • Текст должен быть текстом не картинкой, также и кнопки.
  • Кнопка обратный звонок должна открывать попап форму с введением телефона и кнопкой заказать.
  • Со всех форм должна прийти заявка на почту.
  • В заявке должен быть источник utm_source это канал продаж и по какой ключевой фразе купили utm_tern.
  • В заявке есть уточнение с какой формы пришел заказ.
  • Таблица с ценой должна быть сверстана таблице, а не быть картинкой.

Ищем на фрилансе исполнителя и пишем сверстать одностраничный сайт.

В описания задания пишем: Необходимо сверстать одностраничный сайт по psd макету. Без CMS, только html + css + js. Картинки прилагаются. ТЗ высылается кандидату. Сверстать как на макете. Две ссылки с примерами верски.

Устанавливаем счетчики.

1). Счетчик яндекс метрики

2). Ставим счетчик гугл аналитика.

Ставим счетчик гугл аналитика.

Копируем код счетчика index.html.

Копируем код счетчика index.html.

3). Счетчик ретаргетинг в контакте. Код берем в вашем аккаунте в пункте меню реклама. Выбираем ретаргетинг и создать пиксель. Код счетчика добавляем в index.html.

Счетчик ретаргетинг в контакте

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

Счетчик топ майл ру

Для чего мы ставим счетчики ретаргетинга.

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

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

Были разобраны основные этапы для примера создания лендинг пейдж. С чего начать, как создать ТЗ и поставить счетчики для landing page.

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

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

Комментарии запрещены