# Zero block

Створення вебсайту за допомогою **Zero Block** у полі **Mavibot** конструктора — це швидкий і зручний спосіб створити професійний вебсайт без будь-яких знань програмування. Не бійтеся експериментувати, налаштовувати дизайн і додавати контент, щоб зробити свій сайт унікальним і успішним.

<figure><img src="/files/56bffcfdd7c66fbe8450d807da6efabb6b2b1613" alt=""><figcaption></figcaption></figure>

Поле **Zero Block** — це повністю налаштовуваний редактор вебдизайну в **Mavibot**. Він дає змогу створювати унікальні дизайни для окремих блоків або всього сайту без жодних обмежень.

<figure><img src="/files/2ac8a907a2834496394b1ba9a212576b73250fb9" alt=""><figcaption></figcaption></figure>

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

Щоб додати **Zero Block** на сторінку, натисніть кнопку "+" на панелі редагування.

<figure><img src="/files/53a80ad6343c9e5f923037e44d573a64c60cd57d" alt=""><figcaption></figcaption></figure>

Після натискання кнопки "+" праворуч з’явиться меню "Додати новий блок".

Виберіть **"Zero Block"** і перейдіть до редагування.

<figure><img src="/files/695acd882c291c366472e249cc5dd78b6b66bfc6" alt=""><figcaption></figcaption></figure>

Є меню налаштувань блоку.

## Висота контенту

За допомогою цього поля можна змінити розмір блоку. Значення за замовчуванням — 550px.

<figure><img src="/files/0751f884b8185706de2d5f571f3e6674f98e7114" alt=""><figcaption></figcaption></figure>

#### Масштабування області Grid

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

<figure><img src="/files/78dde3a3656e2f2640a79f1a94c4806a8a760f7c" alt=""><figcaption></figcaption></figure>

За замовчуванням вимкнено, але можна також вибрати "автомасштабування за шириною вікна".

## Налаштування фону

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

<figure><img src="/files/83d512cc2f0b817c1e9c061dac617131cc48fcbf" alt=""><figcaption></figcaption></figure>

Ви можете додати фоновий файл у форматі SVG, PNG, JPG або GIF. Розмір файлу не повинен перевищувати 30 МБ.

Приклад 1. Додавання файлу JPG.

<figure><img src="/files/d363a43606298677fbf24d150de22aea22f0b4f3" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/fc2807800d5e0af9f15fca85a460688292bd4079" alt=""><figcaption></figcaption></figure>

Приклад 1. Типове відображення зображення в позиції Center Center.

Приклад 2. Відображення зображення в позиції Top Left. Типове значення параметра "behavior" встановлено як "scroll", ви можете вибрати позицію "fixed". Під час зміни позиції фон зміщується.

<figure><img src="/files/ad23f668e3030848d9addc714ad9aae111dad099" alt=""><figcaption></figcaption></figure>

## Додавання елементів

Натисніть кнопку "Додати елемент" ліворуч. Унизу кнопки є шари, і ви можете змінювати їх між собою, накладаючи один елемент на інший.

<figure><img src="/files/aec12014be5546e10228338399773ff375e2c403" alt=""><figcaption></figcaption></figure>

Кнопка Add Element створює новий шар із вибраним елементом:

<figure><img src="/files/f25b70ea013e569614f5df47c685fcd9384cf0d9" alt=""><figcaption></figcaption></figure>

Кожен елемент відкриває власне меню налаштувань.

&#x20;Натисніть кнопку "Зберегти" після налаштування елемента.

<figure><img src="/files/f924fd080493a6488dbc063db687a97219c85486" alt=""><figcaption></figcaption></figure>

### Текст

Ви можете додати елемент із текстовим вмістом.

<figure><img src="/files/6ddaa912c5f940afa073b1ffb649efe28095cd19" alt=""><figcaption></figcaption></figure>

Приклад додавання тексту до блоку

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

<figure><img src="/files/39d49d77fef4da9681f89d258598358535c954d7" alt=""><figcaption></figcaption></figure>

### Зображення

Щоб додати потрібне зображення, завантажте файл із системи. Для цього натисніть на іконку завантаження. Також можна додати зображення, вставивши посилання на нього у відповідне поле. Вставте URL потрібного зображення та виберіть, як воно відкриватиметься: у новому вікні чи на новій сторінці.

<figure><img src="/files/fe41d3235c88181db01390af984e7ece6f380206" alt=""><figcaption></figcaption></figure>

Після вставлення зображення можна налаштувати його розташування на сторінці. Виберіть, як воно буде розміщене відносно лівого або правого краю, або розташуйте його по центру. Також можна налаштувати прозорість зображення та інші параметри відображення, наприклад розмиття або заокруглення.

<figure><img src="/files/47c48140fbf88133a20e6848e617bae4c4fd59b8" alt=""><figcaption></figcaption></figure>

Приклад додавання зображення до блоку

Фон можна змінити будь-коли.

### Фігура

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

<figure><img src="/files/b09b2ecaedbd7d6044e344dce196098c25c9525f" alt=""><figcaption></figcaption></figure>

Налаштування фігури:

<figure><img src="/files/86591be2aaa21acbf4f4417b1a206b0c143febc6" alt=""><figcaption></figcaption></figure>

Приклад додавання фігури до блоку

### Кнопка

Щоб додати кнопку, натисніть "Додати елемент" і виберіть "Button":

<figure><img src="/files/19df5f8a577d5a5e16c7dad38c343a6dd6976216" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/58696801247992f577bc45d7b952f5826a05579d" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/05ad4779c5192a8536c078a474e69229be8ed57c" alt=""><figcaption></figcaption></figure>

Щоб кнопка була активною, потрібно додати посилання на потрібну сторінку в налаштуваннях елемента в розділі Button. Коли ви натиснете кнопку, відкриється посилання.

Щоб перевірити, чи працює кнопка, потрібно зберегти зміни, закрити налаштування блоку та перейти до попереднього перегляду сайту.

### Відео

Цей інструмент можна використовувати для додавання будь-якого відео та налаштування його відображення в блоці.

<figure><img src="/files/e60c8156d5b3ce361148378373641a4f59ec5e3d" alt=""><figcaption></figcaption></figure>

До нульового блоку можна додавати відео з різних ресурсів:

<figure><img src="/files/dbfab67985df6116befb1fabb057963eafef99d9" alt=""><figcaption></figcaption></figure>

Для цього просто виберіть, де саме розміщене відео (Youtube, Vimeo або MP4), а потім вставте URL у поле посилань.

Також можна додавати відео зі сховища файлів. Для цього скопіюйте посилання на відео у сховищі файлів:

<figure><img src="/files/6360cc9b1c3adebf6456979e1aad033bd2c78915" alt=""><figcaption></figcaption></figure>

Потім виберіть тип відео MP4 у налаштуваннях елемента "Video":

<figure><img src="/files/b794e43a63c1592fe5ea4ad40d5ea8423fc729e4" alt=""><figcaption></figcaption></figure>

І вставте посилання на відео зі сховища файлів.

### Підказка

Цей елемент дає змогу додати підказку з будь-яким вмістом. Ви можете редагувати елемент на свій смак у налаштуваннях.

<figure><img src="/files/bfbf26abc885092e99c2e7814a82e0e3261c6d34" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/b3bf8018810aba9417af43287d2917db468b342f" alt=""><figcaption></figcaption></figure>

Ви можете зробити підказку напівпрозорою та розмістити її поверх тексту, фону або зображення:

<figure><img src="/files/ad358ba79c2d21401b885a8f61fde28f92543432" alt=""><figcaption></figcaption></figure>

Коли ви наведете курсор на підказку (на сторінці сайту, НЕ в режимі редагування), відобразиться певний текст:

Не забудьте зберегти виконані дії в налаштуваннях за допомогою функції "Save".

### Галерея

Ви можете додати новий елемент до нульового блоку так само, як і попередні:

<figure><img src="/files/36d252d11dcc453fcb233182c44d9288f6f28e21" alt=""><figcaption></figcaption></figure>

Mavibot за замовчуванням додає два зображення. Але ви також можете самостійно завантажити потрібні зображення для галереї. Для цього перейдіть до шару галереї (кнопка шару розташована ліворуч на екрані або натисніть безпосередньо на зображення).

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

<figure><img src="/files/ad688baf9b0f62e108672bff2421c5d0b6733868" alt=""><figcaption></figcaption></figure>

Крім того, можна налаштувати прозорість, обертання та інші ефекти для зображень, щоб відображення галереї в блоці було цікавішим.

У галереї є два варіанти розміру зображення: "cover" — на всю ширину зображення та "contain" — з полями.

Приклад 1. Розмір зображення — "cover"

<figure><img src="/files/e9208f7617a1357c7996bee61441d245e1f45ea8" alt=""><figcaption></figcaption></figure>

Приклад 2. Розмір зображення — "contain".

<figure><img src="/files/f9c300261104d10406e860e2e646a2b1791709fe" alt=""><figcaption></figcaption></figure>

Функція циклічного перегляду дає змогу автоматично переходити від останнього зображення в галереї до першого, без потреби прокручувати попередні. Якщо функцію циклічності вимкнено, щоб повернутися до першого зображення, потрібно вручну використовувати клавіші зі стрілками.

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

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

<figure><img src="/files/e41cee292926ea6fb7df8849c8127e97fd4b75d0" alt=""><figcaption></figcaption></figure>

У налаштуваннях також можна налаштувати рамку для галереї, її стиль, заокруглення, а також додати тіні та інші ефекти.

<figure><img src="/files/2f4bc1245d87137c386d0b8aba51ae03186e26ec" alt=""><figcaption></figcaption></figure>

### Акордеон

Універсальний елемент блоку Accordion — це зручне графічне рішення для сайту у вигляді списку текстових нотаток із випадаючими елементами:

Accordion легко інтегрувати у ваш сайт і налаштувати відповідно до ваших потреб: його можна адаптувати під будь-які вимоги.

Щоб додати елемент до блоку, відкрийте універсальні налаштування блоку. У списку доступних елементів ви побачите "Accordion".

<figure><img src="/files/bb3fca79e5d752605d094ac4cac401f6f4ca93a4" alt=""><figcaption></figcaption></figure>

Щоб застосувати до елемента потрібні параметри стилю, потрібно натиснути на нього. Після цього праворуч з’явиться конструктор параметра "Accordion", як і для інших елементів нульового блоку.

<figure><img src="/files/7987d2baedc07da1666b70f0c7ee42a1d001e337" alt=""><figcaption></figcaption></figure>

Після натискання на стрілку на екрані з’явиться спливне вікно з інформацією, наприклад із відповіддю на запитання:

<figure><img src="/files/1402ab41614eb7e413c621eaff1b96ff3e4078af" alt=""><figcaption></figcaption></figure>

Щоб змінити текст елемента, двічі клацніть лівою кнопкою миші по наявному елементу в створеному шаблоні. Так само можна змінити текст у випадаючому списку.

Після вибору тексту для редагування вгорі екрана з’являться налаштування тексту, подібні до тих, що використовуються в будь-якому текстовому редакторі.

<figure><img src="/files/a904d6bd60dfb69f2dced58d2e241a3b3ae75e00" alt=""><figcaption></figcaption></figure>

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

Тепер перейдемо до правого меню базових налаштувань елемента. Тут також можна змінити шрифт: вибрати колір, насиченість, регістр, прозорість, а також додати власний шрифт та інші параметри.

У налаштуваннях Accordion можна додати ще більше ваших запитань, відповідей тощо. Для цього потрібно натиснути Add:

<figure><img src="/files/8a78a5eb984ef9c2859a802c8943d70bacd5872b" alt=""><figcaption></figcaption></figure>

Також можна змінити дизайн запитання та відповіді, зробити їх більш заокругленими, зробити фон прозорим, налаштувати зміну фону при наведенні на запитання або відповідь, оформити рамку в певному стилі та інші параметри — усе залежить від вашої фантазії та вподобань.

<figure><img src="/files/316cbf546d11904c84549db4926662cd115b595a" alt=""><figcaption></figcaption></figure>

У Zero block можна поєднувати різні елементи, щоб створити унікальний і запам’ятовуваний стиль сайту. Це дасть змогу вразити ваших клієнтів оригінальними дизайнерськими рішеннями.

Після завершення роботи над сторінкою потрібно адаптувати її під різні розміри екранів.

### Форма

Елемент Zero block "Form" дає змогу використовувати форму збору заявок саме там, де це справді потрібно. Ви зможете збирати заявки та контакти саме там, де користувач найбільше залучений, без потреби відображати її в окремій формі.

<figure><img src="/files/f81b34dcf4bef33018e9f9da15971f4f5726a598" alt=""><figcaption></figcaption></figure>

Щоб додати форму до нульового блоку, натисніть "+Add item", а потім виберіть "Form" у списку, що відкриється.

Блок "Form" відображатиметься як кнопки в месенджерах, до яких можна додавати запитання та змінювати кнопки:

<figure><img src="/files/ed9e39750ec72555c6ac9dd02649a398b8e38df6" alt=""><figcaption></figcaption></figure>

Щоб додати запитання до форми, наприклад у вигляді "Enter email", "Describe your question" тощо, потрібно натиснути кнопку "Set up questions" у правому меню налаштувань:

<figure><img src="/files/b8924a788588157333054e9eb28f96085f0ed406" alt=""><figcaption></figcaption></figure>

Потім створіть свої запитання у формі:

<figure><img src="/files/9b9c381d64baa82eb21b36d710206c4c6ef4ab12" alt=""><figcaption></figcaption></figure>

Результат може бути таким:

<figure><img src="/files/b02e6b340625070cfe9eb430b697b04c4dac7941" alt=""><figcaption></figcaption></figure>

Ви можете додати прапорець "I agree with the personal data processing policy":

<figure><img src="/files/71729af524bad3af04607e8e8d7642da4e86fb2b" alt=""><figcaption></figcaption></figure>

Також можна редагувати кнопки соціальних мереж:

<figure><img src="/files/0c948605059a199ebad372fc192e27685cedb5c3" alt=""><figcaption></figcaption></figure>

І налаштувати заголовок та підзаголовок форми.

Двічі клацніть у текстовому полі, після чого можна ввести потрібний текст, а також змінити шрифт, жирність, колір тексту тощо:

<figure><img src="/files/9d7afb6172e638a290ef2c3cdc6aa56a2c786352" alt=""><figcaption></figcaption></figure>

Для отримання додаткової інформації про типи полів запитань дивіться статтю "[Відповіді на форумі](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/otvety-form)".

### reCAPTCHA

Щоб встановити reCAPTCHA, потрібно вказати пару ключів (публічний і секретний ключі) в загальних налаштуваннях сайту та ввімкнути перевірку recaptcha в нульовому блоці у формі збору даних.

Ви можете вибрати будь-який сервіс, що забезпечує захист сайту за допомогою captcha. У цьому розділі ми розглянемо, як установити Google captcha.

Крок 1. Отримання ключів

<figure><img src="/files/9b187ab40dfeab6daf466fc5ab9a01501b3db5d3" alt=""><figcaption></figcaption></figure>

Спочатку потрібно заповнити основну інформацію для отримання ключів: вибрати типи captcha; додати домен сайту, на якому ви плануєте встановити захист. Далі натисніть "Send".

Крок 2. Введення ключів

<figure><img src="/files/e52ce7a9266c548691211e13612634687bb4b081" alt=""><figcaption></figcaption></figure>

Потім ви побачите пару ключів, які потрібно скопіювати та вставити в налаштування сторінки сайту в MaviBot. Для цього:

1\) Знайдіть кнопку налаштувань сторінки сайту на верхній панелі:

<figure><img src="/files/102fdaaa1e18ae773723f483f28114201000fd77" alt=""><figcaption></figcaption></figure>

2\) Перейдіть до налаштувань основної інформації:

3\) У налаштуваннях основної інформації введіть значення пари ключів, які ви отримали раніше:

<figure><img src="/files/34419ab2d5efd6fa34c4126f48146489a41ada3d" alt=""><figcaption></figcaption></figure>

Крок 3. Увімкніть reCAPTCHA в нульовому блоці.

Перейдіть до нульового блоку, де у вас встановлена форма збору даних, або до нульового блоку, де ви плануєте створити форму з reCAPTCHA:

<figure><img src="/files/749dfd64570dbe63ef9924f988158f8e3c44b429" alt=""><figcaption></figcaption></figure>

Натисніть на елемент "Form" у нульовому блоці, щоб відкрити праву панель меню.

Ми описали, як створити форму збору даних і відредагувати її, у розділі "[Форма](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block#forma)" вище.

Далі знайдіть кнопки для ввімкнення reCAPTCHA:

<figure><img src="/files/ea3478e01fd3d4325e69982dd891f4de829cfa0f" alt=""><figcaption></figcaption></figure>

Увімкніть reCAPTCHA (за потреби можна ввімкнути попередження англійською мовою):

<figure><img src="/files/b8887b690f870b94e481da8aba04ce359f43d008" alt=""><figcaption></figcaption></figure>

Потім збережіть налаштування.

{% hint style="success" %}
Готово! Тепер ви знаєте, як увімкнути reCAPTCHA в Zero block.
{% endhint %}

{% hint style="info" %}
Як адаптувати сторінку в нульовому блоці, було описано в [статті з такою самою назвою](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block/kak-adaptirovat-stranicu-v-universalnom-bloke).
{% endhint %}


---

# 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/blocks/zero.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.