---
title: "Kiểu dáng và giao diện"
description: "Cấu hình giao diện trực quan của các phần tử — màu nền, viền, hiệu ứng, kiểu chữ, trạng thái và kiểu dáng toàn dự án."
---

Tab **Design** trong bảng bên phải kiểm soát giao diện trực quan của từng phần tử. Các thuộc tính có sẵn tùy thuộc vào loại phần tử, nhưng hầu hết các phần tử đều có chung các tùy chọn tạo kiểu.

:::link
Về kích thước, khoảng cách và vị trí, xem [Bố cục và định vị](manage-paywall-ui-elements).
:::
## Hiển thị \{#visibility\}

Nút bật tắt **Visibility** xác định xem phần tử đó có hiển thị trên màn hình hay không.
* Show **Show** (mặc định): Phần tử luôn hiển thị.
* Conditional **Conditional**: Phần tử chỉ hiển thị khi đáp ứng các điều kiện cụ thể. Xem [Hiển thị có điều kiện](onboarding-element-visibility) để biết thêm thông tin.
* Hide **Hide**: Phần tử luôn ẩn. Dùng tùy chọn này để tạm thời xóa một phần tử khỏi flow mà không cần xóa hẳn.

<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/3w3YSOmI3tQ?si=vPhoQGt44SI285Ru"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>
## Tô màu nền \{#fill\}

Phần **Fill** điều chỉnh nền của phần tử. Có bốn kiểu tô màu nền: màu đặc, gradient, hình ảnh và video.

Dùng thuộc tính này để đặt ảnh hero / video cho toàn bộ màn hình.
* **Solid color** Solid color. Dùng bộ chọn màu, nhập giá trị hex, hoặc chỉ định [màu dùng chung cho toàn dự án](#color-styles). Điều chỉnh **opacity** để làm nền trong suốt một phần.
* **Gradient** Gradient. Thêm gradient với hai điểm màu trở lên. Kéo các điểm màu để thay đổi hiệu ứng chuyển tiếp, và điều chỉnh góc gradient để kiểm soát hướng.

* **Image** Image hoặc **Video** Video. Đặt [hình ảnh / video](custom-media) làm nền cho phần tử.
## Đường viền \{#border\}

Đường viền mặc định bị tắt. Nhấn Plus bên cạnh **Border** trong bảng bên phải để thêm đường viền. Để xóa đường viền, nhấn Close bên cạnh tiêu đề **Border**.

Khi đã có đường viền, bạn có thể cấu hình:

* **Color**: Dùng bộ chọn màu, nhập giá trị hex, hoặc gán [màu toàn dự án](#color-styles). Điều chỉnh **opacity** để làm đường viền bán trong suốt.
* **Width**: Độ dày của đường viền tính bằng pixel.

## Góc bo tròn \{#corners\}

Mục **Corners** kiểm soát bán kính viền (góc bo tròn).

* **Radius slider**: Đặt cùng một bán kính cho cả bốn góc
* **Per-corner toggle** Per Corner: Bật để đặt bán kính khác nhau cho từng góc riêng lẻ

## Hiệu ứng \{#effects\}

Nhấn nút dấu cộng Plus bên cạnh **Effects** để thêm một hoặc nhiều hiệu ứng hình ảnh:

* **Drop shadow**: Bóng đổ phía sau phần tử
* **Inner shadow**: Bóng đổ bên trong ranh giới phần tử
* **Background blur**: Làm mờ nền phía sau
* **Layer blur**: Làm mờ phần tử và các phần tử con của nó

Bạn có thể kết hợp nhiều hiệu ứng trên cùng một phần tử. Nhấn vào biểu tượng hiển thị Show để tạm thời tắt một hiệu ứng.

## Hiệu ứng động \{#animation\}

Nhấn nút Plus bên cạnh **Animation** để thêm hiệu ứng động. Hiện tại, **Pulse** là hiệu ứng duy nhất có sẵn — phần tử sẽ phóng to thu nhỏ nhịp nhàng để thu hút sự chú ý.

Cấu hình hiệu ứng Pulse với các thông số sau:
| Tham số | Mô tả |
|-----------|-------------|
| Scale amount (%) | Mức độ phóng to của phần tử so với kích thước gốc |
| Duration (ms) | Độ dài của một chu kỳ animation |
| Delay between loops (ms) | Khoảng dừng giữa các lần lặp |
| Shadow color | Màu của hiệu ứng bóng đổ nhấp nháy |
| Shadow size (px) | Kích thước của bóng đổ nhấp nháy |

### Xem trước hoạt ảnh \{#preview-the-animation\}

Theo mặc định, builder hiển thị màn hình tĩnh — các hoạt ảnh đứng yên cho đến khi bạn bật chúng lên. Có hai cách:

- Nhấp vào nút **Toggle animations** Toggle animations phía trên phần xem trước thiết bị. Nút này bật/tắt hoạt ảnh của màn hình — sau khi bật, hoạt ảnh chạy liên tục cho đến khi bạn nhấp lại. Nút chỉ xuất hiện khi màn hình đang chọn có ít nhất một hoạt ảnh.
- Mở [menu ngữ cảnh](paywall-layout-and-products#screen-actions) của màn hình (biểu tượng ba chấm bên cạnh layer màn hình) và chọn **Play Animation**.

## Giao diện \{#appearance\}

* **Opacity**: Từ 0% (trong suốt hoàn toàn) đến 100% (không trong suốt)
* **Rotation**: Nhập giá trị tính bằng độ để xoay phần tử

## Thuộc tính kiểu chữ (phần tử văn bản) \{#typography-properties-text-elements\}

Các phần tử văn bản hiển thị mục **Typography** với các điều khiển sau:

### Phông chữ \{#font\}

:::link
Xem thêm: [Phông chữ tùy chỉnh](using-custom-fonts-in-flow-builder)
:::

Nhấn vào dropdown phông chữ Font select để mở bộ chọn phông chữ. Bộ chọn có hai tab:

* **Styles**: Liệt kê các [kiểu chữ](#text-styles) đã lưu trong dự án của bạn. Chọn một kiểu để áp dụng toàn bộ cài đặt typography của nó cùng một lúc.
* **Fonts**: Liệt kê tất cả các họ phông chữ có sẵn. Tìm kiếm hoặc cuộn để tìm phông chữ bạn cần. Phông chữ tích hợp sẵn có thể **hiển thị khác nhau trên các thiết bị** — để hiển thị nhất quán, hãy tải lên [phông chữ tùy chỉnh](using-custom-fonts-in-flow-builder).
### Kích thước và độ đậm \{#size-and-weight\}

:::warning
Đối với [font tùy chỉnh](using-custom-fonts-in-flow-builder), các điều khiển **Weight**, **Bold** và **Italic** chỉ ảnh hưởng đến bản xem trước tích hợp trong trình chỉnh sửa. Để hiển thị các độ đậm và kiểu chữ khác nhau, hãy tải lên từng biến thể của font dưới dạng một file riêng.
:::

* **Weight**: Chọn độ đậm của font từ menu thả xuống
* **Size**: Chọn kích thước từ menu thả xuống hoặc nhập giá trị tùy chỉnh
### Màu sắc \{#color\}

Nhấp vào ô màu để mở bộ chọn màu. Nhập giá trị hex, dùng bảng màu, hoặc chọn một trong các [style có thể tái sử dụng](#reusable-styles). Điều chỉnh thanh trượt opacity để làm văn bản trong suốt một phần.

### Căn chỉnh \{#alignment\}

Hai nhóm điều khiển căn chỉnh:

* **Horizontal**: Trái Align left, Giữa Align center, hoặc Phải Align right
* **Vertical**: Trên Align top, Giữa Align middle, hoặc Dưới Align bottom

### Trang trí \{#decoration\}

* **None** None: Không có trang trí (mặc định)
* **Underline** Underline: Thêm gạch chân vào văn bản
* **Strikethrough** Strikethrough: Thêm đường gạch ngang xuyên văn bản

### Cắt bớt văn bản \{#truncation\}

Bật tính năng cắt bớt để ngắt văn bản vượt quá cài đặt **Max Lines**.
Tính năng này hữu ích khi hỗ trợ nhiều ngôn ngữ: nếu chuỗi đã dịch
dài hơn bản gốc, việc cắt bớt sẽ ngăn nó làm vỡ bố cục.

:::note
Khi bạn chọn một phần tử văn bản, một **thanh công cụ inline** cũng xuất hiện phía trên nó trên canvas. Thanh công cụ này cung cấp quyền truy cập nhanh vào font, độ đậm, cỡ chữ và căn chỉnh mà không cần cuộn qua bảng bên phải.
:::

## Cài đặt theo trạng thái (phần tử tương tác) \{#state-specific-settings-interactive-elements\}

Các phần tử tương tác hỗ trợ nhiều trạng thái trực quan. Khi bạn chọn một phần tử như vậy, mục **States** sẽ xuất hiện trong bảng bên phải. Chuyển đổi giữa các trạng thái để cấu hình các thuộc tính trực quan khác nhau cho từng trạng thái.

Mỗi trạng thái có thể ghi đè bất kỳ thuộc tính trực quan nào — fill, viền, màu chữ, opacity và nhiều hơn nữa.

### Trạng thái có thể chọn \{#selectable-states\}

:::link
Bài viết chính: [Phần tử có thể chọn](flow-selectable-elements)
:::

Các phần tử thuộc nhóm có thể chọn (tùy chọn quiz, sản phẩm, tab, nút bật/tắt dùng thử) mặc định có hai trạng thái:

* **Default**: Giao diện bình thường của phần tử
* **Selected**: Giao diện khi người dùng đã chọn tùy chọn này. Ghi đè các thuộc tính như màu nền, màu viền và màu chữ để làm nổi bật lựa chọn đang hoạt động
Để tạo kiểu cho một phần tử có thể chọn khi nó không tương tác được, hãy thêm trạng thái thứ ba theo cách thủ công. Mở **States settings** Settings và thêm **Disabled state**.

Trạng thái **Disabled** được điều khiển bởi điều kiện. Chọn nó và nhấp vào **Set conditions** set conditions để xác định khi nào phần tử trở nên bị vô hiệu hóa trong lúc chạy, ví dụ như khi một trường bắt buộc bị trống.
### Trạng thái input \{#input-states\}

Các trường nhập liệu cung cấp thêm các trạng thái:

* **Default**: Giao diện bình thường, chưa được focus
* **Active**: Trường đang được focus và sẵn sàng nhận dữ liệu nhập
* **Invalid**: Giá trị đã nhập không qua xác thực
* **Disabled**: Trường không tương tác

### Các phần tử có trạng thái khác \{#other-state-bearing-elements\}

Một số phần tử hiển thị định dạng theo trạng thái ngoài mẫu **Default / Selected / Disabled** tiêu chuẩn:

- **[Bước của progress indicator](builder-loaders-and-progress-bars#step-states)** — ba trạng thái mỗi bước: **Completed**, **Current** và **Upcoming**.
- **[Dấu chấm carousel](builder-containers#dots)** — hai biến thể màu: **Color** cho các dấu chấm không hoạt động và **Active Color** cho dấu chấm của slide hiện tại.

## Style có thể tái sử dụng \{#reusable-styles\}

Bảng **Styles** Styles trong thanh bên trái cho phép bạn định nghĩa các style có thể tái sử dụng áp dụng trong toàn bộ flow. Có hai loại style: text style và color style. Bạn cần dùng color style để bật tính năng hỗ trợ dark mode.

### Kiểu văn bản \{#text-styles\}

:::link
Bài viết chính: [Nội dung văn bản](onboarding-text)
:::

Kiểu văn bản lưu trữ toàn bộ cài đặt typography — bao gồm họ font, độ đậm, kích thước, chiều cao dòng, căn chỉnh và trang trí. Mỗi template flow đều có sẵn các preset mặc định, và bạn có thể tạo thêm kiểu tùy chỉnh.

Để tạo một kiểu văn bản:
1. Mở bảng **Styles** Styles và chọn tab **Text**.
2. Nhấp vào **Plus Create style**.
3. Nhập tên và cấu hình các thiết lập typography.
4. Nhấp vào **Create**.

Để áp dụng text style, chọn một phần tử văn bản và chọn style từ dropdown font trong mục **Typography**.

### Màu sắc theo kiểu dáng \{#color-styles\}

Màu sắc theo kiểu dáng là các màu được đặt tên mà bạn có thể tham chiếu xuyên suốt flow của mình. Mỗi kiểu màu có một tên (như "Primary text" hoặc "Brand"), giá trị hex và số lần sử dụng cho biết có bao nhiêu phần tử đang tham chiếu đến nó.

Để tạo một kiểu màu:

1. Mở bảng **Styles** Styles và chọn tab **Colors**.
2. Nhấn **Plus Create style**.
3. Nhập tên và chọn màu.
Khi bạn cập nhật một kiểu màu, mọi phần tử tham chiếu đến nó sẽ tự động được cập nhật.
### Chế độ tối \{#dark-mode\}

:::link
Bài viết chính: [Chế độ tối](paywall-dark-mode)
:::

Nếu cần, bạn có thể thêm hai biến thể cho mỗi kiểu màu — một cho chế độ sáng Light mode và một cho chế độ tối Dark mode. SDK sẽ tự động áp dụng biến thể phù hợp dựa trên chế độ màu hiện tại của thiết bị.
Để xem trước chế độ tối trong builder, hãy dùng **nút chuyển đổi giao diện** Dark mode trong [thanh công cụ phía dưới](builder-ui#view-controls-bottom-toolbar).