Создаем лендинг в конструкторе Битрикс24 за 7 шагов

Конструктор сайтов и лендингов Битрикс24 – инструмент для создания сайтов без навыков в программировании. Давайте представим ситуацию: вам нужно оперативно подготовить лендинг к определенному мероприятию или по случаю распродажи. Обратиться к услугам программистов не всегда возможно как с точки зрения финансов, так и сроков. Вот здесь и приходит на помощь конструктор сайтов Битрикс24.

Создание лендингов в конструкторе Битрикс24

Конструктор сайтов Битрикс24 полезен для бизнеса. И на это есть 5 причин:

  1. В нем много уже готовых шаблонов сайтов;
  2. Сайт интегрируется с онлайн-чатами;
  3. Заявки с сайта приходят в CRM и не теряются;
  4. К сайту можно подключить Google Analytics, Яндекс Метрику, пиксель Facebook;
  5. Выложить сайт в открытый доступ можно за считанные секунды.

Мы подготовили пошаговое руководство, как создавать лендинги с помощью конструктора Битрикс24.

Общий план создания лендинга в конструкторе Битрикс24

Давайте разделим процесс создания лендинга в конструкторе Битрикс24 на 7 шагов:

  • Шаг 1– Произведите начальные настройки;
  • Шаг 2– Создайте меню и обложку лендинга;
  • Шаг 3– Добавьте основной контент;
  • Шаг 4– Добавьте CRM-форму;
  • Шаг 5–Настройте открытые линии;
  • Шаг 6– Подключите Google Analytics;
  • Шаг 7– Произведите завершающие настройки.

Теперь рассмотрим каждый этап по порядку.

Шаг 1 – Произведите начальные настройки

Чтобы создать лендинг в конструкторе Битрикс24, перейдите в раздел Сайты и нажмите кнопку либо Создать сайт, либо Новый сайт.

Сайты и лендинги в Битрикс24

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

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

Далее Битрикс24 предложит выполнить первоначальные настройки будущего лендинга. Укажите название и описание лендинга. Они будут отображаться в социальных сетях и мессенджерах, если там будет размещаться ссылка. Выберете цветовую палитру сайта. В указанном цвете будут отображаться некоторые элементы интерфейса, включая кнопки и виджет онлайн-чата. Нажмите кнопку создать.

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

Шаг 2 – Создайте меню и обложку лендинга

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

Панель Добавить блок раздел Меню и шапка сайта

Затем отредактируйте меню: добавьте свой логотип и измените названия пунктов. Для этого нажмите на кнопку Редактировать.

Кнопка Редактировать

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

Панель Редактировать

Теперь добавим обложку на лендинг. На обложке, как правило, размещается фото на ширину всего экрана, текст, передающий суть лендинга в краткой форме, а также кнопки. Чтобы добавить обложку, нажмите кнопку Добавить блок и выберете в списке элементов раздел Обложка. В разделе будет предложен набор уже готовых обложек. Мы выберем шаблон с таймером, поскольку создаем лендинг для семинара.

Панель Добавить блок

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

Панель дизайн и настройки

Шаг 3 – Добавьте основной контент

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

  1. Текст;
  2. Такст с картинками;
  3. Галерею;
  4. Видео;
  5. Заголовки;
  6. Колонки;
  7. Кнопки и ссылки;
  8. Таймеры;
  9. Разделители;
  10. Подвал сайта;
  11. Новостную ленту;
  12. Расписание;
  13. Отзывы;
  14. Команду;
  15. Тарифы;
  16. Контакты;
  17. Социальные сети.

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

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

Шаг 4 – Добавьте CRM-форму

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

Добавление CRM-формы

Набор полей в форме при добавлении блока определяется либо последней использованной CRM-формой, либо стандартной формой, которая уже установлена в Битрикс24 по умолчанию. Чтобы посмотреть список имеющихся CRM-форм, нажмите кнопку Редактировать и перейдите в раздел Настройки —> CRM-форма. Там вы можете выбрать нужную CRM-форму из списка имеющихся. Если вам нужны другие поля в форме, например, должность, компания, выпадающий список, то вам необходимо создать новую CRM-форму в CRM Битрикс24. Мы подготовим отдельный пошаговый план, как создать CRM-форму в Битрикс24 в нашей следующей статье. А пока вернемся к лендингу и приступим к следующему пункту.

Шаг 5 –Настройте открытые линии

После публикации на лендинге автоматически появится виджет Открытых линий Битрикс24. Туда можно встроить онлайн-чат, обратный звонок, чаты в мессенджерах и социальных сетях либо добавить только 1 канал связи с клиентами, например, только обратный звонок. Для этого нужно либо редактировать уже существующий виджет, либо создать новый виджет специально для лендинга.

Чтобы создать новый виджет, перейдите в раздел Контакт-центр Битрикс24. Кликните на плитку Виджет на сайт и нажмите кнопку Добавить новый виджет. Откроется окно, где вы сможете создать новую открытую линию и добавить туда те каналы связи, которые вам необходимы.

Создание виджета

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

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

Виджет открытых линий настроен.

Шаг 6 – Подключите Google Analytics

Google Analytics так же, как и Яндекс Метрика, пиксель Facebook необходимы для сбора статистики поведения пользователей на сайте. К лендингу в конструкторе Битрикс24 можно подключить тег отслеживания Google Analytics, Яндекс Метрики. Можно подключить Google Tag Manager, а также пиксели Facebook, Вконтакте.

Чтобы подключить Google Analytics к лендингу, нажмите на кнопку Настройки —> Настройки сайта, перейдите в раздел Дополнительно и в пункте Аналитика поставьте галочку напротив Google Analytics. Следующий шаг – ввести идентификатор отслеживания Google Analytics.

Настройка Google Analytics

Чтобы получить ID, зарегистрируйтесь в Google Analytics. После регистрации вы сможете увидеть ID аккаунта в разделе Администратор в пункте Отслеживание —> Код отслеживания.

Google Аналитика Идентификатор отслеживания

Скопируйте этот номер и вставьте его в поле Google Analytics в Битрикс24, а также проставьте галочки, если вам необходимо отправка данных о кликах по кнопкам и/или просмотре блоков.

Аккаунт Google Analytics подключен к лендингу Битрикс24. Аналогично подключаются и другие системы web-аналитики.

Шаг 7 – Произведите завершающие настройки

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

Чтобы кнопки и пункты меню реагировали на действие пользователей, привяжите к кнопкам и ссылкам соответствующие блоки лендинга. Давайте к кнопке привяжем CRM-форму.

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

Откройте окно редактирования кнопки и вставьте в поле Ссылка после знака «#» название, которое вы записали в якоре блока с CRM-формой.

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

Теперь кнопка настроена. Аналогично происходит настройка пунктов меню.

Чтобы отредактировать адрес лендинга, нажмите на кнопку Настройки —> Настройки сайта. В пункте Адрес сайта нажмите на значок карандаша. Вы можете разместить лендинг на поддомене вашего Битрикс24 или указать свой домен. Мы разместим на поддомене Битрикс24. Так гораздо быстрее. Вам остается только придумать название.

Настройки домена

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

Когда все настройки будут завершены, опубликуйте лендинг, нажав на кнопку Опубликовать.

Предпросмотр и публикация лендинга

Что в итоге?

Чтобы создать лендинг в конструкторе Битрикс24, нужно выполнить 7 базовых шагов:

  1. Произвести начальные настройки;
  2. Создать меню и обложку лендинга;
  3. Добавить основной контент;
  4. Добавить CRM-форму;
  5. Настроить открытые линии;
  6. Подключить Google Analytics;
  7. Произвести завершающие настройки.

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

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