---
title: "创建基础付费墙页面"
description: "在流程编辑器中构建标准付费墙页面的分步指南。"
---

这是最常见的付费墙模板。可以作为独立页面使用，也可以放在多页面[流程](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. 设置页面布局 \{#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 Container**。

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. 在 **Layers** 面板中，选择 **Terms of Use** 按钮。打开 **Interactions** 标签页——**Open URL** 操作已自动附加。点击该操作并输入目标 URL。
3. 对 **Privacy Policy** 按钮重复以上步骤，输入您的隐私政策 URL。
4. 保留 **Restore Purchases** 按钮不变，其操作已预先配置好。

:::tip
如果某个元素的位置偏高或偏低，或者您想在任意位置增加间距，可调整该元素的外边距（margin）和内边距（padding）。
:::

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

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