Оглавление:

• Сайт для нового курса автошколы
• Немного теории: что такое лендинг и почему мы выбрали его для проекта Александра
• Конструктор лендингов: первые шаги
• Продумываем структуру лендинга
• Настройка landing page в конструкторе: пошаговая инструкция
• Вместо заключения

Увеличить продажи, нарастить клиентов или подписчиков, добиться от аудитории необходимых целевых действий — все это можно сделать с помощью landing page. Лендинг — маркетинговый инструмент, который выглядит как одностраничный сайт с четкой структурой и лаконичной формой подачи информации.

Для создания такого сайта не нужно нанимать разработчика. Есть простые конструкторы лендинга, с которыми сможет разобраться даже начинающий пользователь. Один из них предоставляет клиентам компания FREEhost.UA Разберемся, как работает этот конструктор на живом примере.

Сайт для нового курса автошколы

К нам обратился Александр — владелец небольшой автошколы в Запорожье. Школа работает 2 года. 70% клиентов узнали о ней из уличной рекламы, еще около 30% обращаются по рекомендациям выпускников. Размещать уличную рекламу дорого, и Александр захотел испытать новые инструменты для привлечения клиентов. Возможно, это должен быть сайт, продвигаемый через рекламные объявления в интернете.

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

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

Немного теории: что такое лендинг и почему мы выбрали его для проекта Александра

По сути, landing page — это веб-страница. Она может быть самостоятельной или входить в структуру большого сайта. Обычно лендинги создают на ограниченный срок для достижения конкретной цели: например, продажи продукта или услуги. Как только задача решена, сайт можно закрыть.

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

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

У landing page должен быть конкретный посыл: купить, записаться на курс, подписаться, оставить контакты и т.п. В нашем случае речь идет о сборе контактных данных заинтересованных в обучении пользователей (лидов). Далее с ними будет работать менеджер автошколы: обзванивать, обсуждать подробности, договариваться об условиях.

Итак, цели определены, тип сайта выбран — приступаем.

Конструктор лендингов: первые шаги

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

Александр работает в сфере образования. В одноименной категории находим несколько шаблонов. Один из них называется «Автошкола». Попробуем поработать с ним.

 

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

Видим сайт с простой структурой и лаконичным дизайном.

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

После этого открывается конструктор лендинга онлайн. Мы видим страницу сайта в поле для редактирования, а над ним — набор кнопок и команд.

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

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

 

При двойном клике на текстовом поле открывается строка для ввода и редактирования текста. Можно выбирать шрифт и стиль, добавлять списки и ссылки:

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

Нажав на саму картинку под надписью «Изображение», можем открыть галерею доступных фото. Здесь же есть опции для загрузки собственного изображения.

 

Теперь пройдемся по опциям верхнего меню конструктора. Мы создаем лендинг пейдж, поэтому нам нужен сайт с одной страницей. Переходим на “Главная/Редактировать»:

Здесь можем убрать ненужные пункты меню (или, если нужно, добавить собственные).

У лендинга — блочная структура. Он, как конструктор LEGO, состоит из отдельных элементов. Нажав на кнопку «Блоки» в верхнем меню, мы откроем набор таких элементов для добавления на страницу:

По такому же принципу можно добавлять кнопки для призыва к действию — еще один обязательный элемент landing page:

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

Мы рассмотрели базовый функционал. Разберемся с ним подробнее, когда приступим к редактированию и настройке шаблона.

Продумываем структуру лендинга

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

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

• заголовок с уникальным торговым предложением. В нем нужно четко определить, что продает Александр и сделать акцент на выгоде для клиента;

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

• информация о продукте или бренде;

• элементы доверия: отзывы, сертификаты и другие доказательства эффективной работы;

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

• контактные данные: с интерактивной схемой проезда, физическим адресом, номерами телефонов и т.п.

По такой структуре и настроим в конструкторе лендинг пейдж для Александра.

Настройка landing page в конструкторе: пошаговая инструкция

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

Далее добавляем название автошколы Александра:

Меню нам не нужно, поэтому просто скрываем этот элемент через контекстное меню:

Следующий слайд — заголовок с УТП. Меняем шаблонный текст на фразу, предложенную Александром:

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

Меняем главное фото на более подходящее изображение из бесплатной тематической галереи конструктора:

Следующий шаг — блок преимуществ. Александр предложил три базовых выгоды для студентов своего курса. Визуализируем их на лендинге:

Далее нужно рассказать о школе. Используем стандартный блок «О нас» из меню и заполняем его:

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

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

Теперь добавим блок с контактными данными автошколы. И опять воспользуемся типовым решением:

 

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

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

Используя удобный конструктор лендинга в Украине, мы за 15 минут создали прототип целевой страницы. Его можно дополнять и совершенствовать, пользуясь доступным функционалом. В процессе Александр разобрался в настройках и вызвался усовершенствовать страницу самостоятельно.

Вместо заключения

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

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

• цель landing page;

• конкретное ожидаемое целевое действие;

• целевую аудиторию;

• факторы привлечения

Работа с конструктором занимает минимум времени, а любые ошибки легко исправить. Это намного выгоднее, чем заказывать разработку. Клиенты компании FREEhost.UA могут воспользоваться современным простым конструктором, создать страницу и легко разместить ее в интернете, пользуясь функционалом провайдера.

Дата: 21.09.2020 Автор: FREEhost.UA

Голосование 1 2 3 4 5