Thêm và tạo kiểu văn bản và danh sách trong Flow & Paywall Builder
Thêm tiêu đề, đoạn văn hoặc danh sách chỉ với một cú nhấp, tạo kiểu phù hợp với 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.
Hãy yêu cầu AI Editor viết lại nội dung, đề cập đến dùng thử miễn phí, hoặc rút gọn mọi đoạn văn bản trên màn hình chỉ trong một lần.
Thiết lập kiểu chữ
Bảng Styles bao gồm các kiểu chữ được cấu hình sẵn cho các tiêu đề và chức năng thông dụng. Mỗi kiểu chữ có các cài đặt sau:
- Font family
- Weight
- Size
- Line height
- Letter spacing
Để chỉnh sửa một kiểu, nhấp vào mục đó, thay đổi cài đặt, rồi nhấp Save.
Khi bạn thêm phần tử văn bản, bạn có thể chọn một trong các kiểu đã thiết lập ở đây.
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 nó, trên tất cả các màn hình.
Để tạo một kiểu mới:
- Mở bảng Styles .
- Trong tiêu đề bảng, nhấp Create style.
-
Đặt Type thành Text, nhập tên và cấu hình các cài đặt typography.
-
Nhấp Create.
Thêm văn bản
Để thêm một phần tử văn bản:
- Nhấn + ở 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.
- Nhấn vào phần tử mới và chỉnh sửa nội dung trong mục Content ở panel Design bên phải.
- Nếu cần, điều chỉnh các thuộc tính typography trong panel Design. Hoặc, chọn văn bản trong phần xem trước để mở tooltip chỉnh sửa style nhanh.
- Tùy chọn, trong panel Design và Interaction, bạn cũng có thể áp dụng các cấu hình khác có sẵn cho các component trong flow. Xem thêm tại Styles and appearance.
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 dáng cho một phần văn bản
Bold và Italic không có tác dụng với phông chữ tùy chỉnh trừ khi bộ phông chữ đó có mặt in đậm hoặc in nghiêng. Hãy tự tải mặt phông chữ phù hợp lên.
Để chỉ thay đổi kiểu dáng cho một số phần trong một phần tử văn bản:
- Chọn một phần của phần tử văn bản trong mục Content.
- 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.
Thêm giá cũ
Phần tử Old Price hiển thị mức giá “trước đây” cao hơn bên cạnh giá thực của sản phẩm, giúp người dùng thấy ngay mức giảm giá. Nó hiển thị giá sản phẩm nhân với một hệ số bạn chọn và tự động gạch ngang qua.
Bạn không cần chỉnh sửa nội dung của phần tử này. Giá trị được tính từ giá cửa hàng của sản phẩm tại thời điểm chạy, nên đơn vị tiền tệ luôn khớp với giá thực.
Để thêm giá cũ:
-
Nhấn + ở góc trên bên trái. Chọn Text, rồi chọn Old Price.
-
Trong bảng Layers, kéo phần tử vào bên trong một thẻ sản phẩm. Phần tử này cũng hoạt động bên trong các thẻ sản phẩm đã được lưu dưới dạng component tái sử dụng.
ImportantPhần tử Old Price phải nằm bên trong một thẻ sản phẩm — giá sẽ được lấy từ sản phẩm của thẻ đó. Nếu đặt bên ngoài thẻ sản phẩm, builder sẽ hiển thị placeholder “Old price” thay vì giá thực.
-
Trong bảng Design, ở mục Price, hãy đặt Multiplier. Adapty sẽ nhân giá sản phẩm với giá trị này. Ví dụ: với hệ số nhân mặc định là 2, sản phẩm có giá $12.99 sẽ hiển thị mức giá gạch ngang là $25.98.
-
Nếu cần, hãy điều chỉnh thuộc tính kiểu chữ. Phần tử này hỗ trợ các tùy chọn định dạng giống như văn bản thông thường.
Để gạch ngang giá thực của một sản phẩm khác — ví dụ: giá gói tháng hiển thị trên thẻ gói năm — hãy xây dựng hàng giá từ các thành phần văn bản và biến thay thế. Xem Hiển thị giá gạch ngang kèm huy hiệu giảm giá.
Thuộc tính typography
Các thành phần văn bản có các tùy chỉnh typography sau:
-
Font family: Chọn kiểu chữ — font tích hợp sẵn hoặc font tùy chỉnh.
WarningCác thiết bị khác nhau có thể 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ả các thiết bị, hãy tải lên font tùy chỉnh.
-
Weight: Đặt độ đậm của phông chữ.
-
Size: Đặt cỡ chữ tính bằng pixel.
-
Color: Đặt màu chữ.
-
Line height: Đặt khoảng cách giữa các dòng, hoặc để ở chế độ 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.
Các cài đặt sau không thể lưu vào text style có thể tái sử dụng:
- Color
- Alignment
- Decoration
- Truncate
Đặt chúng cho từng phần tử văn bản riêng lẻ.
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. Hãy chọn dựa trên vai trò của văn bản:
- Liên kết inline — dành cho URL nằm trong đoạn văn bả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, chẳng hạn 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 tuyến
Để biến một phần văn bản thành liên kết:
- Chọn văn bản trong phần Content.
- Trong thanh công cụ định dạng, nhấp vào biểu tượng liên kết.
- Dán URL đích vào cửa sổ bật lên.
Hành động mở URL
Bài viết chính: Hành động
Để biến toàn bộ một nút thành một liên kết:
-
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.
-
Chọn nút đó trong panel Layers và mở tab Interactions ở panel bên phải.
-
Đặt đích đến cho hành động Open URL.
ImportantMột hành động Open URL trống sẽ chặn 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 giống như độ hiển thị có điều kiện, nhưng thay vì ẩn/hiện phần tử, nó thay thế nội dung bên trong.
Để thiết lập văn bản có điều kiện:
- Chọn một phần tử văn bản trên canvas.
- Trong bảng Design, ở mục Content, chọn Conditional.
- 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.
- 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 tương tự như văn bản thông thường. Để chèn một biến hoặc thẻ tùy chỉnh, nhấp vào Add variable.
- 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.
- (Tùy chọn) Nhấp + Add else/if để thêm nhiều điều kiện hơn, mỗi điều kiện có văn bản riêng.
Để dịch văn bản có điều kiện, hãy mở bảng Localizations, trong đó mỗi nhánh có một hàng riêng.
Thêm danh sách
Các phần tử danh sách là vùng chứa được tạo thành từ các thành phần mục riêng lẻ. Đối 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 sử dụng phần tử văn bản và áp dụng định dạng mong muốn qua bảng Design.
-
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.
-
Vào bảng Design ở bên phải để chỉnh sửa các mục trong danh sách hoặc tải lên hình ảnh để làm biểu tượng đánh dấu mục.