Посадочные страницы в инфобизнесе создаются для конкретных действий либо для записи в онлайн-школу. Ключевыми особенностями являются максимальная краткость и побуждение к действию. Красивый и работающий лендинг для вебинара или курса можно сделать самостоятельно в одном из конструкторов. Расскажем об этом на примере простого сервиса LPMotor.
Какой конструктор использовать
Все онлайн-конструкторы можно условно поделить на универсальные и специализированные. Первый вид позволяет создать любой сайт без навыков программирования. Это может быть, как простая подписная страница, так и полноценный интернет-магазин с каталогом товаров и формой заказа. Примеры других универсальных сервисов:
- Tilda;
- Wix;
- Битрикс24;
- Flexbe;
- Nethouse.
Специализированные конструкторы нацелены на конкретный вид сайтов. В них меньше возможностей, но зато все функции проработаны именно для заявленной цели.
Преимущества конструкторов лендингов:
- больше шаблонов для одностраничников;
- больше функций для технического наполнения страницы;
- нет лишних кнопок, более простой интерфейс;
- можно провести A/В-тестирование — проверить, как меняется конверсия в зависимости от изменения текста или дизайна страницы.
Есть ещё конструкторы, которые предлагают платформы для онлайн-школ, например, GetCourse. Но они являются дополнительной возможностью для клиентов, поэтому обычно таким конструкторам не уделяется должного внимания со стороны разработчиков. Основная цель онлайн-платформ — предоставить удобный функционал для проведения обучения. А привлечение клиентов — задача других сервисов.
Базовые принципы дизайна лендинга
Главный тренд интернета на сегодняшний день — упрощение. Поэтому самостоятельно сделать лендинг для вебинара или онлайн-курса не так сложно. Разберём основные принципы дизайна.
Секции
Посадочная страница — своего рода презентация вашего проекта либо мероприятия. В качестве слайдов здесь выступают секции. Это смысловые блоки, каждый из которых отвечает на какой-то один вопрос.
Нельзя вмещать в одну секцию несколько проблем или вопросов. Главный принцип: одна секция — один вопрос.
Внутри секции обязательно должен быть заголовок и контент. Располагать его можно по-разному. Но нужно придерживаться логики: подводить клиента к определённой идее.
Между секциями обязательно должны быть отступы. Их размер должен быть везде одинаков, но меньше, чем расстояния внутри элементов секции. Так страница будет лучше восприниматься как единое целое.
Чередование элементов
Чтобы избежать монотонности, в дизайне используют так называемый ритм. Это чередование цветов фона секций. Обычно это 2 достаточно контрастных цвета, например, белый и серый. Но особо важные секции можно выделить ярким — оранжевым или жёлтым.
Ещё один важный момент — разделители на странице. Можно использовать прямые или фигурные линии. Но при этом нежелательно размещать одновременно несколько видов, это ухудшит восприятие.
Размер и цвет заголовков
Новая мысль должна начинаться с заголовка. Во всех секциях они должны быть одинакового размера. При этом заголовку страницы нужно назначить тег H1, а секций — Н2. Подзаголовки одного уровня тоже должны быть одинакового размера. 
Заголовки могут быть цветными. Но помните, что цвет сложно вписать в общий дизайн страницы. Здесь работает тот же принцип, что и с размером: цвета заголовков разных секций должны быть одинаковыми.
Сочетаемость блоков
Правило, на которое не все обращают внимание: несколько секций подряд с колонками ухудшают восприятие. Особенно, если чередуется разное количество колонок. Если нет опыта в дизайне, лучше либо вовсе не использовать колонки, либо чередовать их с текстом. 
Визуальные акценты
Важные мысли должны быть самыми заметными на странице. Для этого на них нужно сделать акценты при помощи размера или цвета. Это может быть яркая кнопка на контрастном фоне либо крупный заголовок.
Как ещё расставить акценты:
- близкое по смыслу должно находиться рядом: используйте отступы между различными по смыслу элементами текста;
- используйте пустое пространство, оно улучшает восприятие.
Обложка, фон и текст
Самое сложное в дизайне — гармонично собрать воедино все элементы. Воспользуйтесь советами:
- Не подбирайте для обложки пёстрое фото. Желательно выбрать картинку одного тона. На ней должны быть и крупные объекты, и пустое пространство. Размер деталей на фото не должен совпадать с размером текста, иначе всё будет сливаться.
- Текст нельзя располагать на значимых объектах фотографии. Идеально — на пустом пространстве.
- Используйте тёмный или цветной фильтр для фото либо примените к нему какой-то стиль. Тексту добавьте тень.
- Хороший вариант — использовать иллюстрацию вместо фото.
- Если нет подходящего фото или иллюстрации, просто используйте белый фон. Но тогда нужно поработать с текстовой композицией. Также можно применить цветной фон с градиентом и геометрическими фигурами. Но геометрию нужно использовать с осторожностью.
- Не перегружайте обложку текстом. Только заголовок, подзаголовок и кнопка действия.
Цветовые решения
Основное правило — не более 2 цветов в лендинге. Причём тот, который используется для акцентов, должен занимать не более 10% страницы.
При выборе цветовых сочетаний можно воспользоваться готовыми палитрами. Например, на сайте Color Claim много 2-цветный сочетаний, которые удачно подходят для лендинга. 
Для подбора градиентов есть неплохой сайт Webgradients.
Для некоторых лендингов правило 2-цветности не очень подходит. Это проекты, где важна атмосфера, эмоции клиента. В этих случаях можно использовать более яркую расцветку.
Как сделать лендинг на примере конструктора LPMotor
Мы рассмотрели базовые принципы дизайна посадочных страниц. На практике придётся столкнуться с множеством деталей: сочетание шрифтов, размеров текста, оформление изображений, иконок, навигации и т. д. Новичкам рекомендуется придерживаться готовых шаблонов конструкторов, внося минимум изменений. Рассмотрим создание простой страницы для записи на вебинар на примере бесплатного сервиса LPMotor.
Регистрация и выбор шаблона
Чтобы бесплатно опробовать сервис, нужно зарегистрироваться. Для этого нужно ввести e-mail и придумать пароль. 
Однако для завершения регистрации придётся ввести номер мобильного телефона, на который придёт код.
Далее нужно выбрать шаблон страницы из предложенных вариантов. Здесь есть 12 вариантов для инфобизнеса. Выберем шаблон для вебинара «Как зарабатывать из дома». Можно выбрать пустой шаблон, но тогда придётся наполнять сайт контентом с нуля, а это без должного опыта делать не рекомендуется.
Редактирование шаблона
Выбранный нами шаблон содержит минимум информации:
- дату мероприятия;
- название;
- кому будет интересно;
- ссылки на соцсети;
- две кнопки для записи.
Каждый из блоков можно редактировать: менять текст, изображение, размер и фон. Достаточно подвести курсор к нужному элементу и внести изменения. Например, в заголовке сделан акцент на молодых мамах. Это очень узкая целевая аудитория. Можно убрать её, а акцент сделать именно на удалённом заработке.
Для начала скопируем цвет акцента.
Далее удалим текст «молодой маме» и выделим скопированным цветом «из дома».
Также можно заменить иллюстрацию. Для этого нужно подвести курсор к иллюстрации и выбрать картинку из каталога. Можно использовать свою. 
В таком виде лендинг уже можно использовать. Чтобы добавить больше информации, воспользуйтесь панелью слева. Выберите блок, который хотите добавить, и перетащите его на основной экран. Проще всего воспользоваться готовыми шаблонами секций. 
После добавления секции с текстом вид страницы получится не очень красивым. Поэтому лучше удалить из первой секции лишние элементы и чуть позже добавить их ниже. После этого нужно настроить оформление. На панели справа отображаются настройки дизайна выделенной секции. Возможности достаточно широкие: можно настроить фон, переходы, наложение цвета. 
Добавим ещё несколько блоков, настроим переходы между ними по типу «треугольник вниз» и сделаем чередование серого и белого цветов фона. Во вновь добавленных секциях используем те же цвета, что и в первой: синий для кнопок, оранжевый для акцентов. Посмотрим, что получилось, нажав на кнопку предпросмотра в правом верхнем углу. 
Получившуюся страницу можно дополнить нужной вам информацией, добавить ещё секции. Порядок действий будет аналогичен тому, что был описан выше.
Публикация и дальнейшая работа с лендингом
Чтобы опубликовать лендинг, нужно нажать кнопку «Запустить» в правом верхнем углу. В бесплатной версии это недоступно, нужно подключить один из тарифов. 
Самый дешёвый вариант обойдётся в 466₽ в месяц. Но обратите внимание, что в нём недоступны А/В-тестирование и автоворонки продаж. А это важные элементы продвижения страницы. Цены действуют при оплате на год вперёд. Если платить за каждый месяц, то цена будет уже 750₽. 
Все заявки, отправленные с сайта, попадают в одноимённый раздел. Их можно отсортировать по разным критериям, а также убрать лишние столбцы.
Автоворонки платные, но можно создать демо-версию, чтобы опробовать все функции сервиса. 
Воронка собирается из блоков. Каждый из них содержит меню исходящих действий. Разобраться в настройках достаточно просто. Например, создадим воронку, по которой в ответ на регистрацию на сайте клиенту будет приходить письмо на указанную электронную почту:
- Добавляем в автоворонку наш сайт.
- Нажимаем на «плюсик» внизу появившегося блока и выбираем «Выбрать формы».
- Далее на загрузившемся сайте выделяем кнопку «Зарегистрироваться» и нажимаем «Выбрать» в правом верхнем углу.
- Получаем следующую схему:
- Теперь нужно добавить действие «Заполнил форму».
- И сразу же в появившемся окне выбираем реакцию «Письмо».
- Теперь нужно нажать на три точки в правом верхнем углу и выбрать пункт «Редактировать».
- Далее нужно заполнить форму. Обязательно написать текст и тему письма. По желанию можно добавить изображения и прикрепить файлы.
На этом простейшая автоворонка готова. Её можно продолжить или дополнить другими блоками. Возможности сервиса в этом достаточно широки. 
Когда воронка готова, нужно нажать кнопку «Запустить» и заполнить данные для e-mail рассылки. 
В личном кабинете LPMotor есть обучающий раздел, где много статей, видео и ссылки на сообщества в соцсетях. 
Конструкторы лендингов содержат в себе разработанные профессионалами элементы дизайна. Собрать их в хороший одностраничник не составит труда. Главное, придерживаться основных принципов дизайна: краткость, чёткость, наличие пустого пространства, сочетание размеров и цветов. После запуска работу с лендингом вебинара или онлайн-курса можно автоматизировать. Но обычно такая возможность входит в более дорогие тарифные планы.
Подробнее...