Урок 13. Создаем сайт на Сайтах 24

Маркетологу нужно быстро собрать страницу для мероприятия: описание, фото и кнопку регистрации — без помощи разработчика.

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

В 1С-Битрикс: Управление сайтом лендинги собирают с помощью модуля Сайты 24. Перед началом работы проверьте, доступен ли модуль на вашем сайте.

Проверяем, готов ли модуль к работе

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

Чтобы проверить, установлен ли модуль, откройте админку и перейдите в Настройки > Настройки продукта > Модули. Найдите строку Сайты 24 (landing). Если модуль еще не установлен, нажмите Установить.

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

Создаем пустую страницу для лендинга

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

1. В меню перейдите в пункт Сайты 24. Откройте сайт, к которому нужно добавить лендинг.
   
2. Нажмите Новая страница и выберите Пустой шаблон.
   
3. Нажмите Создать страницу. В редакторе откройте Возможности сайта > Шестеренка > Настройки страницы. Укажите название страницы, проверьте адрес и сохраните изменения.
   
   
   

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

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

Меняем блок под задачу мероприятия

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

Отключаем автопубликацию на время настройки

Перед редактированием проверьте настройку Автопубликация в верхней панели. Если она включена, изменения сразу появляются на сайте. Чтобы сначала собрать и проверить учебный лендинг, отключите автопубликацию — страницу опубликуем в конце урока.

Настраиваем первый экран лендинга

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

1. Нажмите Добавить блок.
   
2. Выберите блок, в котором есть заголовок, текст, изображение и кнопка.
   
3. Нажмите Редактировать.
   
4. В панели редактирования заполните параметры блока и сохраните настройки:
• Заголовок — коротко сообщите, чему посвящена страница. Например: Посмотрите, как работает наше производство.
• Текст — дополните заголовок и расскажите, что посетитель узнает или получит. Например: Познакомьтесь с командой и узнайте, как создается наша продукция.
• Картинка — выберите изображение, которое связано с темой страницы и помогает понять предложение. Нажмите Загрузить или Изменить. Если своей фотографии нет, используйте тестовое изображение без личных и конфиденциальных данных.
• Кнопка — назовите действие, которое выполнит посетитель, например Зарегистрироваться. Для перехода к форме выберите действие Перейти по внешней ссылке и укажите ее адрес. Если формы нет, используйте для проверки адрес https://example.com/.

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

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

Добавляем анимацию без лишнего движения

В блоках можно настроить анимацию появления — то, как элемент появляется на странице. Она может привлечь внимание к кнопке, но движение не должно мешать читать заголовок и текст. Для первого экрана достаточно одного эффекта.

Например, добавим анимацию к кнопке регистрации:

1. В выбранном блоке нажмите Дизайн.
   
2. Раскройте настройки элемента Кнопка и прокрутите их вниз.
   
3. В параметре Анимация появления выберите, например, эффект fadeInUp — элемент плавно появляется снизу вверх.
   
4. Нажмите значок облака на верхней панели конструктора и выберите Предпросмотр.
   

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

Публикуем страницу и проверяем результат

Лендинг собран. Осталось опубликовать его и пройти путь посетителя от заголовка до регистрации.

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

Откроется страница лендинга. Проверьте:

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

Когда готового блока недостаточно

Для большинства задач подходят готовые блоки: их проще настроить, а результат сразу видно в редакторе.

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

Первый вариант — готовый HTML-код. Нужный блок находится по пути Добавить блок > Другое > HTML код. В него можно вставить подготовленный код. Результат отображается в предпросмотре и на опубликованной странице, но не прямо в редакторе.

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