Лендинг своими руками? – Это легче, чем считается

Разбираемся в терминах

Что такое лендинг

Лендинг – одностраничный сайт, который используется для сбора контактных и других типов данных. Лендинги не продвигаются в органическом поиске, и трафик на них идет только через контекстную рекламу и другие платные каналы (таргет, CPA-сети, прямые заходы).

Часто термины лендинг и одностраничный сайт используются как взаимозаменяемые, но это не совсем корректно. Одностраничный сайт может быть информационным (контентным), в то время как лендинг используется только для сбора контактных данных, и никакого полезного контента, с точки зрения поисковой системы, там нет.

«Одностраничник» не всегда является лендингом. Есть еще «одноэкранник» – это лендинг, состоящий из одного экрана, который отображается на десктопе полностью.

Главный элемент сайта – кнопка «Участвовать»

Лендинг актуален в следующих ситуациях:

• продвижение готового товара;
• продвижение услуги или сервиса;
• прогрев аудитории перед запуском продукта;
• сбор заявок для участия в мероприятии;
• презентация компании;
• проведение экспериментов и проверка гипотез среди целевой аудитории.

Зарубежные лендинги обычно гораздо интереснее в плане дизайна и не скованы рамками стандартной структуры

Что такое «конструктор»

Если лендинги путают с одностраничниками, то «конструкторы» успешно смешивают с CMS.

Конструкторы чаще всего используются для создания коммерческих сайтов, включая лендинги на основе готовых шаблонов. Возможности кастомизации и настройки сайта в конструкторах очень сильно ограничены. Конструктор – это не CMS, а так называемый SaaS-сервис (ПО по подписке). Как правило, он имеет полностью закрытый исходный код.

Примеры конструкторов:

• Wix;
• Tilda;
• Google Sites;
• Webstarts;
• Webnode.

А вот CMS – это полноценный инструмент для создания сайта с нуля, позволяющий настроить проект под любые потребности и нужды.

Примеры CMS:

• WordPress;
• Joomla;
• OpenCard;
• typo3;
• Chamilo;
• ImpressPages.

Какие конструкторы подойдут для создания лендинга

Wix

Один из самых раскрученных конструкторов в России и мире. По функционалу на голову выше 90 % конструкторов. Лендинги на Wix получаются красивыми, быстрыми и функциональными.

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

Сейчас в Wix доступно около сотни шаблонов для лендингов. Создать и опубликовать полноценный лендинг можно за 150 рублей в месяц.

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

Reg.ru

Это не только известный регистратор доменных имен и хостинг-провайдер, но и конструктор простых сайтов и лендингов. В категории «Лендинги» здесь доступно более 10 бесплатных шаблонов (правда, они не локализованы и не особо адаптированы под российские реалии). Конструктор сайтов reg.ru доступен бесплатно на весь срок использования, но с ограничением в 10 мб (дисковая квота для развертывания вашего лендинга).

На бесплатном тарифе доступно только 30 шаблонов и 5 лендингов, показывается реклама. Полноценный тариф с более чем 170 шаблонами доступен на тарифе за 1 499 рублей в год.

Конструктор reg.ru удобнее Wix, но по функциональности сильно проигрывает.

Здесь есть только самые необходимые функции (работа с блоками, элементами, текстом, изображениями)

Ulanding

Конструктор заточен под создание лендингов. Простой, имеет три преимущества: быстрая интеграция с «Google Аналитикой», amoCRM и детальная настройка учета лидов. В остальном конструктор мало отличается от других подобных инструментов.

Есть неплохая внутренняя аналитика, которая показывает графики по посетителям, лидам и конверсиям. Что касается шаблонов, здесь их более сотни. Все разбиты по категориям и назначению. Самый простой тариф обойдется в 9 долларов в месяц и позволит управлять пятью лендингами с одного аккаунта.

Каждый вариант лендинга имеет разную эффективность

LPgenerator

Конструктор для создания одностраничных сайтов и лендингов. Один из самых простых и удобных вариантов, который я видел. Шаблонов для лендингов здесь более 200. Текст, элементы страницы, иконки и другую графику можно настроить в один клик. В LPgenerator есть собственная CRM, так что не обязательно пользоваться интеграциями. А еще собственный сервис SMS- и email-рассылок. Базовый тариф (один домен и не более трех страниц) обойдется в 959 рублей в месяц.

Лендинг для кондитерской компании

GetResponse

Многие маркетологи хорошо знакомы с этим брендом. Есть у GetResponse и любопытный конструктор лендингов, который интегрирован в сервис e-mail рассылок. Возможности конструктора GetResponse: работа с блоками на основе готовых шаблонов (более сотни вариантов), свободное изменение кода страницы, интеграция с Google Analytics и встроенные инструменты для проведения А / B-сравнений. Если у вас база e-mail рассылки до 500 подписчиков, использование конструктора будет бесплатным.

Пример шаблона для лендинга GetResponse

Как бесплатно создать сайт на Tilda – пошаговый гайд

Как создать лендинг в конструкторе

Подготовка

«Верстка» сайта в визуальном редакторе конструктора – один из финальных этапов создания лендинга. До него нужно провести подготовительную работу:

• определить сильные стороны, УТП;
• выделить основные сегменты аудитории – текст и дизайн лендингов должен быть разным для каждой группы клиентов;
• найти конкурентов в нише, проанализировать их УТП и ключевые элементы сайтов;
• написать тексты для главной страницы;
• провести прототипирование;
• создать сайт в конструкторе;
• опубликовать его.

Структура

Обычно лендинг строится из смысловых блоков и может выглядеть так:.

• В первом блоке находятся следующие элементы: шапка, уникальное торговое предложение, subtitle и CTA.
• Во втором – описание оффера.
• В третьем и дальше – способы использования продукта, блок «О компании», блок «выгод», экспертиза, доверие, опыт, пошаговая схема, как получить товар или воспользоваться услугами компании.

Или так:

• 1 блок – основная выжимка об оффере.
• 2 блок – преимущества оффера. В этом блоке часто размещается подробное описание товара, мероприятия или услуги.
• 3 блок – доказательства и доверие. Часто размещаются советы и отзывы о товаре.
• 4 блок – контактная форма. Здесь пользователь оставляет данные для связи, обычно – это электронная почта или номер телефона.
• 5 блок – футер. Можно продублировать сведения об организации или разместить CTA.

Как создать лендинг на Wix

Открываем Wix, регистрируемся и проходим авторизацию. Затем попадаем на главный экран личного кабинета (страницу «Мои сайты») и нажимаем «Создать сайт»:

Приступаем к созданию лендинга на Wix

Теперь нужно выбрать категорию шаблона для будущего лендинга:

Лучше изначально определиться с тематикой. Так вы сразу увидите наиболее подходящие по дизайну и функционалу шаблоны

После выбора категории появится новое окно. Мы хотим создать сайт в редакторе, поэтому нажимаем кнопку «Выбрать шаблон»:

Если вы не хотите использовать готовое решение, нажмите «Создать сайт». Прохождение опроса и создание сайта в этом случае займет у вас порядка получаса, при этом сайт все равно будет построен из стандартных блоков. «Выбрать шаблон» – вариант для экономии времени

В правом верхнем углу есть поисковая строка. Вводим в ней слово «Лендинг» и получаем более 20 страниц шаблонов под этот формат сайта:

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

Наводим курсор на понравившийся шаблон и нажимаем кнопку «Редактировать»:

Нажмите «Редактировать», чтобы сразу перейти в редактор, или «Смотреть шаблон», чтобы посмотреть сайт с примененным дизайном

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

Кликнули по кнопке, чтобы изменить ее текст и настроить навигацию

Wix позволяет добавить на лендинг следующие типы объектов:

Доступно более десятка объектов: текст, фото, блоки, боксы, кнопки и так далее

Текст заголовков, кстати, можно форматировать аж до H6 (но не значит, что нужно):

В других конструкторах H3 или H4 – максимум

Разберем навигационное меню Wix подробно. Доступно восемь кнопок (не считая кнопки добавления объекта):

Левое навигационное меню Wix

1. Меню и управление страницами. Здесь можно отредактировать стандартное меню лендинга. Если у вас многостраничный сайт (не-лендинг), в этом разделе вы сможете сделать полноценное меню (главная, FAQ, условия доставки и оплаты, политика сайта), добавить формы регистрации и входа, страницы магазина (страница товара, страница магазина, корзина) и страницы пользователя (мои заказы, мой аккаунт, мои адреса).

Любую страницу можно удалить или отредактировать здесь

2. Дизайн сайта. Здесь вы можете настроить дизайн, в том числе переходы между страницами, фоны, цвета, шрифты, стили страниц.

Мы выбрали стиль шаблона, но его можно кастомизировать

3. Добавить приложение. Приложения – те же плагины (как в других CMS). Они позволяют расширить функционал лендинга, например, добавить чат, секцию комментариев, бронирование, управление билетами и многое другое. Все приложения отсортированы по категориям (маркетинг, коммуникации, магазины, дизайн, услуги, контент).

На главном экране отображаются самые популярные приложения

4. Медиа. Это библиотека, в которую загружаются фото и видео для публикации на сайте. Здесь же есть редактор и видеомейкер. Для лендингов и других сайтов доступны сотни бесплатных стоковых фотографий и видео.

Нажмите «Показать больше», чтобы увидеть весь каталог

5. Вести блог. Вы можете добавить раздел «Блог» на свой сайт. Для лендингов неактуально.

Управление блогом осуществляется в другом приложении

6. Магазин. Полноценные коммерческие сайты могут подключить Wix eCommerce. Этот инструмент позволяет настроить товары, каталоги, скидки, оплату и корзину. Можно отслеживать прием и отправку товаров. Магазин доступен с тарифа «Бизнес и эл. коммерция» – от 400 рублей в месяц.

Настройка Wix Stores начинается с добавления товаров

7. Бизнес-инструменты Ascend. Это многофункциональный модуль, позволяющий управлять SEO (поисковая оптимизация, рассылки, купоны и промо, интеграции), веб-аналитикой, маркетинговыми и финансовыми процессами сайта (интеграции с финансовыми сервисами, запрос цены, счета). Еще здесь есть управление клиентами – от форм и чатов до многозадачности и управления потоками клиентов.

Нажмите кнопку «Начать оптимизацию», чтобы указать ключевые слова вручную или подобрать их автоматически

8. Отобразить слои. Любой сайт Wix состоит из нескольких слоев (шапка / хедер / заголовок, страницы, подвал), и вы можете управлять ими из этого раздела:

Перетаскиваем слой наверх, ближе к хедеру

С меню все! Перейдем к визуалу. Чтобы отредактировать любой элемент на сайте, кликните по нему правой кнопкой и измените значение в появившемся окне. Когда все элементы на первой странице лендинга будут отредактированы, пролистайте ее вниз. Аналогичным образом измените текст и элементы на следующей странице:

Отредактируйте текст и описание второй страницы

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

Можно добавить эффекты, настроить интервалы, вертикальный текст и добавить HTML-тег

Когда все страницы лендинга будут настроены, откройте «Мобильный редактор». Он поможет увидеть лендинг при заходе с мобильного устройства:

Верстка может «полететь» при редактировании первоначального шаблона

Откроется новое окно. Также, как и в версии для десктопа, изменяем элементы в мобильной версии сайта:

Принцип редактирования элементов ничем не отличается

Когда верстка в визуальном редакторе будет завершена, нажмите кнопку «Опубликовать» в правом верхнем углу:

Нажмите эту кнопку

Успех! Теперь наш лендинг доступен на внутреннем домене:

Лучше сразу подключить полноценный домен второго уровня

Wix позволяет подключить ваш собственный домен. Для этого нажмите кнопку «Подключить» и оплатите тариф. За 90 рублей в месяц вы можете подключить один домен, но тогда на вашем сайте будет показываться реклама Wix. Базовый тариф с подключением домена и без рекламы обойдется в 150 рублей в месяц.

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

Инструкция: создаем лендинг на Tilda через Zero Block

Как создать лендинг на LPgenerator

Открываем главную LPgenerator и нажимаем кнопку «Создать лендинг»:

Кликните по оранжевой кнопке

Откроется окно регистрации. Указываем телефон, пароль и электронную почту. Подтверждать код по телефону не нужно.

Попадаем на страницу выбора шаблона. Все они объединены по категориям:

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

В каждом шаблоне текст и другие элементы страницы уже локализованы (в отличие от того же Wix):

Каждый шаблон можно посмотреть в полном размере (нажмите кнопку «Посмотреть»)

Мы решили создать лендинг на основе шаблона «Загородные дома». Когда вы выберете вариант, подходящий вам, нажимайте кнопку «Создать сайт из этого шаблона»:

Создаем сайт на основе выбранного шаблона

Попадаем на экран визуального редактора, где можно отредактировать любой элемент страницы:

Режим визуального редактора LPgenerator

Теперь посмотрим на основные инструменты LPgenerator:

Основные разделы конструктора LPgenerator

1. Здесь происходит управление шаблонами. Кроме готовых шаблонов можно самостоятельно создать уникальный дизайн или заказать его у специалистов. А еще есть шаблоны для страниц FB.
2. В этом разделе собраны красивые мобильные страницы, которые уже имеют контактные формы и подготовлены к превращению мобильного трафика в лиды (CtC, контактные формы, мобильные лендинги).
3. Здесь можно привязать собственный домен (включая почтовый) к созданному лендингу. Купить полноценный домен можно прямо из интерфейса LPgenerator. Удобно, что DNS-адрес привязывается сразу после покупки домена.
4. Эксперименты. Преимущество LPgenerator в том, что вы можете создать несколько вариаций одного лендинга и сразу запустить A / B-эксперимент. Здесь есть все, чтобы определить самый эффективный лендинг + можно выбрать % показов для всех вариантов лендинга и внедрить собственные скрипты. Результаты сплита сохраняются в отдельный отчет.
5. Встроенная веб-аналитика позволит получить все данные по эффективности созданного лендинга. Как и во «взрослых» инструментах, здесь есть определение стоимости клика, лида и даже инструменты для вычисления суммарной окупаемости инвестиций. Изучая воронку на уровне параметров трафика, вы найдете лучшие варианты лендинга и сможете увеличить его эффективность в долгосрочной перспективе.
6. Интеграции с другими сервисами. Уже «из коробки» вы сможете связать созданный лендинг с Bitrix, MailChimp, amoCRM и другими инструментами для командной работы, рассылок, платежей и CRM.
7. Удобное и быстрое решение для управления заявками. Все лиды можно отсортировать по статусу и другим параметрам, есть экспорт заявок, оповещения и дополнительные инструменты.

Вернемся в визуальный редактор. В итоге у нас получилась такая страница:

Эту посадочную страницу мы сделали на основе готового шаблона

Если вам нужно добавить на страницу новый блок, кликните по плюсу в левом углу экрана:

Добавление нового блока

В LPgenerator доступны следующие виды блоков:

Чуть меньше чем у Wix, но для стандартных лендингов хватит с лихвой

Останавливаться подробнее на описании каждого блока не будем, так как они односложные. Просто нажмите нужный элемент и тяните его вправо (в область страницы), затем настройте параметры внутри всплывающего окна.

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

Нажмите эту кнопку

Шрифты по всему сайту и цвета вы можете поменять здесь:

Доступны заголовки H1 / H2 / H3 / H4, крупный, обычный и маленький текст

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

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

Аналогично редактируются все элементы лендинга, например, форма:

Обратите внимание на вкладки вверху окна: можно настроить дизайн, действия, цели и добавить интеграцию (PayPal, Bitrix24, GetResponse и другие)

Кликнув по изображению или иконке, вы откроете медиа-библиотеку конструктора:

Все изображения отсортированы по сценарию использования (иконки, эмодзи, социальные сети, картинки на странице)

Нажав кнопку «Добавить секцию» внизу страницы, вы можете создать новый элемент на основе готового блока:

Нажмите эту кнопку

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

Мы добавили секцию комментариев в самом низу страницы:

Все секции отсортированы по категориям (вкладки, услуги, первый экран, преимущества)

Перейдя на вкладку «Шаблоны», вы сможете выбрать секцию из готовых вариантов, тоже отсортированных по категориям:

Доступно пять готовых сценариев для видеосекции

После финальной настройки лендинга нажмите кнопку «Запустить» в верхнем правом углу экрана. Сайт станет доступен любому пользователю, и можно начинать лить на него трафик.

Для запуска сайта и доступа ко всему функционалу LPgenerator нужно выбрать тариф, иначе опубликовать лендинг в интернете не получится. Самый доступный тариф стоит 690 рублей в месяц (можно подключить собственный домен):

«Бизнес» – оптимальный вариант для эффективного лендинга

Резюме

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

Целевая аудитория – выделена, сильные стороны оффера – обозначены, конкуренты – внимательно проанализированы, а текст на главную написан с учетом «болей» ЦА? Отлично, теперь можно приступать к созданию прототипа и работе в конструкторе.

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

• мобильная версия лендинга открывается и работает корректно;
• контакты организации указаны на главной странице и в них нет опечаток;
• в отдельный блок выделены все УТП;
• форма для сбора лидов работает корректно (протестируйте ее, попробовав передать собственные контактные данные);
• заголовок сайта не перегружен лишней информацией.