Cài đặt Trình chỉnh sửa email kéo và thả Stripo

Published: 22 tháng 10, 2024 · Last updated: 21 tháng 7, 2026 · By Marcus Biel

Ở phía bên phải của trình chỉnh sửa email Maildroppa, bạn sẽ thấy Cột Cài đặt email, cung cấp các công cụ giúp bạn sắp xếp và tùy chỉnh nội dung cũng như giao diện email. Cột này được chia thành hai tab: Nội dung và Giao diện.

Tab Nội dung

Tab Nội dung là nơi bạn thiết kế và sắp xếp nội dung email. Tab này gồm hai phần chính: Cấu trúc và Khối.

1. Cấu trúc

Cấu trúc xác định bố cục email bằng cách sắp xếp nội dung thành các hàng và cột. Bạn có thể chọn từ nhiều bố cục được thiết kế sẵn, chẳng hạn như:

• Một cột
• Hai cột
• Nhiều cột

Bạn không bị giới hạn ở các tùy chọn này — có thể kết hợp nhiều khối để tạo bất kỳ bố cục tùy chỉnh nào, mang lại sự linh hoạt hoàn toàn phù hợp với nhu cầu thiết kế của bạn.

• Kéo và thả: Chỉ cần kéo một cấu trúc từ phần này và thả vào khu vực thiết kế email để bắt đầu thêm nội dung.
• Tùy chỉnh: Sau khi thêm cấu trúc, bạn có thể thêm các khối nội dung khác nhau như hình ảnh, văn bản hoặc nút.

2. Khối

Khối là các phần tử nội dung được đặt bên trong cấu trúc để xây dựng email.

Các loại khối hiện có:

• Hình ảnh: Tải lên hình ảnh (PNG, JPG, GIF) và tùy chỉnh giao diện.
• Văn bản: Thêm và định dạng văn bản để truyền tải thông điệp.
• Nút: Thêm các nút có thể nhấp với văn bản, liên kết và kiểu dáng tùy chỉnh.
• Khoảng cách: Chèn khoảng trống để điều chỉnh bố cục giữa các khối khác.
• Video: Nhúng nội dung video từ các nền tảng như YouTube, Vimeo và nhiều nền tảng khác.
• HTML: Thêm mã HTML và CSS tùy chỉnh để nâng cao khả năng tùy chỉnh nội dung email.

Mỗi khối được thiết kế linh hoạt và có thể tùy chỉnh, giúp bạn tạo email phù hợp với diện mạo và phong cách thương hiệu.

Giải thích chi tiết về các khối nội dung

Khối Hình ảnh

Khối Hình ảnh trong trình chỉnh sửa email kéo và thả của Stripo cho phép bạn thêm và tùy chỉnh hình ảnh trong chiến dịch email.

Thêm Khối Hình ảnh

Bạn có thể thêm Khối Hình ảnh vào email theo hai cách:

Tùy chọn 1

Di chuột lên khu vực "Thả nội dung vào đây" trong một cấu trúc, sau đó nhấp vào biểu tượng Hình ảnh. Cấu trúc đã chọn sẽ ngay lập tức chuyển thành khối hình ảnh.

Tùy chọn 2

Đi đến phần Khối trong Tab Nội dung. Kéo Khối Hình ảnh vào cấu trúc mong muốn trong bố cục email. Phương pháp này giúp bạn kiểm soát tốt hơn vị trí chính xác để đặt hình ảnh.

Tải hình ảnh lên

Sau khi thêm Khối Hình ảnh, bạn có hai cách để tải hình ảnh lên:

Kéo và thả

Bạn có thể trực tiếp kéo và thả tệp hình ảnh (PNG, JPG, GIF) từ máy tính vào hộp tải lên xuất hiện bên trong Khối Hình ảnh.

Tải lên từ máy tính

Ngoài ra, bạn có thể nhấp vào biểu tượng đám mây trong Khối Hình ảnh để mở trình duyệt tệp, cho phép bạn chọn hình ảnh từ máy tính (tối đa 2MB). Sau khi chọn, hình ảnh sẽ xuất hiện cả trong khối và trong tab nội dung ở bên phải.

Thay đổi hình ảnh

Để thay thế hình ảnh, hãy sử dụng tùy chọn Thay đổi hình ảnh trong tab nội dung. Nhấp vào biểu tượng hình tròn Thay đổi hình ảnh, sau đó bạn có thể tải lên hình ảnh mới hoặc liên kết đến hình ảnh từ một URL bên ngoài.

Chỉnh sửa hình ảnh

Sau khi tải hình ảnh lên, bạn có thể muốn chỉnh sửa thêm trực tiếp trong nền tảng. Trình chỉnh sửa hình ảnh tích hợp của Stripo cho phép bạn nâng cao và điều chỉnh hình ảnh mà không cần rời khỏi trình chỉnh sửa email.

Mở Trình chỉnh sửa hình ảnh

1. Sau khi tải hình ảnh lên, nhấp vào nút Chỉnh sửa hình ảnh. Thao tác này sẽ mở giao diện Trình chỉnh sửa hình ảnh.
2. Trình chỉnh sửa cung cấp nhiều công cụ, được hiển thị trong thanh menu phía trên.

Các công cụ chỉnh sửa hình ảnh hiện có

• Bộ lọc Áp dụng nhiều bộ lọc chỉ với một cú nhấp chuột, chẳng hạn như:

  • Thang độ xám
  • Đen trắng
  • Làm sắc nét
  • Đảo màu
  • Nâu đỏ
  • Độ sáng
  • Màu sắc

• Thay đổi kích thước Điều chỉnh kích thước hình ảnh. Bạn có thể:

  • Xác định chiều rộng và chiều cao cụ thể.
  • Giữ nguyên tỷ lệ khung hình.

• Cắt Chọn phần hình ảnh muốn giữ lại và xóa các phần không mong muốn.

• Biến đổi Xoay hoặc lật hình ảnh:

  • Theo chiều ngang
  • Theo chiều dọc

• Vẽ Sử dụng công cụ vẽ để thêm các thành phần vẽ tay, chẳng hạn như đường thẳng hoặc hình dạng tùy chỉnh, lên hình ảnh.

• Văn bản Thêm văn bản trực tiếp vào hình ảnh. Tùy chỉnh:

  • Phông chữ
  • Kích thước
  • Màu sắc
  • Căn chỉnh

• Hình dạng và Nhãn dán Tăng tính hấp dẫn cho hình ảnh bằng cách phủ lên:

  • Các hình dạng tạo sẵn
  • Nhãn dán vui nhộn

• Khung Chọn một trong nhiều khung để tạo đường viền phong cách cho hình ảnh.

• Góc Điều chỉnh kiểu góc để có diện mạo hoàn thiện hơn.

• Nền Xóa hoặc thay thế nền hình ảnh để có diện mạo gọn gàng hơn.

Lưu các chỉnh sửa

Sau khi thực hiện các thay đổi mong muốn, hãy nhấp vào nút Lưu ở phía trên bên trái của trình chỉnh sửa. Hình ảnh đã chỉnh sửa sẽ tự động thay thế hình ảnh ban đầu trong bố cục email.

Cài đặt hình ảnh

Sau khi tải hình ảnh lên, bạn có thể tùy chỉnh bằng các tùy chọn Cài đặt hình ảnh trong Tab Nội dung ở bên phải.

Liên kết

Thêm liên kết vào hình ảnh. Bạn có thể chọn nhiều loại liên kết, chẳng hạn như:

• Trang web (HTTP, HTTPS)
• Thư (mailto:)
• Tệp (ftp)
• Chia sẻ trên mạng xã hội (Facebook, X (trước đây là Twitter), LinkedIn, Pinterest)

Bạn có thể tìm thấy các tùy chọn này trong menu thả xuống cài đặt liên kết.

Văn bản thay thế

Thêm văn bản thay thế sẽ được hiển thị nếu hình ảnh không tải. Văn bản này cũng hữu ích cho khả năng tiếp cận, cho phép trình đọc màn hình mô tả hình ảnh cho người nhận khiếm thị.

Căn chỉnh

Chọn cách căn chỉnh hình ảnh trong vùng chứa. Bạn có thể căn Trái, Giữa hoặc Phải.

Kích thước

Điều chỉnh chiều rộng và chiều cao hình ảnh theo cách thủ công bằng các nút cộng/trừ hoặc nhập kích thước mong muốn.

Bạn cũng có thể bật tùy chọn "Điều chỉnh theo chiều rộng" để hình ảnh tự động vừa với toàn bộ chiều rộng của vùng chứa.

Hình ảnh thích ứng

Bật tùy chọn "Hình ảnh thích ứng" để đảm bảo hình ảnh điều chỉnh theo các kích thước màn hình khác nhau, đặc biệt trên thiết bị di động.

Khoảng đệm

Tùy chỉnh khoảng đệm xung quanh hình ảnh để kiểm soát khoảng cách giữa hình ảnh và nội dung xung quanh. Bạn có thể áp dụng khoảng đệm đồng đều hoặc tùy chỉnh cho từng cạnh (Trên, Dưới, Trái, Phải).

Liên kết neo

Bạn có thể gán liên kết neo cho hình ảnh, cho phép người nhận chuyển đến một phần cụ thể trong cùng email khi nhấp vào hình ảnh. Tuy nhiên, hãy lưu ý rằng liên kết neo có thể không hoạt động trong một số ứng dụng email như Gmail và Apple Mail.

Khối Văn bản

Nâng cao các khối văn bản bằng cách tùy chỉnh giao diện và chức năng thông qua các cài đặt sau. Mỗi tùy chọn cho phép bạn tinh chỉnh cách hiển thị văn bản, đảm bảo phù hợp hoàn hảo với sở thích thiết kế.

Thanh công cụ văn bản

Khi nhấp vào một khối văn bản, Thanh công cụ văn bản sẽ xuất hiện phía trên vùng nội dung, cung cấp quyền truy cập nhanh vào nhiều tùy chọn định dạng văn bản phổ biến. Các tính năng có trong thanh công cụ:

1. Định dạng đoạn văn

Đặt kiểu đoạn văn bằng cách chọn các tùy chọn như Bình thường cho văn bản thông thường hoặc các cấp tiêu đề khác nhau (Tiêu đề 1 đến Tiêu đề 6) để tạo hệ thống phân cấp có cấu trúc trong email. Điều này giúp nội dung dễ đọc và có tổ chức hơn.

2. Họ phông chữ

Phông chữ mặc định là Arial, nhưng bạn có thể chọn từ nhiều phông chữ khác nhau, bao gồm các tùy chọn phổ biến như Georgia, Helvetica và Courier New. Ngoài ra còn có chức năng tìm kiếm để nhanh chóng tìm một phông chữ cụ thể.

3. Cỡ chữ

Điều chỉnh cỡ chữ từ 8pt đến 72pt. Mặc định là 14pt, phù hợp với hầu hết văn bản nội dung email. Sử dụng menu thả xuống để nhanh chóng đặt cỡ chữ mong muốn.

4. Kiểu chữ

Tạo kiểu cho văn bản bằng các tùy chọn sau:

• Đậm (B): Nhấn mạnh văn bản bằng cách chuyển thành chữ đậm.
• Nghiêng (I): Chuyển văn bản thành chữ nghiêng để có diện mạo cách điệu hơn.
• Gạch chân (U): Gạch chân văn bản, thường được dùng cho siêu liên kết.
• Gạch ngang (S): Kẻ một đường qua văn bản, hữu ích khi chỉnh sửa hoặc xóa nội dung.

5. Kiểu chữ nâng cao (Menu ba chấm)

Nhấp vào ba chấm trong thanh công cụ để mở rộng các tùy chọn bổ sung:

• Chỉ số dưới: Hạ văn bản xuống dưới đường cơ sở (hữu ích cho chú thích hoặc công thức hóa học).
• Chỉ số trên: Nâng văn bản lên trên đường cơ sở (thường dùng cho số mũ hoặc số thứ tự).
• Xóa định dạng: Xóa mọi định dạng đã áp dụng, đưa văn bản về kiểu mặc định.

6. Màu văn bản và màu nền

• Màu văn bản: Nhấp vào nút Màu văn bản để chọn từ bảng màu hoặc nhập mã hex nhằm kiểm soát chính xác màu văn bản.
• Màu nền: Chọn màu nền (tô sáng) cho văn bản.

7. Căn chỉnh văn bản

Căn chỉnh văn bản trong khối:

• Căn trái: Căn văn bản sang trái.
• Căn giữa: Căn giữa văn bản.
• Căn phải: Căn văn bản sang phải.
• Căn đều: Phân bổ văn bản đồng đều theo chiều rộng của khối.

8. Danh sách

Tạo danh sách có thứ tự (đánh số) và không có thứ tự (gạch đầu dòng):

• Chèn/Xóa danh sách có dấu đầu dòng: Thêm hoặc xóa dấu đầu dòng.
• Chèn/Xóa danh sách đánh số: Thêm hoặc xóa danh sách đánh số.

9. Tự động xuống dòng

Bật hoặc tắt tính năng tự động xuống dòng trong khối văn bản. Khi bật, các dòng văn bản dài sẽ tự động chuyển sang dòng tiếp theo.

10. Thụt lề

Điều chỉnh thụt lề của văn bản:
- **Tăng thụt lề**: Đưa văn bản ra xa lề hơn, hữu ích cho các mục con hoặc trích dẫn.
- **Giảm thụt lề**: Giảm độ thụt lề, đưa văn bản gần lề trái hơn.
![Thụt lề văn bản](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Chèn siêu liên kết

Tìm hiểu cách thêm, chỉnh sửa và quản lý siêu liên kết trong nội dung email.

Các bước thêm hoặc chỉnh sửa liên kết

a) Bôi đậm văn bản

Chọn văn bản bạn muốn chuyển thành siêu liên kết.

b) Nhấp vào biểu tượng Liên kết

Trong Thanh công cụ văn bản, nhấp vào Biểu tượng Liên kết.

c) Chỉnh sửa liên kết trong Bảng cài đặt

Bảng cài đặt bên phải sẽ xuất hiện với các tùy chọn liên kết:

• Trường liên kết: Nhập URL hoặc chọn từ các tùy chọn được xác định trước.
• Thẻ: Thêm thẻ để gắn nhãn người đăng ký hoặc kích hoạt tự động hóa.

Sửa liên kết sau khi gửi

Không gì tệ hơn việc gửi một chiến dịch mới đến 2,365 người đăng ký, rồi phát hiện một trong các liên kết bị hỏng chỉ vì một lỗi chính tả đơn giản. Tạm biệt doanh số Black Friday!

May mắn thay, chúng tôi đã giúp bạn có thể sửa các liên kết bị hỏng — ngay cả sau khi email đã được gửi đến người đăng ký.

a) Xem chiến dịch

Tìm chiến dịch đã gửi trong phần tổng quan, nhấp vào ba chấm và chọn Xem chiến dịch.

b) Sửa đổi liên kết hoặc thẻ

Cuộn đến danh sách liên kết trong chi tiết chiến dịch để:

• Cập nhật đích liên kết: Sửa các URL không chính xác.
• Quản lý thẻ: Thêm hoặc xóa thẻ cho hoạt động tự động hóa.

Lưu ý: Đảm bảo Theo dõi lượt nhấp được bật trong cài đặt chiến dịch để sử dụng tính năng định tuyến lại liên kết.

Tùy chỉnh giao diện liên kết

Trong Bảng cài đặt bên phải, bạn có thể điều chỉnh giao diện của liên kết:

• Màu liên kết: Chọn một màu hoặc nhập mã hex.

• Gạch chân liên kết: Bật hoặc tắt gạch chân để có giao diện gọn gàng hơn.

12. Thẻ cá nhân hóa

Sử dụng Thẻ cá nhân hóa để thêm nội dung động, chẳng hạn như tên của người nhận hoặc các trường tùy chỉnh khác.

• Truy cập menu thả xuống Thẻ cá nhân hóa trong thanh công cụ để chọn các trường phổ biến như Tên, Email hoặc Quốc gia, hoặc xác định các trường tùy chỉnh để cá nhân hóa email cho từng người nhận.

13. Biểu tượng cảm xúc

Tăng tính trực quan cho văn bản bằng cách thêm biểu tượng cảm xúc.

• Nhấp vào Biểu tượng cảm xúc trong thanh công cụ để mở danh sách biểu tượng cảm xúc được phân loại, giúp dễ dàng duyệt tìm.
• Lưu ý về khả năng tương thích: Hãy kiểm tra email trong một số ứng dụng như Outlook, vì một số ứng dụng có thể không hiển thị biểu tượng cảm xúc chính xác.

14. Bảng và ký tự đặc biệt

Ở cuối thanh công cụ, nhấp vào ba chấm để hiển thị thêm các tùy chọn nâng cao.

Chèn bảng

Tạo và tùy chỉnh bảng để cải thiện bố cục email.

• Xác định số hàng, số cột, khoảng cách ô, khoảng đệm và kích thước đường viền theo nhu cầu.

Chèn ký tự đặc biệt

Làm phong phú văn bản bằng các ký hiệu, ký tự có dấu và các ký tự không chuẩn khác.

• Truy cập tùy chọn Ký tự đặc biệt để duyệt nhiều loại ký tự.

Cài đặt bổ sung của Khối Văn bản (Bảng bên phải)

Bảng bên phải cung cấp quyền kiểm soát toàn diện đối với giao diện và chức năng của các khối văn bản. Các cài đặt hiện có:

1. Màu văn bản

Xác định màu văn bản bằng công cụ chọn màu hoặc nhập mã hex.

2. Màu nền

Đặt màu nền tùy chỉnh cho khối văn bản. Theo mặc định, nền trong suốt.

3. Cài đặt riêng cho liên kết

Khi khối văn bản chứa liên kết, các tùy chọn bổ sung sẽ xuất hiện trong cài đặt:

• Màu liên kết: Điều chỉnh màu liên kết bằng công cụ chọn màu hoặc mã hex.

• Gạch chân liên kết: Bật hoặc tắt tùy chọn gạch chân cho các liên kết trong khối văn bản.

• Chỉnh sửa liên kết: Chọn một liên kết trong vùng nội dung để chỉnh sửa URL trong bảng cài đặt. Bạn cũng có thể gán hoặc cập nhật thẻ cho liên kết bằng menu thả xuống có nhãn "Thẻ."

4. Căn chỉnh

Căn chỉnh khối văn bản trong vùng chứa: Trái, Giữa hoặc Phải.

5. Chiều cao cố định

Đặt chiều cao cố định cho khối văn bản bằng cách bật tùy chọn này. Bạn cũng có thể kiểm soát căn chỉnh văn bản theo chiều dọc: Trên, Giữa hoặc Dưới.

6. Giãn dòng

Kiểm soát khoảng cách giữa các dòng văn bản. Chọn Hẹp, Bình thường hoặc Rộng.

7. Khoảng đệm

Điều chỉnh khoảng cách xung quanh khối văn bản. Áp dụng khoảng đệm đồng đều hoặc tùy chỉnh từng cạnh: Trên, Dưới, Trái và Phải.

8. Liên kết neo

Tạo liên kết neo để người đọc chuyển đến các phần cụ thể trong email. Lưu ý rằng một số ứng dụng email không hỗ trợ liên kết neo.

Khối Nút

Khối Nút cho phép bạn thêm nút có thể nhấp vào email với các cài đặt tùy chỉnh về chức năng và kiểu dáng.

Cài đặt liên kết

Tùy chọn Liên kết xác định hành động được kích hoạt khi người nhận nhấp vào nút.

Các loại liên kết hiện có

• Liên kết trang web thông thường (HTTP hoặc HTTPS): Đưa người dùng đến một trang web.
• Liên kết thư: Mở ứng dụng email của người dùng để soạn email mới.
• Liên kết tệp (FTP, FTPS): Liên kết đến một tệp trên máy chủ FTP.
• Skype: Bắt đầu cuộc gọi hoặc trò chuyện Skype.
• Điện thoại (tel): Bắt đầu cuộc gọi trên các thiết bị tương thích.
• SMS: Mở ứng dụng nhắn tin với số người nhận được điền sẵn.
• Viber: Mở ứng dụng Viber để nhắn tin hoặc gọi điện.
• Loại giao thức khác: Chỉ định giao thức tùy chỉnh không có trong danh sách trên.

Tùy chọn chia sẻ trên mạng xã hội

Bạn cũng có thể thiết lập nút để chia sẻ trên mạng xã hội hoặc qua email:

• Facebook
• X (trước đây là Twitter)
• LinkedIn
• Pinterest
• Chia sẻ qua email

Trường URL

Bên cạnh loại liên kết, Trường URL (thường bắt đầu bằng https://) cho phép bạn nhập địa chỉ cụ thể tương ứng với loại liên kết.

Nhãn nút

Tùy chỉnh nhãn của nút để thể hiện lời kêu gọi hành động. Nhãn mặc định là "Nút", nhưng bạn có thể đổi thành các tùy chọn như "Tìm hiểu thêm", "Đăng ký ngay" hoặc "Mua ngay".

Kiểu văn bản

Cài đặt Kiểu văn bản cho phép bạn điều chỉnh giao diện văn bản trên nút.

Chọn phông chữ

Chọn từ nhiều phông chữ tiêu chuẩn, bao gồm:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Đối với các phông chữ không tiêu chuẩn, có thêm các tùy chọn:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

Ở đầu danh sách phông chữ có ô tìm kiếm giúp bạn nhanh chóng tìm một phông chữ cụ thể.

Cỡ chữ và định dạng

• Cỡ chữ: Chọn từ 8 đến 72, tùy theo mức độ nổi bật mong muốn của văn bản trên nút.
• Định dạng văn bản: Áp dụng kiểu Đậm hoặc Nghiêng bằng biểu tượng "B" hoặc "I" để nhấn mạnh văn bản nút.

Cài đặt màu

Tùy chỉnh giao diện nút bằng cách điều chỉnh cài đặt màu.

1. Màu nút: Thay đổi màu nền của nút. Mặc định là màu xanh lá (#31cb4b). Sử dụng trường mã hex hoặc công cụ chọn màu để chọn màu mới.

2. Màu văn bản: Xác định màu văn bản của nút. Mặc định là màu trắng (#ffffff). Chọn màu tương phản tốt với nền nút để dễ đọc.

3. Màu nền: Điều chỉnh nền của vùng chứa nút. Theo mặc định, nền trong suốt, nhưng bạn có thể thay đổi để làm nổi bật nút trên nền email.

Bán kính đường viền

Kiểm soát độ bo tròn của các góc nút bằng cài đặt Bán kính đường viền.

• Giá trị mặc định: 30 (góc bo tròn vừa phải).
• Phạm vi: 0 (góc vuông) đến 100 (nút dạng viên thuốc).

Lưu ý: Để đảm bảo các góc bo tròn hiển thị chính xác trong Microsoft Outlook, hãy bật tùy chọn "Hỗ trợ Outlook" trong tab Giao diện.

Căn chỉnh

Định vị nút trong vùng nội dung bằng cài đặt Căn chỉnh.

• Các tùy chọn: Trái, Giữa, Phải.
• Cách sử dụng phổ biến: Căn giữa để tạo điểm nhấn, căn trái hoặc phải để đảm bảo tính nhất quán trong thiết kế.

Chiều cao cố định

Bật tùy chọn Chiều cao cố định để duy trì kích thước nút nhất quán.

1. Mặc định: Tắt.
2. Chiều cao tối thiểu: 44 pixel.
3. Căn chỉnh nội dung theo chiều dọc: Khi bật chiều cao cố định, căn nội dung nút về Trên, Giữa hoặc Dưới để định vị chính xác.

Nút có biểu tượng

Tùy chọn Nút có biểu tượng cho phép bạn thêm biểu tượng bên cạnh văn bản nút, tăng tính trực quan và củng cố lời kêu gọi hành động. Tính năng này mặc định bị tắt.

• Định dạng được hỗ trợ: Tải lên biểu tượng ở định dạng PNG, JPG hoặc GIF, với kích thước tệp tối đa 2 MB.
• Vị trí biểu tượng: Chọn hiển thị biểu tượng ở bên Trái hoặc Phải của văn bản nút.

Lưu ý: Biểu tượng không hiển thị trong một số phiên bản Microsoft Outlook trên Windows, bao gồm:

• Outlook 2002, 2007, 2010, 2013, 2016 và 2019. Hạn chế này là do cách các ứng dụng email này hiển thị email HTML. Hãy cân nhắc điều này nếu phần lớn đối tượng của bạn sử dụng các ứng dụng trên.

Cài đặt đường viền

Tùy chỉnh đường viền của nút để tăng tính thẩm mỹ và tạo điểm nhấn.

• Độ rộng đường viền: Đặt độ rộng riêng cho từng cạnh (trái, phải, trên và dưới), tối đa 40 pixel.
• Kiểu đường viền: Chọn kiểu Liền, Nét đứt hoặc Chấm.
• Màu đường viền: Sử dụng công cụ chọn màu hoặc nhập mã hex để màu đường viền phù hợp với thương hiệu hoặc bảng màu thiết kế.

Khoảng đệm bên trong

Điều chỉnh khoảng cách bên trong nút, giữa nội dung (văn bản và biểu tượng) với đường viền nút.

• Tùy chọn tùy chỉnh: Xác định giá trị khoảng đệm cho các cạnh Trái, Phải, Trên và Dưới, tối đa 99 pixel.
• Tác động: Khoảng đệm bên trong ảnh hưởng đến kích thước tổng thể của nút và vị trí nội dung bên trong nút.

Khoảng đệm bên ngoài

Kiểm soát khoảng cách bên ngoài nút để điều chỉnh vị trí của nút so với các phần tử khác trong bố cục email.

• Tùy chọn tùy chỉnh: Đặt giá trị khoảng đệm bên ngoài cho các cạnh Trái, Phải, Trên và Dưới, tối đa 40 pixel.
• Trường hợp sử dụng: Đảm bảo nút không nằm quá gần nội dung khác hoặc các cạnh của email.

Thêm liên kết neo

Sử dụng liên kết neo để đưa người đọc đến các phần cụ thể trong cùng email, giúp điều hướng nhanh trong các bản tin dài.

• Tên neo: Xác định một đích trong email và liên kết nút với neo này. Khi được nhấp, email sẽ cuộn đến phần được chỉ định, giúp người dùng điều hướng tốt hơn.

Quan trọng: Liên kết neo không được hỗ trợ trong một số ứng dụng email, bao gồm:

• Ứng dụng Gmail trên iOS
• Apple Mail trên iOS
• Ứng dụng Outlook cho Android
• Ứng dụng Outlook cho macOS
• Email AMP

Hãy kiểm tra email kỹ lưỡng để đảm bảo tính năng hoạt động trên các ứng dụng email khác nhau và xác định liệu tính năng này có phù hợp với đối tượng của bạn hay không.

Khối Khoảng cách

Khối Khoảng cách cho phép bạn thêm khoảng trống có thể điều chỉnh vào nội dung email, đồng thời kiểm soát kích thước, căn chỉnh, giao diện và khoảng cách bên trong. Dưới đây là thông tin chi tiết về hai loại khoảng cách: Khoảng cách thông thường và Khoảng cách động.

1. Khoảng cách thông thường

Khoảng cách thông thường là một phần tử đường kẻ dùng để phân tách trực quan các phần trong email.

Cài đặt chính

1. Độ dày và kiểu đường kẻ Tùy chỉnh độ dày, kiểu và màu của đường kẻ:

   • Độ dày: Điều chỉnh bằng các nút + và - (bắt đầu từ 1).
   • Kiểu: Chọn giữa liền, nét đứt hoặc chấm.
   • Màu: Đặt màu tùy chỉnh bằng mã hex hoặc công cụ chọn màu (mặc định: #cccccc).

2. Chiều rộng Xác định độ dài đường kẻ khoảng cách trải rộng trên nội dung. Điều chỉnh chiều rộng theo pixel bằng các nút + và -.

3. Căn chỉnh Căn đường kẻ sang trái, giữa hoặc phải để phù hợp với bố cục.

4. Khoảng đệm Kiểm soát khoảng cách bên trong xung quanh phần tử khoảng cách:

   • Mặc định: Khoảng đệm được đặt là 20 ở tất cả các cạnh.
   • Sử dụng nút chuyển Thêm để chỉ định khoảng đệm cho từng cạnh:
     • Trên
     • Phải
     • Dưới
     • Trái

Trường hợp sử dụng

Khoảng cách thông thường lý tưởng để tạo sự phân tách trực quan, gọn gàng giữa các phần trong email, đảm bảo bố cục có tổ chức và chuyên nghiệp.

2. Khoảng cách động

Khoảng cách động là một khối khoảng trống vô hình được thiết kế để tạo khoảng thở trong bố cục email.

Tính năng chính

1. Điều chỉnh chiều cao Điều chỉnh chiều cao trực tiếp trong vùng nội dung hoặc qua bảng điều khiển bằng các nút + và -. Chiều cao xác định khoảng không gian dọc được thêm vào giữa các phần.

2. Màu nền Theo mặc định, khoảng cách có nền trong suốt, nhưng bạn có thể áp dụng màu nền tùy chỉnh bằng mã hex hoặc công cụ chọn màu. Nhờ đó, khoảng cách có thể hoạt động như một khối hiển thị nếu cần.

3. Khả năng thích ứng Tùy chọn Khoảng cách thích ứng đảm bảo khoảng cách tự động điều chỉnh theo các kích thước màn hình khác nhau để có bố cục tối ưu trên nhiều thiết bị. Tính năng này được bật theo mặc định.

Sự khác biệt chính giữa Khoảng cách thông thường và Khoảng cách động

• Khoảng cách động: Thêm khoảng trống mà không có đường kẻ hiển thị.
• Khoảng cách thông thường: Bao gồm các cài đặt riêng cho đường kẻ như:
  • Chiều rộng đường kẻ
  • Căn chỉnh
  • Kiểu đường kẻ
  • Khoảng đệm

Khoảng cách động không hỗ trợ các tính năng này và chỉ được thiết kế để tạo sự phân tách mà không có yếu tố hiển thị.

3. Thêm liên kết neo

Có thể áp dụng liên kết neo cho cả hai loại khoảng cách, cho phép người dùng chuyển trực tiếp đến vị trí của khoảng cách từ một phần khác trong email. Tính năng này đặc biệt hữu ích để tạo điều hướng trong email cho các bản tin dài.

Lưu ý: Một số ứng dụng email không hỗ trợ liên kết neo, bao gồm:

• Microsoft Outlook
• Gmail (trên thiết bị di động)

Khối Video

Khối Video cho phép bạn nhúng video vào email và tùy chỉnh giao diện cũng như cách hoạt động. Khối này hỗ trợ liên kết video từ các nền tảng như YouTube và Vimeo, mang lại sự linh hoạt và quyền kiểm soát cách video được hiển thị.

1. Liên kết đến video

Thêm URL video vào trường Liên kết đến video. Các nền tảng được hỗ trợ gồm YouTube, Vimeo và các dịch vụ có thể nhúng khác.

• Hành vi tự động: Khi thêm URL hợp lệ:

  • Hình ảnh xem trước sẽ tự động được tạo bằng hình thu nhỏ video từ nền tảng.
  • Trường Văn bản thay thế sẽ tự động điền tiêu đề hoặc mô tả video (nếu có).

• Các trường có thể chỉnh sửa: Bạn có thể chỉnh sửa hoặc thay thế hình ảnh xem trước và văn bản được tạo tự động nếu cần.

2. Văn bản thay thế

Trường Văn bản thay thế đảm bảo khả năng tiếp cận bằng cách hiển thị mô tả video nếu video không tải được.

• Tự động điền khi thêm URL video được hỗ trợ.
• Có thể tùy chỉnh để phù hợp với nhu cầu nội dung.

3. Hình thu nhỏ tùy chỉnh

Tải lên hình ảnh tùy chỉnh để thay thế bản xem trước video mặc định.

• Cách bật: Bật tùy chọn Hình thu nhỏ tùy chỉnh.
• Định dạng được hỗ trợ: PNG, JPG hoặc GIF.
• Khi sử dụng: Thay thế hình thu nhỏ được tạo tự động khi hình thu nhỏ đó không phù hợp với thiết kế email.

4. Nút phát

Tùy chỉnh Nút phát phủ trên hình thu nhỏ video.

• Các tùy chọn hiện có:
  • Chọn kiểu nút phát của YouTube, Vimeo hoặc các kiểu khác.
  • Chọn “Không có” để ẩn hoàn toàn nút phát.

5. Kích thước

Điều chỉnh kích thước video để phù hợp với thiết kế email.

• Chiều rộng và chiều cao: Sử dụng các nút + và - hoặc nhập giá trị thủ công để kiểm soát kích thước.
• Thiết kế thích ứng: Đảm bảo video hiển thị liền mạch trên nhiều thiết bị.

6. Điều chỉnh theo chiều rộng

Bật nút chuyển Điều chỉnh theo chiều rộng để video tự động vừa với chiều rộng của vùng chứa. Điều này đảm bảo video duy trì thiết kế thích ứng trên nhiều thiết bị.

7. Hình ảnh thích ứng

Nút chuyển Hình ảnh thích ứng đảm bảo hình thu nhỏ video điều chỉnh để vừa với chiều rộng màn hình trên thiết bị di động.

• Lưu ý: Khả năng thích ứng phụ thuộc vào hỗ trợ của thiết bị và ứng dụng email.

8. Căn chỉnh

Sử dụng cài đặt Căn chỉnh để kiểm soát vị trí ngang của video trong khối:

• Trái: Căn video sang trái.
• Giữa: Căn giữa video.
• Phải: Căn video sang phải.

9. Tùy chọn riêng cho thiết bị di động

Tùy chỉnh cách hoạt động và giao diện của video trên thiết bị di động:

1. Ẩn phần tử trên thiết bị di động Ẩn khối video trên thiết bị di động nếu cần.

   • Lưu ý: Tính năng này phụ thuộc vào hỗ trợ truy vấn phương tiện và có thể không hoạt động trong mọi ứng dụng email.

2. Khoảng đệm trên thiết bị di động Điều chỉnh khoảng đệm xung quanh video khi hiển thị trên thiết bị di động.

   • Sử dụng nút chuyển Thêm để đặt giá trị khoảng đệm riêng cho:
     • Trên
     • Phải
     • Dưới
     • Trái

10. Bao gồm trong AMPHTML hoặc HTML

Chọn phiên bản email mà khối video sẽ xuất hiện:

• Cả AMPHTML và HTML
• Chỉ AMPHTML
• Chỉ HTML

Tùy chọn này đảm bảo video được đưa vào đúng cách dựa trên phiên bản email được gửi.

Khối HTML

Khối HTML cho phép bạn chèn mã HTML và CSS tùy chỉnh vào email, mang lại sự linh hoạt cho các tùy chỉnh nâng cao đồng thời vẫn đảm bảo khả năng tương thích với ứng dụng email. Dù bạn thêm một phần tử HTML riêng lẻ hay thiết kế toàn bộ email, khối này là công cụ giúp tạo các thiết kế theo nhu cầu.

1. Giao diện trình chỉnh sửa mã

Khi chọn Khối HTML, một cửa sổ trình chỉnh sửa mã màu đen sẽ xuất hiện trong khung nội dung. Trình chỉnh sửa này cho phép bạn viết, dán hoặc sửa đổi mã tùy chỉnh. Trình chỉnh sửa gồm hai phần:

• Phần HTML: Thêm hoặc chỉnh sửa cấu trúc HTML cho email.
• Phần CSS: Mở một trình chỉnh sửa CSS riêng để tạo kiểu cho nội dung.

2. Điều chỉnh cỡ chữ

Điều chỉnh cỡ chữ của mã trong trình chỉnh sửa để dễ đọc hơn:

• Sử dụng nút A+ để tăng cỡ chữ.
• Sử dụng nút A- để giảm cỡ chữ.

3. Điều chỉnh kích thước cửa sổ trình chỉnh sửa

Thay đổi kích thước cửa sổ trình chỉnh sửa mã theo thói quen làm việc của bạn:

• Cách điều chỉnh:
  • Di chuột lên ba chấm ở chính giữa phía trên cửa sổ trình chỉnh sửa.
  • Kéo thanh trượt lên hoặc xuống để tăng hoặc giảm kích thước trình chỉnh sửa.

Tính năng này đặc biệt hữu ích khi quản lý các khối mã lớn hoặc chi tiết hơn.

4. Trình chỉnh sửa CSS

Trình chỉnh sửa CSS cho phép bạn quản lý kiểu cho nội dung HTML và có thể truy cập thông qua một nút ở góc trên bên phải của trình chỉnh sửa mã.

Các lưu ý quan trọng:

• Hỗ trợ hạn chế: Nhiều ứng dụng email không hỗ trợ các tính năng CSS nâng cao như Flexbox, Grid hoặc truy vấn phương tiện.
• Tuân thủ các tính năng cơ bản: Sử dụng CSS nội tuyến cơ bản để có khả năng tương thích tối đa.
• Kiểu được cấu hình sẵn: Tránh xóa các kiểu được cấu hình sẵn vì chúng đảm bảo hiển thị chính xác trên các ứng dụng email phổ biến.

5. Khả năng tương thích với ứng dụng email

HTML email cần được chú ý đặc biệt do nhiều ứng dụng email sử dụng các công cụ hiển thị lỗi thời.

Hướng dẫn chính:

• Sử dụng bố cục dựa trên bảng thay vì bố cục dựa trên <div> để được hỗ trợ tốt hơn.
• Tránh các tính năng CSS nâng cao như hoạt ảnh, Flexbox hoặc Grid.
• Dự kiến truy vấn phương tiện và các thuộc tính CSS nhỏ có thể hoạt động không nhất quán.
• Kiểm tra: Luôn kiểm tra email trên nhiều ứng dụng (ví dụ: Gmail, Outlook, Apple Mail) để đảm bảo hiển thị chính xác.

6. Khoảng đệm

Cài đặt Khoảng đệm điều chỉnh khoảng cách xung quanh nội dung HTML:

• Khoảng đệm mặc định: Mặc định đặt là 0.
• Khoảng đệm tùy chỉnh: Bật nút chuyển Thêm để điều chỉnh khoảng đệm riêng cho:
  • Trên
  • Phải
  • Dưới
  • Trái

Tính năng này lý tưởng để căn chỉnh nội dung HTML trong bố cục email.

7. Thêm liên kết neo

Tính năng Thêm liên kết neo cho phép bạn tạo một liên kết có thể nhấp ở nơi khác trong email để chuyển đến Khối HTML.

Cách sử dụng:

• Bật tùy chọn và nhập tên neo vào trường.

Hạn chế:

• Một số ứng dụng email không hỗ trợ liên kết neo, chẳng hạn như:
  • Ứng dụng Gmail trên iOS
  • Apple Mail trên iOS
  • Ứng dụng Outlook (Android và macOS)
  • Email AMP

8. Viết HTML tùy chỉnh

Trình chỉnh sửa HTML được thiết kế để viết hoặc dán cấu trúc HTML tùy chỉnh cho email.

Các phương pháp hay nhất:

• Sử dụng HTML đơn giản, được hỗ trợ rộng rãi.
• Tránh các bố cục hoặc tính năng phức tạp như phần tử <div>.
• Tuân thủ thiết kế dựa trên bảng để đảm bảo khả năng tương thích tốt hơn.

9. Mẹo để thành công

1. Bắt đầu nhỏ: Sử dụng Khối HTML cho các phần cụ thể nếu bạn mới làm quen với phát triển email.
2. Xác thực mã: Đảm bảo HTML tuân thủ các yêu cầu của ứng dụng email.
3. Kiểm tra kỹ lưỡng: Sử dụng các công cụ để xem trước và kiểm tra email trên nhiều ứng dụng và thiết bị.