• База знаний
  • /
  • Блог
  • /
  • Wiki
  • /
+380 (44) 364 05 71

Пример создания посадочной страницы с помощью конструктора

Оглавление:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор шаблона для лендинга курсов водителей

 

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

Как просмотреть шаблон лендинга для он-лайн конструктора

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

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

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

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

Создаем лендинг автошколы - живой пример

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

Настраиваем допонительные параметры на конструкторе

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

 

Открываем линейки, которые показывают размеры картинки и ее положение на странице

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

Релактируем текстовые блоки двойным кликом

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

Замена главного фото на шаблоне лендинга

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

Как выбрать картинку из галлереи изображений

 

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

Пройдемся по опциям верхнего меню конструктора

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

Как добавить или удалить пункты меню

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

Как добавит или удалить блок на лендинге

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

Как добавить кнопку на лендинг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавляем название сайта

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

Скрываем меню с сайта, который сделан на конструкторе

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

Установка записи о утп

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

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

Как редактрировать главній блок на странице

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

Редактирование блока преимуществ

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

Редактируем стандартный блок «О нас»

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

Настраиваем форму "контакты"

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

Настраиваем формы "контакты" 2

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

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

 

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

Добавление блока с отзывами

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

Добавление мотивирующего блока с информацией, что до окончания время и места ограничены

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

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

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

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

  • цель landing page;

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

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

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

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

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

Протестировать конструктор 7 дней бесплатно

Дата: 21.09.2020
Автор: FREEhost.UA
Голосование

Авторам статьи важно Ваше мнение. Будем рады его обсудить с Вами:

comments powered by Disqus
Спасибо, что выбираете FREEhost.UA