Все блоки используют одни и те же глобальные настройки для шрифтов, фонов и отображения, что обеспечивает единый визуальный стиль на вашем сайте, позволяя при этом содержимому блоков различаться.
Чтобы настроить глобальные параметры для любого блока, наведите на него курсор и выберите кнопку Настройки, которая появится.
Нажмите кнопку Настройки, чтобы открыть меню глобальных настроек секции справа.
Настройки шрифта
Вы можете изменить следующие параметры:
- Шрифт и стиль: семейство шрифтов, стиль (Обычный или Курсив) и насыщенность (жирность).
- Интервал: межбуквенный интервал, высота строки и размер шрифта.
Для блоков, содержащих как заголовок, так и текстовое поле, доступны два варианта стилизации:
- Применить единый стиль шрифта ко всему блоку для единообразия.
- Включить опцию Дополнительный шрифт, чтобы задать отдельные стили для заголовка и текста, создавая различные визуальные роли в одном блоке.
Как добавить пользовательский шрифт
Чтобы добавить пользовательский шрифт, найдите одноименную кнопку и нажмите на нее:
Вы перейдете на страницу с огромным разнообразием различных шрифтов:
Шаг 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.
Диапазон видимости по устройству
Диапазон видимости определяет, на каких устройствах (например, desktop, tablet, mobile) будет отображаться этот блок. Эта настройка настраивается индивидуально для каждого блока.
Почему это полезно и как это работает?
Если блок (например, обложка) хорошо отображается на десктопе, но плохо на мобильном устройстве, вы можете настроить его отображение только на устройствах с шириной экрана 960 пикселей или больше. Это гарантирует, что блок будет виден только в десктопных представлениях и скрыт на мобильных устройствах.
Затем вам нужно скопировать этот блок и настроить его внешний вид специально для мобильных устройств (изменить фото, размер шрифта и т.д.). Для этого блока установите диапазон видимости от 0 до 960 пикселей. Это будет мобильная версия блока.
В результате на компьютерах будет отображаться десктопная версия, а на смартфонах и планшетах — мобильная.
Диапазон видимости (различные значения параметров) необходим для возможности настройки внешнего вида блока для конкретного устройства путем выбора разрешения. Например, если блок плохо отображается на планшете или на конкретной модели телефона, вы можете настроить его внешний вид на основе разрешения этих устройств.
По умолчанию секция отображается на устройствах любого размера.
Пример
Настройте первую секцию для мобильных устройств и планшетов
- Создайте секцию
- Установите для нее диапазон видимости от 0 до 640 px
- Загрузите изображение, оптимизированное для маленьких экранов
Вторая секция — для ПК (ноутбуков). Установите диапазон видимости от 641 пикселя и выше.
- Сохраните изменения и перейдите на страницу редактирования. Для вашего удобства там будут отображаться настройки видимости секции.
Чтобы проверить, как секции будут выглядеть на конкретном устройстве, перейдите на страницу предварительного просмотра сайта. Нажмите правую кнопку мыши и выберите "Просмотреть код".
Выберите устройство, на котором вы хотите увидеть, как будет выглядеть сайт.
Время появления
Вы можете использовать это поле, чтобы задать задержку перед появлением секции, указанную в секундах (s) или минутах (m).