Элементы макета группируют другие элементы и управляют тем, как они расположены на экране.

Flow & Paywall Builder включает шесть типов элементов макета:

• Containers: размещают дочерние элементы вдоль оси — вертикально или горизонтально
• Carousel: прокручиваемый контейнер, показывающий по одному слайду за раз
• Bottom Sheet: панель, выезжающая снизу экрана и отображающаяся поверх основного контента
• Footer: панель, закреплённая в нижней части экрана, вне области прокрутки
• Sliding sheet: панель, накладывающая основной контент поверх фонового изображения
• Dividers: тонкие линии, разделяющие строки или столбцы

Контейнеры

Контейнеры группируют элементы по вертикали или горизонтали. Vertical Container располагает элементы в строки, а Horizontal Container — в столбцы.

Изменение направления контейнера

Направление контейнера можно изменить в любой момент: переключайтесь между Vertical, Horizontal и Free в разделе Layout на правой панели. При переключении в Free все дочерние элементы автоматически получают Absolute позицию.

Дочерние элементы отображаются в том порядке, в котором они перечислены на панели Layers — перетащите их, чтобы изменить порядок.

Обёртывание и разворачивание

Чтобы превратить существующий элемент в контейнер, выделите его и воспользуйтесь действием слоя Wrap layer action. Перетащите дополнительные элементы в новый контейнер с панели Layers. Чтобы удалить контейнер и поднять его дочерние элементы на уровень выше, используйте Unwrap.

Карусель

Карусель — это контейнер с горизонтальной прокруткой, показывающий один слайд за раз. Пользователь листает слайды свайпом, либо карусель переключает их автоматически по таймеру.

Карусель содержит набор слоёв Slide. Когда слайд активен, элементы на этом слое отображаются на экране.

В отличие от вкладок, активный слайд карусели не является выбираемым элементом группы — на слайды нельзя ссылаться в условиях или динамическом тексте. Используйте карусель для визуальной смены слайдов, но не для ветвления логики на основе выбора пользователя.

Изменение активного слайда

Когда вы выбираете карусель, конструктор показывает всплывающую панель управления с выпадающим списком Slide и кнопкой + Add Slide.

• Нажмите + Add Slide, чтобы добавить новый пустой слайд.
• Используйте выпадающий список Slide, чтобы переключить активный слайд на канвасе, — или кликните на соответствующий слой Slide в панели Layers.

Чтобы изменить порядок слайдов, перетащите их внутри элемента Carousel в панели Layers.

Свойства

Автопрокрутка

Автопрокрутка автоматически листает слайды — пользователю не нужно свайпать, чтобы увидеть весь контент.

Поведение управляется двумя параметрами:

• Delay — сколько времени каждый слайд остаётся видимым (мс).
• Duration — сколько времени занимает переход между слайдами (мс).

Размер карусели

Специальные элементы управления определяют размер карусели и расстояние между соседними слайдами. Установите для Height значение Fixed, чтобы макет не смещался при пролистывании слайдов с разным объёмом контента.

Размер слайда

Параметры Width и Height для каждого слайда. По умолчанию установлено Fill, чтобы слайд повторял размеры карусели. Задайте фиксированную ширину, чтобы создать эффект «заглядывания», при котором соседние слайды частично видны.

Точки

Индикатор страниц в нижней части карусели. Показывает пользователю количество слайдов и активный слайд.

Отключите переключатель Show dots, чтобы скрыть индикатор слайдов. Когда точки видны, их внешний вид определяется следующими параметрами:

• Color — цвет неактивной точки.
• Active Color — цвет точки для текущего видимого слайда.
• Size — диаметр каждой точки в пикселях.
• Gap — расстояние между соседними точками.
• Padding — отступ между рядом точек и контентом карусели выше.

Bottom Sheet

Bottom Sheet — это панель-макет, которая выезжает снизу экрана поверх основного контента.

Запускайте sheet по нажатию — например, по ссылке Show all plans — а не при загрузке экрана.

Структура

Bottom Sheet содержит два верхнеуровневых слоя:

• Heading — контейнер в верхней части шторки, по умолчанию содержит текстовый слой Title и кнопку закрытия Close button . Отредактируйте или удалите их при необходимости.
• Content — основной контейнер. Добавляйте в него продукты, кнопки, ссылки и другие элементы.

Начальная видимость

По умолчанию нижний лист появляется сразу при рендеринге экрана. Чтобы открывать его по требованию:

1. Сначала наполните контент листа — скрытые слои недоступны для редактирования, поэтому лист должен оставаться видимым, пока вы не закончите его заполнять.
2. На панели Layers выберите нижний лист.
3. Установите Visibility в значение Hide .

Лист остаётся в дереве слоёв, но перестаёт отображаться на экране.

Открытие скрытого bottom sheet

Чтобы открыть скрытый bottom sheet, привяжите действие Show к другому элементу:

1. Выберите элемент-триггер (например, кнопку или текстовую ссылку).
2. Откройте вкладку Interactions на правой панели.
3. Нажмите Add trigger > On tap, затем Add action.
4. Установите Action в значение Show и выберите bottom sheet из выпадающего списка.

Подвал

Footer — это закреплённый контейнер, занимающий нижнюю часть экрана. Он может быть любой высоты и содержать что угодно — от одной кнопки до нескольких строк текста. Используйте подвал для элементов, которые должны оставаться на месте, пока остальное содержимое прокручивается: кнопки призыва к действию, юридические тексты, ссылки.

В отличие от обычных элементов, подвал распространяется на нижнюю безопасную зону устройства: его фон доходит до самого края экрана.

На каждом экране допускается только один футер. Нельзя дублировать существующий футер или добавлять новый.

На экране со скользящей шторкой футер находится внутри шторки, но остаётся внизу экрана.

Футер vs. обычный фиксированный элемент

Оба варианта остаются на экране при прокрутке контента. Выберите тот, который подходит для вашей задачи:

• Используйте Footer для основной нижней панели экрана (кнопка CTA, юридический текст, ссылки). Он резервирует собственную высоту, поэтому контент всегда прокручивается без перекрытия, и футер автоматически закрывает нижнюю безопасную область.
• Используйте фиксированный элемент для кнопки или баннера, который плавает поверх контента у любого края экрана. Контент прокручивается под ним.

Выдвижной лист

Sliding sheet — это панель, которая накладывает основной контент поверх фонового изображения или видео. Панель перекрывает нижнюю часть экрана и поднимается вверх по мере прокрутки. В отличие от Bottom Sheet, sliding sheet виден сразу при открытии экрана.

На каждом экране допускается только один sliding sheet. Дублировать существующий sliding sheet или добавлять новый нельзя.

Разделители

Horizontal Divider и Vertical Divider — тонкие линии для разделения контента. Используйте Horizontal Divider для разделения строк, а Vertical Divider — для разделения колонок внутри горизонтального контейнера. Толщину, цвет и длину можно настроить на правой панели.