---
title: "创建基础付费墙页面"
description: "在 Flow Builder 中构建标准付费墙页面的分步指南。"
---

这是最常见的付费墙模板。你可以将其作为独立页面使用，也可以放在多页面[流程](adapty-flow-builder)的末尾。
标准付费墙页面包含标题、价值描述、功能列表、产品列表、购买按钮，以及页脚链接（用于恢复购买、使用条款和隐私政策）。
## 开始之前 \{#before-you-start\}

- 在 Adapty 看板中[创建产品](create-product)。
- [将 Adapty 连接到 App Store 和 Google Play](integrate-payments)。
## 1. 设置可复用样式 \{#set-up-reusable-styles\}

可复用样式让你只需点击一下，就能在每个页面上应用相同的字体和颜色。每个新流程都自带一组默认文本样式（H1、正文、按钮标签等）——在添加元素之前，先根据你的设计调整好这些样式。同时为整个页面中会用到的品牌颜色添加颜色样式。

详细说明请参阅[元素样式——可复用样式](builder-styling#reusable-styles)。

设置样式的步骤如下：
1. 在左侧面板中，打开 **Styles** Styles 面板。
2. 在 **Text** 选项卡中，点击已有样式来编辑其字体、字重、大小和颜色。只有在默认样式无法满足需求时，才需要添加新样式。

3. 在 **Colors** 选项卡中，点击 **Plus Create style**，添加计划在整个屏幕中复用的颜色。

## 2. 设置屏幕布局 \{#set-up-the-screen-layout\}

屏幕本身是你所有添加内容的容器。先配置好它的布局、背景和内边距，后续添加的元素才能正确排列。

屏幕属性的完整列表，请参阅[屏幕与图层 — 屏幕设置](paywall-layout-and-products#screen-settings)。

配置屏幕的步骤：
1. 点击画布空白区域选中屏幕，右侧面板切换为屏幕设置。
2. 在 **System UI** 下，关闭 **Safe area**，让内容延伸到屏幕边缘。
3. 在 **Layout** 下，将方向设置为 **Vertical** Vertical，分布方式设置为 **Space evenly**。

4. 在 **Fill** 下方，选择背景类型——纯色、渐变或图片。本示例使用带有两个色标的 **Gradient** Gradient。

## 3. 添加关闭按钮 \{#3-add-the-close-button\}

关闭按钮用于关闭付费墙。**Close** 预设已预先配置好，无需额外设置操作。

1. 在画布上，点击 **+**。
2. 选择 **Buttons** > **Close**。

## 4. 添加标题并与关闭按钮配对 \{#add-the-title-and-pair-it-with-the-close-button\}

H1 标题位于屏幕顶部，紧靠关闭按钮。要让两者水平对齐，需将它们放入一个水平堆叠容器中。

添加标题的步骤：

1. 点击 **+** > **Text** > **H1**。
2. 选中 H1 后，在右侧面板中打开 **Design** 标签，在 **Content** 字段中编辑文本内容。

将标题与关闭按钮分组：
1. 在 **Layers** 面板中，点击关闭按钮图层上的三点菜单 Context menu，选择 **Wrap** > **Wrap in Horizontal Stack**。

2. 将 H1 图层拖入新建的水平堆叠中。

对齐两个元素：
1. 调整关闭按钮的大小和 H1 字体大小，使它们在同一行中看起来协调舒适。
2. 选中水平堆叠后，在右侧面板中设置对齐方式和分布方式，使各元素正确排列。

## 5. 添加价值描述 \{#add-the-value-description\}

在标题下方添加一行简短的正文，向用户说明订阅所带来的权益。

1. 点击 **+** > **Text** > **Body**。
2. 选中正文元素后，在 **Design** 标签页的 **Content** 字段中编辑文本内容。

## 6. 添加功能特性列表 \{#add-the-feature-list\}

功能特性列表用于突出显示订阅解锁后包含的内容。每一行包含一个图标、一个功能标题和简短说明。

完整的列表预设，请参阅[元素 — 列表](builder-elements#list)。

添加功能特性列表的步骤：

1. 点击 **+** > **List**，选择一个列表预设。Icon List 是付费墙最常用的样式。
2. 选中每一行后，在 **Content** 字段中编辑标题和说明。
3. 如需添加或删除行，选中列表并使用 **Layers** 面板中的行控件进行操作。

## 7. 添加产品列表 \{#add-the-product-list\}

产品列表展示用户可选择的订阅选项。Products 元素会为分配到该页面的每个产品渲染一张卡片，其中一张卡片会自动标记为默认选项。

关于产品管理的更多信息，请参阅[设置购买](paywall-product-block)。

要添加和配置产品，请执行以下操作：
1. 点击 **+** > **Products**，选择一个布局预设。垂直列表（Vertical List）是最常用的。
2. 在画布上选中每张产品卡片，然后在 **Design** 标签页的下拉菜单中选择对应产品。下拉菜单会显示 Adapty 看板中配置的所有产品。
3. 如需更改默认选中项，选中对应卡片，在 **Design** 标签页中开启 **Set as default product**。
4. 如需自定义折扣标签，在 **Layers** 面板中展开产品卡片，选中标签图层，然后在 **Content** 字段中编辑文字。点击其他卡片上各标签图层旁的眼睛图标 Show 可将其隐藏。

## 8. 添加购买按钮 \{#add-the-purchase-button\}

购买按钮会为用户当前选中的产品发起应用内购买。`products.selectedProduct` 变量始终指向屏幕上当前选中的产品。

添加购买按钮的步骤：

1. 点击 **+** > **Buttons**，选择一个按钮预设。
2. 选中该按钮后，在右侧面板中打开 **Interactions** 标签页。
3. 点击 **Add trigger** > **On tap**，然后点击 **Add action**。
4. 将 **Action** 设置为 **Purchase**，将 **Product** 设置为 `products.selectedProduct`。

## 9. 添加底部链接 \{#add-footer-links\}

底部包含使用条款和隐私政策的链接（应用商店要求）以及恢复历史购买的按钮。

添加底部链接的步骤：

1. 点击 **+** > **Buttons** > **Links**，此操作会添加一行，包含 Restore Purchases、Terms of Use 和 Privacy Policy。
2. 选择 **Terms of Use** 链接。在 **Interactions** 标签页中，**Open URL** 操作已预先绑定——将您的条款 URL 粘贴到 URL 字段中。
3. 对 **Privacy Policy** 链接重复上述操作，填入您的隐私政策 URL。
4. **Restore Purchases** 链接保持默认即可，其操作已预先配置好。
:::tip
如果某个元素的位置感觉偏高或偏低，或者想在任意位置增加间距，可以调整该元素的外边距和内边距。
:::

## 后续步骤 \{#next-steps\}

- [保存并发布您的流程](builder-save-publish)。
- [将流程添加到版位](create-placement)，开始向用户展示。