# Глобальні налаштування розділу

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

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

<figure><img src="/files/4506cb8f89ca1a9d701c33a60f0b50d9ac5e6461" alt=""><figcaption></figcaption></figure>

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

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

## Налаштування шрифту

Ви можете змінити такі параметри:

* Шрифт і стиль: сімейство шрифту, стиль (Звичайний або Курсив) і насиченість (жирність).
* Інтервали: міжлітерний інтервал, міжрядковий інтервал і розмір шрифту.

<figure><img src="/files/421c1cfac2242c98556d56a497b12f6a9a99bfdf" alt=""><figcaption></figcaption></figure>

Для блоків, що мають і поле Заголовок, і поле Текст, у вас є два варіанти оформлення:

1. Застосуйте **єдиний стиль шрифту** до всього блоку для однаковості.
2. Увімкніть перемикач **Додатковий шрифт** — опція, що дає змогу задати окремі стилі для Заголовка і Тексту, створюючи різні візуальні ролі в межах одного блоку.

<figure><img src="/files/27e3d4d283f3cc12336f764843567fe23882ead5" alt=""><figcaption></figcaption></figure>

### Як додати власний шрифт

Щоб додати власний шрифт, знайдіть кнопку з такою самою назвою та натисніть її:

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

Вас буде перенаправлено на сторінку з величезним різноманіттям різних шрифтів:

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

Крок 1. Знайдіть потрібний шрифт

а) Це можна зробити за допомогою рядка пошуку:

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

Виберіть необхідні критерії для шрифту:

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

б) Щоб знайти шрифт вручну, прокрутіть список на панелі форматування.

Крок 2. Натисніть на вибраний шрифт:

Ви побачите модальне вікно з параметрами шрифту:

<figure><img src="/files/513dd8ca940a7bf234d49dcedd6f7566206b06c4" alt=""><figcaption></figcaption></figure>

Крок 3. Виберіть варіант шрифту, поставивши позначку біля потрібного:

<figure><img src="/files/99b965146f95c87bb97573bc395c9b6803a8cf9c" alt=""><figcaption></figcaption></figure>

Крок 4. Натисніть **"Додати"** кнопку:

<figure><img src="/files/97cd3c715525fadfa61fe425016afd9a9443ed5e" alt=""><figcaption></figcaption></figure>

Ваші власні налаштування шрифту буде показано тут після збереження.

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

Крок 6. Натисніть **«Зберегти»**:

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

Додані шрифти будуть показані в тому самому списку, що й стандартні шрифти.

<figure><img src="/files/78094bf7fcb686d1e23b8cc458d25cb94fc5c18a" alt=""><figcaption></figcaption></figure>

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

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

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

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

Ви можете накласти колір або градієнт поверх фонового зображення.

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

Зображення можна додати як файл або як посилання на зображення:

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

Відео можна додати зі сховища

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

Спочатку завантажте відеофайл до файлового сховища.

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

### Налаштування фонового зображення

**Керування позиціонуванням зображення**

Зображення в межах секції розміщується за допомогою двох незалежних параметрів:

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

**Вкажіть позицію** за допомогою ключового слова або комбінації:

| Ключове слово                               | Ефект                      |
| ------------------------------------------- | -------------------------- |
| `top`, `bottom`, `center`                   | Вертикальне вирівнювання   |
| `left`, `right`, `center`                   | Горизонтальне вирівнювання |
| `bottom left`, `top right`, `center center` | Комбінована позиція        |

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

* Відсотки (наприклад, `30% 75%`)
* Пікселі (наприклад, `20px 100px`)
* Або змішані одиниці

<figure><img src="/files/6a6431988e45ee9c31c7361938b82a0b2b133bb6" 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/222a2570f50c1c32e55b9b5552ceb8adb8b94a96" alt=""><figcaption></figcaption></figure>

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

Ця опція за замовчуванням вимкнена. Доступні налаштування включають:

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

**Як закріпити зображення**

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

<figure><img src="/files/67f20c85a2b79dd1f7474418a52c746e8162661a" alt=""><figcaption></figcaption></figure>

### Фоновий колір і градієнт

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

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

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

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

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

**Радіус рамки:**

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

Радіус рамки вказується в пікселях — px.

Висота секції

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

Висоту секції можна визначити, використовуючи такі одиниці:

* px: пікселі (фіксоване значення)
* vh: висота вікна перегляду (адаптується до розміру екрана)

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

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

За замовчуванням ширина секції встановлена на повний екран, а вміст відображається в 8-колонковому макеті.

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

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

<figure><img src="/files/81289a1bc841a014d6535b525efad5820da98cb7" alt=""><figcaption></figcaption></figure>

Приклад 2. Секція займає 8 колонок, а вміст охоплює всю ширину секції:

<figure><img src="/files/81568227fd018ec21fa32de33075a76dd2f5bc7e" alt=""><figcaption></figcaption></figure>

**Ефект появи під час прокручування**

<figure><img src="/files/25898f26a7b55d14b032da6153943ebac53219c3" alt=""><figcaption></figcaption></figure>

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

### Відображення вмісту

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

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

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

Щоб адаптувати текст до вузьких екранів відповідно до стилів Mavibot, увімкніть цей повзунок:

<figure><img src="/files/485eae40e6f09373187c61fd62b3fcee913f6da2" alt=""><figcaption></figcaption></figure>

### Поля (для секції)

#### Зовнішні поля

Ви можете використовувати ці поля, щоб налаштувати відстань між секціями. За замовчуванням внутрішній відступ (верх/низ/ліворуч/праворуч) встановлено на 0 px.

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

Щоб застосувати однакові поля з усіх боків, введіть значення в основне поле. Верхнє, нижнє, ліве та праве поля буде встановлено автоматично.

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

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

#### Внутрішні поля

Використовуйте ці поля, щоб налаштувати внутрішній відступ секції. За замовчуванням відступ (верх, низ, ліворуч, праворуч) встановлено на 32 px.

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

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

Діапазон видимості визначає, на яких пристроях (наприклад, комп’ютер, планшет, мобільний) буде показано цей блок. Це налаштовується окремо для кожного блоку.

<figure><img src="/files/2539cbd01ad2a981a7375ad99ba5e2878a2ba48d" alt=""><figcaption></figcaption></figure>

**Чому це корисно і як це працює?**

Якщо блок (наприклад, обкладинка) добре виглядає на комп’ютері, але не на мобільному, ви можете налаштувати його так, щоб він відображався лише на пристроях із шириною екрана 960 пікселів або більше. Це гарантує, що блок буде видимим лише в десктопному перегляді та прихованим на мобільних пристроях.

Потім потрібно скопіювати цей блок і налаштувати його вигляд спеціально для мобільних пристроїв (змінити фото, розмір шрифту тощо). Для цього блоку встановіть видимість у діапазоні від 0 до 960 пікселів. Це буде мобільна версія блоку.

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

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

{% hint style="info" %}
За замовчуванням секція відображається на пристроях будь-якого розміру.
{% endhint %}

#### Приклад

Налаштуйте першу секцію для мобільних пристроїв і планшетів

* Створіть секцію
* Встановіть діапазон її видимості від 0 до 640 px
* Завантажте зображення, оптимізоване для невеликих екранів

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

Друга секція призначена для ПК (ноутбуків). Встановіть діапазон видимості від 641 пікселя і вище.

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

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

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

Щоб перевірити, як секції виглядатимуть на конкретному пристрої, перейдіть на сторінку попереднього перегляду сайту. Натисніть правою кнопкою миші та натисніть «Переглянути код».

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

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

#### Час появи

<figure><img src="/files/d9f4b1a90446c09aa131865f533ae78056e42930" 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/uk/websites/saiti/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.