# Конструктор страниц

Конструктор открывается в разделе «Конструктор» меню лендинга. В центре — страница в рамке телефона, сбоку появляется панель настроек страницы или выбранного блока.

![Конструктор мини-лендинга: страница с заголовком, текстом и кнопками на мессенджеры](https://support.watbot.ru/_media/ru/03-landings/_images/builder.webp?v=1791781230)

Правки сохраняются сами — отдельной кнопки сохранения нет. Сохраняется черновик: посетители увидят изменения только после того, как вы нажмёте «Опубликовать». Об этом — на странице [Публикация и свой домен](https://support.watbot.ru/landings/publish).

Кнопка «Помощь ИИ» рядом с «Опубликовать» открывает ИИ-чат по этой странице — см. [Сборка лендинга в ИИ-чате](https://support.watbot.ru/landings/ai-builder).

## Страницы лендинга

В лендинге может быть несколько страниц. Первая — «Главная» — открывается по адресу лендинга, остальные — по адресу лендинга с дополнением, например `…/price`.

Над рамкой телефона — название открытой страницы и значки:

| Значок | Что делает |
|---|---|
| Шестерёнка | Открывает «Настройки страницы» |
| Список | Открывает панель «Страницы» |
| Стрелка наружу | Открывает опубликованную страницу в новой вкладке. Значок есть только у опубликованной страницы |

### Панель «Страницы»

В панели — список страниц с адресами и поиск. Клик по странице открывает её в конструкторе.

- «Создать страницу» — окно «Создание страницы» с полями «Имя страницы» и «Адрес страницы». Адрес — латинские буквы, цифры, дефис и подчёркивание.
- Меню «⋯» у страницы: «Редактировать» (имя и адрес), «Создать копию», «Удалить».

Копия получает имя с пометкой «(копия)» и адрес с окончанием `-copy`. Последнюю страницу лендинга удалить нельзя.

![Панель «Страницы»](https://support.watbot.ru/_media/ru/03-landings/_images/pages-panel.webp?v=1791781230)

> [!WARNING]
> Не удаляйте «Главную» через меню «⋯», если в лендинге есть другие страницы: кабинет это позволит, но без главной страницы адрес лендинга перестанет открываться.

### Настройки страницы

| Настройка | Что задаёт |
|---|---|
| «Имя страницы» | Название страницы. Оно же служит заголовком вкладки браузера, пока не заполнен заголовок в «Настройки SEO» |
| «URL» | Адрес страницы внутри лендинга. У главной страницы это `/` |
| «Внутренний отступ страницы по краям» | Поля по краям: без отступа или размер от XS до LG |
| «Цвет фона» | Фон страницы — отдельно для светлой и тёмной темы |
| «Шрифт по умолчанию» | Шрифт всех блоков страницы, у которых не выбран свой |
| «Настройки SEO» | «Заголовок» — до 80 символов, «Ключевые слова» — до 250, «Описание» — до 170 |

![Настройки страницы: адрес, фон, шрифт и SEO](https://support.watbot.ru/_media/ru/03-landings/_images/page-settings.webp?v=1791781230)

SEO-поля попадают в служебную часть опубликованной страницы — их читают поисковые системы и сервисы, которые строят превью ссылки. Картинкой для соцсетей служит [иконка лендинга](https://support.watbot.ru/landings/settings): отдельного поля для такой картинки нет. Поля обновляются на сайте при следующей публикации.

Кнопка «Удалить» внизу панели удаляет страницу. У главной страницы её нет.

## Блоки

Страница состоит из блоков, идущих сверху вниз. Блоков пять: «Текстовый блок», «Картинка», «Кнопки», «Форма», «HTML».

- **Добавить.** Нажмите «+» под последним блоком и выберите вид блока. Чтобы вставить блок выше уже стоящего, нажмите на линию над ним и выберите вид блока.
- **Настроить.** Клик по блоку открывает его панель настроек.
- **Переместить.** Перетащите блок за значок слева от него.
- **Удалить.** Кнопка «Удалить» внизу панели настроек блока.

![Меню «+»: виды блоков](https://support.watbot.ru/_media/ru/03-landings/_images/add-block.webp?v=1791781230)

### Текстовый блок

Текст набирается прямо на странице. Выделите часть текста — появится панель: полужирный, курсив, подчёркнутый, зачёркнутый, ссылка, цитата. Клавиша Enter начинает новый абзац, Shift + Enter переносит строку.

![Текстовый блок: панель форматирования над выделенным словом](https://support.watbot.ru/_media/ru/03-landings/_images/text-block.webp?v=1791781230)

В панели настроек:

- выравнивание и цвет текста;
- «Тип текста» — «Заголовок 1» – «Заголовок 4» или «Обычный текст»;
- «Шрифт», «Размер шрифта», «Толщина шрифта», «Высота строки», «Межбуквенный интервал»;
- «Внутренние отступы сверху и снизу», «Внутренние отступы слева и справа».

### Картинка

Нажмите «Выбрать фото» и загрузите изображение — JPG, PNG или GIF. Картинку можно двигать внутри рамки мышью или пальцем, чтобы выбрать видимую часть.

В панели настроек — пять вариантов рамки:

| Вариант | Как выглядит |
|---|---|
| С полями | Картинка в своих пропорциях, вокруг — отступы |
| Во всю ширину | Картинка в своих пропорциях, без отступов |
| Квадрат | Квадрат с отступами |
| Квадрат во всю ширину | Квадрат без отступов |
| Круг | Круг с отступами |

Ниже — «Радиус» (скругление углов), «Размер» (у вариантов с отступами), «Масштаб» (приближение от 100 до 300%) и отступы блока.

![Блок «Картинка» и его настройки](https://support.watbot.ru/_media/ru/03-landings/_images/image-block.webp?v=1791781230)

### Кнопки

Блок с одной или несколькими кнопками-ссылками. Так делают ссылки на чат-бота, мессенджеры, соцсети, сайт.

Под выбранным блоком — кнопки «Добавить кнопку» и «Настройки». Новая кнопка повторяет оформление предыдущей.

**Настройки блока** задают общее для всех кнопок: «Размер по умолчанию», «Радиус по умолчанию», «Шрифт по умолчанию» и «Оформление» — как кнопки стоят: каждая во всю ширину на своей строке, компактно или слитно одной группой (нужно не меньше двух кнопок). В первом варианте кнопки меняются местами перетаскиванием.

**Настройки кнопки** открываются кликом по ней:

| Настройка | Что задаёт |
|---|---|
| «Имя кнопки» | Надпись на кнопке |
| «Ссылка» | Адрес, который откроется по нажатию. Для звонка — `tel:` и номер, например `tel:+79990000000`; для письма — `mailto:` и почта, например `mailto:hello@example.com`. Такие ссылки открывают телефон или почтовую программу, а не новую вкладку |
| «Открывать в новой вкладке» | Открывать ссылку в новой вкладке браузера |
| «Иконка» | Значок мессенджера или YouTube рядом с надписью либо «Без иконки»; «Положение иконки» — «Слева» или «Справа» |
| «Размер», «Шрифт», «Размер шрифта», «Толщина шрифта», «Межбуквенный интервал», «Стиль», «Радиус» | Вид надписи и самой кнопки. «По умолчанию» берёт значение из настроек блока |
| «Цвет» | «Цвет текста» и «Цвет фона»; отдельно включаются «Цвет при наведении» и «Цвет при нажатии» |
| «Градиент», «Граница», «Тень» | Включаются переключателями; у каждого — свои варианты при наведении и при нажатии |

![Настройки кнопки блока «Кнопки»](https://support.watbot.ru/_media/ru/03-landings/_images/button-settings.webp?v=1791781230)

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

> [!TIP]
> Чтобы кнопка вела в чат-бота, вставьте в поле «Ссылка» общую или дополнительную ссылку на бота из раздела «Ссылки на чат-бота». Тогда переходы попадут в статистику бота. Где взять ссылку — в разделе [Ссылки на чат-бота](https://support.watbot.ru/chatbots/links).

### Форма

Форма собирает данные посетителя и передаёт их в чат-бота. Новая форма уже содержит поле ввода, чекбокс согласия и кнопку «Отправить».

Под выбранным блоком — «Добавить элемент» и «Настройки». Элементов четыре:

| Элемент | Что это |
|---|---|
| «Поле ввода» | Поле с подписью. «Тип поля»: «Телефон», «E-Mail», «Текст», «Цифры», «Многострочный текст», «Дата», «Время», «Дата и время». Есть «Текст-подсказка» и переключатель «Обязательное поле» |
| «Текст» | Пояснение внутри формы |
| «Чекбокс» | Галочка с текстом, например согласие с политикой. «Имя поля» — под каким именем значение придёт в бота; есть «Включить по умолчанию» и «Обязательное поле» |
| «Кнопка» | Кнопка отправки. В поле «Ссылка на чат-бот» вставляют ссылку на бота |

![Блок «Форма»: настройки поля ввода](https://support.watbot.ru/_media/ru/03-landings/_images/form-block.webp?v=1791781230)

Клик по элементу открывает его настройки, элементы меняются местами перетаскиванием. Общие настройки блока — «Размер формы по умолчанию», отступы, «Радиус по умолчанию», «Шрифт по умолчанию».

**Как форма передаёт данные.**

1. Посетитель заполняет форму и нажимает кнопку. Платформа проверяет обязательные поля и формат: почту, телефон, число, дату.
2. Посетитель переходит по адресу из поля «Ссылка на чат-бот» и попадает в мессенджер.
3. Бот получает значения полей как переменные контакта. Имя переменной — подпись поля («Название» в настройках поля) или «Имя поля» у чекбокса. Если подпись не задана, переменная называется `Input 1`, `Checkbox 1` и так далее. Чекбокс приходит как ✅ или ❌.

Например, поле с подписью «Телефон» придёт в бота переменной `Телефон` со значением `+7 000 123-45-67`. Как использовать переменные в сообщениях — в разделе [Автоподстановки](https://support.watbot.ru/chatbots/templates).

> [!IMPORTANT]
> Форма не хранит заявки сама. В кнопке должна стоять ссылка на чат-бота этой платформы — общая или дополнительная, из раздела «Ссылки на чат-бота». Без неё введённые данные никуда не попадут.

Чтобы заявки не терялись, сохраняйте их в сценарии бота: в переменные контакта, в [список](https://support.watbot.ru/lists) или в [CRM](https://support.watbot.ru/chatbots/crm).

### HTML

Блок для своего кода: в панели настроек — редактор, в который вставляют HTML. В конструкторе результат показывается сразу.

![Блок «HTML»: редактор кода](https://support.watbot.ru/_media/ru/03-landings/_images/html-block.webp?v=1791781230)

> [!WARNING]
> «Блок работает только при подключении домена» — на странице с адресом платформы код этого блока не выполняется. Как подключить домен — на странице [Публикация и свой домен](https://support.watbot.ru/landings/publish).

## Цвета для светлой и тёмной темы

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

![Выбор цвета: вкладки «Светлая тема» и «Темная тема»](https://support.watbot.ru/_media/ru/03-landings/_images/color-picker.webp?v=1791781230)

Тёмный вариант страницы включается в [настройках лендинга](https://support.watbot.ru/landings/settings) переключателем «Темная тема». Пока он выключен, достаточно задать цвета для светлой темы.

В конструкторе страница показана в теме вашего кабинета: в светлом кабинете видны светлые цвета, в тёмном — тёмные.

## Шрифты

В списке шрифтов — «Системный» и 14 шрифтов: Amatic SC, Caveat, Comfortaa, Kelly Slab, Lobster, Merriweather, Montserrat Alternates, Open Sans, Open Sans Condensed, Oswald, Pacifico, Pangolin, PT Mono, Roboto. Вариант «По умолчанию» у блока берёт шрифт страницы.

## Чего в конструкторе нет

- Блока чата. Чтобы посетитель написал боту, поставьте кнопку со ссылкой на бота. Чат прямо на сайте делается [виджетом](https://support.watbot.ru/widgets).
- Блоков видео, карты, таймера и оплаты.

## Если что-то не работает

- **«Такой адрес страницы уже существует.»** У двух страниц одного лендинга не может быть одинакового адреса.
- **«Адрес страницы введен некорректно»** — в адресе допустимы только латинские буквы, цифры, дефис и подчёркивание.
- **«Вы не можете удалить последнюю страницу.»** В лендинге всегда остаётся хотя бы одна страница.
- **Бот не получил данные формы.** Проверьте, что в кнопке формы стоит ссылка на бота из раздела «Ссылки на чат-бота» и что у полей заполнены подписи. Данные формы ждут перехода недолго: если посетитель открыл ссылку и не перешёл в мессенджер сразу, значения могут не дойти.