Email HTML: Hướng dẫn cách tạo template đơn giản chỉ trong 4 bước

Khi làm marketing, bạn nên kết hợp nhiều kênh khác nhau vì mỗi phương pháp đều đem lại lợi ích riêng cho doanh nghiệp. Email bằng HTML không hẳn tốt hơn email text bình thường và hầu hết mọi người sẽ áp dụng cả hai để làm nên chiến dịch email marketing thành công.

Trong bài viết này, tôi sẽ hướng dẫn chi tiết cách tạo HTML email để bất kỳ ai, dù không có kinh nghiệm hay không rành về code vẫn có thể làm được với một số template có sẵn. Giờ thì bắt đầu thôi nào!

Cách tạo template email bằng HTML

HTML email thường bao gồm 2 phần:

  1. Header: Là đoạn code nằm giữa <head> và </head>. Media query, styling, CSS sẽ được xác định trong phần này.
  2. Body: Là phần code nằm giữa <body> và </body>. Công cụ dựng hình (rendering engine) sẽ lấy code này để tạo cấu trúc email.

Bước 1: Chuẩn bị template HTML

email code html template a href
Phần head của email viết bằng html

Phần head của bất kỳ email được viết bằng HTML nào cũng sẽ có dạng code như sau:<!DOCTYPE> dùng để khai báo với công cụ dựng hình tag HTML nào sẽ xuất hiện cũng như HTML và CSS sẽ tuân theo nguyên tắc nào. Mặc dù một số trình duyệt email (như Gmail, Google Apps, Yahoo! Mail và Outlook.com) không quan tâm đến code và tự dùng code của riêng mình thì bạn vẫn nên thêm mã này vào email code.

Có một số lựa chọn như XHTML 1.0, Transitional XHTML 1.0 và Strict HTML5 nhưng hầu hết người dùng sẽ chọn XHTML 1.0.


<meta http-equiv=”Content-Type” /> khai báo cách xử lý nội dung và ký tự đặc biệt trong html đối với email. Text/html thông báo với công cụ dựng hình xem chuỗi text sau là html.


<meta name=”viewport” /> hướng dẫn thiết bị (mà email sẽ xuất hiện trên đó) làm thế nào để hiển thị email tương thích với chiều rộng màn hình.


Title của email nằm giữa hai tag <title>. Khi subscriber nhấn vào “view online”, title sẽ xuất hiện trên tab trình duyệt.


Bước 2: Styling email

Styling sẽ giúp email của đẹp mắt hơn nhưng lại khá khó khăn.

Dù bạn có dùng styling gì cho email thì định dạng phông chữ hay kích thước hình ảnh, media query sẽ nằm giữa các thẻ <style> để phân biệt các class khác nhau.

Định dạng cơ bản để thêm tag <style> là <style type=”text/css”>; trong đó “text/css” dùng để khai báo loại media là CSS. Vị trí đặt thẻ <style> cần chút kỹ xảo vì 6/36 trình duyệt email không hỗ trợ thẻ <style> trong <head> và Gmail không hỗ trợ trong phần nội dung chính của thư.

Định dạng text

Trong trường hợp bạn cần thêm điều kiện định dạng cho text, bạn có thể khai báo thuộc tính trong một class cụ thể.

Ví dụ để tắt định dạng đặc biệt của text trong hyperlink, bạn thêm code. <a href=”https://www.yourdomain.com”> text here</a>

Media Queries

Trong trường hợp bạn đang viết code cho responsive email, media queries bắt buộc phải thêm vào với định dạng:

mẫu email được viết bằng html miễn phí
Cú pháp media queries Css

Ví dụ nhìn vào media query sau:

tạo email code html a href
Responsive cho mẫu email của bạn

Khi email hiển thị trên thiết bị có kích thước màn hình khoảng 481 và 699px:

  • Độ rộng của html email sẽ là 100% do thuộc tính “width: 100% !important;”.
  • Nội dung trong class em.hide có thể bị giấu đi do thuộc tính “display:none !important;”.
  • Nội dung trong class em.h20 sẽ có chiều cao cố định là 20px do thuộc tính “height: 20px !important;”.
  • Nội dung trong class em_padd sẽ có padding cố định là 20px (chiều ngang) và 10px (chiều dọc).

Media queries được đề cập từ đầu đến giờ sẽ được render trong một số bố cục mobile. Nhưng render trong một số bố cục khác đòi hỏi phải có một nhóm media queries đặc biệt và chỉ chuyên gia developer mới giúp bạn làm điều đó.

Xem thêm: email marketing là gì? kiến thức cần có cho một chiến dịch email marketing

Khả năng tương tác trong html email

Nếu bạn muốn thêm yếu tố tương tác vào email thì cần chèn code CSS trước khi đóng <head>.

Các thành phần tương tác rất khó viết code và cần thử nhiều lần trước khi render chính xác trên trình duyệt email. Có thể có sẵn code này trên mạng nhưng bạn cần có chút kiến thức và kinh nghiệm khi xây dựng email có tính tương tác cao. 

Bạn có thể quan tâm:

Bước 3: Codecuối cùng

Code  <head> cuối sẽ trông như sau:

hướng dẫn tạo email code html
Phần head email được viết bằng html

Khá là hại não đấy.

Bước 4: Xây dựng phần

Ngày nay phần lớn người dùng sử dụng thiết bị có màn hình tối thiểu là 800px nên bạn cần tạo email có độ rộng ít nhất 700px và thêm màu nền vào để email hiển thị rõ và nổi bật nhất. Vì vậy tôi sẽ chọn độ rộng 100% và màu là #efefefef.

1 <body class=”em_body” style=”margin:0px; padding:0px;” bgcolor=”#efefef”>

Sau đó, chúng ta thêm bảng, canh giữa, căn lề 700px.

1 <table align=”center” width=”700″ border=”0″ cellspacing=”0″ cellpadding=”0″ class=”em_main_table” style=”width:700px;”>

Giờ thì thêm text cho phần pre-header và “view online” thành một dòng lồng trong bảng trên.

Phần code:

template email code html
Code html email chèn hàng cho mẫu email của bạn

Phần hiển thị:

mẫu html email a href
Kết quả

Tiếp theo thêm banner hình.

Phần code:

email được viết bằng html code
Chèn code thêm banner hình cho template email được viết bằng html

Phần hiển thị:

cách tạo html email
Hiển thị trên trình browser

Thử thêm một bảng nữa vào email.

Phần code:

tạo email viết bằng html đẹp
 class=wp-image-26758
Thêm một bản vào email

Phần hiển thị:

mẫu html email miễn phí
Hiển thị trên browser

Tiếp theo là footer liên hệ.

Phần code:

tạo email code
Code footer cho email của bạn

Phần hiển thị:

email được viết bằng html code
Hiển thị trên browser

Xem thêm cách xây dựng danh sách email marketing

 

Trước khi kết thúc phần body, bạn chèn thêm code:

1 <div class=”em_hide” style=”white-space: nowrap; display: none; font-size:0px; line-height:0px;”>                           </div>Code này sẽ thêm khoảng cách cho bố cục desktop trong Gmail. Vậy là bạn sẽ có mẫu email hoàn chỉnh như sau:
html email desktop
Hiển thị trên desktop
html email mobile
Hiển thị trên mobile
  •  

Bạn có thể quan tâm:

Kết luận

Bạn có thể tham khảo hướng dẫn trên để tự tạo mẫu email bằng HTML cho chiến dịch email marketing. Những mẫu email này có thể được sử dụng trên các nền tảng như MailChimp. 

Nếu muốn trở thành email marketer chuyên nghiệp, bạn cần nắm một số kiến thức về HTML trong email bao gồm thiết kế email, viết code HTML email và thử các template khác nhau để có thể đạt tỷ lệ chuyển đổi cao nhất.

Tham khảo thêm các bài viết về chủ đề email template:

https://instrktiv.com/en/user-manual-template/

https://www.template.net/business/instructions/

https://www.smartsheet.com/work-instruction-templates

 

Tôi là Đỗ Bình Nguyên, hiện là Marketing Manager tại GTV SEO, chịu trách nhiệm cho việc lên chiến lược thúc đẩy và triển khai các chiến dịch Marketing Tổng thể nhằm thúc đẩy doanh số 2 mảng Dịch vụ SEO và Đào tạo SEO tại GTV. Với kiến thức và kinh nghiệm Marketing tổng thể, tôi hy vọng kiến thức tôi chia sẻ mang lại giá trị hữu ích thúc đẩy chiến dịch Marketing của doanh nghiệp bạn.

Nguyen Do

Comments are closed.

Khám phá nhiều chủ đề khác
>
fb-chat
logo-zalo-vector