The Flow & Paywall Builder creates responsive layouts. You do not drag elements to exact coordinates — instead, you nest them inside containers that automatically arrange their children.

The container decides the elements’ direction (vertical or horizontal), alignment, and spacing. Individual elements can then fine-tune their size and margins, or — when needed — break out of the flow with absolute or fixed positioning.

Rearrange without dragging anything.

Ask the AI Editor for a “Most Popular” badge, a sticky footer, or a whole new social proof section — it builds the containers for you.

Explore the AI Editor›

Layout

Layout is the primary tool for arranging elements on screen. Each container automatically distributes its children according to a set of rules — direction, alignment, and spacing. The layout elements available in the builder are:

• Vertical Container: Arranges children from top to bottom
• Horizontal Container: Arranges children from left to right
• Divider: A visual separator between elements
• Carousel: A horizontally scrollable set of slides
• Bottom Sheet: A sliding overlay panel that reveals additional content when the user taps a button

Containers are the primary building blocks of a screen. You can nest them inside each other to build complex layouts. Each container has a Layout section in the right panel that controls how its children are distributed.

To group elements into a new container, use the Wrap layer action. To remove a container and promote its children, use Unwrap.

Direction

• Free: No automatic layout. Children layer on top of each other instead of lining up. Selecting Free converts every child to Absolute position, and their stacking order decides what covers what
• Vertical: Children stack from top to bottom, like rows in a column
• Horizontal: Children arrange from left to right, like items in a row

Element order

Children render in the order they appear in the Layers panel. In a vertical container, the top item in the list appears at the top of the screen. In a horizontal container, the top item appears on the left. Drag elements in the Layers panel to reorder them, or use Move up and Move down layer actions.

Alignment

The alignment grid controls where children sit along the container’s cross axis. In a vertical container, alignment controls the children’s horizontal placement (left, center, or right). In a horizontal container, it controls their vertical placement (top, middle, or bottom).

Distribution

Distribution determines how space is divided among children along the main axis:

• Gap (default): A fixed pixel value between adjacent children
• Space Between: Children spread to the edges; equal gaps appear between them
• Space Around: Equal space surrounds each child, with half-size gaps at the edges
• Space Evenly: Equal space before, between, and after all children

Clip content

Visually clips content that extends beyond the container’s boundaries. Disable this to allow overflow (for example, a badge that intentionally extends past the card edge).

Position

By default, every element’s position is automatically determined by its container’s layout. The Position toggle allows you to break it out of the normal flow and manually position it.

Relative (default)

The element stays in the normal layout flow. Its position is determined automatically by the parent container’s layout rules — you cannot drag it freely. Use Margin to adjust the space around a relative element.

Use relative positioning for the vast majority of content: text blocks, images, cards, buttons, and list items.

Absolute

The element lifts out of the normal flow and overlays other content. It no longer affects the layout of neighboring elements.

When you select Absolute, additional controls appear:

• Offset fields (T, L, R, B): Set the distance in pixels from the element to each edge of its parent container
• Anchor grid: Click a point on the 3×3 grid to choose which corner, edge, or center of the parent the element anchors to
• Horizontal anchor (Left / Center / Right) and Vertical anchor (Top / Center / Bottom): Dropdowns that control the same anchor point as the grid
• Z-index: A numeric field that sets the element’s stacking order among the other positioned elements

Use absolute positioning for decorative overlays, badges, close buttons, and icons placed on top of images.

Fixed

The element ignores its parent container entirely and pins to the screen. It stays visible while the user scrolls — the page content moves underneath it.

Fixed positioning uses the same controls as Absolute (offsets, anchor grid, Z-index). All offsets are relative to the screen’s safe area instead of the parent. For example, an offset of 0 from the bottom keeps the element above the home indicator. To measure offsets from the physical screen edges instead, enable Ignore safe area.

Use fixed positioning for elements that should float over scrolling content rather than reserve space — floating close or restore buttons, persistent top banners, scroll-to-top controls, and navigation bars. For a dedicated bottom action area, use a Footer instead. To lay your content over a hero image, use a Sliding sheet.

Position in a Free container

A Free container does not order its children. Because of this, you need to manually set the positioning of its children. A Relative position is not supported. The children follow the rules below:

• If the child is also a Free container, it can only have an absolute position. Adapty hides its Position toggle. To bring the toggle back, set that child’s Direction to Vertical or Horizontal.
• All other children can have the absolute or fixed position.

Ignore safe area

The safe area is the part of the screen that stays clear of the notch, the status bar, and the home indicator. By default, positioned elements stay inside it.

Select the Ignore safe area checkbox below the position type selector to measure the element’s offsets from the physical screen edges instead. The element can then extend behind the notch and the home indicator.

Use this for full-bleed media: position an image or video as Fixed, set all four offsets to 0, and select Ignore safe area. The media covers the entire screen, edge to edge.

The checkbox works for absolute and fixed positioning only. For relative elements, it is disabled, and switching an element back to Relative clears the setting.

Sizing

Each element has Width and Height controls. Click the dropdown on either one to select a sizing mode.

Mode	The element’s size	Available
Fill	Stretches to fill the available space in its parent. The value shown is calculated automatically	Relative elements only
Hug	Shrinks to fit its content. The value shown is calculated automatically	Everywhere except a Free child in a Free container
Fixed	Matches the pixel value you type, whatever the parent or content size	Everywhere
Auto	Stretches content between two offsets	Absolute or fixed elements only, once both Left and Right, or both Top and Bottom, are set. Adapty applies it — you can’t select it

Applying the Free direction to an element’s parent turns that element’s Fill size into Fixed. If the element uses the Free direction too, its Hug size becomes Fixed as well.

Images carry their own proportions, so the height you give one decides whether it gets cropped. See Image sizing.

Spacing

Set spacing values independently for each side of the element.

Control	What it does	Available
Margin	Adds space between the element and its neighbors. A large value never pushes the element outside its parent	Any element with a relative positioning. Screens have no margin
Padding	Adds space between the element’s boundary and its content. A Hug width or height grows to include it	Containers, screens, and other elements with child content. Exceptions: direct children of Free containers, and Free screens themselves.

Selecting the Free direction clears whatever padding the container had.

Stacking order

Relative elements never overlap each other — each container lays its children out in sequence. Overlap only happens once an element breaks out of the normal flow with Absolute or Fixed positioning.

An Absolute or Fixed element renders above its relative siblings, no matter the layer order. Relative elements have no Z-index field, because they never overlap.

When more than one Absolute or Fixed elements occupy the same space, their stacking order is determined by two things, in order of importance:

• Z-index. Default value: 0. The element with the higher value appears on top, regardless of the layer order.
• Layer order. If two elements share the same z-index, the element further down the layer list appears on top.