Trong bài viết trước của tôi, "Cách tạo mẫu email HTML đáp ứng", chúng tôi đã khám phá các nguyên tắc cơ bản về thiết kế và mã hóa một mẫu email HTML đơn giản, thích ứng đẹp mắt trên các thiết bị và ứng dụng email khác nhau.
Tôi có một số câu hỏi về việc thêm phương tiện vào mẫu email HTML.
Dựa trên nền tảng đó, tôi sẽ hướng dẫn bạn các cách khác nhau để thêm phương tiện vào mẫu email HTML của bạn. Việc thêm phương tiện như hình ảnh, video và âm thanh có thể làm tăng đáng kể mức độ tương tác và hiệu quả truyền thông của bạn.
Yêu cầu
- Mẫu email HTML đơn giản. Bạn có thể tạo một cái theo hướng dẫn này.
Hình ảnh là loại phương tiện phổ biến nhất được thêm vào email. Đây là cách đưa chúng vào mẫu email HTML của bạn:
- Trước khi thêm hình ảnh, hãy đảm bảo hình ảnh đó có kích thước phù hợp và được tối ưu hóa để sử dụng trên web. Một thực tế phổ biến là giữ chiều rộng hình ảnh dưới 600 pixel để phù hợp với hầu hết các ứng dụng email mà không cần chia tỷ lệ. Đối với ví dụ cụ thể này, chúng tôi có một hình ảnh có sẵn và đã đổi kích thước thành 600 x 750 pixel như hiển thị bên dưới.
đây là hình ảnh chúng tôi sẽ tải lên
- Tải hình ảnh của bạn lên máy chủ web hoặc mạng phân phối nội dung (CDN) đáng tin cậy. Bạn sẽ cần một URL ổn định để tham chiếu trong email của mình.
Trong ví dụ này, chúng tôi sẽ sử dụng trang web imgbb và tải lên hình ảnh của chúng tôi. Nhấp vào "Bắt đầu tải lên" và chọn hình ảnh.
imgbb là một trong những nền tảng lưu trữ hình ảnh miễn phí
Sau khi chọn ảnh cần sử dụng, chọn "Không tự động xóa" rồi nhấn vào Tải lên.
Chọn Không tự động xóa từ danh sách thả xuống
Sau khi tải lên, một URL sẽ được tạo. Nhấp vào menu thả xuống và chọn "HTML được liên kết đầy đủ"
Mã nhúng được tạo
- Sao chép mã HTML được tạo và chèn mã đó vào phần mong muốn trong mẫu email của bạn như được hiển thị.
<a href="https://ibb.co/XpRp2N8">
<img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>
Vui lòng thử các tùy chọn mã nhúng khác để kiểm tra xem hình ảnh của bạn sẽ xuất hiện như thế nào trong mẫu email.
Dưới đây là kết quả của hình ảnh được chèn:
hình ảnh đã được chèn thành công vào mẫu email của chúng tôi
Lưu ý :Luôn bao gồm alt thuộc tính để cung cấp văn bản thay thế cho các trường hợp không thể hiển thị hình ảnh.
Cách nhúng video vào mẫu email của bạn
Phát lại video trực tiếp không được hỗ trợ trong hầu hết các ứng dụng email. Thay vào đó, bạn có thể nhúng hình thu nhỏ có thể nhấp vào liên kết đến video được lưu trữ trực tuyến:
- Tạo hình thu nhỏ :Chụp khung hình từ video của bạn hoặc tạo đồ họa tùy chỉnh thể hiện nội dung video. Điều này sẽ hoạt động như một trình giữ chỗ. Trong ví dụ này, chúng tôi sẽ sử dụng hình ảnh giống như hình thu nhỏ.
- Từ danh sách thả xuống, chọn hình thu nhỏ HTML được liên kết. Sao chép mã và dán vào mẫu email của bạn.
<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>
- Liên kết tới video :Sửa đổi mã ở trên để sử dụng hình thu nhỏ làm hình ảnh có thể nhấp được liên kết với URL video.
- Thay đổi URL trong
<a href ="">vào liên kết video như hiển thị bên dưới.
<a href="https://youtu.be/UG8rjxYBfFg?si=xU2zqCtQW5-2z7nw">
<img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"</a>
Đoạn mã HTML này tạo một hình ảnh được liên kết không có đường viền. Và đây là cách nó sẽ xuất hiện trong Mẫu email của chúng tôi:
hình thu nhỏ được liên kết sẽ xuất hiện như thế này
Cách nhúng video YouTube vào mẫu email của bạn
Ngoài ra, bạn có thể nhúng trực tiếp video YouTube vào mẫu email của mình. Đây là cách thực hiện:
- Truy cập YouTube và chọn video bạn muốn nhúng.
- Nhấp vào chia sẻ -> nhúng và một
iframesẽ được tạo ra. Dưới đây là một ví dụ:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UG8rjxYBfFg?si=nYBBM032nvBn5tNZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
- Sao chép
iframevà dán nó vào<td>phần mã mẫu email HTML của bạn. Và bạn sẽ có một cái gì đó trông như thế này:
đây là ví dụ về video youtube trong mẫu email
Cách thêm âm thanh vào mẫu email của bạn
Việc thêm tệp âm thanh trực tiếp vào email cũng không được hầu hết các ứng dụng email hỗ trợ. Tương tự như video, bạn có thể thêm liên kết tới tệp âm thanh:
- Lưu trữ tệp âm thanh :Tải tệp âm thanh của bạn lên nền tảng hoặc máy chủ phù hợp. Hiện có một số nền tảng âm thanh, như Google Drive, trang web của riêng bạn, YouTube, đám mây âm thanh, v.v.
- Đối với ví dụ này, chúng tôi sẽ sử dụng nền tảng có tên audio.com. Chỉ cần tạo tài khoản bằng cách nhấp vào "tham gia miễn phí ngay bây giờ" hoặc đăng nhập nếu bạn đã có tài khoản.
Nhấp vào tải lên và chọn tệp .mp3 sẽ được lưu trữ trong tài khoản của bạn. Sau khi nghe xong âm thanh, hãy nhấp vào biểu tượng chia sẻ.
- Thao tác này sẽ đưa bạn đến một số tùy chọn nơi bạn có thể sao chép liên kết hoặc chỉ cần nhúng liên kết:
Nhấp vào nhúng và bạn sẽ thấy bản xem trước về cách âm thanh của bạn sẽ xuất hiện. Sao chép mã và dán vào phần mẫu email của bạn.
mã được tạo bởi audio.com có thể được nhúng vào mẫu email
Bạn cũng có thể loại bỏ div và chỉ cần sử dụng iframe . Ngoài ra, vui lòng xóa những phần bạn không muốn xuất hiện trong mẫu email và tùy chỉnh nó theo sở thích của bạn.
Đây là mã:
<div style="height: 228px; width: 600px;">
<iframe src="https://audio.com/embed/audio/1797114509131910?theme=image"
style="display:block; border-radius: 6px; border: none; height: 204px; width: 600px;"></iframe><a href='https://audio.com/nyayic-fanny' style="text-align: center; display: block; color: #A4ABB6; font-size: 12px; font-family: sans-serif; line-height: 16px; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@nyayic-fanny</a>
</div>
Đây là kết quả cuối cùng của chúng tôi cho vấn đề trên:
âm thanh của chúng tôi sẽ xuất hiện như thế này trong mẫu email của chúng tôi
Sử dụng audio thẻ
Bên cạnh việc nhúng, chúng ta có thể sử dụng thẻ âm thanh và chỉ cần thêm URL vào nguồn âm thanh của mình như hiển thị bên dưới:
<p>Audio added via audio tag</p> <br><br>
<audio controls="controls">
<source src="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">
<p>? Listen: <a href="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">Audio</a> (mp3)</p>
</audio>
Chỉ cần thay đổi URL thành audio url của bạn . Và toàn bộ quá trình sửa đổi của chúng ta sẽ trông như thế này.
mẫu email html đã sửa đổi của chúng tôi
Lưu ý: Hotmail và các ứng dụng khách không hỗ trợ HTML5 sẽ không hoạt động!
Khi tích hợp phương tiện vào email HTML, hãy xem xét các mẹo sau để tối ưu hóa khả năng tương thích và trải nghiệm người dùng:
- Luôn sử dụng URL đầy đủ, tuyệt đối cho hình ảnh, video và âm thanh để đảm bảo chúng tải chính xác trong tất cả ứng dụng email.
- Kiểm tra email của bạn:Các ứng dụng email khác nhau hiển thị nội dung HTML theo nhiều cách khác nhau. Sử dụng các công cụ như Litmus hoặc Email on Acid để kiểm tra cách email của bạn hiển thị trên các nền tảng khác nhau.
- Lưu ý đến thời gian tải:Tối ưu hóa kích thước tệp phương tiện để đảm bảo email của bạn tải nhanh, điều này rất quan trọng để duy trì sự chú ý của người nhận và cải thiện mức độ tương tác.
- Xem xét khả năng truy cập:Cung cấp văn bản thay thế mô tả cho hình ảnh và chú thích hoặc bản ghi cho nội dung âm thanh và video.
Mặc dù có những hạn chế đối với những gì ứng dụng email có thể hỗ trợ, nhưng việc sử dụng hình ảnh được liên kết cho tệp video và âm thanh sẽ cung cấp giải pháp thân thiện với người dùng, hoạt động trên hầu hết các nền tảng.
Luôn đảm bảo bạn kiểm tra email kỹ lưỡng và làm theo các phương pháp hay nhất để đảm bảo trải nghiệm người dùng suôn sẻ và hấp dẫn.
Chúc bạn viết mã vui vẻ!
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu