Подложки блоков и отступы
layout_variant — section / block / empty. Как сделать блок на всю ширину или в виде карточки. Padding, border-radius, max-width.
Подложки блоков и отступы
Каждый блок в конструкторе имеет параметр layout_variant — как он встроен в страницу. От него зависит, будет ли блок «выравниваться в контейнер» или «растягиваться по полной ширине».
Три варианта
1. Section (секция — на всю ширину)
Блок занимает всю ширину экрана. Содержимое внутри ограничено контейнером (обычно 1200 px).
Подходит:
- Hero с анимированным фоном.
- Блок «О нас» с большой фоновой картинкой.
- Футер.
Визуально: два соседних section-блока с разными фонами создают эффект «полосатых» секций, как на landing-страницах.
2. Block (карточка)
Блок оформлен как скруглённая карточка: отступы по бокам, фон-подложка, закруглённые углы.
Подходит:
- Промежуточные блоки текста / картинок.
- Карусель отзывов.
- Инфо-плашки («Работаем с 10 до 23»).
Визуально: блок «отделён» от страницы, выглядит как модуль.
3. Empty (без подложки)
Блок без фона, без отступов. Только контент.
Подходит:
- Плотные лендинги, где блоки перетекают друг в друга.
- Минималистичные сайты.
- Блок «Галерея» с фото, которые должны подогнаться под ширину страницы.
Настройки padding
В режиме block и empty можно задать отступы вручную:
- Padding top — сверху.
- Padding bottom — снизу.
- Padding left/right — по бокам (актуально для
empty).
Стандартные значения:
- S — 16 px.
- M — 32 px (default).
- L — 64 px.
- XL — 96 px.
Или произвольное в пикселях.
Border radius (скругление)
Только для block. Варианты:
- None — прямые углы.
- S — 4 px.
- M — 12 px (default).
- L — 24 px.
- XL — 48 px (для «карточек-пилюль»).
Max-width контента
Внутри section-блоков контент обычно ограничен шириной:
- Narrow — 720 px (для текстовых страниц, блогов).
- Default — 1200 px.
- Wide — 1440 px.
- Full — без ограничения (contenta растягивается на всю ширину экрана).
Для большинства сайтов — Default.
Фон подложки
Варианты:
- Белый / Surface (из палитры).
- Цвет палитры — выбор из 7 слотов.
- Градиент — два цвета.
- Картинка — из медиа-библиотеки.
- Анимированный фон — см. Анимированные фоны.
Отступы между блоками
Если нужны промежутки, добавляйте не через padding блока, а через Spacer (служебный блок). Тогда промежуток легко отрегулировать одним местом, а не по каждому блоку.
Мобильная адаптация
На мобильном паддинги автоматически уменьшаются:
- Desktop padding L (64 px) → Mobile 32 px.
- Desktop padding XL (96 px) → Mobile 48 px.
Max-width игнорируется (контент всегда на всю ширину с 16 px по бокам).