ساخت ایمیل تمپلیت با Tailwind CSS

1 مقدمه ایمیل تمپلیت (رایگان)
2
ساختار HTML ایمیل
3
CSS در ایمیل (Inline Styles)
4
Layout جدولی (Table-based)
5
ایمیل خوش‌آمدگویی
6
ایمیل خبرنامه
7
ایمیل تبلیغاتی و فروش
8
ایمیل تأیید سفارش
9
تست و سازگاری کلاینت‌ها
10
پروژه عملی: مجموعه ایمیل تمپلیت
درس 1 از 10
⏱ 15 دقیقه

مقدمه ایمیل تمپلیت

مقدمه ایمیل تمپلیت

ایمیل تمپلیت‌ها HTML های ریسپانسیو هستند که در کلاینت‌های ایمیل نمایش داده می‌شوند.

چالش‌های ایمیل HTML:

  • پشتیبانی محدود CSS: بسیاری از CSS3 پشتیبانی نمی‌شود
  • Template های جدولی: اکثر کلاینت‌ها به table layout نیاز دارند
  • Inline Styles: اکثر کلاینت‌ها style tag را حذف می‌کنند
  • تست در کلاینت‌های مختلف: Gmail, Outlook, Apple Mail

ابزارهای کمکی:

  • Maizzle: فریمورک ایمیل با Tailwind CSS
  • HEML: زبان markup برای ایمیل
  • MJML: فریمورک ایمیل Responsive
  • Litmus: تست ایمیل در کلاینت‌های مختلف

ساختار ایمیل HTML:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عنوان ایمیل</title>
  <!--[if mso]><style>table{border-collapse:collapse;}</style><![endif]-->
</head>
<body style="margin:0; padding:0; background-color:#f4f4f7; font-family:Arial,sans-serif;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" style="padding:40px 0;">
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="background:#ffffff;">
          <tr>
            <td style="padding:40px; text-align:center;">
              <h1 style="margin:0; font-size:24px; color:#333333;">عنوان ایمیل</h1>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
درس بعدی →