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 để cá nhân hóa nội dung cho từng người dùng.

Cài đặt kiểu văn bản

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, bạn có thể chọn một trong các kiểu đã cài đặt ở đây.

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

1. Nhấp vào để 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.

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

Để 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 đã đượ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 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ử.

Thay đổi kiểu chữ cho một phần văn bản

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

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.

  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.

• Weight: Đặt độ đậm của 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

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

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

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

1. Thêm một Button — 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.

   Một hành động Open URL để trống sẽ chặn việc xem trước và xuất bản.

   

Thêm văn bản có điều kiện

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, 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.
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. Để chèn một biến, 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.

Thêm danh sách

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.