# Конструктор сторінок

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

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

Зміни зберігаються самі — окремої кнопки збереження немає. Зберігається чернетка: відвідувачі побачать зміни лише після того, як ви натиснете «Опублікувати». Про це — на сторінці [Публікація та свій домен](https://support.watbot.org/uk/landings/publish).

Кнопка «Допомога ШІ» поруч з «Опублікувати» відкриває ШІ-чат щодо цієї сторінки — див. [Збирання лендингу в ШІ-чаті](https://support.watbot.org/uk/landings/ai-builder).

## Сторінки лендингу

У лендингу може бути кілька сторінок. Перша — «Головна» — відкривається за адресою лендингу, решта — за адресою лендингу з доповненням, наприклад `…/price`.

Над рамкою телефона — назва відкритої сторінки та значки:

| Значок | Що робить |
|---|---|
| Шестерня | Відкриває «Налаштування сторінки» |
| Список | Відкриває панель «Сторінки» |
| Стрілка назовні | Відкриває опубліковану сторінку в новій вкладці. Значок є лише в опублікованої сторінки |

### Панель «Сторінки»

У панелі — список сторінок з адресами та пошук. Клік по сторінці відкриває її в конструкторі.

- «Створити сторінку» — вікно «Створення сторінки» з полями «Ім'я сторінки» та «Адреса сторінки». Адреса — латинські літери, цифри, дефіс і підкреслення.
- Меню «⋯» біля сторінки: «Редагувати» (ім'я та адреса), «Створити копію», «Видалити».

Копія отримує ім'я з позначкою «(копія)» і адресу із закінченням `-copy`. Останню сторінку лендингу видалити не можна.

![Панель «Сторінки»](https://support.watbot.org/_media/uk/03-landings/_images/pages-panel.webp?v=1791781231)

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

### Налаштування сторінки

| Налаштування | Що задає |
|---|---|
| «Ім'я сторінки» | Назва сторінки. Вона ж слугує заголовком вкладки браузера, поки не заповнено заголовок у «Налаштування SEO» |
| «URL» | Адреса сторінки всередині лендингу. У головної сторінки це `/` |
| «Внутрішній відступ сторінки по краях» | Поля по краях: без відступу або розмір від XS до LG |
| «Колір фону» | Фон сторінки — окремо для світлої та темної теми |
| «Шрифт за замовчуванням» | Шрифт усіх блоків сторінки, у яких не вибрано свого |
| «Налаштування SEO» | «Заголовок» — до 80 символів, «Ключові слова» — до 250, «Опис» — до 170 |

![Налаштування сторінки: адреса, фон, шрифт і SEO](https://support.watbot.org/_media/uk/03-landings/_images/page-settings.webp?v=1791781231)

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

Кнопка «Видалити» внизу панелі видаляє сторінку. У головної сторінки її немає.

## Блоки

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

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

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

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

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

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

У панелі налаштувань:

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

### Картинка

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

У панелі налаштувань — п'ять варіантів рамки:

| Варіант | Як виглядає |
|---|---|
| З полями | Картинка у своїх пропорціях, навколо — відступи |
| На всю ширину | Картинка у своїх пропорціях, без відступів |
| Квадрат | Квадрат із відступами |
| Квадрат на всю ширину | Квадрат без відступів |
| Коло | Коло з відступами |

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

![Блок «Картинка» та його налаштування](https://support.watbot.org/_media/uk/03-landings/_images/image-block.webp?v=1791781231)

### Кнопки

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

Під вибраним блоком — кнопки «Додати кнопку» та «Налаштування». Нова кнопка повторює оформлення попередньої.

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

**Налаштування кнопки** відкриваються кліком по ній:

| Налаштування | Що задає |
|---|---|
| «Ім'я кнопки» | Напис на кнопці |
| «Посилання» | Адреса, яка відкриється після натискання. Для дзвінка — `tel:` і номер, наприклад `tel:+380000000000`; для листа — `mailto:` і пошта, наприклад `mailto:hello@example.com`. Такі посилання відкривають телефон або поштову програму, а не нову вкладку |
| «Відкривати в новій вкладці» | Відкривати посилання в новій вкладці браузера |
| «Іконка» | Значок месенджера або YouTube поруч із написом або «Без іконки»; «Положення іконки» — «Ліворуч» або «Праворуч» |
| «Розмір», «Шрифт», «Розмір шрифту», «Товщина шрифту», «Міжлітерний інтервал», «Стиль», «Радіус» | Вигляд напису та самої кнопки. «За замовчуванням» бере значення з налаштувань блоку |
| «Колір» | «Колір тексту» та «Колір фону»; окремо вмикаються «Колір при наведенні» та «Колір при натисканні» |
| «Градієнт», «Межа», «Тінь» | Вмикаються перемикачами; у кожного — свої варіанти при наведенні та при натисканні |

![Налаштування кнопки блока «Кнопки»](https://support.watbot.org/_media/uk/03-landings/_images/button-settings.webp?v=1791781231)

Перемикач «Застосувати до всіх у блоці» в рядку «Налаштування дизайну» поширює оформлення цієї кнопки на решту кнопок блоку. Кнопки «Скопіювати стиль» і «Вставити стиль» переносять оформлення між кнопками — зокрема на іншу сторінку.

> [!TIP]
> Щоб кнопка вела в чат-бота, вставте в поле «Посилання» загальне або додаткове посилання на бота з розділу «Посилання на чат-бота». Тоді переходи потраплять у статистику бота. Де взяти посилання — у розділі [Посилання на чат-бота](https://support.watbot.org/uk/chatbots/links).

### Форма

Форма збирає дані відвідувача й передає їх у чат-бота. Нова форма вже містить поле введення, чекбокс згоди та кнопку «Відправити».

Під вибраним блоком — «Додати елемент» і «Налаштування». Елементів чотири:

| Елемент | Що це |
|---|---|
| «Поле введення» | Поле з підписом. «Тип поля»: «Телефон», «E-Mail», «Текст», «Цифри», «Багаторядковий текст», «Дата», «Час», «Дата і час». Є «Текст-підказка» та перемикач «Обов'язкове поле» |
| «Текст» | Пояснення всередині форми |
| «Чекбокс» | Позначка з текстом, наприклад згода з політикою. «Ім'я поля» — під яким ім'ям значення надійде в бота; є «Увімкнути за замовчуванням» і «Обов'язкове поле» |
| «Кнопка» | Кнопка відправлення. У поле «Посилання на чат-бот» вставляють посилання на бота |

![Блок «Форма»: налаштування поля введення](https://support.watbot.org/_media/uk/03-landings/_images/form-block.webp?v=1791781231)

Клік по елементу відкриває його налаштування, елементи міняються місцями перетягуванням. Спільні налаштування блоку — «Розмір форми за замовчуванням», відступи, «Радіус за замовчуванням», «Шрифт за замовчуванням».

**Як форма передає дані.**

1. Відвідувач заповнює форму й натискає кнопку. Платформа перевіряє обов'язкові поля та формат: пошту, телефон, число, дату.
2. Відвідувач переходить за адресою з поля «Посилання на чат-бот» і потрапляє в месенджер.
3. Бот отримує значення полів як змінні контакту. Ім'я змінної — підпис поля («Назва» в налаштуваннях поля) або «Ім'я поля» в чекбокса. Якщо підпис не задано, змінна називається `Input 1`, `Checkbox 1` і так далі. Чекбокс надходить як ✅ або ❌.

Наприклад, поле з підписом «Телефон» надійде в бота змінною `Телефон` зі значенням `+380 00 123 45 67`. Як використовувати змінні в повідомленнях — у розділі [Автопідстановки](https://support.watbot.org/uk/chatbots/templates).

> [!IMPORTANT]
> Форма не зберігає заявки сама. У кнопці має стояти посилання на чат-бота цієї платформи — загальне або додаткове, з розділу «Посилання на чат-бота». Без нього введені дані нікуди не потраплять.

Щоб заявки не губилися, зберігайте їх у сценарії бота: у змінні контакту, у [список](https://support.watbot.org/uk/lists) або в [CRM](https://support.watbot.org/uk/chatbots/crm).

### HTML

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

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

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

## Кольори для світлої та темної теми

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

![Вибір кольору: вкладки світлої й темної теми](https://support.watbot.org/_media/uk/03-landings/_images/color-picker.webp?v=1791781231)

Темний варіант сторінки вмикається в [налаштуваннях лендингу](https://support.watbot.org/uk/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.org/uk/widgets).
- Блоків відео, карти, таймера та оплати.

## Якщо щось не працює

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