Каждая системная и дополнительная страница может использовать визуальный Конструктор или режим Своя вёрстка. Режим выбирается отдельно для каждой страницы.
Соберите страницу в конструкторе
Документ конструктора состоит из уровней:
- Страница задаёт общий фон и контейнер.
- Секция объединяет одну или несколько колонок.
- Колонка определяет ширину и размещение блоков.
- Блок показывает функциональное или информационное содержимое.
Для добавления доступны Пустая секция с одной колонкой и секция Две колонки. После вставки можно добавлять и удалять колонки, менять их ширину перетаскиванием и переносить блоки между колонками.
Выбранная секция отмечается синим контуром по всем четырём сторонам.
В конструкторе можно:
- добавлять, перемещать, дублировать и удалять обычные секции, колонки и блоки;
- менять фиксированную или автоматическую высоту секции;
- настраивать внутренние отступы и расстояния между колонками;
- выравнивать содержимое по вертикали, а блок — по горизонтали;
- задавать цвет или изображение фона;
- добавлять границу, скругление и тень;
- выбрать полноширинный или ограниченный контейнер страницы;
- изменить отступ контейнера от края и его собственный фон.
Системные блоки можно перемещать и оформлять, но нельзя удалить или продублировать.
Как применяются настройки
- Выберите объект на холсте.
- В открывшейся поверх холста закреплённой правой панели выберите нужную группу. При прокрутке путь выбранного объекта и крестик закрытия остаются сверху. Если панель закрыта, нажмите Настройки.
- Измените параметры.
- Нажмите галку или Применить внутри группы. Крестик или закрытие изменённой группы отменяет её черновик.
- После настройки всех страниц нажмите общую кнопку с иконкой дискеты Сохранить.
Изменение ширины колонок, высоты секции и отступов можно выполнять прямо на холсте перетаскиванием соответствующих границ.
Холст одновременно служит интерактивным предпросмотром содержимого: баннерный слайдер показывает фотографии ресурса, автоматически переключает их и поддерживает стрелки и индикаторы. Операции, создающие настоящую бронь, в редакторе отключены.
Используйте свою вёрстку
Переключитесь в режим Своя вёрстка, если нужен полностью индивидуальный HTML-документ без стандартной геометрии конструктора.
HTML-редактор занимает всю доступную высоту окна под верхней панелью модуля.
- Откройте нужный этап или дополнительную страницу.
- Нажмите Своя вёрстка.
- Замените стартовую HTML-разметку своей.
- Нажмите Блок, выберите разрешённый системный блок и настройте его начальные параметры.
- Нажмите Вставить. Редактор добавит в HTML связанное место для системного блока.
- Расположите вставку в нужной части документа.
- Нажмите Собрать Tailwind CSS и дождитесь состояния Tailwind CSS собран.
- Сохраните модуль и проверьте страницу в полном предпросмотре.
Можно использовать HTML-фрагмент или полный документ с собственными html, head и body. В этом режиме стандартный контейнер, фон и отступы конструктора вокруг страницы не добавляются: всей геометрией управляет ваша разметка.
В class можно использовать обычные классы Tailwind CSS, например mx-auto max-w-6xl p-8 md:grid-cols-2. Если они нужны, кнопка Собрать Tailwind CSS запускает сборку в фоне, а под заголовком HTML документа отображаются состояние и процент выполнения. Результат вставляется в обычный раздел CSS и JavaScript документа между комментариями начала и конца Tailwind-блока. Собственные CSS-правила вне этого блока сохраняются при следующей сборке. Во время сборки редактор остаётся доступным. Сборка Tailwind необязательна и не блокирует сохранение или публикацию: можно использовать только собственный CSS либо не добавлять стили. На публичной странице Tailwind-компилятор не загружается.
Если класс записан динамической строкой, которой нет целиком в HTML, Tailwind его не распознает. Для значений, приходящих из данных, перечислите полные варианты классов в разметке либо используйте собственный CSS через CSS и JavaScript документа.
Важно. HTML своей вёрстки сохраняется без фильтрации тегов и атрибутов. Используйте только доверенный код и проверяйте, какие внешние ресурсы и скрипты он загружает.
Сохраните рабочие блоки бронирования
Своя вёрстка меняет внешний вид, но не должна заменять системную бизнес-логику самописными формами. Добавляйте блоки через кнопку Блок: редактор связывает вставку в HTML с рабочим календарём, гостями, расчётом, отправкой заявки или другим элементом выбранного этапа.
Для каждого системного этапа должны остаться его обязательные блоки. Если удалить связанную вставку из HTML, блок перестанет участвовать в странице и сохранение либо публикация не пройдут проверку.
Список обязательных и доступных блоков.
Добавьте CSS и JavaScript документа
Кнопка CSS и JavaScript документа доступна в обоих режимах.
- CSS применяется на холсте, в предпросмотре и на публичной странице. В конструкторе используется та же разметка страницы, поэтому для её блоков не нужны отдельные стили редактора.
- JavaScript в head подходит для кода, который должен загрузиться до содержимого.
- JavaScript документа выполняется в конце страницы; для него можно выбрать обычный или module-режим.
- Общий переключатель позволяет временно отключить пользовательский код без удаления.
JavaScript не выполняется внутри холста редактора. Проверяйте его в полном предпросмотре и на опубликованной странице. В локальном или резервном same-origin preview выполнение может быть отключено из соображений безопасности.
Предупреждение. Ошибка в пользовательском CSS или JavaScript может скрыть системный блок, сломать адаптивность или сделать кнопку недоступной. После каждого изменения проверьте desktop и mobile, выбор дат, расчёт и переходы между этапами.
Отличие HTML-блока от своей вёрстки
| Возможность | Блок HTML | Режим Своя вёрстка |
|---|---|---|
| Область действия | Один блок внутри секции конструктора | Весь документ страницы |
| HTML и CSS | Да | Да |
| Фильтрация HTML | Не применяется | Не применяется |
| JavaScript | Через CSS и JavaScript документа | Может находиться в документе и выполняться в разрешённом preview/public runtime |
| Системные блоки бронирования | Размещаются соседними блоками конструктора | Вставляются в нужное место HTML через кнопку Блок |
| Стандартный контейнер конструктора | Сохраняется | Не добавляется |
Перед публикацией
Проверьте:
- все обязательные блоки этапа присутствуют и видимы;
- форма работает с реальными настройками ресурса;
- ссылки и iframe открываются;
- страница читается на desktop и mobile;
- пользовательский JavaScript не создаёт ошибок;
- дополнительная страница имеет правильный slug;
- SEO-заголовок и описание заполнены.