آموزشها
قالبها
افزونه‌ها
آکادمی
هاست وردپرس
طراحی سایت
فرمانسفارش سازی قالب ایمیل وردپرس با Email Templates
- افزونه وردپرسمقالات آموزشی
- بروزرسانی شده در
ایمیلهای پیش‌فرض وردپرس ساده‌ان و معمولا شباهت زیادی به ظاهر سایتتون ندارن. با افزونه Email Templates Customizer and Designer for WordPress and WooCommerce میتونید نام فرستنده، لوگو، رنگ‌ها، متن‌ها و چیدمان این ایمیلها رو بدون کدنویسی تغییر بدید.
توی این آموزش، اول افزونه رو نصب می‌کنیم و بعد سفارشیسازی قالب ایمیل وردپرس رو قدم‌به‌قدم جلو می‌بریم. سراغ ایمیلهای ووکامرس، پیشنمایش زنده، ارسال ایمیل آزمایشی و انتقال تنظیمات هم می‌ریم. در آخر، مشکلات رایج رو بررسی می‌کنیم تا راحت‌تر به یک قالب ساده و هماهنگ با برند سایتتون برسید.
آنچه در این مقاله می‌خوانید
افزونه Email Templates چه کاری برای سایتتون انجام میده؟
این افزونه ظاهر ایمیل‌هایی رو عوض می‌کنه که وردپرس برای کارهایی مثل بازیابی رمز عبور یا اطلاع‌رسانی به مدیر سایت می‌فرسته. میتونید یک قالب آماده رو شخصی‌سازی کنید و هم‌زمان نتیجه تغییرات رو در پیشنمایش ببینید.
- ظاهر ایمیلهای وردپرس رو بدون نیاز به کدنویسی تغییر می‌دید.
- نام و آدرس فرستنده، لوگو، رنگ‌ها، نوشته‌ها و پابرگ رو تنظیم می‌کنید.
- برای ایمیلهای وردپرس و ووکامرس ظاهر هماهنگ‌تری می‌سازید.
یادتون نره که طراحی ایمیل با حل مشکل ارسال اون فرق داره. Email Templates ظاهر پیام رو عوض می‌کنه، ولی تضمینی برای رسیدن ایمیل به صندوق ورودی نمیده. اگه ایمیلهای سایت ارسال نمی‌شن یا وارد پوشه اسپم میشن، باید روش ارسال و تنظیمات ایمیل سایتتون رو جداگانه بررسی کنید.
قبل از شروع به چه چیزهایی نیاز دارید؟
برای شروع باید به پیشخوان وردپرس و بخش نصب افزونه‌ها دسترسی داشته باشید. لوگوی سایت، رنگ اصلی برند و نامی رو هم که می‌خواید به‌عنوان فرستنده دیده بشه آماده کنید تا وسط کار دنبال این موارد نگردید.
- دسترسی مدیر به پیشخوان وردپرس
- آخرین نسخه افزونه Email Templates
- لوگوی سبک و واضح، ترجیحا با پس‌زمینه مناسب
- رنگ اصلی برند و مشخصات فرستنده
حتما نسخه فعلی افزونه رو نصب کنید. نسخه‌های ۱.۴.۲ و پایین‌تر در قابلیت ارسال ایمیل آزمایشی یک مشکل امنیتی شناخته‌شده داشتن که در نسخه ۱.۴.۳ برطرف شده.
نصب افزونه Email Templates در وردپرس
از پیشخوان وردپرس به بخش «افزونه‌ها ← افزودن افزونه تازه» برید. عبارت کامل Email Templates Customizer and Designer for WordPress and WooCommerce رو جستجو کنید تا افزونه مشابهی رو اشتباهی نصب نکنید. اگه هنوز با افزونه‌ها آشنا نیستید، مطلب افزونه وردپرس چیست و چطور کار می‌کنه مسیر رو براتون روشن‌تر می‌کنه.
وقتی افزونه رو پیدا کردید، روی «هم‌اکنون نصب نمایید» و بعد «فعال نمایید» کلیک کنید. بعد از فعال‌سازی، منوی Email Templates به پیشخوان اضافه میشه. برای طراحی ایمیلهای عادی وردپرس، مسیر «Email Templates ← WordPress Email» رو باز کنید.
سفارشیسازی قالب ایمیلهای وردپرس
صفحه تنظیمات، بخش‌های مختلف قالب رو از هم جدا کرده تا راحت‌تر روی هر قسمت کار کنید. بهتره از مشخصات فرستنده شروع کنید و بعد به‌ترتیب سراغ چیدمان، سربرگ، بدنه و پابرگ برید.
تنظیم نام و آدرس ایمیل فرستنده
در بخش Settings، نام فرستنده و آدرس ایمیلی رو وارد کنید که می‌خواید دریافت‌کننده ببینه. یک نام واضح مثل نام فروشگاه یا برند سایتتون انتخاب کنید تا مخاطب زود متوجه بشه پیام از طرف چه سایتی فرستاده شده.
انتخاب چیدمان Boxed یا Full Width
در بخش Template میتونید بین Boxed و Full Width یکی رو انتخاب کنید. در حالت Boxed، محتوای ایمیل داخل یک کادر با عرض مشخص دیده میشه. Full Width هم قالب رو با عرض بیشتری نشون میده. برای بیشتر ایمیلهای اطلاع‌رسانی، حالت Boxed ساده‌تر و خواناتر به نظر می‌رسه.
تغییر رنگ پس‌زمینه و عرض قالب
رنگ پس‌زمینه و عرض کادر ایمیل رو از همین بخش تغییر بدید. عرض خیلی زیاد، خوندن متن رو سخت می‌کنه؛ پس قالب رو طوری تنظیم کنید که نوشته‌ها روی کامپیوتر و موبایل راحت دیده بشن. برای پس‌زمینه هم یک رنگ ملایم انتخاب کنید تا تمرکز مخاطب روی محتوای اصلی بمونه.
طراحی سربرگ و اضافه‌کردن لوگو
در بخش Header میتونید لوگو یا متن دلخواهتون رو بالای ایمیل بذارید. محل سربرگ، رنگ پس‌زمینه، اندازه نوشته و رنگ اون هم در همین بخش تنظیم میشن. لوگوی خیلی بزرگ فضای زیادی می‌گیره، پس قبل از انتخابش اندازه و حجم فایل رو بررسی کنید.
تنظیم ظاهر متن‌ها و لینک‌های ایمیل
بخش Email Body برای تنظیم ظاهر بدنه اصلی ایمیله. اینجا میتونید رنگ پس‌زمینه، رنگ و اندازه متن و رنگ لینک‌ها رو مشخص کنید. بین رنگ نوشته و پس‌زمینه تضاد کافی بذارید تا متن راحت خونده بشه و لینک‌ها هم با نوشته‌های عادی اشتباه گرفته نشن.
طراحی پابرگ ایمیل
در بخش Footer میتونید متن پابرگ، رنگ پس‌زمینه و اندازه نوشته رو مشخص کنید. نام سایت یا یک توضیح کوتاه انتخاب‌های خوبی برای این قسمت هستن. بهتره متن پابرگ کوتاه و کاربردی بمونه تا انتهای ایمیل شلوغ نشه.
اضافه‌کردن CSS سفارشی به قالب
CSS به کدهایی گفته میشه که ظاهر بخش‌های مختلف رو کنترل می‌کنن. اگه با CSS آشنا هستید، میتونید از قسمت کد سفارشی برای تغییر جزئیات بیشتری استفاده کنید. اگه تجربه کدنویسی ندارید، بهتره این بخش رو خالی بذارید؛ چون بعضی سرویس‌های ایمیل همه کدهای ظاهری رو به یک شکل نشون نمی‌دن.
سفارشیسازی ایمیلهای ووکامرس
اگه فروشگاه اینترنتی دارید، از مسیر «Email Templates ← WooCommerce Email» وارد تنظیمات ایمیلهای ووکامرس بشید. ووکامرس همون افزونه‌ایه که امکانات فروشگاه اینترنتی رو به وردپرس اضافه می‌کنه. برای آشنایی بیشتر با تفاوت این دو، راهنمای تفاوت وردپرس و ووکامرس رو بخونید.
ورود به بخش WooCommerce Email
این بخش پیشنمایش و تنظیمات پیام‌های فروشگاه رو نشون میده. قبل از اینکه گزینه‌ای رو تغییر بدید، مطمئن بشید ووکامرس روی سایتتون نصب و فعال شده تا تنظیمات اون در دسترس باشه.
انتخاب نوع ایمیل ووکامرس
نوع ایمیلی رو انتخاب کنید که می‌خواید پیش‌نمایشش رو ببینید؛ مثلا پیام مربوط به یک سفارش. با این انتخاب بهتر متوجه می‌شید نوشته‌ها، رنگ‌ها و فاصله‌ها در یک ایمیل واقعی چطور کنار هم قرار می‌گیرن.
هماهنگ‌کردن رنگ، لوگو و چیدمان ایمیلها با برند سایتتون
برای ایمیلهای فروشگاه هم از لوگو و رنگ‌های اصلی سایتتون استفاده کنید. لازم نیست همه بخش‌ها رنگی باشن. یک رنگ اصلی برای لینک‌ها یا قسمت‌های مهم، در کنار پس‌زمینه روشن و متن خوانا، معمولا نتیجه مرتب‌تری میده.
بررسی تغییرات با پیشنمایش زنده
وقتی تنظیمات رو تغییر می‌دید، پیشنمایش زنده رو هم زیر نظر بگیرید. با این پیشنمایش میتونید قبل از ارسال ایمیل، ترکیب رنگ‌ها، اندازه لوگو، فاصله متن‌ها و ظاهر لینک‌ها رو بررسی کنید.
- مطمئن بشید قالب در عرض‌های مختلف مرتب دیده میشه.
- خوانایی متن‌ها و مشخص‌بودن لینک‌ها رو بررسی کنید.
- نمایش لوگو، رنگ سربرگ و پابرگ رو کنترل کنید.
- متن‌های بلند رو هم امتحان کنید تا از کادر بیرون نزنن.
ارسال ایمیل آزمایشی
بعد از ذخیره تنظیمات، یک آدرس ایمیل در دسترس رو در بخش ارسال ایمیل آزمایشی وارد کنید و دکمه ارسال رو بزنید. فقط به پیشنمایش افزونه اکتفا نکنید؛ ایمیلی که واقعا به صندوق ورودی می‌رسه، تصویر دقیق‌تری از نتیجه نهایی بهتون میده.
- آدرس ایمیل آزمایشی رو وارد کنید.
- نمونه ایمیل رو بفرستید.
- صندوق ورودی و پوشه اسپم رو بررسی کنید.
- ایمیل رو روی موبایل و کامپیوتر باز کنید.
درونریزی و برونریزی تنظیمات قالب ایمیل
قابلیت Import و Export برای انتقال تنظیمات ظاهری به کار میاد. Export یعنی از تنظیمات فعلی یک نسخه می‌گیرید. Import هم یعنی همون تنظیمات رو دوباره وارد می‌کنید. این قابلیت برای پشتیبان‌گیری یا انتقال طراحی ایمیل به یک سایت دیگه مفیده.
فایل خروجی رو در جای امنی نگه دارید. قبل از واردکردن تنظیمات در سایت دیگه هم بهتره از وضعیت فعلی اون سایت نسخه پشتیبان بگیرید تا اگه نتیجه دلخواه نبود، راه برگشت داشته باشید.
مشکلات رایج افزونه Email Templates و راه‌حل اونها
ایمیل آزمایشی ارسال نمی‌شه
اول پوشه اسپم رو ببینید و از درست‌بودن آدرس مقصد مطمئن بشید. اگه پیام اصلا نمی‌رسه، شاید مشکل از روش ارسال ایمیل وردپرس یا تنظیمات هاست باشه، نه طراحی قالب. در این شرایط باید گزارش ارسال ایمیل و تنظیمات سرویس ایمیل سایتتون رو جداگانه بررسی کنید. پیشنهاد میشه برای ارسال ایمیلهای سایتتون از SMTP هاستتون یا از سرورهای SMTP استفاده کنید!
تغییرات قالب در ایمیل دیده نمی‌شه
تنظیمات رو دوباره ذخیره کنید و یک ایمیل آزمایشی تازه بفرستید. ایمیل قبلی داخل صندوق ورودی با تغییر قالب به‌روز نمی‌شه. اگه افزونه دیگهای هم برای طراحی ایمیل دارید، ممکنه تداخل بین دو افزونه نتیجه رو تغییر بده.
لوگو یا رنگ‌ها درست نمایش داده نمی‌شن
آدرس لوگو رو بررسی کنید و مطمئن بشید فایل از بیرون سایت هم دیده میشه. بعضی برنامه‌های ایمیل، تصاویر رو تا وقتی کاربر اجازه نده مخفی می‌کنن. برای رنگ‌ها هم یک ترکیب ساده انتخاب کنید و نتیجه رو در چند سرویس ایمیل ببینید.
ایمیلها وارد پوشه اسپم میشن
قالب زیبا به‌تنهایی جلوی اسپم‌شدن ایمیل رو نمی‌گیره. مشخصات فرستنده، روش ارسال، اعتبار دامنه و محتوای پیام روی این موضوع اثر می‌ذارن. نام و آدرس فرستنده رو ثابت و معتبر نگه دارید و تنظیمات ارسال دامنه رو با کمک هاست یا سرویس ایمیلتون بررسی کنید.
قالب ایمیل در موبایل به‌هم‌ریخته‌ست
اول کدهای CSS سفارشی رو موقتا حذف کنید و دوباره ایمیل بفرستید. لوگوی خیلی عریض، جدول‌های پیچیده و اندازه‌های ثابت ممکنه ظاهر ایمیل در موبایل رو خراب کنن. چیدمان ساده و تصاویر سبک معمولا سازگاری بهتری دارن.
نکات مهم برای طراحی بهتر ایمیلهای وردپرس
- چیدمان رو ساده نگه دارید تا پیام سریع فهمیده بشه.
- از رنگ‌هایی استفاده کنید که با سایتتون هماهنگن و متن رو ناخوانا نمی‌کنن.
- لوگویی با حجم کم و اندازه مناسب انتخاب کنید.
- سراغ CSS پیچیده نرید؛ چون برنامه‌های ایمیل کدها رو یکسان نشون نمی‌دن.
- هر تغییر مهم رو در چند سرویس ایمیل و روی موبایل امتحان کنید.
- نام فرستنده رو واضح بنویسید تا مخاطب منبع پیام رو بشناسه.
جمع‌بندی
Email Templates راه ساده‌ای برای سفارشیسازی قالب ایمیل وردپرس و ووکامرس در اختیارتون می‌ذاره. با تنظیم نام فرستنده، چیدمان، رنگ‌ها، لوگو، بدنه و پابرگ میتونید ظاهر پیام‌های سایت رو به برندتون نزدیک‌تر کنید.
بعد از طراحی، حتما یک ایمیل آزمایشی بفرستید و نتیجه رو در موبایل، کامپیوتر و چند سرویس ایمیل بررسی کنید. اگه پیام ارسال نمی‌شه یا به اسپم می‌ره، تنظیمات ارسال ایمیل سایتتون رو جدا از ظاهر قالب بررسی کنید.
سؤال‌های رایج درباره سفارشیسازی قالب ایمیل وردپرس
آیا برای کار با Email Templates به کدنویسی نیاز دارید؟
نه، تنظیمات اصلی افزونه با گزینههای آماده انجام میشن. فقط بخش CSS سفارشی به دانش کدنویسی نیاز داره و استفاده از اون هم اجباری نیست.
آیا این افزونه ایمیلهای ووکامرس رو هم تغییر میده؟
بله، افزونه یک بخش جداگانه برای سفارشیسازی و پیشنمایش ایمیلهای ووکامرس داره. برای دیدن این بخش باید ووکامرس روی سایتتون فعال باشه.
آیا تغییر قالب باعث بهترشدن تحویل ایمیلها میشه؟
نه لزوما. این افزونه ظاهر پیام رو تغییر میده. رسیدن ایمیل به صندوق ورودی به روش ارسال، تنظیمات دامنه، سرویس ایمیل و محتوای پیام هم بستگی داره.
چرا ایمیل آزمایشی به دستتون نمی‌رسه؟
ممکنه آدرس مقصد اشتباه باشه، پیام وارد پوشه اسپم شده باشه یا روش ارسال ایمیل وردپرس درست کار نکنه. اول پوشه اسپم و آدرس مقصد رو بررسی کنید و بعد سراغ تنظیمات ارسال سایت برید.
آیا میتونید تنظیمات قالب رو به سایت دیگهای منتقل کنید؟
بله، با قابلیت برونریزی میتونید از تنظیمات ظاهری خروجی بگیرید و با درونریزی اونها رو به سایت دیگهای منتقل کنید. قبل از درونریزی بهتره از تنظیمات فعلی سایت مقصد نسخه پشتیبان داشته باشید.
سلام چجور ایمیل رو رسپانسیو کنم ؟
با گوشیم میرم درست نمایش نمیده
چیکار کنم ؟
خودم قالب رو راست چین و فونت هاش رو تغییر دادم از طریق کدهای سفارشی
میتونم از همین طریق رسپانسیو کنم ؟
سلام باید کدنویسی قالب و ریسپانسیو رو یاد بگیرید. توی آموزش ۰ تا ۱۰۰ طراحی سایت توضیح دادیم بصورت کامل
سلام خسته نباشید
این افزونه عالیه ولی مشکل اینجاس چپ چینه میشه یه اموزشی برای راست چین کردنش بزارید؟ممنون میشم
سلام در حال حاضر تمرکز ما روی بهبود محصولات سایت هست اما بله در صورتی که وقت شد حتما
بازم مثله همیشه عالی بود
ممنون از لطف شما