---
title: "Thêm và định dạng văn bản và danh sách trong Flow Builder"
description: "Thêm và định dạng tiêu đề, phụ đề, đoạn văn và danh sách trong flow builder của Adapty, đồng thời tùy chỉnh văn bản để tạo trải nghiệm người dùng phù hợp với thương hiệu."
---

Thêm tiêu đề, đoạn văn hoặc danh sách chỉ với một cú nhấp chuột, định dạng chúng theo thương hiệu của bạn, và sử dụng [biến động](onboarding-variables) để cá nhân hóa nội dung cho từng người dùng.
## Cài đặt kiểu văn bản \{#set-up-text-styles\}

Bảng **Styles** bao gồm các kiểu văn bản được cấu hình sẵn: H1, H2, H3, Button Label, Body, Caption và Small Label. Nhấp vào bất kỳ kiểu nào để chỉnh sửa font chữ, độ đậm, cỡ chữ, căn chỉnh, trang trí và các thuộc tính khác.

Khi bạn [thêm một phần tử văn bản](#add-text), bạn có thể chọn một trong các kiểu đã cài đặt ở đây.

:::important
Thay đổi đối với một kiểu sẽ áp dụng cho tất cả các phần tử văn bản đang sử dụng kiểu đó, trên tất cả các màn hình.
:::

Để tạo một kiểu mới:

1. Nhấp vào Palette để mở bảng **Styles**.
2. Trong tab **Text**, nhấp vào **Create style**.

3. Nhập tên và cấu hình kiểu chữ — font family, độ đậm, căn chỉnh, và [các thuộc tính khác](#typography-properties).

    :::warning
   [Custom fonts](using-custom-fonts-in-flow-builder) hoạt động khác với font có sẵn. Hãy đọc hướng dẫn — một số tùy chỉnh không áp dụng được, và mỗi biến thể font cần có file riêng.    
   :::

   

4. Nhấn **Create**.
## Thêm văn bản \{#add-text\}

Để thêm một phần tử văn bản:
1. Nhấp vào **+** ở góc trên bên trái. Chọn **Text**. Chọn một trong các [kiểu văn bản](#set-up-text-styles) đã được cấu hình sẵn hoặc do bạn thiết lập.

2. Nhấp vào phần tử mới và chỉnh sửa nội dung của nó trong phần **Content** ở bảng **Design** bên phải.
3. Nếu cần, điều chỉnh [thuộc tính typography](#typography-properties) trong bảng **Design**. Hoặc, chọn văn bản trong phần xem trước để mở tooltip chỉnh sửa nhanh.
4. Tùy chọn, trong bảng **Design** và **Interaction**, bạn cũng có thể áp dụng các cấu hình khác cho các thành phần trong flow. Để biết thêm chi tiết, xem [Tùy chỉnh giao diện các phần tử](builder-styling).
:::tip
Nếu bạn cần dùng cùng một phần tử văn bản trên nhiều màn hình, hãy sao chép và dán: chọn phần tử, nhấn Ctrl+C (hoặc ⌘+C trên Mac), chuyển sang màn hình khác, rồi nhấn Ctrl+V (hoặc ⌘+V trên Mac) để dán.
:::

### Thay đổi kiểu chữ cho một phần văn bản \{#change-styling-for-parts-of-text\}

:::warning
Định dạng **Bold** (in đậm) và **Italic** (in nghiêng) không có tác dụng đối với văn bản sử dụng [phông chữ tùy chỉnh](using-custom-fonts-in-flow-builder). Để áp dụng các biến thể của phông chữ tùy chỉnh, hãy tải lên từng biến thể dưới dạng file phông chữ riêng biệt và chọn từ danh sách **Font family**.
:::

Để chỉ thay đổi kiểu chữ cho một phần của phần tử văn bản:

1. Chọn một phần của phần tử văn bản trong mục **Content**.
2. Trong tooltip xuất hiện, thay đổi màu chữ, áp dụng định dạng in đậm, gạch chân, in nghiêng, gạch ngang, hoặc thêm URL.

Bản xem trước cập nhật ngay lập tức.

## Thuộc tính Typography \{#typography-properties\}

Mỗi thành phần văn bản và kiểu chữ đều dùng chung một bộ điều khiển typography:

- **Font family**: Chọn kiểu chữ — font tích hợp sẵn hoặc [font tùy chỉnh](using-custom-fonts-in-flow-builder).

    :::warning
    Các thiết bị khác nhau có thể có các font khác nhau, hoặc hiển thị cùng một font theo cách khác nhau. Nếu font không có trên thiết bị, hệ thống sẽ dùng font mặc định (SF Pro / Roboto). Để hiển thị nhất quán cùng một font trên tất cả thiết bị, hãy tải lên [font tùy chỉnh](using-custom-fonts-in-flow-builder).
    :::

- **Weight**: Đặt độ đậm của font.
:::warning
Các điều khiển **Weight**, **Bold**, và **Italic** không áp dụng cho [phông chữ tùy chỉnh](using-custom-fonts-in-flow-builder), dù được đặt trong bảng **Styles**, phần typography của bảng **Design**, thanh công cụ inline, hay tooltip định dạng text-part. Để áp dụng các biến thể của phông chữ tùy chỉnh, hãy tải lên từng biến thể dưới dạng file phông chữ riêng và chọn đúng biến thể từ menu thả xuống **Font**.
:::
- **Size**: Đặt cỡ chữ theo pixel.
- **Color**: Đặt màu chữ.
- **Line height**: Đặt khoảng cách giữa các dòng, hoặc để **Auto**.
- **Alignment**: Đặt căn chỉnh theo chiều ngang (trái, giữa, phải) và chiều dọc (trên, giữa, dưới).
- **Decoration**: Áp dụng gạch chân hoặc gạch ngang.
- **Truncate**: Giới hạn số dòng hiển thị. Văn bản vượt quá giới hạn đó sẽ bị cắt bớt. Hữu ích khi độ dài nội dung thay đổi do biến động hoặc bản địa hóa.
## Thêm liên kết \{#add-links\}

Flow hỗ trợ hai cách để biến văn bản thành liên kết có thể nhấn. Chọn cách phù hợp dựa trên vai trò của văn bản:

- **Liên kết nội tuyến** — dành cho URL nằm trong đoạn văn, chẳng hạn như tham chiếu "Tìm hiểu thêm" được nhúng trong một đoạn. Luôn mở trong trình duyệt trong ứng dụng.
- **Hành động Open URL** — dành cho các mục nhấn độc lập, như nút Điều khoản dịch vụ. Có thể mở trong trình duyệt trong ứng dụng hoặc trình duyệt bên ngoài.
### Liên kết nội dòng \{#inline-link\}

Để biến một phần văn bản thành liên kết:

1. Chọn đoạn văn bản trong phần **Content**.
2. Trong tooltip định dạng, nhấp vào biểu tượng liên kết.
3. Dán URL đích vào cửa sổ pop-up.

### Hành động Mở URL \{#open-url-action\}

:::link
Bài viết chính: [Hành động](onboarding-actions#open-url)
:::

Để biến toàn bộ một nút thành một liên kết:

1. Thêm một [Button](builder-elements#buttons) — hoặc dùng preset **Links**, một hàng có sẵn với các nút Restore / Terms of Service / Privacy Policy.

    

2. Chọn nút đó trong bảng **Layers** và mở tab **Interactions** ở bảng bên phải.

3. Đặt đích đến cho hành động [**Open URL**](onboarding-actions#open-url).

    :::important
    Một hành động Open URL để trống sẽ [chặn việc xem trước và xuất bản](builder-save-publish#troubleshooting).
    :::

    
## Thêm văn bản có điều kiện \{#add-conditional-text\}

Văn bản có điều kiện thay đổi nội dung hiển thị của một phần tử văn bản dựa trên một điều kiện. Ví dụ, một tiêu đề có thể hiển thị một thông điệp khi người dùng chọn gói hàng năm và một thông điệp khác cho gói hàng tháng. Văn bản có điều kiện hoạt động tương tự như [hiển thị có điều kiện](onboarding-element-visibility), nhưng thay vì ẩn/hiện phần tử thì nó hoán đổi nội dung.

Để thiết lập văn bản có điều kiện:

1. Chọn một phần tử văn bản trên canvas.
2. Trong bảng **Design**, ở mục **Content**, chọn **Conditional**.

3. Xây dựng điều kiện **if**. Chọn một thuộc tính từ tab **Custom**, **Products**, hoặc **Elements**, đặt toán tử và nhập giá trị cần khớp. Để biết chi tiết về các loại thuộc tính, xem [Conditional visibility](onboarding-element-visibility).
4. Trong phần **then**, nhập văn bản hiển thị khi điều kiện đúng. Định dạng văn bản phong phú hoạt động giống như với [văn bản thông thường](#change-styling-for-parts-of-text). Để chèn một [biến](onboarding-variables), nhấp vào **{ } Add variable**.
5. Trong phần **else**, nhập văn bản dự phòng hiển thị khi không có điều kiện nào khớp.
6. (Tùy chọn) Nhấp vào **+ Add else/if** để thêm các điều kiện khác, mỗi điều kiện có văn bản riêng.
:::tip
Để chỉnh sửa văn bản có điều kiện cho ngôn ngữ khác, hãy chuyển locale đang hoạt động ở cuối trình chỉnh sửa. Thêm ngôn ngữ trong bảng **Localizations** trước — xem [Thêm locale trong Flow Builder](add-paywall-locale-in-adapty-paywall-builder).
:::

## Thêm danh sách \{#add-lists\}

:::note
Các phần tử danh sách là các container được tạo từ các thành phần item riêng lẻ. Với danh sách dấu chấm đầu dòng hoặc danh sách đánh số đơn giản trong văn bản thông thường, hãy dùng phần tử văn bản và áp dụng định dạng mong muốn qua bảng **Design**.
:::

1. Nhấn **+** ở góc trên bên trái. Chọn **List** và chọn một trong các mẫu danh sách.

2. Vào bảng **Design** ở bên phải để chỉnh sửa các mục danh sách hoặc tải ảnh lên làm dấu đầu dòng cho mục.