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ử hiển thị khi màn hình mở ra.
• 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ử bị ẩn cho đến khi một hành động Show element hiển thị nó. Dùng tùy chọn này để tạm thời ẩn một phần tử khỏi flow mà không xóa 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.

Hoạt ảnh

Nhấn nút bên cạnh Animation để thêm hiệu ứng động. Builder sẽ thêm animation Pulse, giúp phần tử phóng to thu nhỏ theo nhịp điệu để thu hút sự chú ý. Để sử dụng hiệu ứng khác, hãy chọn trong Type.

Các loại animation

Mỗi loại có cài đặt riêng. Cài đặt thời gian thì giống nhau cho mọi loại.

Loại	Chức năng	Cài đặt
Pulse	Phần tử phóng to rồi thu nhỏ lại.	Scale amount (%): mức độ phần tử phóng to.
Radial fill waves	Một bản sao được tô màu theo hình dạng của phần tử sẽ lan ra từ phía sau và mờ dần.	Scale amount (%): mức độ mỗi sóng phóng to so với phần tử. Wave size (px): khoảng cách mỗi sóng lan ra ngoài cạnh phần tử. Wave color. Button pulse: cũng làm phần tử phóng to theo từng sóng, theo Pulse amount (%).
Radial outline waves	Giống Radial fill waves, nhưng mỗi sóng là đường viền.	Giống Radial fill waves.
Glow	Một vầng sáng mềm mại lan rộng quanh phần tử rồi mờ dần.	Glow size (px): khoảng cách vầng sáng lan ra khi sáng nhất. Glow color.
Shake	Phần tử di chuyển sang trái và phải.	Distance (px): khoảng cách phần tử di chuyển về mỗi phía.
Wiggle	Phần tử nghiêng sang trái và phải.	Angle (°): góc nghiêng của phần tử về mỗi phía.
Bounce	Phần tử nảy lên rồi rơi xuống.	Height (px): độ cao phần tử nảy lên.
Breathe	Phần tử mờ dần rồi hiện lại.	Fade amount (%): mức độ phần tử mờ đi khi mờ nhất.
Color shift	Màu nền của phần tử chuyển sang màu khác rồi quay lại.	Shift color.
Border flash	Viền sáng lên ở cạnh phần tử rồi mờ dần. Trong khi hiệu ứng chạy, nó thay thế viền hiện có của phần tử.	Flash width (px): độ rộng của viền khi sáng nhất. Viền phát triển vào trong từ cạnh ngoài. Flash color.
Shimmer	Một dải sáng quét qua phần nền của phần tử.	Shimmer width (%): độ rộng của dải sáng, tính theo tỷ lệ so với phần tử. Shimmer angle (°): hướng quét, đọc như góc của gradient. 90° đi từ trái sang phải. Shimmer color.

Một số kiểu phụ thuộc vào bố cục hoặc màu nền của phần tử. Builder sẽ hiển thị thông báo trong cài đặt Animation khi phần tử không đáp ứng các điều kiện này, và flow sẽ được xuất bản mà không có hiệu ứng:

• Radial fill waves và Radial outline waves: Phần tử cần có chiều rộng và chiều cao cố định và không có margin.
• Color shift: Phần tử cần có màu nền đơn sắc hoặc không có màu nền.
• Shimmer: Phần tử cần có màu nền đơn sắc.

Cài đặt thời gian

Thông số	Mô tả
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
Show after delay (ms)	Khoảng dừng trước chu kỳ đầu tiên
Easing	Cách animation tăng tốc và giảm tốc: Linear, Ease In, Ease Out, Ease In Out, Elastic (vượt qua rồi dừng lại), hoặc Bounce (dừng với vài lần nảy). Một Pulse mới sử dụng đường cong preset, hiển thị là Custom.

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

Giới hạn số dòng và tự động thu nhỏ

Để tránh văn bản làm vỡ bố cục, hãy bật Limit lines và đặt Max Lines. Văn bản vượt quá số dòng đó sẽ bị cắt bớt với dấu chấm lửng (…).

Để vừa khít văn bản dài thay vì cắt bớt, hãy bật Auto shrink. Văn bản sẽ tự thu nhỏ cho đến khi vừa với giới hạn dòng hoặc chiều cao cố định, ở mọi ngôn ngữ. Dùng tính năng này khi bản dịch dài hơn bản gốc, chẳng hạn như tiêu đề thẻ sản phẩm hoặc nhãn nút.

• Auto shrink khả dụng khi Limit lines được bật, hoặc khi văn bản có chiều cao Fixed và bố cục Fixed size.
• Văn bản có thể thu nhỏ xuống tối thiểu 10% cỡ chữ gốc. Văn bản vẫn không vừa sẽ bị cắt bớt.
• Cỡ chữ bạn đặt không thay đổi. Phần xem trước hiển thị cỡ chữ thực tế trên thiết bị.

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.