Cách tạo và gửi email HTML tùy chỉnh
Email HTML tương tác là một công cụ mạnh mẽ. Các doanh nghiệp có thể sử dụng chúng cho các giao dịch quảng cáo, các dịch giả tự do có thể sử dụng chúng để quảng cáo dịch vụ của họ cho khách hàng tiềm năng và các cháu có thể mang lại nụ cười trên khuôn mặt của ông bà bằng một thiết kế tùy chỉnh dễ thương. Hai công nghệ duy nhất bạn sẽ cần để tạo một email tùy chỉnh từ đầu là HTML và CSS nội tuyến. Tất cả những gì bạn cần làm là ghi nhớ một thiết kế, phân tích nó dưới dạng các hàng và cột trong bảng, và bạn đã sẵn sàng để bắt đầu xây dựng. Trong bài viết này, bạn sẽ tìm hiểu phương pháp từng bước để tạo và gửi một email HTML tùy chỉnh.
Mục Lục
Tạo Mẫu Email bằng HTML
Mẫu email dựa trên các kỹ thuật HTML truyền thống. Bạn sẽ làm việc với các bảng và xếp chồng các hàng trong bảng
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MUO - Technology, Simplified</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>...</td>
</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
</body>
</html>
Đầu ra:
Tốt nhất là bạn nên chuẩn bị một bản thiết kế để bạn có thể vạch ra vị trí và cách bạn sắp xếp thiết kế. Ngoài ra, bạn sẽ chuẩn bị tinh thần để soạn thảo cấu trúc bảng từ đó.
Ở đây, bạn đang bắt đầu với DOCTYPE cho tài liệu. Tiếp theo, bạn đặt bộ ký tự, loại nội dung, thẻ meta và tiêu đề bên trong nhãn. Phần thiết yếu bắt đầu với gắn thẻ nơi bạn đặt cha mẹ
Như đã nói, bạn chỉ làm việc với các bảng. Do đó, để nhập dữ liệu khác nhau bên trong
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<!-- Logo and date inside <td> tag -->
<table>
<tbody>
<tr>
<td>
<img src="example-logo.png" />
</td>
<td>
<div>05 Dec, 2021</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Bây giờ bạn đã biết cách đặt các thẻ HTML và xây dựng cấu trúc tốt cho mẫu email của mình. Hãy tiếp tục để hiểu rõ hơn về kiểu email.
Tạo kiểu cho email HTML của bạn
Tạo kiểu cho một email HTML là một công việc phức tạp vì bạn chỉ có thể sử dụng CSS nội tuyến. Ngoài ra, bạn sẽ cần phải lặp lại kiểu dáng cho mọi phần tử nếu nó có kiểu dáng tương tự. Nếu bạn không quen với Trang tính kiểu xếp tầng, hãy khám phá cách bắt đầu với CSS.
Xem trước:
<body style="font-family: Arial; margin: 0; font-size: 20px">
<table style=" background-color: #f3f3f5; padding: 16px 12px; min-height: 100vh; width: 80%; margin: 0 auto; " >
<tbody>
<tr>
<td style="vertical-align: top">
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" style=" width: 600px !important; min-width: 600px !important; max-width: 600px !important; margin: auto; border-spacing: 0; border-collapse: collapse; background: white; border-radius: 8px; padding-left: 30px; padding-right: 30px; padding-top: 30px; padding-bottom: 30px; display: block; " >
<tbody>
<tr>
<td style=" text-align: center; vertical-align: top; border-collapse: collapse; " >
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#F8F8F8" style="border-spacing: 0; border-collapse: collapse" >
<tbody>
<tr style="background-size: cover">
<td style=" width: 60%; text-align: left; border-collapse: collapse; background: #fff; border-radius: 10px 10px 0px 0px; color: white; height: 50px; " > <img src="https://www.smartreviewaz.com/public/build/images/muo-amp-logo.2eef8ce3.png" width="120px" class="CToWUd"/> </td>
<td style=" width: 40%; text-align: right; border-collapse: collapse; background: #fff; border-radius: 10px 10px 0px 0px; color: white; height: 50px; " >
<div style="color: #828282; font-size: 14px"> 05 Dec, 2021 </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: top; border-collapse: collapse">
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#F8F8F8" style="border-spacing: 0; border-collapse: collapse" >
<tbody>
<tr>
<td style=" padding-top: 30px; padding-bottom: 5px; background-color: white; " > <span style="color: #363636" >Hi <b>John Doe</b></span > </td>
</tr>
<tr>
<td style=" padding-top: 5px; padding-bottom: 9px; background-color: white; " > <span style="color: #363636;" >Thank you for visiting our site. We hope you learnt something new today.</span > </td>
</tr>
<tr style="background-color: #ffd4e3">
<td style=" padding: 16px; border-collapse: collapse; border-radius: 8px; " >
<div style="color: #363636; font-weight: bold"> Your opinion matters to us! </div>
<div style=" margin-top: 8px; color: #444; margin-bottom: 20px; " > Rate our articles here. </div>
<div style="width: 100%; display: flex"> <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >0</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >1</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >2</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >3</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >4</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >5</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >6</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >7</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >8</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; margin-right: 9px; background: #ffffff; " >9</span > <span style=" width: 8%; padding-top: 9px; padding-bottom: 8px; border-radius: 20%; border: 1px solid #f4a1bd; display: block; margin-bottom: 5px; font-weight: bold; text-align: center; background: #ffffff; " >10</span > </div>
</td>
</tr>
<tr>
<td style="background: #ffffff; height: 20px"></td>
</tr>
<tr>
<td bgcolor="#F8F8F8" style=" border-radius: 8px !important; border-collapse: collapse; " ></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
Đầu ra:
Nếu muốn, bạn có thể truy cập mã hoàn chỉnh trên GitHub và sao chép kho lưu trữ để sử dụng.
Gửi thư
Bây giờ sao chép và dán toàn bộ mã từ GitHub. Nếu bạn đang sử dụng VS Code, hãy mở tệp HTML bằng tiện ích mở rộng máy chủ trực tiếp và sao chép nội dung bằng cách nhấp vào Ctrl + A > Ctrl + C. Mở Gmail và soạn email mới. Dán nội dung và nhập id thư của người nhận. Gửi email và bạn sẽ nhận được kết quả như hình dưới đây:
Kiểm tra mã trên các thiết bị khác nhau để xem nó trông như thế nào và hoạt động như thế nào. Tùy chỉnh email HTML của bạn và làm cho nó sạch sẽ, đơn giản và đáp ứng.
Sửa đổi các Mẫu Email Hiện tại
Tạo một email HTML từ đầu đòi hỏi bạn phải nắm chắc HTML và CSS nội tuyến. Bạn cũng có thể sửa đổi mẫu email hiện có và tùy chỉnh nó theo nhu cầu của bạn. Hãy nhớ rằng email HTML có xu hướng mất vài giây để tải lên. Lập kế hoạch, thiết kế, viết mã và tiến hành kiểm tra kỹ lưỡng để tránh bất kỳ sự mâu thuẫn nào của người dùng cuối. Bạn có thể tìm hiểu thêm về HTML và CSS ngữ nghĩa để viết mã tốt hơn, dễ tiếp cận hơn.
Đọc tiếp
Giới thiệu về tác giả
