MỤC LỤC

Personalization Settings - Các cài đặt cá nhân hoá cho text
Tính năng Paragraph

Thêm Text vào artwork

Để thêm text vào artwork, hãy bấm vào nút "Text".



Hoặc tải lên file PSD. Nếu bạn chọn nhập layer text từ file PSD, hãy nhớ ấn "Convert" layer đó từ file PSD thành layer text của Teeinblue. Sau khi covert, bạn nên kiểm tra lại font family và chỉnh sửa lại nếu cần

Các cài đặt chung

Default text

Viết 1 đoạn text mặc định để hiển thị trên thiết kế. (Ví dụ: "Lily", "17/09/2020" etc.)

Nếu bạn muốn thay đổi tên của layer được hiển thị trên personalization form, hãy nháy đúp vào tên của layer đó ở bảng bên trái.

Text color

Thay đổi màu mặc định của đoạn text.

Fonts

Tìm hiểu thêm ở bài viết: Về Fonts.

Auto scale when text is too long

Chọn 1 giới hạn cho độ dài của khung text. Sau khi bật tính năng này, khi text quá dài (hoặc quá nhiều kí tự), app sẽ tự động giảm kích thước của text xuống để text không bị trượt khỏi vị trí ban đầu trong artwork.
Với các text ngắn như tên, gợi ý cài max width = 500 - 600px.

Text Background

Bạn có thể add thêm hiệu ứng Background cho field Custom Text

Và đây là kết quả khi bạn publish Campaign

Personalization Settings - Các cài đặt cá nhân hoá cho text

Add toggle to show/hide

Tương tự như tùy chỉnh cho phần ảnh Layer. (Tham khảo thêm tại đây)

No Personalization

Bạn hãy bật tính năng này nếu bạn không muốn khách hàng cá nhân hoá layer text hiện tại

Bật tính năng cá nhân hóa cho Text: "Enable Personalization"

Sử dụng tính năng "Enable Personalization" sẽ cho phép khách hàng được phép tự thay đổi đoạn text.
Sau khi bạn bật lên, sẽ có một trường hiển thị trên storefront cho phép khách hàng điền đoạn text mà họ muốn thêm vào.

Option Title

Tên hiển thị của layer text trong personalization form trên storefront.
Ví dụ: Woman's name, Dog's name...

Placeholder Text

Một đoạn text tạm thời xuất hiện trong form điền text.
Ví dụ: Type your name here

Input type

Chọn cách hiển thị mặc định của text:
Hiển thị cả chữ và số - All characters (Aa Bb 123 @#$)
Chỉ hiển thị số - Only numbers (123)
Hiển thị ngày tháng năm - Date picker

Input text case

Chọn cách hiển thị của các kí tự text mà khách hàng điền:
Hiển thị đúng như khách hàng tự viết - Normal
Chữ thường - lowercase
Chữ in hoa - UPPERCASE
Chỉ in hoa chữ cái đầu - Capitalize Each Word

Text character limit

Giới hạn số kí tự khách hàng có thể điền.

Sử dụng tính năng này để tránh trường hợp đoạn text quá dài đè lên các phần khác trong design.

Enable prefix/suffix

Cho phép viết sẵn phần chữ không cá nhân hoá vào trước hoặc sau layer chữ hiện tại. Phần chữ này sẽ không bị thay đổi khi khách hàng điền thêm phần text cá nhân hoá
Eg. "Mr". Leroy -> Chữ Mr. là prefix

Cho phép khách hàng đổi màu chữ - Allow customers to change Text Color

Mọi người có thể chọn hiển thị dưới dạng
Color Picker
chỉ giới hạn một số màu cố định với Color Category (trong trang Assets). Đọc thêm về Color Category tại đây

Cho phép khách hàng đổi font chữ - Allow customers to change Font

Khách hàng sẽ có thể đổi font chữ dựa trên những lựa chọn bạn đã cài đặt. Tính năng này sẽ chỉ hoạt động nếu layer text gốc sử dụng Custom Font
Bước 1: Cài đặt Font Category trong trang Assets > Font Categories. Đọc thêm về cách cài đặt Font Categories tại đây
Step 2: Quay trở lại chỉnh sửa Artwork > chọn Font Category mà bạn vừa mới tạo



Và đây là kết quả trên storefront

Điền giá trị từ các tùy chọn khác - Populate values from other options

Ở ví dụ này, nếu vị trí bản đồ Map Location được đặt là Berlin, Germany, cả ô text và live preview sẽ tự động hiển thị là Berlin, Germany

Để làm được như vậy, hãy làm các bước sau:

Tạo một layer text
Bật setting Populate values from other options



Tiếp tục chọn layer mà bọn muốn lấy giá trị. Trong trường hợp này, nó là layer Street Map



Chọn kiểu giá trị mà bạn muốn lấy. Bạn có thể chọn nút Lookup values để xem thêm chi tiết. Hiện tại Teeinblue chỉ hỗ trợ các giá trị như dưới đây, chúng mình sẽ tiếp tục update nhiều giá trị hơn trong thời gian sắp tới.



Vì bạn muốn lấy giá trị tên địa điểm, bạn có thể copy và paste gái trị {{place_name}}.
| Tips: Bạn có thể điền một tùy chọn với giá trị tùy chọn


Xem kết quả trên Store của bạn:


Bạn có thể kết hợp nhiều giá trị nếu bạn muốn

CHÚ Ý:
Khách hàng có thể sửa text bất cứ khi nào họ muốn, kể cả sau khi text đã được tự động điền.
Nếu khách hàng thay đổi vị trí bản đồ, text sẽ được update với giá trị mới thay thế giá trị cũ đã điền trước đó.

Mark as required

Sử dụng tính năng này sẽ khiến khách hàng buộc phải điền vào trường text trống trước khi tạo order.

Align text

Sử dụng tình năng này để chọn căn chính trái, phải, giữa cho text khi text được nhập trên trang sản phẩm.

Stroke Text

Bạn có thể add thêm hiệu ứng stroke cho field Custom Text.

Và đây là kết quả khi bạn publish Campaign:


Bạn có thể kết hợp đồng thời 2 tính năng Text Background và Stroke Text cùng lúc

Letter Spacing

Bạn có thể thay đổi letter spacing cho layer text như dưới đây:

Tính năng Paragraph

Tạo Paragraph

Trong Artwork Editor, bấm vào icon hình dấu +, rồi chọn Paragraph

Paragraph container

Các lưu ý chính:

Kích thước của container sẽ cố định. Chữ trong paragraph sẽ không tràn ra khỏi vùng này.
Nếu đoạn text dài hơn chiều ngang của container → text sẽ được tự động xuống dòng tiếp theo



Nếu đoạn text dài hơn chiều cao của container → size chữ sẽ được tự động nhỏ lại để fit với container
Nếu đoạn text ngắn hơn chiều cao của container → đoạn chữ sẽ được giữ nguyên, không có thay đổi gì.

Căn chỉnh Paragraph

Căn theo chiều ngang



Căn theo chiều dọc

Auto scale (chiều trục dọc)

Đoạn Paragraph sẽ được tự động scale font size theo chiều dọc. Bạn không thể tắt tính năng này.

Các lưu ý chính:
Trên trang Product Page, nếu đoạn text dài hơn chiều dọc của container, font size sẽ được tự động giảm xuống để fit vào trong container.
Tính năng auto scale hiện chỉ hoạt động ở Campaign Editor và trang Product Page. Bạn chưa view được nó trong Artwork Editor

Paragraph letter spacing

Bạn có thể điều chỉnh khoảng cách giữa các kí tự cho đoạn Paragraph của bạn với setting

Các tùy chỉnh về Font

Bạn có thể dùng các tùy chỉnh sau:
Font Size
Font Family
Font Color

Nếu Paragraph đã dài/rộng đến sát container, font size sẽ không thể tăng thêm được nữa.

Text Background

Background sẽ được áp dụng lên cho đoạn Paragraph, chứ không phải vùng hiển thị của container.

Text character limit

Tính năng này sẽ được áp dụng cho toàn bộ đoạn paragraph, chứ không phải cho mỗi dòng. Lưu ý nếu bạn sẽ dụng kí tự [Enter] hay [Spacebar] thì cũng sẽ được tính là 01 kí tự.

Vertical offset

Bạn có thể tìm thấy tính năng này trong mục Extra. Tính năng này được dùng để update vị trí hiển thị của đoạn Paragraph trong file render.

Tùy vào custom font bạn dùng, đôi khi trong file render, đoạn paragraph có thể sẽ bị render lệch vài pixels.
Lý do là bởi chúng tôi không thể tính toán chính xác được vị trí của vài font chữ viết tay. Do vậy mà có sự chênh lệch nhỏ này giữa Artwork Editor, trang Product Page, và file render.

Nếu đoạn Paragraph được top-aligned, chúng có thể sẽ lệch vài pixel xuống phía dưới trong order design.
Nếu đoạn Paragraph được bottom-aligned, chúng có thể sẽ lệch vài pixel lên trên trong file order design.
Nếu đoạn Paragraph được middle-aligned, sẽ không có độ lệch trong file order design, bạn sẽ không cần dùng tính năng này.

Nếu bạn gặp phải trường hợp này, hãy làm theo các bước sau để fix file order design:

Bước 1. Mở Artwork. Và chỉnh sửa lại setting vertical offset.



- 1 để đi lên 1px và + 1 để đi xuống 1px)

Bước 2. Save Artwork sau khi bạn chỉnh sửa xong

Bước 3. Regenerate lại file order design.



Bạn có thể lặp lại Bước 1 để được kết quả như mong muốn.

Bước 4. Update lại Campaign sau khi có được kết quả hài lòng.

Các tính năng về text không dùng được với Paragraph

Curve Text
Skew Text
Input Type

Tùy chỉnh thêm

Add Condition

Đọc thêm về tính năng này ở đây: Thêm Điều kiện cho Layer

Custom class

Dùng để thêm style cho đoạn text. Bạn sẽ cần kiến thức code CSS khi sử dụng.

Cập nhật vào: 21/11/2024