# Глобальные настройки раздела

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

Чтобы настроить глобальные параметры для любого блока, наведите на него курсор и выберите **Настройки** кнопку, которая появится.

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

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

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

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

Вы можете изменить следующие параметры:

* Шрифт и стиль: семейство шрифта, стиль (обычный или курсив) и начертание (жирность).
* Интервалы: межбуквенный интервал, межстрочный интервал и размер шрифта.

<figure><img src="/files/302cf1cfb991396650d4c644bb94b8526b8012d5" alt=""><figcaption></figcaption></figure>

Для блоков, в которых есть и поле «Заголовок», и поле «Текст», у вас есть два варианта оформления:

1. Применить **единый стиль шрифта** ко всему блоку для единообразия.
2. Включите **Дополнительный шрифт** — возможность задать отдельные стили для «Заголовка» и «Текста», создавая разные визуальные роли внутри одного блока.

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

### Как добавить пользовательский шрифт

Чтобы добавить пользовательский шрифт, найдите кнопку с таким названием и нажмите на неё:

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

Вы попадёте на страницу с огромным разнообразием разных шрифтов:

<figure><img src="/files/2756f53b40ed677bd18f0910bfcc3ea00e5539dd" alt=""><figcaption></figcaption></figure>

Шаг 1. Найдите нужный шрифт

а) Это можно сделать с помощью строки поиска:

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

Выберите необходимые критерии для шрифта:

* Категория шрифта
* sans-serif (шрифт без засечек)
* serif (шрифт с засечками)
* handwriting (шрифт, имитирующий рукописный текст)
* monospace (моноширинный или непропорциональный шрифт, в котором все символы имеют одинаковую ширину)
* display (декоративный, крупный шрифт)
* Поддержка языков
* кириллица
* латиница

б) Чтобы найти шрифт вручную, прокрутите список в панели форматирования.

Шаг 2. Нажмите на выбранный шрифт:

Вы увидите модальное окно с вариантами шрифта:

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

Шаг 3. Выберите вариант шрифта, поставив галочку рядом с нужным:

<figure><img src="/files/58093a825f36a147f0aba35c6ca6f794b9aa663b" alt=""><figcaption></figcaption></figure>

Шаг 4. Нажмите **"Добавить"** :

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

Здесь будут отображаться ваши пользовательские настройки шрифта после их сохранения.

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

Шаг 6. Нажмите **"Сохранить"**:

<figure><img src="/files/95b437ca5eb95f60e89ca2ded756260a5ceb7d5f" alt=""><figcaption></figcaption></figure>

Добавленные шрифты будут отображаться в том же списке, что и шрифты по умолчанию.

<figure><img src="/files/3c342f913ad03eaff175a0071e3e7b0051847185" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/21a2b67d908663896f0f631128c37d35e484a90e" alt=""><figcaption></figcaption></figure>

Настройте фон раздела с помощью сплошного цвета, градиента, изображения или видео.

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

Поверх фонового изображения можно наложить цвет или градиент.

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

Изображение можно добавить как файл или как ссылку на изображение:

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

Видео можно добавить из хранилища

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

Сначала загрузите видеофайл в файловое хранилище.

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

### Настройки фонового изображения

**Элемент управления позиционированием изображения**

Изображение внутри раздела позиционируется с помощью двух независимых параметров:

1. **Горизонтальное выравнивание** (ось X)
2. **Вертикальное выравнивание** (ось Y)

**Укажите позицию** с помощью ключевого слова или комбинации:

| Ключевое слово                                        | Эффект                      |
| ----------------------------------------------------- | --------------------------- |
| `сверху`, `снизу`, `по центру`                        | Вертикальное выравнивание   |
| `слева`, `справа`, `по центру`                        | Горизонтальное выравнивание |
| `снизу слева`, `сверху справа`, `по центру по центру` | Комбинированная позиция     |

**Для точного управления**можно также использовать числовые значения:

* Проценты (например, `30% 75%`)
* Пиксели (например, `20px 100px`)
* Или смешанные единицы

<figure><img src="/files/ad0eb6f0e81a4ae00ff1f684a54e8243887cfd2f" alt=""><figcaption><p>Позиция 100%; размер 100%; без повторения</p></figcaption></figure>

**Параметры размера изображения**

Вы можете управлять размерами изображения следующими способами:

**1. Задайте пользовательские размеры**

Определите и ширину, и высоту, используя гибкие значения.

* **Формат:** `[ширина] [высота]`
* **Пример 1 (пиксели):** `500px 300px`
* **Пример 2 (проценты):** `15% 10%`

**2. Используйте заданное ключевое слово**

Укажите один параметр, чтобы применить определённое поведение масштабирования:

* **`contain`** — Масштабирует изображение так, чтобы оно полностью помещалось по высоте раздела, сохраняя пропорции (пример 3).
* **`cover`** — Отображает изображение в его исходных размерах в пикселях (пример 4: исходный размер 1268 × 1343 px).

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

**Повторение изображения**

По умолчанию эта опция отключена. Доступные настройки включают:

<figure><img src="/files/417aedc5f6b3892e4a5a2a03a352582f81fa4a4c" alt=""><figcaption></figcaption></figure>

**Как закрепить изображение**

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

<figure><img src="/files/730519394fc898177ef3967a1f081078451b0057" alt=""><figcaption></figcaption></figure>

### Цвет и градиент фона

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

<figure><img src="/files/366ed4f4797fb1621059075dc2e36a2b704a44e8" alt="" width="563"><figcaption></figcaption></figure>

## Настройки отображения

<figure><img src="/files/314574fc39e24b4eaaa91b52e289de24288cbda0" alt=""><figcaption></figcaption></figure>

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

**Скругление углов:**

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

Скругление углов указывается в пикселях — px.

Высота раздела

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

Высоту раздела можно задать с использованием следующих единиц:

* px: пиксели (фиксированное значение)
* vh: высота области просмотра (адаптируется к размеру экрана)

### Ширина секции

Ширина 1 колонки = 106 px

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

<figure><img src="/files/36587d6fb9e00809f3b6b84df50eb35e09317b0a" alt=""><figcaption></figcaption></figure>

Пример 1: содержимое выровнено по центру внутри раздела и занимает 5 колонок сетки.

<figure><img src="/files/1155096f314b07d2e879303631403db87aff896d" alt=""><figcaption></figcaption></figure>

Пример 2. Раздел занимает 8 колонок, а содержимое покрывает всю ширину раздела:

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

**Эффект появления при прокрутке**

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

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

### Отображение содержимого

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

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

По вертикали содержимое по умолчанию выровнено по верхнему краю. Его можно опустить ниже или разместить по центру страницы.

Чтобы адаптировать текст к узким экранам в соответствии со стилями Mavibot, включите этот ползунок:

<figure><img src="/files/824b5569f2fb6666ee9a01fe588e489ae5d7b692" alt=""><figcaption></figcaption></figure>

### Отступы (для раздела)

#### Внешние отступы

С помощью этих полей вы можете настроить расстояние между разделами. По умолчанию внутренние отступы (сверху/снизу/слева/справа) установлены в 0 px.

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

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

<figure><img src="/files/08c55013cb54502decda2a169b52a3fd62c90b1b" alt=""><figcaption></figcaption></figure>

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

#### Внутренние отступы

Используйте эти поля, чтобы настроить внутренний отступ раздела. По умолчанию отступ (сверху, снизу, слева, справа) установлен в 32 px.

<figure><img src="/files/3db75c523430c4efc37bd7596ad668c4f74d6f81" alt=""><figcaption></figcaption></figure>

#### Диапазон видимости по устройствам

Диапазон видимости определяет, на каких устройствах (например, на компьютере, планшете, мобильном) будет отображаться этот блок. Эта настройка задаётся отдельно для каждого блока.

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

**Почему это полезно и как это работает?**

Если блок (например, обложка) хорошо отображается на компьютере, но не на мобильном устройстве, вы можете настроить его так, чтобы он показывался только на устройствах с шириной экрана 960 пикселей и более. Это гарантирует, что блок будет виден только в десктопной версии и скрыт на мобильных устройствах.

Затем нужно скопировать этот блок и настроить его внешний вид специально для мобильных устройств (изменить фото, размер шрифта и т. д.). Для этого блока установите видимость в диапазоне от 0 до 960 пикселей. Это будет мобильная версия блока.

В результате десктопная версия будет отображаться на компьютерах, а мобильная версия — на смартфонах и планшетах.

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

{% hint style="info" %}
По умолчанию раздел отображается на устройствах любого размера.
{% endhint %}

#### Пример

Настройте первый раздел для мобильных устройств и планшетов

* Создайте раздел
* Установите диапазон его видимости от 0 до 640 px
* Загрузите изображение, оптимизированное для маленьких экранов

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

Второй раздел предназначен для ПК (ноутбуков). Установите диапазон видимости от 641 пикселя и выше.

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

* Сохраните изменения и перейдите на страницу редактирования. Для вашего удобства там будут отображаться настройки видимости раздела.

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

Чтобы проверить, как разделы будут выглядеть на конкретном устройстве, перейдите на страницу предпросмотра сайта. Нажмите правой кнопкой мыши и выберите «Просмотреть код».

<figure><img src="/files/190c4dc5d4c7f5db710f8de945929219c410cbe2" alt=""><figcaption></figcaption></figure>

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

#### Время появления

<figure><img src="/files/06505433921260e414a95fe187aa876303a19571" alt=""><figcaption></figcaption></figure>

С помощью этого поля вы можете задать задержку перед появлением раздела, в секундах (s) или минутах (m).


---

# 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/settings.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.