Нулевой блок

В этой статье мы рассмотрим, как использовать нулевые блоки для создания сайтов с индивидуальным дизайном. Мы разберём, как работает редактор блоков, и покажем, как добавлять и редактировать элементы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст

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

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

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

Изображение

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

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

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

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

Фигура

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

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

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

Кнопка

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

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

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

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

Видео

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

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

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

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

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

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

Подсказка

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

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

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

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

Галерея

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

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

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

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

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

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

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

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

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

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

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

Аккордеон

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

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

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

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

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

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

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

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

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

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

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

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

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

Форма

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

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

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

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

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

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

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

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

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

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

Для получения дополнительной информации о типах полей для вопросов см. статью «Ответы на форуме".

reCAPTCHA

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

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

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

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

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

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

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

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

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

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

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

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

О том, как создать форму сбора данных и редактировать её, мы рассказали в разделе «Форма» выше.

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

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

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

Готово! Теперь вы знаете, как включить reCAPTCHA в Zero block.

О том, как адаптировать страницу в zero block, было описано в одноимённой статье.