Обзор
Три переиспользуемых компонента раскладки появляются почти в каждой секции конструктора: Группа, Текст и Разделитель. Вместе они позволяют построить любую раскладку без написания CSS. Выберите блок, чтобы открыть его настройки.
Группа
Группа это гибкий контейнер раскладки. Добавляйте внутрь дочерние блоки (текст, кнопки, изображения, поля рассылки, даже вложенные группы) и управляйте их расположением.
Направление
- Вертикально: дочерние элементы складываются сверху вниз.
- Горизонтально: дочерние элементы стоят рядом в ряд.
Переключатель Складывать вертикально на мобильных появляется только когда Направление это Горизонтально. Включите его, чтобы переключить горизонтальный ряд в вертикальную стопку на маленьких экранах.
Позиция и Выравнивание
Они распределяют дочерние элементы вдоль главной и поперечной осей. Их смысл меняется местами с направлением, а вариант Между (равное пространство между дочерними элементами) существует только на главной оси:
- Вертикальное направление: Позиция это главная (вертикальная) ось: сверху, по центру, снизу или между. Выравнивание это поперечная (горизонтальная) ось: слева, по центру или справа.
- Горизонтальное направление: Выравнивание это главная (горизонтальная) ось: слева, по центру, справа или между. Позиция это поперечная (вертикальная) ось: сверху, по центру или снизу.
Ширина
- Заполнение: расширяется, занимая всё доступное место в родителе. Используйте это для групп, которые должны делить место поровну внутри горизонтального родителя.
- По содержимому: сжимается до естественного размера содержимого.
- Своя: открывает слайдер Своя ширина в процентах (от 0 до 100%). Группа держит этот размер, не растягиваясь и не сжимаясь.
Промежуток
Расстояние в пикселях между дочерними элементами (от 0 до 100 px, по умолчанию 20 px).
Цветовая схема
Использовать цветовую схему родителя включено по умолчанию, поэтому группа наследует схему родителя. Выключите его, чтобы открыть выбор Цветовая схема и выбрать одну из ваших глобальных схем. Это позволяет создавать отдельные цветовые зоны внутри секции.
Граница
Граница это Нет или Сплошная. Сплошная открывает два слайдера: Толщина границы (от 1 до 20 px, по умолчанию 1) и Прозрачность границы (от 0 до 100%, по умолчанию 100). Цвет берётся из цвета границы активной схемы.
Скругление углов
Скругление углов в пикселях (от 0 до 100), независимо от границы. Используйте его для контейнеров в виде карточек.
Наложение фона
Переключатель Наложение фона добавляет цветной слой поверх фона группы. Когда включено, задайте Цвет наложения (включая прозрачность через слайдер прозрачности в выборе цвета), Стиль наложения (Сплошной плоская заливка или Градиент, который угасает до прозрачного) и для градиента Направление градиента (Вверх или Вниз). Часто используется для подкрашивания медиа-фона.
Отступы
Внутренний отступ с каждой стороны в пикселях, каждый от 0 до 100 px. Отступы находятся внутри границы, между ней и дочерними элементами.
Текст
Текстовый блок отображает заголовки, абзацы и форматированный текст. Редактор форматированного текста поддерживает жирный, курсив, подчёркивание, зачёркивание и цветной текст.
Пресет
Типографический пресет задаёт семейство шрифта, насыщенность по умолчанию и семантический HTML-тег (его роль на странице):
- По умолчанию: наследует базовый стиль текста секции.
- Абзац: стиль основного текста.
- Заголовок 1 по Заголовок 6: стили заголовков, использующие ваши шрифты заголовка и подзаголовка.
Размер
Свой размер шрифта в пикселях (от 10 до 30 px, по умолчанию 16). Это размер, с которым блок фактически отображается.
Ширина и Выравнивание
- По содержимому: блок только настолько широк, насколько его содержимое.
- Заполнение: блок расширяется до 100% ширины контейнера.
Выравнивание (Слева, По центру, Справа) появляется только когда Ширина установлена в Заполнение, так как выравнивание имеет смысл, только когда блок заполняет контейнер.
Высота строки и Межбуквенный интервал
Высота строки задаёт вертикальный ритм: Нормальная (по умолчанию), Плотная или Свободная. Межбуквенный интервал задаёт расстояние между символами с теми же тремя вариантами.
Цветовая схема
Внутри группы Использовать цветовую схему родителя включено по умолчанию. Выключите его, чтобы открыть выбор Цветовая схема. Пресеты заголовков используют цвет заголовка схемы; абзац и по умолчанию используют цвет основного текста. Как отдельная секция, выбор стоит сам по себе без переключателя наследования.
Отступы
Внутренний отступ с каждой стороны в пикселях, каждый от 0 до 100 px.
Разделитель
Разделительная линия, которая подстраивается под родителя. В вертикальной (столбчатой) раскладке это горизонтальная линия; внутри горизонтальной группы она становится вертикальной линией.
Ширина
- По содержимому: контейнер только настолько широк, насколько линия.
- Заполнение: контейнер расширяется, заполняя доступное место.
Толщина
Толщина линии в пикселях (от 1 до 10 px, по умолчанию 1). Для горизонтального разделителя это высота; для вертикального это ширина.
Длина
Протяжённость линии как процент от её контейнера (от 5 до 100%, по умолчанию 100). Установите ниже 100%, чтобы создать частичную, утопленную линию.
Выравнивание
Размещает линию, когда её длина меньше 100%: Начало, Центр (по умолчанию) или Конец. Этот элемент скрыт, пока Длина равна 100%.
Скругление углов
- Острые: прямоугольные концы.
- Скруглённые: концы в виде таблетки.
Цветовая схема
При желании выберите Цветовую схему. Разделитель использует цвет границы из этой схемы. Если ничего не задано, он наследует цвет от родительской секции или группы.
Отступы
Отступ с каждой стороны в пикселях. Как блок диапазон от 0 до 100 px. Когда разделитель добавлен как секция верхнего уровня, отступ доходит до 200 px (по умолчанию 20) для более просторного вертикального пространства.
Частые ошибки
- Две заполняющие группы внутри горизонтального родителя: каждая занимает 50% места, что обычно и нужно. Чтобы сделать одну сторону шире, установите Ширину этой группы в Свою.
- Вертикальный разделитель не появляется: разделитель становится вертикальным только когда он прямой потомок группы с направлением Горизонтально. Проверьте направление родительской группы.
- Отсутствует вариант Между: Между появляется только на оси, вдоль которой текут дочерние элементы, поэтому он на Позиции для вертикальных групп и на Выравнивании для горизонтальных.
- Текст в неправильном цвете: вероятно, он наследует от родительской группы с другой схемой. Выключите Использовать цветовую схему родителя на текстовом блоке и выберите схему явно.
О том, где можно размещать эти компоненты, см. Секции и блоки.