adaptyteam · eandreeva-twr · Jun 5, 2026 · Jun 5, 2026
@@ -61,7 +61,7 @@ The close button dismisses the paywall. The **Close** preset comes preconfigured
 
 ## 4. Add the title and pair it with the close button
 
-The H1 sits next to the close button at the top of the screen. To align them horizontally, wrap both in a horizontal stack.
+The H1 sits next to the close button at the top of the screen. To align them horizontally, wrap both in a horizontal container.
 
 To add the title:
 
@@ -72,18 +72,18 @@ To add the title:
 
 To group the title with the close button:
 
-1. In the **Layers** panel, click the three-dot menu <Inline id="context.svg" alt="Context menu" /> on the close button layer and choose **Wrap** > **Wrap in Horizontal Stack**.
+1. In the **Layers** panel, click the three-dot menu <Inline id="context.svg" alt="Context menu" /> on the close button layer and choose **Wrap** > **Wrap in Horizontal Container**.
 
 <ZoomImage id="basic-paywall-title-wrap.webp" width="500px" alt="Three-dot context menu on the close button layer showing Wrap in Horizontal Stack" />
 
-2. Drag the H1 layer into the new horizontal stack.
+2. Drag the H1 layer into the new horizontal container.
 
 <ZoomImage id="basic-paywall-title-close.gif" width="500px" alt="Dragging the H1 layer into the new horizontal stack" />
 
 To align the two elements:
 
 1. Adjust the close button size and the H1 font size so they sit comfortably on the same line.
-2. With the horizontal stack selected, set the alignment and distribution in the right panel so the elements line up correctly.
+2. With the horizontal container selected, set the alignment and distribution in the right panel so the elements line up correctly.
 
 <ZoomImage id="basic-paywall-title-aligned.webp" width="500px" alt="Close button and H1 aligned in the horizontal stack" />
 

@@ -1,6 +1,6 @@
 ---
 title: "Layout elements: containers, carousels, bottom sheets"
-description: "Group elements into stacks, carousels, and bottom sheets in the Flow Builder."
+description: "Group elements into containers, carousels, and bottom sheets in the Flow Builder."
 metadataTitle: "Layout elements: containers, carousels, bottom sheets | Flow Builder | Adapty Docs"
 ---
 
@@ -10,7 +10,7 @@ Layout elements group other elements together and control how they're laid out o
 
 The Flow Builder includes four layout element types:
 
-- **Stacks**: arrange children along an axis — vertically or horizontally
+- **Containers**: arrange children along an axis — vertically or horizontally
 - **Carousel**: a swipeable container that shows one slide at a time
 - **Bottom Sheet**: a panel that slides up from the bottom of the screen and renders on top of the underlying content
 - **Dividers**: thin lines that separate rows or columns
@@ -19,31 +19,31 @@ The Flow Builder includes four layout element types:
 **Tabs** also fall under this umbrella, but live in a separate article. See [Tabs](builder-tabs) for details.
 :::
 
-## Stacks
+## Containers
 
 :::link
 Main article: [Element positioning](manage-paywall-ui-elements)
 :::
 
 <ZoomImage id="builder-stacks.webp" width="300px" alt="Vertical Stack and Horizontal Stack tiles" float="left" />
 
-Stacks group elements vertically or horizontally. The **Vertical Stack** arranges elements as rows; the **Horizontal Stack** arranges them as columns.
+Containers group elements vertically or horizontally. The **Vertical Container** arranges elements as rows; the **Horizontal Container** arranges them as columns.
 
 :::tip
-Nest stacks inside each other to compose more complex layouts.
+Nest containers inside each other to compose more complex layouts.
 :::
 
-### Change stack direction
+### Change container direction
 
 <ZoomImage id="flow-builder/alignment-distribution-demo.webp" width="400px" alt="A Stack on the canvas alongside its Layout settings" float="right"/>
 
-A stack's direction isn't fixed. Switch between **Vertical**, **Horizontal**, and **Free** in the **Layout** section of the right panel at any time — no need to delete and re-create the container.
+A container's direction isn't fixed. Switch between **Vertical**, **Horizontal**, and **Free** in the **Layout** section of the right panel at any time — no need to delete and re-create the container.
 
 Configure spacing, alignment, and distribution in the same **Layout** section. Children render in the order they appear in the **Layers** panel — drag to reorder.
 
 ### Wrap and unwrap
 
-To turn an existing element into a stack, select it and use the **Wrap** [layer action](paywall-layout-and-products#layer-actions). Drag additional elements into the new stack from the **Layers** panel. To remove a stack and promote its children one level up, use **Unwrap**.
+To turn an existing element into a container, select it and use the **Wrap** [layer action](paywall-layout-and-products#layer-actions). Drag additional elements into the new container from the **Layers** panel. To remove a stack and promote its children one level up, use **Unwrap**.
 
 ## Carousel
 
@@ -121,7 +121,7 @@ The sheet always blurs anything behind it; the blur can't be turned off. Trigger
 
 A Bottom Sheet ships with two top-level layers:
 
-- **Heading** — a stack at the top of the sheet, prefilled with a **Title** text layer and a **Close button** <Inline id="close.svg" alt="Close" />. Edit or remove them as needed.
+- **Heading** — a container at the top of the sheet, prefilled with a **Title** text layer and a **Close button** <Inline id="close.svg" alt="Close" />. Edit or remove them as needed.
 - **Content** — the main container. Drop products, buttons, links, or any other elements into it.
 
 <ZoomImage id="plans-bottom-sheet-add-sheet.webp" width="700px" alt="Bottom sheet with a heading added inside it" />
@@ -155,5 +155,4 @@ To open a hidden bottom sheet, attach a **Show** action to another element:
 
 <ZoomImage id="builder-divider-demo.webp" width="300px" alt="A horizontal divider beneath a heading and vertical dividers between three feature cards" float="right" />
 
-The **Horizontal Divider** and **Vertical Divider** are thin lines that separate content. Use the Horizontal Divider to split rows, and the Vertical Divider to split columns inside a horizontal stack. Adjust thickness, color, and length from the right panel.
-
+The **Horizontal Divider** and **Vertical Divider** are thin lines that separate content. Use the Horizontal Divider to split rows, and the Vertical Divider to split columns inside a horizontal container. Adjust thickness, color, and length from the right panel.
@@ -24,8 +24,8 @@ Main article: [Layout Elements](builder-containers)
 
 Layout elements are containers that organize elements inside them.
 
-- **Vertical Stack**: arranges child elements from top to bottom
-- **Horizontal Stack**: arranges child elements from left to right
+- **Vertical Container**: arranges child elements from top to bottom
+- **Horizontal Container**: arranges child elements from left to right
 - **Dividers (horizontal and vertical)**: lines that visually separate content sections
 - **Carousel**: a swipeable container
 - **Bottom Sheet**: a slide-up panel anchored to the bottom of the screen
@@ -71,7 +71,7 @@ This section describes foreground media elements. Change the [screen background]
 
 ### List
 
-List elements organize content into rows and columns to display uniformly formatted data. Under the hood, a list is a [stack](manage-paywall-ui-elements#layout).
+List elements organize content into rows and columns to display uniformly formatted data. Under the hood, a list is a [container](manage-paywall-ui-elements#layout).
 
 - **Icon List**: rows with a leading icon and text label
 - **Timeline**: vertical sequence with connected step indicators

@@ -138,7 +138,7 @@ Main article: [Screens and Layers](paywall-layout-and-products)
 
 The layers <Inline id="layers.svg" alt="Layers" /> button opens Screens and Layers (shown by default when you open the flow builder).
 
-It displays each screen as a tree of layers. Each element on a screen is a layer, and containers (such as stacks) have their child elements nested inside. You can drag and drop layers to reorder them.
+It displays each screen as a tree of layers. Each element on a screen is a layer, and containers have their child elements nested inside. You can drag and drop layers to reorder them.
 
 ### Element selection
 
@@ -216,4 +216,4 @@ The Localization view allows you to manage all translatable content across your
 * Filter by screen or show only missing translations.
 * Use **AI Translate** to auto-translate content, or **Import/Export** translations in bulk.
 
-<ZoomImage id="flow-builder/flow-builder-localization.webp" width="700px" alt="Flow builder localization view" />
+<ZoomImage id="flow-builder/flow-builder-localization.webp" width="700px" alt="Flow builder localization view" />
@@ -111,21 +111,21 @@ The second screen collects input from the user. In our example, it asks for a na
 
 For more on inputs and quizzes, see [Inputs and forms](builder-inputs-and-forms) and [Surveys and quizzes](onboarding-quizzes).
 
-Click the **Quiz** screen in the **Screens** panel, then add the elements. Each group on the screen — intro, question + input, question + quiz — sits in its own Vertical Stack so related elements stay together visually.
+Click the **Quiz** screen in the **Screens** panel, then add the elements. Each group on the screen — intro, question + input, question + quiz — sits in its own Vertical Container so related elements stay together visually.
 
 1. Add the intro headline and body. Click **+** > **Text** > **H1** for the headline and **+** > **Text** > **Body** for the supporting copy.
-2. Group the intro. Click **+** > **Layout** > **Vertical Stack**, drag the new stack to the top of the layer tree, then drag the H1 and body inside it.
+2. Group the intro. Click **+** > **Layout** > **Vertical Container**, drag the new container to the top of the layer tree, then drag the H1 and body inside it.
 
-<ZoomImage id="flow-onboarding-quiz-intro.gif" width="700px" alt="Intro headline and body grouped in a Vertical Stack at the top of the layer tree" />
+<ZoomImage id="flow-onboarding-quiz-intro.gif" width="700px" alt="Intro headline and body grouped in a Vertical Container at the top of the layer tree" />
 
 3. Add the first question and input. Click **+** > **Text** for the question caption, then click **+** > **Inputs** > **Text** for the field.
 4. Set the input's **Element ID** in the **Design** tab — in our example, `name`. This exposes the value as a variable other screens can reference.
 
-<ZoomImage id="flow-onboarding-quiz-input-element-id.webp" width="700px" alt="Name input with Element ID name, grouped with its caption in a Vertical Stack" />
+<ZoomImage id="flow-onboarding-quiz-input-element-id.webp" width="700px" alt="Name input with Element ID name, grouped with its caption in a Vertical Container" />
 
-5. Group the caption and input in a Vertical Stack the same way as the intro.
+5. Group the caption and input in a Vertical Container the same way as the intro.
 6. Add the second question and quiz. Click **+** > **Text** for the caption, then click **+** > **Quiz** and pick a layout preset like Icon Options. Configure the options — in our example, `Rock` and `Hip hop`.
-7. Group the caption and quiz in a Vertical Stack the same way.
+7. Group the caption and quiz in a Vertical Container the same way.
 8. Set the option IDs. Select each quiz option, open the **Interactions** tab, and set its **Element ID**. These IDs are referenced in the conditional navigation later.
 
 <ZoomImage id="flow-onboarding-quiz-option-id.webp" width="700px" alt="Quiz group set to Single choice in Selectable Groups" />
@@ -177,7 +177,7 @@ The final screen is the paywall — where the user can subscribe. For a fuller w
 
 Click the **Paywall** screen in the **Screens** panel, then add the elements:
 
-1. Add a **Horizontal Stack** at the top and add a **Close** button inside it. The Close preset comes preconfigured.
+1. Add a **Horizontal Container** at the top and add a **Close** button inside it. The Close preset comes preconfigured.
 2. Add the main image, the headline (with the same personalization variable as on the path screens), and a subheading as supporting copy.
 
 <ZoomImage id="flow-onboarding-paywall-top.webp" width="300px" alt="Top of the paywall with close button, main image, and headline" />

@@ -37,7 +37,7 @@ The close button dismisses the paywall. The **Close** preset comes preconfigured
 
 ## 3. Add the title and pair it with the close button
 
-The heading sits next to the close button at the top of the screen. To align them horizontally, wrap both in a horizontal stack.
+The heading sits next to the close button at the top of the screen. To align them horizontally, wrap both in a horizontal container.
 
 To add the title:
 
@@ -48,20 +48,20 @@ To add the title:
 
 To group the title with the close button:
 
-1. In the **Layers** panel, click the three-dot menu <Inline id="context.svg" alt="Context menu" /> on the close button layer and choose **Wrap** > **Wrap in Horizontal Stack**.
+1. In the **Layers** panel, click the three-dot menu <Inline id="context.svg" alt="Context menu" /> on the close button layer and choose **Wrap** > **Wrap in Horizontal Container**.
 
-<ZoomImage id="paywall-tabs-button-stack.webp" width="500px" alt="Close button wrapped in a horizontal stack" />
+<ZoomImage id="basic-paywall-title-wrap.webp" width="500px" alt="Close button wrapped in a horizontal stack" />
 
-2. Drag the H1 layer into the new horizontal stack.
+2. Drag the H1 layer into the new horizontal container.
 
-<ZoomImage id="paywall-tabs-title-wrap.gif" width="500px" alt="Close button and H1 grouped in a horizontal stack" />
+<ZoomImage id="paywall-tabs-title-wrap.gif" width="500px" alt="Close button and H1 grouped in a horizontal container" />
 
 To align the two elements:
 
 1. Adjust the close button size and the H1 font size so they sit comfortably on the same line.
-2. With the horizontal stack selected, set the alignment and distribution in the right panel so the elements line up correctly.
+2. With the horizontal container selected, set the alignment and distribution in the right panel so the elements line up correctly.
 
-<ZoomImage id="paywall-tabs-title-aligned.webp" width="500px" alt="Close button and H1 aligned in the horizontal stack" />
+<ZoomImage id="paywall-tabs-title-aligned.webp" width="500px" alt="Close button and H1 aligned in the horizontal container" />
 
 ## 4. Add the product list
 

@@ -37,7 +37,7 @@ The close button dismisses the paywall. The **Close** preset comes preconfigured
 
 ## 3. Add the title and pair it with the close button
 
-The heading sits next to the close button at the top of the screen. To align them horizontally, wrap both in a horizontal stack.
+The heading sits next to the close button at the top of the screen. To align them horizontally, wrap both in a horizontal container.
 
 To add the title:
 
@@ -50,18 +50,18 @@ To group the title with the close button:
 
 1. In the **Layers** panel, click the three-dot menu <Inline id="context.svg" alt="Context menu" /> on the close button layer and choose **Wrap** > **Wrap in Horizontal Stack**.
 
-<ZoomImage id="paywall-tabs-button-stack.webp" width="500px" alt="H1 added to the screen with the Content field on the right" />
+<ZoomImage id="basic-paywall-title-wrap.webp" width="500px" alt="H1 added to the screen with the Content field on the right" />
 
-2. Drag the H1 layer into the new horizontal stack.
+2. Drag the H1 layer into the new horizontal container.
 
-<ZoomImage id="paywall-tabs-title-wrap.gif" width="500px" alt="Close button and H1 grouped in a horizontal stack" />
+<ZoomImage id="paywall-tabs-title-wrap.gif" width="500px" alt="Close button and H1 grouped in a horizontal container" />
 
 To align the two elements:
 
 1. Adjust the close button size and the H1 font size so they sit comfortably on the same line.
-2. With the horizontal stack selected, set the alignment and distribution in the right panel so the elements line up correctly.
+2. With the horizontal container selected, set the alignment and distribution in the right panel so the elements line up correctly.
 
-<ZoomImage id="paywall-tabs-title-aligned.webp" width="500px" alt="Close button and H1 aligned in the horizontal stack" />
+<ZoomImage id="paywall-tabs-title-aligned.webp" width="500px" alt="Close button and H1 aligned in the horizontal container" />
 
 ## 4. Add the tabs and configure their labels
 

@@ -20,13 +20,13 @@ For visual properties like fill, borders, and effects, see [Element styling](bui
 
 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 Stack](builder-containers#stacks)**: Arranges children from top to bottom
-* **[Horizontal Stack](builder-containers#stacks)**: Arranges children from left to right
+* **[Vertical Container](builder-containers#containers)**: Arranges children from top to bottom
+* **[Horizontal Container](builder-containers#containers)**: Arranges children from left to right
 * **[Divider](builder-containers#dividers)**: A visual separator between elements
 * **[Carousel](builder-containers#carousel)**: A horizontally scrollable set of slides
 * **[Bottom Sheet](builder-containers#bottom-sheet)**: A sliding overlay panel that reveals additional content when the user taps a button
 
-Stacks 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.
+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](paywall-layout-and-products#layer-actions). To remove a container and promote its children, use **Unwrap**.
 
@@ -44,13 +44,13 @@ For details on the screen and layer hierarchy, see [Screens and Layers](paywall-
 
 ### Element order
 
-Children render in the order they appear in the **Layers** panel. In a vertical stack, the top item in the list appears at the top of the screen. In a horizontal stack, 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](paywall-layout-and-products#layer-actions).
+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](paywall-layout-and-products#layer-actions).
 
 ### Alignment
 
 <ZoomImage id="flow-builder/alignment.webp" width="100px" float="right" alt="Layout settings" />
 
-The alignment grid controls where children sit along the container's cross axis. In a vertical stack, alignment controls the children's horizontal placement (left, center, or right). In a horizontal stack, it controls their vertical placement (top, middle, or bottom).
+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
 
@@ -142,4 +142,4 @@ When elements do overlap, later siblings in the **Layers** panel render on top o
 
 **Absolute** and **Fixed** elements get a **Z-index** field for finer control: higher values win. Relative elements have no Z-index — layer order alone determines their stack.
 
-Use the **Move up** and **Move down** [layer actions](paywall-layout-and-products#layer-actions) to change element order.
+Use the **Move up** and **Move down** [layer actions](paywall-layout-and-products#layer-actions) to change element order.