# Нулевой блок

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

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

Текст **Zero Block** — это полностью настраиваемый редактор веб-дизайна в **Mavibot**. Он позволяет создавать уникальные дизайны для отдельных блоков или всего сайта без каких-либо ограничений.

<figure><img src="/files/7b033b01f52bded2c4a64335031f8929eb2a5bf1" alt=""><figcaption></figcaption></figure>

## Как добавить блок

Чтобы добавить **Zero Block** на страницу, нажмите кнопку "+" на панели редактирования.

<figure><img src="/files/7c9fa31216b3d061cd63a4547ba282d2ebbbe8db" alt=""><figcaption></figcaption></figure>

После нажатия кнопки "+" справа появится меню «Добавить новый блок».

Выберите **"Zero Block"** и перейдите к редактированию.

<figure><img src="/files/54c32173126b675f650baaffe5fcff1330d71005" alt=""><figcaption></figcaption></figure>

Здесь находится меню настроек блока.

## Высота контента

С помощью этого поля можно изменить размер блока. Значение по умолчанию — 550px.

<figure><img src="/files/499457db32d41715e433537ed9e45767b650ac7f" alt=""><figcaption></figcaption></figure>

#### Масштабирование области Grid

Используется для адаптации дизайна сайта к разным размерам экранов.

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

По умолчанию отключено, но можно также выбрать «автомасштабирование по ширине окна».

## Настройки фона

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

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

Можно добавить фоновой файл в форматах SVG, PNG, JPG или GIF. Размер файла не должен превышать 30 МБ.

Пример 1. Добавление файла JPG.

<figure><img src="/files/831fd6548fbc732fb273bae426b03d5d50f240ce" alt=""><figcaption></figcaption></figure>

Выравнивание изображения по умолчанию установлено в Center Center. Вы можете выбрать другое положение из списка или задать его самостоятельно, нажав на значок справа.

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

Пример 1. Отображение изображения по умолчанию в позиции Center Center.

Пример 2. Отображение изображения в позиции Top Left. Положение «поведение» по умолчанию установлено на «scroll», можно выбрать положение «fixed». При изменении положения фон смещается.

<figure><img src="/files/5d85ce2b08f9a7bb115be8f75eaba0f63fc20306" alt=""><figcaption></figcaption></figure>

## Добавление элементов

Нажмите кнопку «Добавить элемент» слева. Внизу кнопки находятся слои, и вы можете менять их местами, накладывая один элемент на другой.

<figure><img src="/files/35f3467358fc0503a9b1285eb4928331c7ed9655" alt=""><figcaption></figcaption></figure>

Кнопка Add Element создаёт новый слой с выбранным элементом:

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

У каждого элемента открывается собственное меню настроек.

&#x20;Нажмите кнопку «Сохранить» после настройки элемента.

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

### Текст

Можно добавить элемент с текстовым содержимым.

<figure><img src="/files/349d6d1707eb76f6a4f78f5c0bb169326815ad9c" alt=""><figcaption></figcaption></figure>

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

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

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

### Изображение

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

<figure><img src="/files/88f69f649cc1eb012272490b3973ba278da9b353" alt=""><figcaption></figcaption></figure>

После вставки изображения можно настроить его положение на странице. Выберите, как оно будет расположено относительно левого или правого края, либо поместите его по центру. Также можно настроить прозрачность изображения и другие параметры отображения, например размытие или скругление.

<figure><img src="/files/88e5d7b556347af5c38c2afcac18600f21590079" alt=""><figcaption></figcaption></figure>

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

Фон можно изменить в любой момент.

### Фигура

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

<figure><img src="/files/1dabc76d5bb59050ad7dee61c31bb0f3bf83b46a" alt=""><figcaption></figcaption></figure>

Настройки фигуры:

<figure><img src="/files/437e36a05f44bf052d0dcd0eea3ba36a31f3810a" alt=""><figcaption></figcaption></figure>

Пример добавления фигуры в блок

### Кнопка

Чтобы добавить кнопку, нажмите «Добавить элемент» и выберите «Button»:

<figure><img src="/files/88f1a627b17bf8e92569280c88a7a375c7c286bd" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/01071a8e4349644e6ddf07a33c2cbd6c32ec1549" alt=""><figcaption></figcaption></figure>

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

Чтобы кнопка была активной, нужно добавить ссылку на нужную вам страницу в настройках элемента в разделе Button. При нажатии на кнопку будет переход по ссылке.

Чтобы убедиться, что кнопка работает, нужно сохранить изменения, закрыть настройки блока и перейти к предпросмотру сайта.

### Видео

С помощью этого инструмента можно добавить любое видео и настроить его отображение в блоке.

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

В zero block можно добавлять видео из различных ресурсов:

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

Для этого просто укажите, где именно находится видео (Youtube, Vimeo или MP4), а затем вставьте URL в поле ссылок.

Также можно добавить видео из файлового хранилища. Для этого скопируйте ссылку на видео в файловом хранилище:

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

Затем в настройках элемента «Video» выберите тип видео MP4:

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

И вставьте ссылку на видео из файлового хранилища.

### Подсказка

Этот элемент позволяет добавить всплывающую подсказку с любым содержимым. В настройках можно отредактировать элемент по своему вкусу.

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

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

Можно сделать подсказку полупрозрачной и разместить её поверх текста, фона или изображения:

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

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

Не забудьте сохранить выполненные действия в настройках с помощью функции «Сохранить».

### Галерея

Вы можете добавить новый элемент в zero block так же, как и предыдущие:

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

Mavibot добавляет два изображения по умолчанию. Но вы также можете загрузить нужные изображения для галереи самостоятельно. Для этого перейдите в слой галереи (кнопка слоя находится слева на экране или нажмите прямо на изображение).

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

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

Кроме того, можно настроить прозрачность, вращение и другие эффекты для изображений, чтобы отображение галереи в блоке было интереснее.

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

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

<figure><img src="/files/7a8987b250ac257202d7140570dda097d26d53a9" alt=""><figcaption></figcaption></figure>

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

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

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

Также можно выбрать скорость прокрутки изображений и автопроигрывание для автоматического пролистывания галереи.

В настройках кнопок галереи можно изменить их цвет, форму (сделать их треугольными или в виде стрелок), расположение, размер и другие параметры.

<figure><img src="/files/7a0922d2a15775f6478eb4dfc2b607158f6ad52b" alt=""><figcaption></figcaption></figure>

В настройках также можно настроить рамку галереи, её стиль, скругление, а также добавить тени и другие эффекты.

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

### Аккордеон

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

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

Чтобы добавить элемент в блок, откройте настройки универсального блока. В списке доступных элементов вы увидите «Accordion».

<figure><img src="/files/286f2c12425efb1e87d50db6dd948c3cdd6edeba" alt=""><figcaption></figcaption></figure>

Чтобы применить к элементу нужные параметры стиля, нужно нажать на него. После этого справа появится конструктор параметров «Accordion», как и для других элементов zero block.

<figure><img src="/files/7d9d62c5d3707a234936a9fa525c19a27a789ad4" alt=""><figcaption></figcaption></figure>

После нажатия на стрелку на экране появится всплывающее окно с информацией, например с ответом на вопрос:

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

Чтобы внести изменения в текст элемента, дважды щёлкните левой кнопкой мыши по существующему элементу в созданном шаблоне. Точно так же можно изменить текст в выпадающем списке.

После выбора текста для редактирования в верхней части экрана появятся настройки текста, аналогичные тем, что используются в любом текстовом редакторе.

<figure><img src="/files/657e190a6bf0903b1d9e4e6303aeee97cce18093" alt=""><figcaption></figcaption></figure>

В этом дополнительном текстовом меню можно изменить параметры шрифта, такие как толщина, наклон, высота и другие.

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

В настройках Accordion можно добавить больше своих вопросов, ответов и т. д. Нужно нажать Add:

<figure><img src="/files/656fc9fb01ac5384a38555166a7ce6f6ceaea300" alt=""><figcaption></figcaption></figure>

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

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

В Zero block можно комбинировать различные элементы, чтобы создать уникальный и запоминающийся стиль сайта. Это позволит удивить ваших клиентов оригинальными дизайнерскими решениями.

После завершения работы над страницей необходимо адаптировать её под разные размеры экранов.

### Форма

Элемент Zero block «Form» позволяет использовать форму сбора заявок там, где это действительно нужно. Вы сможете собирать заявки и контакты именно там, где пользователь наиболее вовлечён, без необходимости выводить её в отдельную форму.

<figure><img src="/files/87c25388c18fd95b0cd508ee1001c989dca4c6ad" alt=""><figcaption></figcaption></figure>

Чтобы добавить форму в zero block, нажмите «+Add item», а затем выберите «Form» в открывшемся выпадающем списке.

Блок «Form» будет отображаться в виде кнопок в мессенджерах, к которым можно добавлять вопросы и менять кнопки:

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

Чтобы добавить вопросы в форму, например в виде «Введите email», «Опишите ваш вопрос» и тому подобное, нужно нажать кнопку «Set up questions» в правом меню настроек:

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

Затем создайте свои вопросы в форме:

<figure><img src="/files/1984ac41af3c68ae49c14ef1bb987ffb4e10bccb" alt=""><figcaption></figcaption></figure>

Результат может быть следующим:

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

Можно добавить флажок «Я согласен с политикой обработки персональных данных»:

<figure><img src="/files/30c8b557409b5155475726f580beb720e8139f63" alt=""><figcaption></figcaption></figure>

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

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

И настроить заголовок и подзаголовок формы.

Дважды щёлкните по текстовому полю, после чего можно ввести нужный текст, а также изменить шрифт, сделать его жирным, изменить цвет текста и т. д.:

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

Для получения дополнительной информации о типах полей для вопросов см. статью «[Ответы на форуме](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/otvety-form)".

### reCAPTCHA

Чтобы установить reCAPTCHA, необходимо указать пару ключей (публичный и секретный ключи) в общих настройках сайта и включить проверку recaptcha в zero block в форме сбора данных.

Вы можете выбрать любой сервис, который обеспечивает защиту сайта с помощью captcha. В этом разделе мы рассмотрим, как установить Google captcha.

Шаг 1. Получение ключей

<figure><img src="/files/613abc39c6dd5dda6a38cc0065d89e98bba4999c" alt=""><figcaption></figcaption></figure>

Сначала необходимо заполнить основную информацию для получения ключей: выбрать типы captcha; добавить домен сайта, на котором вы планируете установить защиту. Затем нажмите «Отправить».

Шаг 2. Ввод ключей

<figure><img src="/files/7de16074c6a2c7444c85287ecbfe8ab8f3667f96" alt=""><figcaption></figcaption></figure>

Затем вы увидите пару ключей, которые нужно скопировать и вставить в настройках страницы сайта в MaviBot. Для этого:

1\) Найдите кнопку настроек страницы сайта в верхней панели:

<figure><img src="/files/63587e7bd0e96cc5d3ff0055426399baceeb8f32" alt=""><figcaption></figcaption></figure>

2\) Перейдите в настройки основной информации:

3\) В настройках основной информации введите значения пары ключей, которые вы получили ранее:

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

Шаг 3. Включите reCAPTCHA в zero block.

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

<figure><img src="/files/24d98c1b000a72077b41dfea5db258fd022dc1bf" alt=""><figcaption></figcaption></figure>

Нажмите на элемент «Form» в zero block, чтобы открыть правую панель меню.

О том, как создать форму сбора данных и редактировать её, мы рассказали в разделе «[Форма](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block#forma)» выше.

Далее найдите кнопки для включения reCAPTCHA:

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

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

<figure><img src="/files/88d43e39c082a8ead849f0b66d07577ae8f6f0f0" alt=""><figcaption></figcaption></figure>

Затем сохраните настройки.

{% hint style="success" %}
Готово! Теперь вы знаете, как включить reCAPTCHA в Zero block.
{% endhint %}

{% hint style="info" %}
О том, как адаптировать страницу в zero block, было описано в [одноимённой статье](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/ru/websites/saity/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.