Усі блоки використовують однакові глобальні налаштування для шрифтів, фонів і відображення, що забезпечує узгоджений візуальний стиль на вашому сайті, дозволяючи при цьому вмісту блоків відрізнятися.
Щоб налаштувати глобальні параметри для будь-якого блоку, наведіть курсор на нього та виберіть кнопку Налаштування, яка з'явиться.
Натисніть кнопку Налаштування, щоб відкрити меню глобальних налаштувань секції праворуч.
Налаштування шрифту
Ви можете змінити такі параметри:
- Шрифт і стиль: сімейство шрифтів, стиль (Звичайний або Курсив) і насиченість (жирність).
- Інтервал: міжлітерний інтервал, висота рядка та розмір шрифту.
Для блоків, які мають як поле Заголовок, так і поле Текст, доступні два варіанти стилізації:
- Застосувати єдиний стиль шрифту до всього блоку для однорідності.
- Увімкнути опцію Додатковий шрифт, щоб визначити окремі стилі для Заголовка та Тексту, створюючи різні візуальні ролі в межах одного блоку.
Як додати власний шрифт
Щоб додати власний шрифт, знайдіть кнопку з такою ж назвою та натисніть на неї:
Ви перейдете на сторінку з величезною різноманітністю різних шрифтів:
Крок 1. Знайдіть потрібний шрифт
a) Це можна зробити за допомогою рядка пошуку:
Виберіть необхідні критерії для шрифту:
- Категорія шрифту
- sans-serif (шрифти без засічок)
- serif (шрифти із засічками)
- handwriting (шрифт, що імітує рукописний текст)
- monospace (моноширинний або непропорційний шрифт, шрифт, у якому всі символи мають однакову ширину)
- display (відображуваний жирний шрифт)
- Підтримка мов
- Кирилиця
- Латиниця
b) Щоб знайти шрифт вручну, прокрутіть список у стрічці форматування.
Крок 2. Натисніть на вибраний шрифт:
Ви побачите модальне вікно з параметрами шрифту:
Крок 3. Виберіть варіант шрифту, поставивши прапорець біля потрібного:
Крок 4. Натисніть кнопку "Додати":
Ваші налаштування власного шрифту відображатимуться тут після їх збереження.
Крок 6. Натисніть "Зберегти":
Додані шрифти відображатимуться в тому ж списку, що й шрифти за замовчуванням.
Налаштування фону
Налаштуйте фон секції за допомогою суцільного кольору, градієнта, зображення або відео.
Ви можете накласти колір або градієнт на фонове зображення.
Зображення можна додати як файл або як посилання на зображення:
Відео можна додати зі сховища
Спочатку завантажте ваш відеофайл до файлового сховища.
Налаштування фонового зображення
Керування позиціонуванням зображення
Зображення в межах секції позиціонується за допомогою двох незалежних параметрів:
- Горизонтальне вирівнювання (вісь X)
- Вертикальне вирівнювання (вісь Y)
Вкажіть позицію за допомогою ключового слова або комбінації:
| Ключове слово | Ефект |
|---|---|
top, bottom, center
|
Вертикальне вирівнювання |
left, right, center
|
Горизонтальне вирівнювання |
bottom left, top right, center center
|
Комбінована позиція |
Для точного контролю ви також можете використовувати числові значення:
- Відсотки (наприклад,
30% 75%) - Пікселі (наприклад,
20px 100px) - Або змішані одиниці
Параметри розміру зображення
Ви можете контролювати розміри зображення за допомогою наступних методів:
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).