ارسال ایمیل با قالب html (طراحی قالب ایمیل)
اگر به دنبال ارسال ایمیل با قالب سفارشی HTML به Outlook، Gmail یا هر ارائه دهنده دیگری باشید، این آموزش شما را راهنمایی می کند.
ایمیل تعاملی HTML یک ابزار قدرتمند است. کسبوکارها میتوانند از آنها برای معاملات تبلیغاتی استفاده کنند، فریلنسرها ممکن است از آن برای ارائه خدمات خود به مشتریان بالقوه استفاده کنند، و …. تنها دو فناوری که برای ایجاد یک ایمیل سفارشی از ابتدا نیاز دارید، HTML و CSS درون خطی هستند. تنها کاری که باید انجام دهید این است که یک طرح را در ذهن داشته باشید، آن را در قالب ردیفها و ستونهای جدول تجزیه و تحلیل کنید و شروع به ساختن کنید. در این مقاله، یک روش گام به گام برای ساخت و ارسال ایمیل با قالب سفارشی HTML را یاد خواهید گرفت.
قالب ایمیل را با استفاده از HTML بسازید
قالب ایمیل بر تکنیک های سنتی HTML متکی است. شما در تمام مدت با جداول کار می کنید و ردیف های جدول <tr> و داده های جدول <td> را روی هم می چینید . قالب اصلی ایمیل HTML به شکل زیر است :
<!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>
خروجی :
در اینجا، شما با DOCTYPE برای سند شروع می کنید. در مرحله بعد، مجموعه نویسه ها، نوع محتوا، متا تگ ها و عنوان را در تگ <head> تنظیم می کنید. بخش اساسی با تگ <body> شروع می شود که در آن یک <table> والدین را قرار می دهید و چندین ردیف جدول <tr> را داخل آن اضافه می کنید. پس از تقسیم محتوا به تعداد مناسب ردیف، نوبت به وارد کردن داده های جدول <td> در داخل آنها می رسد.
همانطور که گفته شد، شما باید فقط با جداول کار کنید. بنابراین برای وارد کردن داده های مختلف در تگ <td> باید مسیری تعریف شده را دنبال کنید. به عنوان مثال، بیایید یک الگوی ایمیل با یک لوگو و تاریخ در داخل یک تگ <td> تشکیل دهیم .
<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>
اکنون می دانید که چگونه تگ های HTML را قرار دهید و یک ساختار خوب برای قالب ایمیل خود بسازید. بیایید برای درک بهتر سبک ایمیل رو به جلو حرکت کنیم.
قالب ایمیل HTML خود را سبک بدهید
استایل دادن به ایمیل HTML یک کار دست و پا گیر است زیرا شما فقط می توانید از CSS درون خطی استفاده کنید. همچنین، شما باید یک ظاهر طراحی را برای هر عنصر تکرار کنید،
پیش نمایش :
<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://learnparsi.com/wp-content/uploads/2020/12/cropped-mono2-1.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" >سلام <b> دانشجویان عزیز لرن پارسی</b></span > </td> </tr> <tr> <td style=" padding-top: 5px; padding-bottom: 9px; background-color: white; " > <span style="color: #363636;" >از شرکت شما در دوره های آموزشی سایت لرن پارسی بسیار خوشنودیم. این تخفیف ویژه را که به مدت محدود می باشد از دست ندهید . </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"> فرصت محدود برای شرکت در دوره های جامع آموزشی! </div> <div style=" margin-top: 8px; color: #444; margin-bottom: 20px; " > تنها ۴ روز باقی مانده است. </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>
ارسال ایمیل
حالا کل صفحه html خود را کپی پیست کنید. اگر از VS Code استفاده می کنید، فایل HTML را با این ویرایشگر کد باز کنید و با کلیک بر روی Ctrl + A و سپس Ctrl + C محتوا را کپی کنید . در غیر اینصورت می توانید فایل html را با برنامه NotePad ویندوز باز کنید و سورس آن را کپی کنید. حالا جیمیل را باز کنید و یک ایمیل جدید بنویسید. محتوا را جایگذاری کنید و شناسه ایمیل گیرنده را وارد کنید. ایمیل را ارسال کنید و نتایج را مطابق شکل زیر دریافت خواهید کرد:
کد را روی دستگاه های مختلف تست کنید تا ببینید چطور به نظر می رسد و چگونه رفتار می کند. ایمیل HTML خود را سفارشی کنید و آن را تمیز، ساده و پاسخگو کنید.
ایجاد یک ایمیل HTML از ابتدا مستلزم تسلط کامل بر HTML و CSS درون خطی است. همچنین می توانید یک قالب ایمیل موجود را تغییر دهید و آن را مطابق با نیاز خود سفارشی کنید. (قالب هایی که در اینترنت برای دانلود موجود است) به خاطر داشته باشید که بارگذاری ایمیلهای HTML معمولاً چند ثانیه طول میکشد. برای نوشتن کدهای بهتر و قابل دسترس تر، می توانید درباره HTML و CSS اطلاعات بیشتری کسب کنید. ما یک دوره رایگان آموزش html داریم.
چگونه در اوت لوک کار می کند؟ با کپی پیست کردن بهم ریخته می شود. لطفا راهنمایی بفرمایید
“” اکنون کل صفحه html خود را کپی پیست کنید. اگر از VS Code استفاده می کنید، فایل HTML را با استفاده از پسوند سرور زنده باز کنید و با کلیک بر روی Ctrl + A > Ctrl + C محتوا را کپی کنید . “”
این مطلب گوگل ترنسلیت شده هستش؟
اصلا کارایی نداشت مطلبتون.
سلام دوست عزیز
ممنون از تذکر شما
مقاله مشکلی نداره به نظر من و هدف رو میرسونه
اصلاحات نگارشی انجام شد
الكي