Ура! Начинаем создавать лендинг! Коротко о структуре, чтобы понимать как это работает.

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

У посетителя есть проблема – у Вас есть решение!

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

Структура Landing Page


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

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

1 секунда без права на ошибку?

Первый экран – это высота экрана ваших посетителей, которая в 90% детскопного трафика составляет в среднем 700 пикселей. Сейчас мы живем в эпоху скролинга. Вспомните, как мы ищем что-то в интернете? Открываем Яндекс или Google, вбиваем запрос и открываем 7 - 10 вкладок из поисковой выдачи. Потом начинаем их просматривать и тратим 3 - 6 секунд, чтобы решить, остаться смотреть что-то на этой странице или уйти и искать дальше. Именно в этот момент происходит оценка первого экрана. Насколько он соответствует тому, что мы ищем и насколько он вызывает интерес. Если информация, которая нам нужна и если сайт не пугает, то мы остаемся скролить, если же что-то не нравиться, то мы уходим. Тоже самое и с рекламой. Вы тратите деньги на рекламу, а пользователь за 3 - 6 секунд оценивает тут круто или здесь полная хрень. Первый экран самое важное, что есть. 70% времени создания сайта нужно тратить на первый экран.

Первый экран самое важное, что есть. 70% времени создания сайта нужно тратить на первый экран.

Это как знакомство с девушкой. Это Вы, Ваше лицо, Ваша одежда, 5 первых слов - это и есть тот самый первый экран!

Как оформить первый экран?

Обычно первый экран состоит из:

  1. Логотип (вариантивно)
  2. Дескрипт
  3. Контакт
  4. Меню (по необходимости)
  5. Заголовок
  6. Подзаголовок (вариативно)
  7. Изображение/видео продукта
  8. CTA (Форма или Кнопка)
  9. Идентификация
  10. Выгоды (вариативно)

Итак поехали разбираться.

1. Логотип - текст или картинка вашей компании, необязательно, но хорошо если есть.

2. Дескрипт (Дескрипт должен отвечать на вопрос вашего посетителя: “Куда я попал? Что делает ваша компания?»)
Чек-лист:
  • Должен быть короткий, в идеале 2 - 4 слова, максимум 6.
  • Точно описывает то, чем Вы занимаетесь с конкретикой в нише. (Конструктор Landing Page, Организация профессиональных конференций)
  • Точно описывает вашу специализацию (Свадебная фотосъемка, Агентство элитной недвижимости)
  • Может содержать идентификацию (Консультации для начинающих бизнесменов, Тренинги для топ-менеджеров)
  • Может иметь выгоду (Отдел продаж под ключ)

3. Контакт – обычно телефонный номер и кнопка заказать звонок. Можно указать любой другой способ связи. Где-то хорошо работает whatsapp и viber. Но контакт всегда повышает к Вам доверие. У людей складывается ощущение, что они в любой момент могу позвонить, если что не так. И лучше им ответить.

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

Я же обещал, что Вы получите продающий лендинг в конце курса? Так давайте сразу закреплять то, что мы узнали. И сразу начнем это делать!

У нас есть сервис для тестирования гипотез и построения системы продаж на одностраничниках. Есть очень простой конструктор одностраничников, который может делать очень много. Давайте откроем параллельно вкладку в браузере и начнем создавать страницу, чтобы после завершения курса у Вас была своя продающая страница! Там всё достаточно просто, разберетесь за 10 минут. Создать страницу Вы можете абсолютно бесплатно, платить за это не нужно. Если вдруг что-то будет непонятно, пишите в тех. поддержку support@spagece.com обязательно поможем.

Что сделать?
  1. Перейти в редактор
  2. Сделать дескрипт, логотип, кнопку заказать звонок и написать телефон

Перейти в редактор и создать первый экран

5. Самая важная часть Landing Page - Заголовок

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

Технология 1. Как сделать продающий заголовок? Техника 4U.

Майкл Мастерсон - предприниматель, которой придумал и внедрил данную технику и она буквально взорвала рынок продаж. С помощью неё многие предприниматели удваивали, утраивали и увеличивали конверсию сайтов открываемость писем e-mail рассылок, изменяя только заголовок!

Usefulness (Полезность)

Ваше предложение должно быть очевидно полезным для ваших будущих клиентов.Люди не любят думать. Напишите какую Выгоду получит человек для себя если закажет у Вас? Почему только у Вас он решит свою проблему так, как ему нужно? Продавайте не дрель, а дырку в стене. Помните метод 3 почему? Единственно, что нужно от Вас – так это решение проблемы посетителя. Это 1U.

Urgency (Срочность или Актуальность)

Актуальность, это есть соответствие Вашего заголовка и проблемы клиента, которое заставляет удержать на себе внимание. Если Вы что-то ищите, то скорее всего Вам это нужно, не послезавтра, а сегодня, а лучше вчера. Большинству горячих клиентов из рекламного трафика (например, Яндекс Директ, Google Adwords) нужно то, что они ищут прямо сейчас. Дайте и конкретную цифру, когда? Поэтому актуальность и срочность это 2U.

Uniqueness (Уникальность)

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

Почему покупают на Landing Page
Процесс изучения посетителями одностраничника.

Понимаете? Если Ваш заголовок похож на тот, который уже где то видели, все, с сайта уйдут и даже читать не будут. Будьте уникальными! Все продают красный кирпич, а Вы продавайте зеленые, фиолетовый, да хоть с бабочками. Дайте Вашим клиентам что-то новое. Покажите технологии или что-то такое, за счет чего Вы решите его проблему лучшим на рынке способом. Это 3U.

Ultra-specificity (Ультра-специфичность)

Конкретизируйте в цифрах полезность. Важно именно конкретно в цифрах и как именно Вы решите его проблему? Сколько, чего и где получит Ваш посетитель? Это 4U.

Как сделать заголовок? На примерах ниже станет понятнее.

Исходный заголовок:
- Дизайн интерьеров

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

Добавим уникальности. На сколько удобнее?
- Разработаем дизайн интерьера, в который захочется возвращаться.

Добавим срочность. Когда?
- Разработаем дизайн интерьера в который Вы захотите возвращаться сэкономив 30% бюджета за 2 недели.

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

Сравним:
- Дизайн интерьеров на заказ.
- Профессионалы индивидуально разработают
дизайн интерьера, в который Вы захотите
возвращаться, сэкономив 30% бюджета за 2 недели.

Нравиться? Разница огромна, как и эффективность в продажах.

Пример 2.

Исходный заголовок:
- Купить шины.

Добавляем пользу. Зачем шины? Безопасно ездить, или гонять, зависит от ЦА.
- Увеличьте безопасность автомобиля на дороге.

Ультра специфичность. На сколько?
- Увеличьте безопасность автомобиля на дороге на 35%.

Добавим срочность. Как быстро?
- Увеличьте безопасность автомобиля на дороге на 35% за 1 час.

Уникальность. Каким образом?
- Увеличьте безопасность автомобиля на дороге на 35% за 1 час за счет инновационной резины шин “Шинус”.

Сравним:
- Купить самые лучшие шины у нас.
- Увеличьте безопасность автомобиля на дороге на 35% за 1 час за счет инновационной резины шин “Шинус”.

Работает магически, неправда ли?

Думаем и тренируемся писать. Нужен результат? Используйте только 4U, а не 1U, 2U или 3U.

Используя технику 4U Вы моментально обгоните 97% Ваших конкурентов.

Что сделать?
- Написать 5 заголовков по технике 4U.
- Добавить в интеллектуальную карту в раздел заголовок.


Технология 2 по созданию Заголовка.

Выгода + Выгода + Выгода

Просто комбинируете выгоды, которые мы определили раньше.

Например:

Зарабатывайте на 30% больше
уже через 1 день после аудита
сайта профессионалами.

Делайте молочные коктейли
за 1 минуту у себя дома с блендером.

Увеличим прибыль вашего сайта в 2 раза
С технологией создания заголовков по 4U.


Технология 3 по созданию Заголовка.

Сделай минимальные усилия – получи максимальные результаты.

Примеры:

Как продать автомобиль на 10%
выгоднее не выходя из дома за 3 часа.

Как заработать 1000 рублей лежа на диване за 1 день.

Как увеличить конверсию в 2 раза
за 10 минут без вложений?


5. Заголовок. Не забыли ещё про первый экран? Итак мы научились создавать крутые заголовки.
Чек-лист хорошего заголовка:
  • Присутствуют мощные выгоды Вашего продукта
  • Возбуждает интерес/интригует/захватывает/привлекает внимание
  • Конкретность в вашего предложения в цифрах
  • Говорите о том, что получит клиент
  • Содержит эмоцию

Пример, как это может выглядеть:
Пример заголовка в шапке одностраничника
Пример заголовка на первом экране Landing Page.

Теперь самое время добавить его на наш первый экран. Если Вы не закрепляете полученный материал на практике. То пользы с курса Вы не получите. Если ещё не воспользовались редактором. Заходим по кнопке ниже, регистрируемся и создаем первый экран.


Что сделать?
- Зайти в редактор.
- Добавить заголовок на первый экран.

Перейти в редактор и добавить заголовок.

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

  • Описать подробнее, чем Вы занимаетесь, если сложный продукт или услуга.
  • Выделить еще одну значимую выгоду.
  • Усилить боль клиента.
Например:

Заголовок такой - Зарабатывайте на 30% больше уже через 1 день после аудита сайта профессионалами.

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

Пример, как это может выглядеть:
Пример заголовка и подзаголвока в шапке одностраничника

Что сделать?
- Зайти в редактор.
- Добавить подзаголовок на первый экран.

Перейти в редактор и добавить заголовок.

7. Изображение должно быть вставлено с какой-либо целью. Не нужно просто так лепить кучу непонятных картинок, типа для дизайна. К фоновым изображениям это также относится!

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

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

Что же должна делать картинка?

  • Отражать ценность, пользу, особенности продукта.
  • Подтверждать выгоду.
  • Закрывать возражение (расскажу дальше).
  • Показать процесс или результат взаимодействия с продуктом.
  • Вызывать эмоцию, которая должна совпадать с продуктом.
  • Если человек, то внешность в том регионе, где работаете.
  • Глаза смотрят либо прямо на пользователя, либо на CTA.
  • Реальное фото лучше рисунка на фотобанке.

Где искать изображения?
  • Pexels - Очень классные бесплатные фото
  • All The Free Stock - Тоже классные бесплатные фото
  • Поиск картинок в Google на анлийском, переводим что нужно в переводчике и вперед
Примеры, как это может выглядеть:
Пример первого экрана для заголовка и изображения Landing Page

Пример первого экрана для заголовка и изображения Landing Page
Что сделать?
  1. Зайти в редактор
  2. Добавить изображение на фон или рядом

Перейти в редактор и добавить фон или картинку.

8.А. Кнопка - очень важный элемент на странице. Ведь на ней мы пишем призыв к действию. И именно кнопка конвертирует посетителя в следующий шаг воронки.
Чек-лист кнопки:

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

С кнопкой все просто. Пишем на ней тот призыв к действию (CTA), который мы определили раньше из воронки продаж.
Пример, как это может выглядеть:
Пример кнопки на первом экране Landing Page
Пример:

Хорошо
- Получить консультацию
- Узнать больше
- Получить мой подарок
- Увеличить продажи
- Получить бесплатно
- Принять участие

Забудьте о кнопках:
- Отправить
- Заказать
- Купить

8.Б. Форма – специальная штука, в которой пользователь заполняет какие-то данные. Форма состоит из:

  1. Заголовок
  2. Подзаголовок
  3. Поля для ввода
  4. Кнопка
  5. Подпись
  6. CTA + Выгода

Пример формы в блоге одного из самых крутых западных маркетологов Нила Пателя :
Пример правильной формы для Landing Page

Заголовок формы - это CTA, который сделали раньше. Что Вы предлагаете посетителю? Определитесь и пишите в заголовок формы.

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

Поля – данные которые Вам критически необходимы, чтобы потом связываться с клиентом. Чем больше полей, тем меньше конверсия. Самое оптимальное два поля, e-mail или телефон плюс имя.

Поля контактов (телефон/e-mail/skype/профиль в социальных сетях) Что-то одно должно быть обязательным к заполнению. Остальные поля могут быть не обязательными, например, имя, адрес.

Кнопка описывает призыв к действию. Что человек получит когда нажмет на нее? Что случиться после нажатия?.

Подпись - последний шанс, развеять сомнения пользователя. Что писать? Социальное доказательство (более 3000 подписчиков), сроки (перезвоним через 5 минут), выгоды (бесплатно), важные детали (14 дней бесплатный период).

Пример формы на первом экране Landing Page

Что сделать?
  1. Зайти в редактор
  2. Добавить кнопку или форму на свой первый экран

Перейти в редактор и добавить кнопку/форму

9. Идентификацией вы помогаете понять Вашим посетителям для них это продукт или нет. Работает Вы с такими как они или нет. Сразу в лоб, без объяснений и вычитывания всего лендинга. Клиентам не нужно разбираться, Вы экономите их время, они говорят "спасибо". Это сближает Вас с клиентами и увеличивает продажи.

Примеры:

Для кого подойдет?
- Для владельцев бизнеса
- Для начинающего бизнеса
- Для владельцев веб-студий

Для кого не подойдет?
- Для дачников
- Для домохозяек
- Для автовладельцев
Примеры, как это может выглядеть:
Пример идентификации на Landing Page

Пример идентификации на Landing Page
Что сделать?
  1. Зайти в редактор
  2. Добавить идентификацию на первый экран

Перейти в редактор и добавить идентификацию

10. Выгоды. Если осталось место, или вместо картинки использовали фоновую картинку, можно добавить еще 2 - 3 выгоды.

Сравните:

С нами Вы сильно увеличите продажи.
Сильно это как?
С нами Вы увеличите продажи в 2 раза.
С нами Вы увеличите продажи на 30%.
Сразу понятно на сколько.
Пример, как это может выглядеть:
Пример выгод на Landing Page

Что сделать?
  1. Зайти в редактор
  2. Добавить еще 2 - 3 выгоды

Перейти в редактор и добавить еще 2 - 3 выгоды

Почему должны присутствовать именно эти элементы?

Мы проанализировали сотни высококонверсионных сайтов, сами создали десятки. Во-первых это гарантировано работает. Во-вторых к такому уже привыкли клиенты, а значит это их не пугает. И не спрашивайте где уникальность? Она должна быть в вашем УТП, заголовке и дизайне, а не в наличии и отсутствии обязательных элементов.

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

Сделайте Landing page за 5 минут
протестируйте идею и получайте заказы сегодня
После регистрации получите безлимитный тестовый период
При нажатии «Создать продающий Landing page» вы соглашаетесь с правилами сервиса