Trình tạo email HTML là gì?

Chiến dịch của Pipedrive, trình chỉnh sửa kéo và thả của Pipedrive, là một công cụ dễ sử dụng giúp bạn tạo email chuyên nghiệp và nội dung hấp dẫn cho các liên hệ của mình. Trình tạo email có thể được sử dụng để tạo các chiến dịch email, bản tin, email mới hoặc mẫu email phản hồi để sử dụng trong tương lai

Video, biểu tượng, menu và các mô-đun xã hội đều có sẵn, cũng như nhiều yếu tố thường được sử dụng khác. Và, đề phòng trường hợp bạn không thể tìm thấy phần tử phù hợp, có một khối HTML cho phép bạn tạo thiết kế của riêng mình, dán trực tiếp vào trình chỉnh sửa và xem ở dạng xem trước

Bạn muốn tìm hiểu sâu hơn về thiết kế email của mình?

Ở cuối mỗi email, bạn sẽ tìm thấy phần chân trang hủy đăng ký. Điều này là bắt buộc và không thể xóa vì nó cần thiết để tuân thủ GDPR và cũng cải thiện danh tiếng cho miền email của bạn

Litmus Builder là trình tạo email tùy chỉnh mạnh mẽ dành cho email HTML. Chúng tôi đã chia nhỏ cách sử dụng Builder trước đây trong các phiên bản trước của loạt bài Litmus Builder Essentials (phần một, hai và ba). Hôm nay, chúng tôi sẽ chỉ cho bạn cách sử dụng các tính năng đó khi tạo các mẫu HTML của riêng bạn

Như chúng ta đã thấy trong Phần 1, bạn có thể sử dụng bất kỳ số lượng mẫu HTML được tạo sẵn và thử nghiệm nào cho các chiến dịch của riêng mình. Mỗi thứ đóng vai trò là một nền tảng tốt, cho phép bạn tiết kiệm thời gian và tập trung vào những gì quan trọng. nội dung. Các mẫu cũng cho phép các nhà tiếp thị hoặc nhà thiết kế không viết mã để tự xây dựng một chiến dịch email tuyệt vời

Bắt đầu với một mẫu mới trong Builder

Tuy nhiên, nếu bạn đang tìm kiếm sự linh hoạt và tùy chỉnh hơn trong thiết kế email của mình, thì việc tạo mẫu của riêng bạn từ đầu là cách tốt nhất.  

Khi bạn đang ở trong Trình tạo, hãy nhấp vào nút Bắt đầu xây dựng ở gần trên cùng bên trái hoặc nút Tạo mới ở bên phải, đặt tiêu đề cho dự án của bạn, chọn Xây dựng, sau đó nhấp vào nút Tiếp theo. Từ màn hình Tạo email mới, hãy chọn tùy chọn đầu tiên. email trống. Builder sẽ tạo một dự án email mới và đưa bạn vào giao diện Builder

Dưới đây là các tính năng của Litmus Builder giúp việc tạo mẫu của riêng bạn dễ dàng hơn rất nhiều

• Nội tuyến CSS
• Đoạn trích và một phần
• đường lưới
• Xem trước email
• chia sẻ

Sử dụng nội tuyến CSS

CSS inliner cung cấp cho bạn khả năng tách HTML và CSS của bạn thành các tab khác nhau trong giao diện. Điều này đảm bảo rằng mã của bạn rõ ràng và dễ đọc nhất có thể, cho phép bạn nhanh chóng điều hướng và cập nhật mã của mẫu của mình. Nó hoàn hảo cho các nhà phát triển, những người cũng cần hỗ trợ các thành viên trong nhóm ít kỹ thuật hơn

Để bật nội tuyến CSS, hãy nhấp vào biểu tượng bánh răng ở phía bên trái màn hình Trình tạo của bạn và chuyển đổi tùy chọn có tên CSS nội tuyến. Bạn có thể chuyển đổi giữa trình soạn thảo HTML và CSS bằng cách sử dụng các tùy chọn trên thanh công cụ của trình soạn thảo

Chuyển đổi giữa các tab HTML và CSS

Trình nội tuyến CSS của Builder được thiết kế để thực sự hiểu email. Ví dụ: nó không loại bỏ bất kỳ nhận xét có điều kiện hoặc bộ chọn giả nào của Outlook, đồng thời nó giữ nguyên các thực thể ký tự và có nhiều công cụ cho phép bạn cải thiện quy trình làm việc của mình

Khi bạn đã sẵn sàng chuyển mẫu của mình ra khỏi Litmus Builder và chuyển sang nhà cung cấp dịch vụ email (ESP) của riêng bạn, hãy nhấp vào nút Xuất. Từ đây, bạn có thể đồng bộ hóa email của mình với ESP, sao chép HTML đã biên dịch hoặc tải xuống HTML đã biên dịch. Nó là dễ dàng

Tận dụng các đoạn trích và các phần

Litmus Builder có hai công cụ được thiết kế đặc biệt để giúp xây dựng và sử dụng các mẫu nhanh hơn và dễ dàng hơn. đoạn trích và một phần. Hãy xem xét kỹ hơn cách chúng có thể giúp bạn tạo các mẫu tốt hơn

Đoạn trích

Đoạn mã cho phép bạn lưu và sử dụng lại các đoạn mã trên tất cả các dự án Builder của mình. Bạn có thể truy cập đoạn trích của mình bằng nút Chèn

Mở menu Đoạn trích

Nếu bạn chưa sử dụng đoạn trích trước đây, bạn sẽ thấy một thư viện trống. May mắn thay, việc tạo đoạn mã mới rất dễ thực hiện

Trong thư viện Đoạn mã, hãy nhấp vào Quản lý đoạn mã. Từ đây, bạn sẽ chọn Đoạn mã mới. Một màn hình mới sẽ bật lên, nơi bạn có thể đặt tên cho đoạn mã của mình, tạo trình kích hoạt đoạn mã để chèn đoạn mã đó và viết hoặc dán HTML và/hoặc CSS mà bạn muốn đưa vào đoạn mã

Chìa khóa để sử dụng đoạn trích hiệu quả là tạo chúng cho các thành phần thường được sử dụng trong email và dựa vào trình kích hoạt đoạn mã để chèn chúng

Ví dụ: hầu hết các chiến dịch email đều dựa vào văn bản xem trước để khuyến khích người đăng ký mở email. Thay vì nhập thủ công thành phần văn bản xem trước mới cho mọi email bạn tạo, bạn có thể lưu thành phần đó dưới dạng đoạn mã và kích hoạt nó trực tiếp trong trình chỉnh sửa của Builder. Trong trường hợp này, chúng tôi có thể bao gồm mã trong đoạn mã mới, đặt tên cho mã và đặt trình kích hoạt của mã thành thứ gì đó như pvt

Chỉnh sửa đoạn trích trong Litmus Builder

Bây giờ, bất cứ khi nào bạn cần gọi đoạn mã đó trong trình chỉnh sửa, chỉ cần nhập pvt, ngay sau đó là nút tab và Builder sẽ chèn mã vào mẫu của bạn

Bạn thậm chí có thể bao gồm các điểm chỉnh sửa/nhảy trong đoạn mã của mình bằng cách gói văn bản trong dấu ngoặc nhọn. Đoạn mã có điểm chỉnh sửa/nhảy sẽ tự động định vị con trỏ của bạn tại điểm đó khi bạn chèn đoạn mã, cho phép bạn nhanh chóng chỉnh sửa nội dung của đoạn mã

Mở rộng một đoạn mã trong Builder

Bạn không chắc chắn nên đưa đoạn trích nào vào thư viện của riêng mình?

một phần

Tương tự như đoạn trích, các phần cho phép bạn thu thập các thành phần mã để sử dụng trong các dự án Builder. Sự khác biệt chính giữa các đoạn mã và các phần là các đoạn mã cuối cùng được mã hóa cứng vào mẫu của bạn, trong khi Trình tạo kéo các phần vào mẫu của bạn bất cứ khi nào bạn xem trước, biên dịch hoặc tải xuống mẫu của mình

Partials có thể được truy cập bằng cách nhấp vào Insert, sau đó Partials

Menu Partials trong Builder

Để tạo một phần mới, hãy nhấp vào Quản lý các phần. Builder sẽ mở các phần của bạn trong một cửa sổ mới. Từ đây, chọn New Partial để tạo một part mới. Mỗi phần được xác định bởi tiêu đề của tài liệu và có thể được bao gồm trong các mẫu của riêng bạn bằng cách đặt tiêu đề của phần đó trong dấu ngoặc nhọn kép. Ví dụ: nếu chúng tôi có một phần tiêu đề được đặt tên, chúng tôi có thể gọi nó trong tài liệu Builder bằng cách nhập {{header}}. Trình chỉnh sửa mã chỉ hiển thị khối văn bản ngắn đó trong khi một phần được kéo tự động vào email của bạn

Mở rộng một phần trong Litmus Builder

Bạn có thể thắc mắc, "Tại sao bạn lại sử dụng các phần thay vì các đoạn trích?"

Mặc dù các đoạn trích cực kỳ tiện dụng, nhưng tính năng tuyệt vời của các phần là chúng được thêm vào các mẫu của bạn một cách linh hoạt. Vì mã không thực sự được thêm vào trình chỉnh sửa cho đến khi bạn biên dịch, xem trước, tải xuống hoặc chia sẻ mẫu của mình, nên bạn có thể cập nhật một phần ở một nơi và để những thay đổi đó chảy xuống tất cả các mẫu sử dụng phần đó.

Hãy suy nghĩ về một chân trang email. Thông thường, các công ty cần cập nhật thông tin ở phần cuối của nhiều email bất cứ khi nào bộ phận pháp lý của họ thực hiện thay đổi. Thay vì phải cập nhật hàng chục email riêng lẻ theo cách thủ công, thay vào đó, bạn có thể cập nhật một phần {{footer}} duy nhất được đưa vào tất cả các email đó. Cập nhật một phần đó sẽ tự động cập nhật tất cả các mẫu, giúp bạn tiết kiệm rất nhiều thời gian

Điều này có thể cực kỳ hữu ích cho các nhà thiết kế và nhà phát triển là thành viên của một nhóm lớn hơn. Họ có thể kiểm soát các phần trong khi cấp cho nhà tiếp thị quyền truy cập vào các mẫu chứa nội dung của email. Các nhà tiếp thị có thể cập nhật nội dung đó, trong khi vẫn giữ nguyên các yếu tố như đầu trang và chân trang—giảm lỗi và đảm bảo email tốt hơn cho người đăng ký

Sử dụng đường lưới để điều hướng nhanh

Mặc dù CSS nội tuyến, đoạn trích và các phần có thể giúp tăng tốc độ phát triển và giúp điều hướng mã dễ dàng hơn, nhưng hầu hết các email vẫn chứa nhiều mã khó đọc qua. Thay vì cuộn qua hàng trăm dòng mã để tìm một phần cần chỉnh sửa, các đường lưới của Builder cho phép bạn nhanh chóng tìm và chọn các thành phần của email để tập trung vào

Đường lưới của Builder đang hoạt động

Để bật đường lưới, hãy nhấn vào biểu tượng bánh răng trong thanh công cụ xem trước, sau đó nhấp vào Chuyển đổi đường lưới. Các đường lưới sẽ phủ các ô màu xanh lam lên email của bạn trong khung xem trước, làm nổi bật từng thành phần riêng lẻ trong mẫu email của bạn. Khi đường lưới được bật, chỉ cần chọn bất kỳ phần tử nào và trình chỉnh sửa mã sẽ tự động điều hướng đến khối mã đó, vì vậy bạn có thể thực hiện bất kỳ cập nhật nào cần thiết

Xem trước trong hơn 100 ứng dụng email

Khi bạn bắt đầu xây dựng các mẫu của mình trong Litmus Builder, bước tiếp theo là đảm bảo các mẫu của bạn hiển thị chính xác trong tất cả các ứng dụng email cần thiết. Litmus Email Previews giúp việc này trở nên nhanh chóng và dễ dàng. Trong ngăn xem trước của trình tạo email, chuyển đổi giữa xem trước Trình duyệt mặc định và Xem trước email. Việc chọn Xem trước email sẽ bắt đầu một loạt thử nghiệm giúp bạn có khả năng xem mẫu của mình trông như thế nào trong hơn 100 ứng dụng email

Nếu bạn biết đối tượng của mình chỉ mở chiến dịch của bạn trong các ứng dụng email cụ thể, thì bạn có thể chọn ứng dụng khách nào bạn muốn thử nghiệm bằng cách nhấp vào nút Chọn ứng dụng khách trong chế độ xem Xem trước email. Thao tác này sẽ mở danh sách tất cả các ứng dụng khách có sẵn mà bạn có thể bật và tắt. Bạn không chắc người đăng ký của mình đang sử dụng ứng dụng email nào?

Chia sẻ mẫu với nhóm của bạn

Bước cuối cùng để phát triển các mẫu trong Litmus Builder là chia sẻ các mẫu đó với các thành viên trong nhóm và các bên liên quan

Thay vì sao chép mã và hình ảnh của bạn vào ESP, thiết lập danh sách thử nghiệm và gửi chiến dịch đến danh sách đó theo cách thủ công, Litmus Builder có toàn bộ bảng chia sẻ dành cho việc nhận phản hồi về chiến dịch của bạn

Tùy chọn chia sẻ của người xây dựng

Trong bảng chia sẻ, bạn có các tùy chọn để Xuất bản, Gửi email và Nhúng mẫu của mình. Nếu bạn xuất bản email của mình, bạn có thể chọn chỉ chia sẻ Bản xem trước email trong các ứng dụng khách đã chọn của mình hoặc cả Bản xem trước HTML và Email cùng nhau

Bằng cách này, bạn có thể chọn những gì bạn đang chia sẻ với từng bên liên quan. Nếu bạn chỉ cần một bên liên quan đăng nhập vào thiết kế, hãy chỉ chia sẻ Bản xem trước để họ không bị nhầm lẫn bởi HTML. Gửi mẫu cho nhà phát triển khác để xem xét hoặc khắc phục sự cố?

Tùy chọn Email cho phép bạn nhanh chóng gửi email kiểm tra thẳng đến hộp thư đến của mình mà không cần tải lên ESP của bạn

Nếu bạn muốn chia sẻ mẫu của mình trên blog hoặc trên Cộng đồng Litmus, hãy sử dụng tính năng Nhúng để nhúng bản xem trước trực tiếp của mẫu trên bất kỳ trang web nào. Mọi người thậm chí có thể mở mã và bắt đầu chỉnh sửa trong tài khoản Builder của riêng họ, cho phép các thành viên trong nhóm nhanh chóng đưa ra các ý tưởng mà không ảnh hưởng đến mẫu của riêng bạn. Bản xem trước của Builder hết hạn sau 60 ngày kể từ ngày tạo

Bắt đầu với Builder ngay hôm nay

Bây giờ bạn đã biết cách tạo mẫu, đoạn trích và các phần trong Builder, tại sao bạn không thử một lần?

Đã là khách hàng của Litmus? . Nếu không, hãy dùng thử Litmus miễn phí trong 7 ngày và xem cách Builder có thể cải thiện quy trình phát triển của bạn ngay hôm nay

Litmus Builder không chỉ là xây dựng email

Nhanh chóng xây dựng và kiểm tra QA trên các ứng dụng email quan trọng nhất đối với đối tượng của bạn, đồng thời tận dụng các mẫu và mô-đun email có thể tái sử dụng để giảm lỗi và duy trì tính nhất quán của thương hiệu

Trình tạo email là gì?

Email HTML được sử dụng để làm gì?

Mẫu email HTML là gì?