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

Сергей Ломакин Редакция «Текстерры»

В сфере разработки сайтов в зонах .ru и .рф наметилась новая тенденция – все чаще используются российские конструкторы сайтов. Отток пользователей иностранных конструкторов уже назвали рекордным. Например, Wix потерял 33% пользователей (уходит из России 12 сентября 2024 года), Joomla – 9%, Drupal – 8%, а WordPress – 1%.

Вместо иностранных конструкторов используются Российские. Так Tilda зарегистрировала 34-процентный приток клиентов, Рег.ру – 9-процентный, а MODX – 3-процентный.

В течение осени 2024 года отток пользователей с иностранных конструкторов только усилится. Причиной тому – санкции США. Например, Lightspeed уже заявил, что 9 сентября 2024 года уходит из России, так как из-за санкций не сможет продавать свои программные продукты в нашей стране. К слову, речь идет примерно о 200 тысячах пользователях этого конструктора.

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

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

Денис Скрипицын, Backend-разработчик Texterra:

«Создание сайта, интернет-магазина или даже лендинга – многогранная задача. Решить такую в одиночку не способен никто. Да, сайт у вас будет, но не исключено, что толку от него вы не дождетесь. Над такой сложной задачей всегда работают несколько специалистов, которые закладывают все необходимое для сайта уже на этапе его проектирования. Смотрите, какая команда нужна: маркетолог, дизайнер, иллюстратор, программист, UX-специалист, копирайтер, SEO-специалист… Программист не сможет "в SEO", иллюстратор не напишет вам текст, а маркетолог – код. Для каждой подзадачи нужен эксперт. И тогда вы получите полностью оптимизированный, настроенный, красивый и удобный сайт, который поможет вашей компании завоевать доверие клиентов и выделиться на рынке. Поэтому я советую доверить разработку сайта команде специалистов».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры CMS:

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

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

Wix

Один из самых раскрученных конструкторов в России и мире, но напомним, что он уходит из России 12 сентября 2024 года (удалять эту главу мы не будем, так как все они, рано или поздно, возвращаются в Россию). По функционалу на голову выше 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

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

Подготовка

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

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

Структура

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

• В первом блоке находятся следующие элементы: шапка, уникальное торговое предложение, 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 – крутой инструмент, позволяющий создать очень красивый и функциональный лендинг. Никаких минусов в этом инструменте мы не нашли.

Как создать лендинг на 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 рублей в месяц (можно подключить собственный домен):

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

Резюме

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

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

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

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

Читайте также:

56 самых распространенных ошибок SEO

Как мы спасали и переносили сайт клиента с самописки

Они совсем обленились! Переделываем сайты под голосовой поиск