mail@texterra.ru
Заказать звонок
Заказать услугу
Позвонить: 8 (800) 775-16-41
Заказать звонок

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

Используем конструкторы Wix и LPgenerator.

Лендинг своими руками? Без программистов и дизайнеров? – Это легче, чем считается
Дата публикации: 14 февраля 2022
Сергей Ломакин
3 976
Время чтения: 32 минуты
Лендинг своими руками? Без программистов и дизайнеров? – Это легче, чем считается Редакция «Текстерры»
Редакция «Текстерры»

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

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

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

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

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

Пример многоэкранного лендинга, который используется для анонса мероприятия

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

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

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

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

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

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

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

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

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

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

Примеры CMS:

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

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

Wix

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

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

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

Визуальный редактор Wix

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

Reg.ru

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

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

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

Визуальный редактор Reg.ru Website Builder

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

Ulanding

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

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

Можно проводить A / B-тестирование прямо внутри Ulanding

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

LPgenerator

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

Работа с блоками в конструкторе LPgenerator

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

GetResponse

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

Базовые элементы сайта в конструкторе GetResponse выделены красной рамкой

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

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

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

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

Подготовка

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

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

Структура

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

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

Или так:

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

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

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

Кликните по синей кнопке «Создать сайт»

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

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

Доступно 12 категория шаблонов

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

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

Будем создавать сайт на основе шаблона в конструкторе. Для этого нужно выбрать шаблон

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

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

Нашли шаблоны, предназначенные для развертывания лендинга

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

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

Наведите курсор на предпочтительный шаблон

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

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

Мы выбрали «товарный» лендинг

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

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

Вы можете добавить любой из этих объектов на выбранный шаблон

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

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

Настройки текста

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

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

Меню навигации визуального редактора

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настраиваем вторую страницу выбранного шаблона

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

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

Убираем текст на английском и указываем свой вариант

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

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

Проверяем мобильную версию сайта. Wix автоматически адаптирует десктоп-версию шаблона под мобильную, но проверить ее все равно нужно

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

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

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

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

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

Мы готовы к публикации сайта

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

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

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

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

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

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

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

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

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

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

Сразу переходим к созданию сайта

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

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

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

Выбираем дизайн из готовых вариантов

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

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

Пример шаблонов лендингов LPgenerator

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

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

Нажимаем кнопку вверху экрана

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

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

Кликаем по тексту / кнопке / изображению / другому элементу и редактируем их

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

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

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

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

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

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

Созданный лендинг

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

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

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

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

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

Виды блоков LPgenerator

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

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

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

Переключаемся в редактор мобильной версии сайта

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

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

Здесь же меняются стили кнопок

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

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

Редактируем кнопку мессенджера в редакторе LPgenerator

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

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

Редактируем лид-форму

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

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

Медиа-библиотека LPgenerator

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

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

Добавляем новую секцию в лендинг

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

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

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

Добавили текстовые отзывы внизу страницы

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

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

В LPgenerator одна из самых больших коллекций готовых элементов / блоков / секций

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

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

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

Тарифные планы LPgenerator в 2022 году

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

Резюме

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

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

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

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

© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.
Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите ctrl + enter.

Закажите бесплатную консультацию

Оставьте свои контакты,
мы свяжемся с вами в ближайшее время.

Ошибка заполнения!