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 hiển thị phụ 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.

Bỏ qua tab Design hoàn toàn.

Hãy yêu cầu AI Editor “tạo cho paywall cảm giác tối, cao cấp” và nó sẽ tái tạo kiểu từng phần tử ngay lập tức — màu nền, góc bo, phông chữ và khoảng cách.

Explore the AI Editor›

Hiển thị

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 (mặc định): Phần tử luôn hiển thị.
• 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 để biết thêm thông tin.
• Hide: Phần tử luôn bị ẩ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.

Điền màu nền

Phần Fill thiết lập màu nền của một phần tử. Để tô màu toàn bộ màn hình, hãy đặt nền màn hình thay thế.

Một fill bao gồm một hoặc nhiều lớp. Mỗi lớp có một trong các kiểu sau:

• Màu đồng nhất : Dùng bảng chọn màu hoặc nhập giá trị hex. Điều chỉnh opacity để làm nền bán trong suốt.
• Gradient : Hai điểm màu trở lên. Kéo các điểm để điều chỉnh hiệu ứng chuyển màu, và đặt góc bằng thanh trượt Direction. Để thay đổi một điểm màu, chỉnh sửa hàng tương ứng trong Stops. Để thêm điểm màu, nhấp vào thanh gradient hoặc bên cạnh Stops. Thanh trượt trong hàng layer thay đổi opacity của tất cả các điểm màu cùng lúc.
• Hình ảnh hoặc Video : Dùng hình ảnh hoặc video làm nền.

Để quản lý các lớp:

• Để thêm lớp, nhấp vào bên cạnh Fill.
• Để thay đổi loại lớp, nhấp vào ô màu của lớp đó và chọn một loại.
• Để thay đổi thứ tự các lớp, kéo các hàng của chúng.
• Để xóa một lớp, nhấp vào trong hàng của lớp đó.

Lớp trên cùng sẽ che lớp bên dưới, vì vậy một lớp bán trong suốt đặt trên ảnh sẽ tô màu cho ảnh đó. Các trường nhập liệu và bộ chọn ngày/giờ chỉ hiển thị lớp dưới cùng.

Để tái sử dụng một lớp trong các thành phần khác hoặc tạo phiên bản tối cho nó, hãy lưu nó thành một color style. Để tái sử dụng ảnh cùng với màu tô của nó, hãy tạo một style đa lớp duy nhất.

Viền

Viền mặc định bị tắt. Nhấp vào bên cạnh Border trong bảng bên phải để thêm viền. Để xóa viền, nhấp vào bên cạnh tiêu đề Border.

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

• Color: Dùng bộ chọn màu hoặc nhập giá trị hex. Để áp dụng color style, hãy chọn từ tab Styles. Đường viền bỏ qua các lớp hình ảnh và video của một style.
• Width: Độ dày đường viền tính bằng pixel.

Góc bo tròn

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 : Bật để đặt bán kính khác nhau cho từng góc riêng lẻ

Hiệu ứng

Nhấn nút dấu cộng 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 phần tử
• Layer blur: Làm mờ phần tử và các thành phần con của nó

Bạn có thể thêm nhiều hiệu ứng cho cùng một phần tử. Nhấn vào biểu tượng ẩn/hiện để tạm tắt một hiệu ứng.

Hiệu ứng động

Nhấn nút 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

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 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 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

• 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)

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

Font

Nhấp vào dropdown font để mở bộ chọn font. Bộ chọn có hai tab:

• Styles: Liệt kê các text style đã lưu trong dự án của bạn. Chọn một style để áp dụng toàn bộ cài đặt typography cùng một lúc.
• Fonts: Liệt kê tất cả các font family có sẵn. Tìm kiếm hoặc cuộn để tìm font bạn cần. Font 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 font chữ tùy chỉnh.

Để lưu cài đặt kiểu chữ hiện tại thành kiểu văn bản mới, hãy nhấp vào bên cạnh các tab. Phần tử sẽ sử dụng kiểu mới đó.

Kích thước và độ đậm

• Weight: Chọn độ đậm của phông chữ từ dropdown
• Size: Chọn kích thước từ dropdown hoặc nhập giá trị tùy chỉnh

Màu sắc

Nhấp vào ô màu, nhập giá trị hex hoặc dùng bảng màu. Để áp dụng kiểu màu, chọn kiểu đó từ tab Styles. Văn bản chỉ hiển thị các lớp màu đơn của một kiểu.

Căn chỉnh

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

• Horizontal: Trái , Giữa , hoặc Phải
• Vertical: Trên , Giữa , hoặc Dưới

Trang trí

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

Cắt bớt văn bản

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.

Cài đặt theo trạng thái (phần tử tương tác)

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

Các phần tử thuộc nhóm có thể chọn (tùy chọn quiz, sản phẩm, tab, toggle và checkbox) mặc định cung cấp 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ư fill, 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 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 để 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

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

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 — ba trạng thái mỗi bước: Completed, Current và Upcoming.
• Dấu chấm carousel — 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.

Kiểu dùng lại

Để giữ thuộc tính văn bản và màu sắc nhất quán trong toàn bộ flow, hãy lưu chúng dưới dạng kiểu dùng lại. Khi bạn chỉnh sửa một kiểu, mọi phần tử và màn hình sử dụng kiểu đó sẽ thay đổi theo.