© Discript 2018 - 2022

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

Содержание:

  1. Что такое конструктор лендинга
  2. Предварительная подготовка
  3. Первичная настройка сайта на Tilda
  4. Редактирование сайта
  5. Редактирование контента
  6. Дополнительные возможности
  7. Подключение Tilda CRM

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

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

Что такое конструктор лендинга

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

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

К наиболее популярным конструкторам относят:

  • Tilda;
  • Wix;
  • Google Sites;
  • LPgenerator;
  • uKit;
  • Bloxy;
  • И другие.

Главное отличие конструктора от CMS — с его помощью нельзя создать сайт с нуля и настроить как угодно.

Предварительная подготовка

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

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

Также определите идею и задачи сайта. Идея — то, что будет на сайте (например, курс по обучению профессии интернет-маркетолога и 3 варианта покупки), цель — с какой целью он создается (продажа полезной информации в виде курса).

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

Чаще всего, она бывает такой:

  1. Первый экран — шапка, заголовок с УТП, кнопка призыва к действию.
  2. Второй экран — более подробное описание оффера.

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

В этом примере мы разберем конструктор Tilda, но другие сервисы будут иметь похожую логику, поэтому вы можете применять принципы не только для Тильды.

Первичная настройка сайта на Tilda

Чтобы начать создавать лендинг на конструкторе Tilda с нуля, перейдите на официальный сайт Тильды. Вы попадете на главную страницу. Если у вас еще нет аккаунта, создайте его, кликнув по одной из кнопок: «Создать сайт бесплатно» или «Регистрация».

Регистрация в конструкторе Tilda
Регистрация в конструкторе Tilda

Заполните необходимые поля в регистрационной форме:

Регистрационная форма
Регистрационная форма

После регистрации вы окажетесь на главной странице конструктора.

Совет: рекомендуем подключить тарифный план «Personal» перед началом работы — он расположен во вкладке «Тарифы и оплата». Сервис предоставляет всем пользователям 2 недели бесплатного использования. Так вы получите полный доступ ко всем функциям и блокам конструктора.

Вам автоматически предложат создать новый сайт, но если вы этого не сделали, воспользуйтесь кнопкой «Создать новый сайт»:

Создание сайта в конструкторе Tilda
Создание сайта в конструкторе Tilda

Затем кликните на кнопку «Настройки сайта», укажите описание веб-ресурса и выберите для него субдомен:

Настройки сайта в конструкторе Tilda
Настройки сайта в конструкторе Tilda

Редактирование сайта

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

Создание новой страницы на сайте в конструкторе Tilda
Создание новой страницы на сайте в конструкторе Tilda

Далее вам предложат выбрать подходящий тип сайта из шаблонов. Мы рекомендуем воспользоваться функцией поиска и сразу вписать слово «лендинг» в строку — так Тильда предложит вам несколько вариантов шаблонов.

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

Для примера, возьмем тип «Универсальный» (первый слева).

Редактирование контента

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

Редактирование контента страницы в конструкторе Tilda
Редактирование контента страницы в конструкторе Tilda

Также обратите внимание на 2 панели управления, расположенные под редактором контента.

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

Правая панель (выделена как №3) позволяет управлять перемещением блока — поднимать его вверх или вниз, скрывать и показывать, полностью удалять при необходимости, а также копировать и вырезать.

Дополнительно можно использовать кнопку «Контент», которая отобразится, если вы наведете курсор на блок:

Редактирование блоков на странице в конструкторе Tilda
Редактирование блоков на странице в конструкторе Tilda

Например, если это блок «О компании», в ней можно будет менять фон, редактировать заголовок и описание, добавить фоновое видео. Точный функционал зависит от типа редактируемого блока:

Замена изображения блоков на странице в конструкторе Tilda
Замена изображения блоков на странице в конструкторе Tilda

Также в Тильде есть важная кнопка «Настройки»:

Настройка блоков на странице в конструкторе Tilda
Настройка блоков на странице в конструкторе Tilda

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

Управление блоком
Управление блоком

Чтобы добавить новый блок, выберите любой блок или пространство между ними, пока не увидите кнопку со знаком «+»:

Добавление нового блока на странице в конструкторе Tilda
Добавление нового блока на странице в конструкторе Tilda

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

Поиск нужных блоков
Поиск нужных блоков

Вы также можете воспользоваться поиском, чтобы найти нужные блоки.

Если вы хотите создать собственный блок с нуля, воспользуйтесь функцией «ZERO BLOCK» — новым инструментом конструктора. Его можно найти либо в самом внизу страницы, через крайнюю правую кнопку «Zero»:

Создание собственного блока на странице в конструкторе Tilda
Создание собственного блока на странице в конструкторе Tilda

Либо в редакторе блоков, тоже в самом внизу, после кнопки «Другое»:

Создание нулевого блока на странице в конструкторе Tilda
Создание нулевого блока на странице в конструкторе Tilda

Нажав на нее, вы попадете в режим ZERO, который открывает более широкие возможности по редактированию:

Редактирование в режиме ZERO
Редактирование в режиме ZERO

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

Например, если это будет текст, вы сможете устанавливать «жирность» (свойство weight), семейство и размер шрифта, цвет, прозрачность, положение (например, впереди основного контента или за ним), вращать текст на нужное число градусов:

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

Подробнее о настройке читайте в официальном справочнике Tilda.

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

Публикация новой страницы в конструкторе Tilda
Публикация новой страницы в конструкторе Tilda

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

Дополнительные возможности

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

Карта блоков страницы в конструкторе Tilda
Карта блоков страницы в конструкторе Tilda

Также в ней расположена вкладка «Настройки страницы». В ней можно выполнить подготовить title и description лендинга, а также настроить бейджик, соцсети, сделать экспорт страницы:

Подготовка title и description
Подготовка title и description

Во вкладке SEO настраивается сниппет:

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

Обратите внимание на вкладку «Дополнительно» — на ней можно вставить собственный HTML-код, что может быть полезно, если вы хотите добавить коды отслеживания или микроразметку.

Подключение Tilda CRM

В Tilda можно подключить собственную CRM для сбора заявок, что может быть особо полезным для лендинга. Для этого сначала активируйте систему сбора заявок — кликните по кнопке перехода в CRM в верхнем меню и нажмите кнопку добавления нового листа.

Активирование системы сбора заявок в конструкторе Tilda
Активирование системы сбора заявок в конструкторе Tilda

Затем перейдите в настройки сайта, выберите вкладку «Формы» и подключите CRM к сайту:

Подключение CRM к сайту в конструкторе Tilda
Подключение CRM к сайту в конструкторе Tilda

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

Добавление заявки вручную к сайту в конструкторе Tilda
Добавление заявки вручную к сайту в конструкторе Tilda

Интеграция систем веб-аналитики

Также вы можете подключить системы аналитики — например, Google Analytics и Яндекс.Метрику. Для этого перейдите в раздел «Аналитика» и нажмите на кнопки подключения нужных инструментов. Вам нужно будет авторизоваться в сервисах веб-аналитики:

Интеграция аналитики на сайт в конструкторе Tilda
Интеграция аналитики на сайт в конструкторе Tilda

Подключение собственного домена

При желании, можно подключить собственный домен для Тильды. Он сделает ваш адрес более красивым для посетителей и повысит их доверие — лендинги на собственном доменном имени часто смотрятся солиднее, чем на предложенных конструкторами.

Для подключения вам понадобится отредактировать DNS вашего регистратора сайта, указав IP-адрес сервера Tilda. После этого сохраните изменения и укажите домен в панели управления конструктора Tilda:

Подключение собственного домена на сайт в конструкторе Tilda
Подключение собственного домена на сайт в конструкторе Tilda

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

Итоги

Сделать лендинг пейдж онлайн — не такая уж и трудная процедура, которая может занять 1-2 часа. Более важный этап, которому следует уделить внимание — сделать так, чтобы итоговый сайт работал и приносил заявки.

Для этого:

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

Соблюдая эти рекомендации, вы сможете получить не только красивую картинку, но и реально работающую посадочную страницу.

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

Другие статьи

Отправьте заявку и уже завтра мы начнем работы.

Обязательное поле для заполнения

Обязательное поле для заполнения

Обязательное поле для заполнения

Обязательное поле

Обязательное поле для заполнения

Обязательное поле для заполнения

Обязательное поле

Спасибо за обращение!
В ближайшее время мы с вами свяжемся.

Далее

Обязательное поле для заполнения

Обязательное поле для заполнения

Укажите предпочтительные каналы связи:

ТелефонWhatsAppTelegram

Обязательное поле