diff --git a/src/assets/shared/img/basic-paywall-title-wrap.webp b/src/assets/shared/img/basic-paywall-title-wrap.webp index 743c52c9c..668c43732 100644 Binary files a/src/assets/shared/img/basic-paywall-title-wrap.webp and b/src/assets/shared/img/basic-paywall-title-wrap.webp differ diff --git a/src/assets/shared/img/builder-stacks.webp b/src/assets/shared/img/builder-stacks.webp new file mode 100644 index 000000000..6de8164d6 Binary files /dev/null and b/src/assets/shared/img/builder-stacks.webp differ diff --git a/src/assets/shared/img/flow-builder/builder-stacks.webp b/src/assets/shared/img/flow-builder/builder-stacks.webp deleted file mode 100644 index 4d872413b..000000000 Binary files a/src/assets/shared/img/flow-builder/builder-stacks.webp and /dev/null differ diff --git a/src/assets/shared/img/flow-builder/layout-element-templates.webp b/src/assets/shared/img/flow-builder/layout-element-templates.webp index 9e654f3bf..3b190743f 100644 Binary files a/src/assets/shared/img/flow-builder/layout-element-templates.webp and b/src/assets/shared/img/flow-builder/layout-element-templates.webp differ diff --git a/src/content/docs/guides/flow-builder/basic-paywall-screen.mdx b/src/content/docs/guides/flow-builder/basic-paywall-screen.mdx index ff9184e02..5280be2ec 100644 --- a/src/content/docs/guides/flow-builder/basic-paywall-screen.mdx +++ b/src/content/docs/guides/flow-builder/basic-paywall-screen.mdx @@ -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 on the close button layer and choose **Wrap** > **Wrap in Horizontal Stack**. +1. In the **Layers** panel, click the three-dot menu on the close button layer and choose **Wrap** > **Wrap in Horizontal Container**. -2. Drag the H1 layer into the new horizontal stack. +2. Drag the H1 layer into the new 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. diff --git a/src/content/docs/guides/flow-builder/builder-containers.mdx b/src/content/docs/guides/flow-builder/builder-containers.mdx index ef1357df2..6052e7983 100644 --- a/src/content/docs/guides/flow-builder/builder-containers.mdx +++ b/src/content/docs/guides/flow-builder/builder-containers.mdx @@ -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,7 +19,7 @@ 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) @@ -27,23 +27,23 @@ Main article: [Element positioning](manage-paywall-ui-elements) -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 -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** . 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** . Edit or remove them as needed. - **Content** — the main container. Drop products, buttons, links, or any other elements into it. @@ -155,5 +155,4 @@ To open a hidden bottom sheet, attach a **Show** action to another element: -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. diff --git a/src/content/docs/guides/flow-builder/builder-elements.mdx b/src/content/docs/guides/flow-builder/builder-elements.mdx index 49acdf612..4f08e40b7 100644 --- a/src/content/docs/guides/flow-builder/builder-elements.mdx +++ b/src/content/docs/guides/flow-builder/builder-elements.mdx @@ -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 diff --git a/src/content/docs/guides/flow-builder/builder-ui.mdx b/src/content/docs/guides/flow-builder/builder-ui.mdx index a5d131cb0..fb5cf5ff7 100644 --- a/src/content/docs/guides/flow-builder/builder-ui.mdx +++ b/src/content/docs/guides/flow-builder/builder-ui.mdx @@ -138,7 +138,7 @@ Main article: [Screens and Layers](paywall-layout-and-products) The 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. - \ No newline at end of file + diff --git a/src/content/docs/guides/flow-builder/onboarding-flow-tutorial.mdx b/src/content/docs/guides/flow-builder/onboarding-flow-tutorial.mdx index 8abe8a056..27d34b36e 100644 --- a/src/content/docs/guides/flow-builder/onboarding-flow-tutorial.mdx +++ b/src/content/docs/guides/flow-builder/onboarding-flow-tutorial.mdx @@ -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. - + 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. - + -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. @@ -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. diff --git a/src/content/docs/guides/flow-builder/paywall-features-per-product.mdx b/src/content/docs/guides/flow-builder/paywall-features-per-product.mdx index 6395c573c..9f62387a2 100644 --- a/src/content/docs/guides/flow-builder/paywall-features-per-product.mdx +++ b/src/content/docs/guides/flow-builder/paywall-features-per-product.mdx @@ -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 on the close button layer and choose **Wrap** > **Wrap in Horizontal Stack**. +1. In the **Layers** panel, click the three-dot menu on the close button layer and choose **Wrap** > **Wrap in Horizontal Container**. - + -2. Drag the H1 layer into the new horizontal stack. +2. Drag the H1 layer into the new 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. - + ## 4. Add the product list diff --git a/src/content/docs/guides/flow-builder/paywall-with-tabs.mdx b/src/content/docs/guides/flow-builder/paywall-with-tabs.mdx index cfdb488d6..b7f1a8d93 100644 --- a/src/content/docs/guides/flow-builder/paywall-with-tabs.mdx +++ b/src/content/docs/guides/flow-builder/paywall-with-tabs.mdx @@ -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 on the close button layer and choose **Wrap** > **Wrap in Horizontal Stack**. - + -2. Drag the H1 layer into the new horizontal stack. +2. Drag the H1 layer into the new 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. - + ## 4. Add the tabs and configure their labels diff --git a/src/content/docs/version-3.0/manage-paywall-ui-elements.mdx b/src/content/docs/version-3.0/manage-paywall-ui-elements.mdx index 6fda2198d..fa79a5e54 100644 --- a/src/content/docs/version-3.0/manage-paywall-ui-elements.mdx +++ b/src/content/docs/version-3.0/manage-paywall-ui-elements.mdx @@ -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 -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. \ No newline at end of file +Use the **Move up** and **Move down** [layer actions](paywall-layout-and-products#layer-actions) to change element order. diff --git a/src/content/docs/version-3.0/paywall-layout-and-products.mdx b/src/content/docs/version-3.0/paywall-layout-and-products.mdx index 762a04990..b397c6c03 100644 --- a/src/content/docs/version-3.0/paywall-layout-and-products.mdx +++ b/src/content/docs/version-3.0/paywall-layout-and-products.mdx @@ -175,7 +175,7 @@ Click the three-dot icon to open the c | **Duplicate** | ⌘D / Ctrl+D | Create a copy of the layer in the same container | | **Rename** | | Change the layer’s display name. By default, layers use their content or component type as the name | | **Delete** | ⌘⌫ / Ctrl+Del | Remove the layer and all its children | -| **Wrap** | | Wrap the layer in a new container: **Wrap in Horizontal Stack** or **Wrap in Vertical Stack** | +| **Wrap** | | Wrap the layer in a new container: **Wrap in Horizontal Container** or **Wrap in Vertical Container** | | **Unwrap / Ungroup** | | Remove the wrapping container and move its children one level up | | **Move up** | ↑ | Move the layer one position up in its parent container | | **Move down** | ↓ | Move the layer one position down in its parent container |