# Сторінки сайту

Будь-який вебсайт — чи то багатосторінковий, чи цільова сторінка — складається з одного або кількох **сторінок**, кожна з яких містить певний контент.

Як ми вже обговорювали, вміст сторінки поділяється на **блоки (секції)**, які визначають структуру та тип контенту на сайті.

{% hint style="success" %}
У конструкторі MaviBot є різні типи блоків (секцій), і кожен з них додається на сайт зі своїми індивідуальними налаштуваннями.

* [**Нульовий блок**](/doc/uk/websites/saiti/blocks/zero.md)\
  Це блок без жодних попередньо заданих налаштувань — він дає змогу розміщувати будь-який контент і велику різноманітність елементів сайту відповідно до вашого унікального дизайну. На відміну від інших блоків, елементи в Нульовому блоці можна розташовувати в будь-якій кількості та в будь-якому порядку. Нульовий блок може виконувати роль будь-якої секції вебсайту — наприклад, меню, футера, форми збору заявок, галереї тощо.
* [**Обкладинка**](/doc/uk/websites/saiti/blocks/cover.md)\
  Блок, призначений для додавання зображення або відео разом із заголовком.\
  Традиційно обкладинку використовують як **візуальний вступ** або **візитівку** сайту — зазвичай це перше, що бачать відвідувачі, коли потрапляють на ваш сайт.
* [**Заголовок і текст**](/doc/uk/websites/saiti/blocks/other.md#title-and-text-section)\
  Текстовий блок, що містить заголовок і основний текст. Цей блок часто використовують для подання ключової інформації, описів або пояснень на вашому сайті.
* [**Меню**](/doc/uk/websites/saiti/blocks/menu.md)\
  Використовується для створення хедера або футера з кнопками навігації (також може бути налаштований як плаваюче меню).
* [**Онлайн-бронювання**](/doc/uk/booking/settings.md)\
  Дозволяє додати форму онлайн-бронювання для клієнтів (підключену до попередньо налаштованих відділень) з автоматичною інтеграцією в CRM.
* [**Таймлайн**](/doc/uk/websites/saiti/blocks/other.md#stages-section)\
  Блок для створення унікальної структури сайту з хронологічною послідовністю подій.
* [**Акордеон**](/doc/uk/websites/saiti/blocks/accordion.md)\
  Використовується для відображення інформації у форматі згортаних запитань і відповідей або розширюваного контенту.
* [**Поля введення HTML**](/doc/uk/websites/saiti/blocks/other.md#html-section)\
  Цей блок дає змогу вставляти власний HTML- і CSS-код безпосередньо на сторінку.
* [**Форма**](/doc/uk/websites/saiti/blocks/forms.md)\
  Блок для додавання кнопок месенджерів, запитань, згоди з політикою конфіденційності та іншого.
* [**Квіз-формы**](/doc/uk/websites/saiti/blocks/rozdil-formi-kvizu.md)\
  Блок для створення багатокрокових квізів або опитувань на сайті.
* [**Медіа**](/doc/uk/websites/saiti/blocks/other.md#media-section)\
  Використовується для вставлення зображень або відеоконтенту на ваш сайт.
* [**Кнопки**](/doc/uk/websites/saiti/blocks/buttons.md)\
  Блок для додавання кнопок, що ведуть на URL-адреси, номери телефонів, email або сторінки оплати.
* [**Цитата**](/doc/uk/websites/saiti/blocks/other.md#quote-section)\
  Блок для виділення цитати або відгуку.
* [**Список**](/doc/uk/websites/saiti/blocks/other.md#list-section)\
  Дозволяє створювати впорядковані (нумеровані) та невпорядковані (маркіровані) списки.
* [**Текст, що випадає**](/doc/uk/websites/saiti/blocks/other.md#drop-down-text-section)\
  Блок для додавання тексту, який розгортається або згортається після натискання.
* [**Галерея**](/doc/uk/websites/saiti/blocks/other.md#gallery-section)\
  Використовується для відображення колекції зображень у форматі галереї.
* [**Попап**](/doc/uk/websites/saiti/blocks/popup.md)\
  Дозволяє створювати модальні спливаючі вікна на сайті.
* [**Користувацькі картки**](/doc/uk/websites/saiti/blocks/cards.md)\
  Чудово підходить для демонстрації відгуків клієнтів або інформації про продукт у форматі картки.
* [**Картки курсів**](/doc/uk/websites/saiti/blocks/course.md#how-to-add-the-course-cards-section)\
  Використовується для продажу онлайн-курсів безпосередньо на вашому сайті — без ручного налаштування, оскільки дані курсу автоматично підтягуються з розділу «Онлайн-курси».
* [**Список уроків**](/doc/uk/websites/saiti/blocks/course.md#how-to-add-the-lesson-lists-block)\
  Виберіть курс у налаштуваннях блоку, і всі уроки з цього курсу відобразяться автоматично.
* [**Таймер зворотного відліку**](/doc/uk/websites/saiti/blocks/other.md#timer-section)\
  Блок для додавання таймера зворотного відліку, корисний для пропозицій або запусків із обмеженим часом.
* [**Таблиці**](/doc/uk/websites/saiti/blocks/sheets.md)\
  Дозволяє впорядковувати та відображати структуровані дані у форматі таблиці.
* [**Згода на використання файлів cookie**](/doc/uk/websites/saiti/blocks/cookies.md)\
  Блок для дотримання вимог, який відображає інформацію про політику cookie — повідомляє користувачам, які дані зберігаються та як це покращує їхній досвід.
  {% endhint %}

Щоб увійти в режим редагування сторінки вебсайту, натисніть на плитку потрібного сайту, щоб відкрити його налаштування.

<div data-with-frame="true"><figure><img src="/files/dc8bd91e5c27a8bf958b6745f276951f39f7be8a" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
Якщо ви щойно створили новий багатосторінковий сайт, переходити нікуди не потрібно — ви вже будете у вкладці з налаштуваннями та сторінками сайту.
{% endhint %}

Потім натисніть на конкретну сторінку сайту, яку хочете редагувати.

<div data-with-frame="true"><figure><img src="/files/2a4e425b7abec7bd4413d10b127d231f62eb3ad9" alt=""><figcaption></figcaption></figure></div>

Після цього відкриється форма редагування сторінки, де ви зможете додавати або видаляти блоки (секції) сайту, змінювати шрифти, фон сторінки та інше.

<div data-with-frame="true"><figure><img src="/files/a73579ceb5c01da073f4519669f84333119c986c" alt=""><figcaption></figcaption></figure></div>

{% hint style="success" %}
Ось комбінації клавіш для входу в повноекранний режим редагування:

`Ctrl+shift+X` або `Cmd+shit+X`
{% endhint %}

## Як додати новий блок

Щоб додати новий блок, наведіть курсор на будь-який порожній простір у робочій області. Натисніть **"+"** кнопку, що з’явиться. Після цього праворуч на екрані відкриється меню, де ви зможете вибрати потрібний тип блоку.

<div data-with-frame="true"><figure><img src="/files/23ba8582df1cbf8d64166d013f4b2b3f4cd43fe9" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Детальні налаштування для кожного блоку описані в [«Site blocks»](/doc/uk/websites/saiti/blocks.md) розділ.
{% endhint %}

## Як видалити блок

Щоб видалити непотрібний блок, наведіть на нього курсор і знайдіть відповідну **«Видалити»** кнопку.

<div data-with-frame="true"><figure><img src="/files/b974447e634233aa75d67d20b648fb69e9acc759" alt=""><figcaption></figcaption></figure></div>

Натисніть **«Видалити»** щоб назавжди прибрати секцію.

{% hint style="danger" %}

#### **Зверніть увагу!**

Цю дію неможливо скасувати.
{% endhint %}

## Як приховати блок

Якщо ви не хочете видаляти блок або вам потрібно тимчасово його приховати, наведіть курсор на блок і натисніть **«Вимкнено»** кнопку.

<div data-with-frame="true"><figure><img src="/files/ac4f554c7d630c2bd533d752d3dcba112c619fe2" alt=""><figcaption></figcaption></figure></div>

Натисніть кнопку, щоб приховати секцію. Натисніть її ще раз, щоб показати.

## Як скопіювати блок

Щоб дублювати секцію, наведіть на неї курсор і натисніть **"Копіювати"** кнопку. Копія автоматично буде додана на ту саму сторінку. Це зручно для створення варіацій із різними налаштуваннями (наприклад, для окремих пристроїв).

<div data-with-frame="true"><figure><img src="/files/1d09f7a48c038f179b02fef4a9fadd811e41ad9c" alt=""><figcaption></figcaption></figure></div>

Натисніть **"Копіювати"** кнопку, щоб дублювати секцію. Копія з’явиться безпосередньо під оригіналом.

## Як редагувати вміст блоку

Щоб відредагувати секцію, наведіть на неї курсор і натисніть **"Вміст"** кнопку.

<div data-with-frame="true"><figure><img src="/files/3f7de6dc90f870278cd489fc583118a0cb5b37b1" alt=""><figcaption></figcaption></figure></div>

Після цього праворуч відкриється меню редагування вмісту для всіх типів блоків, окрім Нульового блоку.

<div data-with-frame="true"><figure><img src="/files/ba986cdd7368f967db71bc55f7dd172a9748af88" alt=""><figcaption></figcaption></figure></div>

Натомість Нульовий блок редагується в окремому вікні.

<div data-with-frame="true"><figure><img src="/files/b9f4ede6da75edef9b2168950d0331a22656923a" alt=""><figcaption></figcaption></figure></div>

{% hint style="success" %}
Щоб дізнатися, як редагувати будь-який блок і зрозуміти призначення різних функцій та налаштувань, зверніться до **«**[**Блоки сайту**](/doc/uk/websites/saiti/blocks.md)**»** розділ.
{% endhint %}

## Налаштування блоку

<div data-with-frame="true"><figure><img src="/files/fdac8dce9a5241084f294e4d27b89e83db0ac402" alt=""><figcaption></figcaption></figure></div>

Використовуйте **«Редагувати»** кнопку для вмісту. Для всіх інших налаштувань стилю та видимості натисніть **«Налаштування»** кнопку (застосовується до всіх блоків, окрім Нульового блоку).

<div data-with-frame="true"><figure><img src="/files/239ac3bc20aa3b6e31d8386cc873d6c39ee03012" alt=""><figcaption></figcaption></figure></div>

Налаштування шрифту, фону та відображення є універсальними і працюють однаково в усіх блоках.

{% hint style="success" %}
Дізнайтеся більше про ці універсальні налаштування в **«Site blocks»** статті, у відповідному розділі.
{% endhint %}

### Налаштування відображення

У цьому меню можна налаштувати відображення блоку для поточної сторінки та віджета підписки Facebook. Ви також можете оптимізувати його вигляд для різних пристроїв, керуючи видимістю залежно від розміру екрана.

<div data-with-frame="true"><figure><img src="/files/5806353ca9fe3ea2cf949726d6e939a72fd97a3c" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
Блок підписки Facebook має фіксовані розміри. Тому **Ширина секції** та **Ширина вмісту** параметри недоступні, і будь-які встановлені значення не застосовуватимуться.
{% endhint %}

### Діапазон видимості

У налаштуваннях відображення ви можете зробити блок видимим лише в межах певного діапазону розмірів екрана.

<div data-with-frame="true"><figure><img src="/files/b62a801d8a1bad29f351660ccbf2061631098ab0" alt="" width="375"><figcaption></figcaption></figure></div>

Використовуйте це для створення мобільно оптимізованої версії контенту, призначеної для смартфонів та інших портативних пристроїв.

<div data-with-frame="true"><figure><img src="/files/169e60d9db979fa43b8f9110b59fa665ada54b66" alt="" width="375"><figcaption></figcaption></figure></div>

Ви можете створити одну секцію, дублювати її та адаптувати кожну копію під різний розмір екрана.

<div data-with-frame="true"><figure><img src="/files/40c8ef3ba89e4d592e5aee531128d70f1f27c7ed" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/uk/websites/saiti/pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
