Email mã html

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 mang lại lợi ích riêng cho doanh nghiệp. Email bằng HTML chắc chắn tốt hơn văn bản email 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. Email bằng HTML chắc chắn tốt hơn văn bản email 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

Nội dung chính Hiển thị

• Cách tạo email mẫu bằng HTML
• Bước 1. Chuẩn bị HTML mẫu
• Bước 2. tạo kiểu email
• Bước 3. Codecuối cùng
• Bước 4. Build section
• Trước khi kết thúc phần nội dung, bạn nhập thêm mã

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

Cách tạo email mẫu bằng HTML

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

1. tiêu đề. Là đoạn mã nằm giữa và. Truy vấn phương tiện, kiểu dáng, CSS sẽ được xác định trong phần này
2. Thân hình. Là phần mã nằm giữa và. Công cụ cấu hình [rendering engine] sẽ lấy mã này để tạo cấu trúc email

Bước 1. Chuẩn bị HTML mẫu

Phần đầu của email viết bằng html

Phần đầu của bất kỳ email nào được viết bằng HTML nào cũng sẽ có định dạng mã như sau. dùng để khai báo với công cụ xây dựng thẻ HTML bất kỳ thẻ nào cũng sẽ xuất hiện dưới dạng 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] do not quan tâm đến mã và mã tự dùng của riêng mình, bạn vẫn nên thêm mã này vào mã email

Có một số lựa chọn như XHTML 1. 0, XHTML chuyển tiếp 1. 0 và HTML5 nghiêm ngặt nhưng hầu hết người dùng sẽ chọn XHTML 1. 0

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ụ xây dựng chuỗi văn bản xem sau là html

hướng dẫn thiết bị [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

Tiêu đề của email nằm giữa hai thẻ. Khi người đăng ký nhấn vào “xem trực tuyến”, tiêu đề sẽ xuất hiện trên tab duyệt

Bước 2. tạo kiểu email

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

Dù bạn có sử dụng kiểu dáng gì cho email thì định dạng chữ chữ hay kích thước hình ảnh, truy vấn phương tiện sẽ nằm giữa các thẻ để phân biệt các lớp khác nhau

Định dạng cơ bản để thêm thẻ là ; . Vị trí đặt thẻ cần hơi kỹ vì 6/36 trình duyệt email không hỗ trợ thẻ trong và Gmail không hỗ trợ trong phần nội dung chính của thư

Định dạng văn bản

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

Ví dụ để tắt định dạng đặc biệt của văn bản trong siêu liên kết, bạn thêm mã. văn bản ở đây

Truy vấn phương tiện truyền thông

Trong trường hợp bạn đang viết mã cho email phản hồi, truy vấn phương tiện bắt buộc phải thêm vào định dạng

Cú pháp truy vấn phương tiện Css

Ví dụ nhìn vào truy vấn phương tiện sau

Responsive for your email template

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 email html sẽ là 100% do thuộc tính “chiều rộng. 100%. quan trọng;"
• Nội dung trong lớp em. hide can't be hidden by property "hiển thị. không ai. quan trọng;"
• Nội dung trong lớp em. h20 sẽ có chiều cao cố định là 20px do thuộc tính “chiều cao. 20px. quan trọng;"
• Nội dung trong lớp em_padd sẽ có padding cố định là 20px [ chiều ngang] và 10px [ chiều dọc]

Lưu ý. . Điều quan trọng là buộc công cụ cấu hình phải sử dụng đúng truy vấn phương tiện đó và không thể thay thế bằng các lựa chọn khác. Đối với bố cục di động cục bộ, các truy vấn phương tiện riêng lẻ được khai báo sẽ hiển thị với độ rộng màn hình nhỏ hơn 480px.  

Các truy vấn phương tiện được cập nhật từ đầu đến giờ sẽ được hiển thị trong một số cục bộ di động. Nhưng render trong một số bố cục khác yêu cầu phải có một nhóm truy vấn phương tiện đặc biệt và chỉ có chuyên gia phát triển mới giúp bạn làm điều đó

Xem thêm. email marketing là gì?

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

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

Các thành phần tương tác viết mã rất khó và cần thử lại nhiều lần trước khi hiển thị chính xác trên trình duyệt email. Có thể có sẵn mã 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.  

You can can quan tâm

• Phần mềm email marketing tốt nhất hiện nay
• Hướng dẫn thiết kế email marketing đẹp phong cách
• Làm sao để cuốn hút tiêu đề email marketing?

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

Cuối mã sẽ trông giống như sau

Phần đầu email được viết bằng html

Khá là hại đấy

Bước 4. Build section

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ối thiểu 700px và thêm màu nền vào để email hiển thị rõ ràng và nổi bật nhất. Vì vậy tôi sẽ chọn độ rộng 100% và màu sắc là #efefefef

1

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

1

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

Phần mã

Mã html email chèn hàng cho mẫu email của bạn

Phần hiển thị

Kết quả

Tiếp tục theo hình ảnh biểu ngữ bổ sung

Phần mã

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

Phần hiển thị

Kết quả

Tiếp tục theo hình ảnh biểu ngữ bổ sung

Phần mã

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

Phần hiển thị

Kết quả

Tiếp tục theo hình ảnh biểu ngữ bổ sung

Phần mã

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

Phần hiển thị

Kết quả

Tiếp tục theo hình ảnh biểu ngữ bổ sung

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

1Hiển thị trên trình duyệt

Cố gắng thêm một bảng nữa vào email

Thêm một bản vào email

•  

Hiển thị trên trình duyệt

• Tiếp theo là footer liên hệ
• Code footer cho email của bạn
• Xem thêm cách xây dựng danh sách email marketing

Trước khi kết thúc phần nội dung, bạn nhập thêm mã

Mã này sẽ bổ sung khoảng cách cho máy tính để bàn cục bộ trong Gmail. Vì vậy, bạn sẽ có mẫu email hoàn chỉnh như sau. email bằng HTML cho chiến dịch email marketing. Những email mẫu này có thể được sử dụng trên các nền tảng như MailChimp.  

Hiển thị trên desktopemail 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 email thiết kế, viết mã email HTML và thử các mẫu khác nhau để có thể đạt được Tỷ lệ chuyển đổi cao nhất