Flow & Paywall Builder создаёт адаптивные макеты. Вы не перетаскиваете элементы на точные координаты — вместо этого вы вкладываете их в контейнеры, которые автоматически расставляют дочерние элементы.

Контейнер определяет направление размещения элементов (вертикальное или горизонтальное), их выравнивание и отступы. Каждый отдельный элемент может дополнительно настроить свои размеры и отступы или — при необходимости — выйти из общего потока с помощью абсолютного или фиксированного позиционирования.

Переставляйте элементы без перетаскивания.

Попросите AI Editor добавить значок «Самое популярное», закреплённый футер или целый блок с социальными доказательствами — он сам создаст нужные контейнеры.

Explore the AI Editor›

Компоновка

Компоновка — это основной инструмент для расположения элементов на экране. Каждый контейнер автоматически распределяет дочерние элементы по заданным правилам — направлению, выравниванию и отступам. Доступные в конструкторе элементы компоновки:

• Вертикальный контейнер: Размещает дочерние элементы сверху вниз
• Горизонтальный контейнер: Размещает дочерние элементы слева направо
• Разделитель: Визуальный разделитель между элементами
• Карусель: Горизонтально прокручиваемый набор слайдов
• Bottom Sheet: Выдвигающаяся панель, которая показывает дополнительный контент при нажатии кнопки

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

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

Направление

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

Порядок элементов

Дочерние элементы отображаются в том порядке, в котором они расположены на панели Layers. В вертикальном контейнере верхний элемент списка находится вверху экрана, в горизонтальном — слева. Перетащите элементы на панели Layers, чтобы изменить порядок, или воспользуйтесь действиями Move up и Move down в действиях слоя.

Выравнивание

Сетка выравнивания определяет, как дочерние элементы располагаются вдоль поперечной оси контейнера. В вертикальном контейнере выравнивание задаёт горизонтальное положение дочерних элементов (по левому краю, по центру или по правому краю). В горизонтальном — вертикальное (по верхнему краю, по середине или по нижнему краю).

Распределение

Распределение определяет, как пространство делится между дочерними элементами вдоль главной оси:

• Gap (по умолчанию): фиксированное расстояние в пикселях между соседними дочерними элементами
• Space Between: дочерние элементы распределяются до краёв, а между ними появляются равные промежутки
• Space Around: каждый дочерний элемент окружён равными промежутками, при этом у краёв промежутки вдвое меньше
• Space Evenly: равные промежутки перед всеми дочерними элементами, между ними и после них

Обрезка контента

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

Позиция

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

Относительное (по умолчанию)

Элемент остаётся в обычном потоке разметки. Его положение определяется правилами родительского контейнера — свободно перетаскивать его нельзя. Используйте Margin для настройки отступов вокруг относительного элемента.

Относительное позиционирование подходит для большинства элементов контента: текстовых блоков, изображений, карточек, кнопок и элементов списков.

Абсолютное позиционирование

Элемент выходит из обычного потока и накладывается поверх другого контента. Он больше не влияет на расположение соседних элементов.

При выборе Absolute появляются дополнительные настройки:

• Поля смещения (T, L, R, B): задают расстояние в пикселях от элемента до каждого края родительского контейнера
• Сетка привязки: нажмите на точку сетки 3×3, чтобы выбрать угол, край или центр родительского элемента, к которому будет привязан текущий элемент
• Горизонтальная привязка (Left / Center / Right) и Вертикальная привязка (Top / Center / Bottom): выпадающие списки, управляющие той же точкой привязки, что и сетка
• Z-index: числовое поле, задающее порядок наложения элемента среди других позиционированных элементов

Используйте абсолютное позиционирование для декоративных оверлеев, бейджей, кнопок закрытия и иконок, размещаемых поверх изображений.

Фиксированный

Элемент полностью игнорирует родительский контейнер и прикрепляется к экрану. Он остаётся видимым при прокрутке — контент страницы движется под ним.

Фиксированное позиционирование использует те же элементы управления, что и Absolute (отступы, сетка привязки, Z-index). Все отступы отсчитываются относительно безопасной области экрана, а не родительского элемента. Например, отступ 0 от нижнего края удерживает элемент выше индикатора Home. Чтобы отсчитывать отступы от физических краёв экрана, включите Ignore safe area.

Используйте фиксированное позиционирование для элементов, которые должны находиться поверх прокручиваемого контента, не занимая места в потоке, — плавающих кнопок закрытия или восстановления, постоянных верхних баннеров, кнопок прокрутки вверх и навигационных панелей. Для выделенной нижней зоны с действиями используйте Footer. Чтобы разместить контент поверх фонового изображения-обложки, используйте Sliding sheet.

Позиция внутри контейнера Free

Контейнер Free не упорядочивает дочерние элементы, поэтому их позиционирование нужно задавать вручную. Позиция Relative не поддерживается. Дочерние элементы подчиняются следующим правилам:

• Если дочерний элемент тоже является контейнером Free, для него доступна только позиция absolute. Adapty скрывает переключатель Position. Чтобы вернуть его, задайте дочернему элементу значение Direction Vertical или Horizontal.
• Для всех остальных дочерних элементов доступны позиции absolute или fixed.

Игнорирование безопасной зоны

Безопасная зона — это часть экрана, свободная от выреза камеры, строки состояния и индикатора возврата домой. По умолчанию позиционируемые элементы остаются внутри неё.

Установите флажок Ignore safe area под селектором типа позиции, чтобы отступы элемента отсчитывались от физических краёв экрана. Тогда элемент сможет заходить за вырез камеры и индикатор возврата домой.

Для полноэкранного медиа: установите позиционирование Fixed, задайте все четыре отступа равными 0 и выберите Ignore safe area. Медиа займёт весь экран от края до края.

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

Размер

У каждого элемента есть параметры Width и Height. Нажмите на выпадающий список рядом с любым из них, чтобы выбрать режим задания размера.

Режим	Размер элемента	Доступно
Fill	Растягивается, заполняя доступное пространство родителя. Показанное значение рассчитывается автоматически	Только для относительных элементов
Hug	Сжимается по содержимому. Показанное значение рассчитывается автоматически	Везде, кроме Free-дочернего элемента в Free-контейнере
Fixed	Соответствует введённому значению в пикселях, независимо от размера родителя или содержимого	Везде
Auto	Растягивает содержимое между двумя отступами	Только для абсолютных или фиксированных элементов, если заданы оба — Left и Right или Top и Bottom. Adapty применяет это автоматически — вручную выбрать нельзя

Применение направления Free к родительскому элементу превращает размер Fill дочернего элемента в Fixed. Если сам элемент тоже использует направление Free, его размер Hug также становится Fixed.

Изображения имеют собственные пропорции, поэтому заданная высота определяет, будет ли изображение обрезано. См. Размер изображения.

Отступы

Задайте значения отступов отдельно для каждой стороны элемента.

Элемент управления	Что делает	Доступно
Margin	Добавляет отступ между элементом и его соседями. Большое значение никогда не вытолкнет элемент за пределы родительского	Любой элемент с относительным позиционированием. У экранов margin отсутствует
Padding	Добавляет отступ между границей элемента и его содержимым. Ширина или высота Hug увеличивается с учётом этого отступа	Контейнеры, экраны и другие элементы с дочерним контентом. Исключения: прямые дочерние элементы контейнеров Free и сами экраны Free.

Выбор направления Free direction сбрасывает отступы контейнера.

Порядок наложения

Относительные элементы никогда не перекрываются — каждый контейнер размещает дочерние элементы последовательно. Перекрытие возникает только тогда, когда элемент выходит из обычного потока с помощью позиционирования Absolute или Fixed.

Элемент с позиционированием Absolute или Fixed отображается поверх своих относительных соседей, независимо от порядка слоёв. У относительных элементов нет поля Z-index, поскольку они никогда не перекрываются.

Когда несколько элементов Absolute или Fixed занимают одно пространство, порядок их наложения определяется двумя факторами (по убыванию приоритета):

• Z-index. Значение по умолчанию: 0. Элемент с большим значением отображается поверх остальных, независимо от порядка слоёв.
• Порядок слоёв. Если два элемента имеют одинаковый z-index, элемент, расположенный ниже в списке слоёв, отображается поверх.