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