---
title: "Tạo màn hình paywall cơ bản"
description: "Hướng dẫn từng bước để xây dựng màn hình paywall tiêu chuẩn trong Flow Builder."
---

Đây là mẫu paywall phổ biến nhất. Bạn có thể dùng nó như một màn hình độc lập, hoặc đặt nó ở cuối một [flow](adapty-flow-builder) gồm nhiều màn hình.

Một màn hình paywall tiêu chuẩn bao gồm tiêu đề, mô tả giá trị, danh sách tính năng, danh sách sản phẩm, nút mua hàng, và các liên kết ở chân trang để khôi phục giao dịch, điều khoản sử dụng và chính sách bảo mật.

## Trước khi bắt đầu \{#before-you-start\}

- [Tạo sản phẩm](create-product) trong Adapty Dashboard.
- [Kết nối Adapty với App Store và Google Play](integrate-payments).

## 1. Thiết lập các style tái sử dụng \{#1-set-up-reusable-styles\}

Các style tái sử dụng cho phép bạn áp dụng cùng một kiểu chữ và màu sắc cho mọi màn hình chỉ với một cú nhấp chuột. Mỗi flow mới đều đi kèm bộ text style mặc định (H1, Body, Button Label, v.v.) — hãy điều chỉnh chúng cho phù hợp với thiết kế của bạn trước khi bắt đầu thêm các phần tử. Thêm color style cho các màu thương hiệu bạn sẽ dùng xuyên suốt màn hình.

Xem hướng dẫn đầy đủ tại [Định dạng phần tử — Reusable styles](builder-styling#reusable-styles).

Để thiết lập các style:

1. Trong bảng bên trái, mở bảng **Styles** Styles.
2. Trên tab **Text**, nhấp vào một style hiện có để chỉnh sửa font, độ đậm, kích thước và màu sắc. Chỉ thêm style mới nếu các style mặc định chưa đáp ứng được nhu cầu của bạn.

3. Trên tab **Colors**, nhấp **Plus Create style** và thêm các màu bạn muốn tái sử dụng trong màn hình.

## 2. Thiết lập bố cục màn hình \{#2-set-up-the-screen-layout\}

Bản thân màn hình đóng vai trò là container chứa mọi thứ bạn thêm vào. Hãy cấu hình bố cục, nền và padding trước để các phần tử bạn thêm sau phân bổ đúng cách.

Xem danh sách đầy đủ các thuộc tính màn hình tại [Màn hình và layer — Cài đặt màn hình](paywall-layout-and-products#screen-settings).

Để cấu hình màn hình:

1. Nhấp vào vùng trống trên canvas để chọn màn hình. Bảng bên phải sẽ chuyển sang cài đặt màn hình.
2. Trong **System UI**, tắt **Safe area** để nội dung kéo dài đến rìa màn hình.
3. Trong **Layout**, đặt hướng thành **Vertical** Vertical và phân bổ thành **Space evenly**.

4. Trong **Fill**, chọn loại nền — màu đơn sắc, gradient, hoặc hình ảnh. Ví dụ này dùng **Gradient** Gradient với hai color stop.

## 3. Thêm nút đóng \{#3-add-the-close-button\}

Nút đóng giúp người dùng thoát khỏi paywall. Preset **Close** đã được cấu hình sẵn — không cần thiết lập thêm hành động.

1. Trên canvas, nhấp **+**.
2. Chọn **Buttons** > **Close**.

## 4. Thêm tiêu đề và ghép nó với nút đóng \{#4-add-the-title-and-pair-it-with-the-close-button\}

H1 nằm cạnh nút đóng ở đầu màn hình. Để căn chỉnh chúng theo chiều ngang, hãy bọc cả hai trong một horizontal container.

Để thêm tiêu đề:

1. Nhấp **+** > **Text** > **H1**.
2. Khi H1 được chọn, mở tab **Design** trong bảng bên phải và chỉnh sửa văn bản trong trường **Content**.

Để nhóm tiêu đề với nút đóng:

1. Trong bảng **Layers**, nhấp vào menu ba chấm Context menu trên layer nút đóng và chọn **Wrap** > **Wrap in Horizontal Container**.

2. Kéo layer H1 vào horizontal container mới.

Để căn chỉnh hai phần tử:

1. Điều chỉnh kích thước nút đóng và cỡ chữ H1 sao cho chúng nằm gọn trên cùng một hàng.
2. Khi horizontal container được chọn, đặt căn chỉnh và phân bổ trong bảng bên phải để các phần tử thẳng hàng đúng cách.

## 5. Thêm mô tả giá trị \{#5-add-the-value-description\}

Một dòng body ngắn bên dưới tiêu đề giải thích những gì người dùng nhận được từ gói đăng ký.

1. Nhấp **+** > **Text** > **Body**.
2. Khi phần tử body được chọn, chỉnh sửa văn bản trong trường **Content** trên tab **Design**.

## 6. Thêm danh sách tính năng \{#6-add-the-feature-list\}

Danh sách tính năng làm nổi bật những gì có trong gói đăng ký khi mở khóa. Mỗi hàng có một biểu tượng, tên tính năng và mô tả ngắn.

Xem đầy đủ các preset danh sách tại [Phần tử — List](builder-elements#list).

Để thêm danh sách tính năng:

1. Nhấp **+** > **List** và chọn một list preset. Icon List là lựa chọn phổ biến nhất cho paywall.
2. Khi mỗi hàng được chọn, chỉnh sửa tiêu đề và mô tả trong trường **Content**.
3. Để thêm hoặc xóa hàng, chọn danh sách và dùng các điều khiển hàng trong bảng **Layers**.

## 7. Thêm danh sách sản phẩm \{#7-add-the-product-list\}

Danh sách sản phẩm hiển thị các tùy chọn gói đăng ký để người dùng lựa chọn. Phần tử Products hiển thị một thẻ cho mỗi sản phẩm được gán cho màn hình, và một thẻ được tự động đánh dấu là mặc định.

Để biết thêm về quản lý sản phẩm, xem [Thiết lập giao dịch mua](paywall-product-block).

Để thêm và cấu hình sản phẩm:

1. Nhấp **+** > **Products** và chọn một layout preset. Vertical List là phổ biến nhất.
2. Chọn từng thẻ sản phẩm trên canvas và chọn một sản phẩm từ dropdown trong tab **Design**. Dropdown hiển thị tất cả sản phẩm đã được cấu hình trong Adapty Dashboard.
3. Để thay đổi sản phẩm được chọn mặc định, chọn thẻ bạn muốn và bật **Set as default product** trong tab **Design**.
4. Để tùy chỉnh nhãn giảm giá, mở rộng thẻ sản phẩm trong bảng **Layers**, chọn layer nhãn, và chỉnh sửa văn bản trong trường **Content**. Ẩn nhãn trên các thẻ khác bằng cách bật/tắt biểu tượng mắt Show bên cạnh mỗi layer nhãn.

## 8. Thêm nút mua hàng \{#8-add-the-purchase-button\}

Nút mua hàng bắt đầu in-app purchase cho sản phẩm mà người dùng đã chọn. Biến `products.selectedProduct` luôn phân giải thành sản phẩm đang được chọn trên màn hình.

Để thêm nút mua hàng:

1. Nhấp **+** > **Buttons** và chọn một button preset.
2. Khi nút được chọn, mở tab **Interactions** trong bảng bên phải.
3. Nhấp **Add trigger** > **On tap**, rồi nhấp **Add action**.
4. Đặt **Action** thành **Purchase** và **Product** thành `products.selectedProduct`.

## 9. Thêm các liên kết chân trang \{#9-add-footer-links\}

Chân trang chứa các liên kết đến điều khoản sử dụng và chính sách bảo mật (theo yêu cầu của các cửa hàng ứng dụng) và một nút để khôi phục giao dịch trước đó.

Để thêm các liên kết chân trang:

1. Nhấp **+** > **Buttons** > **Links**. Thao tác này thêm một hàng với Restore Purchases, Terms of Use, và Privacy Policy.
2. Trong bảng **Layers**, chọn nút **Terms of Use**. Mở tab **Interactions** — hành động **Open URL** đã được gắn sẵn. Nhấp vào hành động và nhập URL đích.
3. Lặp lại với nút **Privacy Policy** bằng URL chính sách bảo mật của bạn.
4. Giữ nguyên nút **Restore Purchases**. Hành động của nó đã được cấu hình sẵn.

:::tip
Nếu vị trí của bất kỳ phần tử nào cảm thấy quá cao hoặc quá thấp, hoặc bạn muốn thêm khoảng trống ở bất kỳ đâu, hãy điều chỉnh margin và padding của phần tử đó.
:::

## Các bước tiếp theo \{#next-steps\}

- [Lưu và xuất bản flow của bạn](builder-save-publish).
- [Thêm flow vào một placement](create-placement) để bắt đầu hiển thị cho người dùng.