Глобальные настройки раздела
Все блоки используют одни и те же глобальные настройки шрифтов, фонов и отображения, обеспечивая единый визуальный стиль на всём сайте, при этом содержимое блоков может отличаться.
Чтобы настроить глобальные параметры для любого блока, наведите на него курсор и выберите Настройки кнопку, которая появится.
Нажмите кнопку Настройки кнопку, чтобы открыть меню глобальных настроек раздела справа.
Настройки шрифта
Вы можете изменить следующие параметры:
Шрифт и стиль: семейство шрифта, стиль (обычный или курсив) и начертание (жирность).
Интервалы: межбуквенный интервал, межстрочный интервал и размер шрифта.
Для блоков, в которых есть и поле «Заголовок», и поле «Текст», у вас есть два варианта оформления:
Применить единый стиль шрифта ко всему блоку для единообразия.
Включите Дополнительный шрифт — возможность задать отдельные стили для «Заголовка» и «Текста», создавая разные визуальные роли внутри одного блока.
Как добавить пользовательский шрифт
Чтобы добавить пользовательский шрифт, найдите кнопку с таким названием и нажмите на неё:
Вы попадёте на страницу с огромным разнообразием разных шрифтов:
Шаг 1. Найдите нужный шрифт
а) Это можно сделать с помощью строки поиска:
Выберите необходимые критерии для шрифта:
Категория шрифта
sans-serif (шрифт без засечек)
serif (шрифт с засечками)
handwriting (шрифт, имитирующий рукописный текст)
monospace (моноширинный или непропорциональный шрифт, в котором все символы имеют одинаковую ширину)
display (декоративный, крупный шрифт)
Поддержка языков
кириллица
латиница
б) Чтобы найти шрифт вручную, прокрутите список в панели форматирования.
Шаг 2. Нажмите на выбранный шрифт:
Вы увидите модальное окно с вариантами шрифта:
Шаг 3. Выберите вариант шрифта, поставив галочку рядом с нужным:
Шаг 4. Нажмите "Добавить" :
Здесь будут отображаться ваши пользовательские настройки шрифта после их сохранения.
Шаг 6. Нажмите "Сохранить":
Добавленные шрифты будут отображаться в том же списке, что и шрифты по умолчанию.
Настройки фона
Настройте фон раздела с помощью сплошного цвета, градиента, изображения или видео.
Поверх фонового изображения можно наложить цвет или градиент.
Изображение можно добавить как файл или как ссылку на изображение:
Видео можно добавить из хранилища
Сначала загрузите видеофайл в файловое хранилище.
Настройки фонового изображения
Элемент управления позиционированием изображения
Изображение внутри раздела позиционируется с помощью двух независимых параметров:
Горизонтальное выравнивание (ось X)
Вертикальное выравнивание (ось Y)
Укажите позицию с помощью ключевого слова или комбинации:
Ключевое слово
Эффект
сверху, снизу, по центру
Вертикальное выравнивание
слева, справа, по центру
Горизонтальное выравнивание
снизу слева, сверху справа, по центру по центру
Комбинированная позиция
Для точного управленияможно также использовать числовые значения:
Проценты (например,
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).
Последнее обновление