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

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

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

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

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

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

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

• Інтервали: міжлітерний інтервал, міжрядковий інтервал і розмір шрифту.

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

1. Застосуйте єдиний стиль шрифту до всього блоку для однаковості.

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

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

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

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

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

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

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

• Категорія шрифту

• sans-serif (шрифти без засічок)

• serif (шрифти із засічками)

• handwriting (шрифт, що імітує рукопис)

• monospace (моноширинний або непропорційний шрифт, у якому всі символи мають однакову ширину)

• display (декоративний жирний шрифт)

• Підтримка мов

• Кирилиця

• Латиниця

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Вертикальне вирівнювання (вісь Y)

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

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

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

• Відсотки (наприклад, 30% 75%)

• Пікселі (наприклад, 20px 100px)

• Або змішані одиниці

Позиція 100%; розмір 100%; без повторення

Параметри розміру зображення

Ви можете керувати розмірами зображення такими способами:

1. Задайте власні розміри

Визначте і ширину, і висоту за допомогою гнучких значень.

• Формат: [ширина] [висота]

• Приклад 1 (пікселі): 500px 300px

• Приклад 2 (відсотки): 15% 10%

2. Використайте попередньо задане ключове слово

Укажіть один параметр, щоб застосувати певну поведінку масштабування:

• contain — Масштабує зображення так, щоб воно повністю помістилося у межах висоти секції, зберігаючи пропорції (Приклад 3).

• cover — Відображає зображення в його початкових піксельних розмірах (Приклад 4: початковий розмір 1268 × 1343 px).

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

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

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

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

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

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

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

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

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

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

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

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

• px: пікселі (фіксоване значення)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приклад

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

• Створіть секцію

• Встановіть діапазон її видимості від 0 до 640 px

• Завантажте зображення, оптимізоване для невеликих екранів

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

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

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

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

Час появи

За допомогою цього поля можна визначити затримку перед появою секції, вказану в секундах (s) або хвилинах (m).