راهنمای طراحی ایمیل در ویرایشگر Drag & Drop New

آشنایی اولیه با ابزار طراحی ایمیل

هنگام ساخت کمپین جدید، ابزار طراحی (Drag & Drop (new را انتخاب می‌کنیم.

 پنل (Drag & Drop (new

صفحه باز شده، یک قالب ایمیل پیش‌فرض شامل چند بلاک (بخش) مختلف است که می‌توانید آن را تغییر دهید و قالب ایمیل مد نظر خود را بسازید. 

راهنمای استفاده از پنل (Drag & Drop (new

منوی Actions

با کمک گزینه‌های این منو می‌توانید:

a. مراحل پیشین طراحی ایمیل را ببینید و بازیابی کنید.

b. پیش‌نمایش ایمیل را ببینید.

c. ایمیل تستی ارسال کنید.

منوی Actions پنل نجوا

نمایش موبایلی

با کمک این گزینه می‌توانید نحوه نمایش ایمیل را در صفحه موبایل چک کنید و تغییرات لازم را (مانند طراحی در دسکتاپ) اعمال نمایید.

نمایش موبایلی پنل (Drag & Drop (new

جعبه ابزار

در جعبه ابزار سمت چپ، 3 سربرگ content، my content ، design وجود دارد که هر کدام را در ادامه بررسی خواهیم کرد.

جعبه ابزار (Drag & Drop (new

  1. سربرگ Content:
    از این بخش شما می‌توانید بلاک‌های مورد نیاز برای وارد کردن محتوا به ایمیل را پیدا کرده و با انتخاب و کشیدن ماوس (Drag & Drop) آن را به قالب ایمیل خود اضافه نمایید. هنگام اضافه کردن بلاک به قالب ایمیل، یک خط آبی زیر آن می‌بینید که نشان‌دهندهٔ مکان اضافه شدن آن بلاک است.سربرگ Content
  2. سربرگ My content:
    شما می‌توانید هر بلاک دلخواه را برای استفاده در کمپین‌های بعدی خود ذخیره کنید. (برای اطلاع از نحوهٔ ذخیره بلاک، به  بخش «تنظیمات بلاک» در همین  راهنما مراجعه کنید). بلاک‌های ذخیره شده را می‌توانید در سربرگ My content ببینید و آن‌ها را به قالب ایمیل خود بیافزایید.
  3. سربرگ Design:‌‌‌
    در این بخش می‌توانید قالب ایمیل را شخصی‌سازی نمایید. این بخش شامل 4 منوی Template ، Text Appearance ،Buttons ، Spacing است که در ادامه توضیح داده می‌شود.
    سربرگ Design

منوی Template

a. تغییر رنگ پس‌زمینه ایمیل

b. اضافه کردن عکس پس‌زمینه

c. اضافه کردن عکس با آدرس url

d.  رنگ پس‌زمینه بلاک

e. عرض بلاک

f. اضافه کردن لینک «نمایش در صفحه وب» (این گزینه بهتر است فعال باشد)

منوی Template

منوی Text appearance

*برای جلوگیری از بهم‌ریختگی متن‌ها، بهتر است قبل از شروع طراحی ایمیل، تنظیمات فونت و سایر بخش‌های این قسمت را انجام دهید.

a. تنظیمات مربوط به فونت، سایز و رنگ در متن ایمیل

b. تنظیمات مربوط به رنگ و نمایش لینک‌ها

c. فاصلهٔ خطوط از هم

d. انتخاب چپ‌چین یا راست‌چین بودن متن

منوی Text appearance

منوی Buttons

a. تنظیمات مربوط به فونت، سایز، رنگ و نمایش متن روی دکمه‌ها

b. عرض دکمه‌ها

c. انحنای گوشهٔ دکمه‌ها

d. رنگ دکمه‌ها

e. انتخاب سایز و رنگ کادر دور دکمه‌ها

منوی Buttons

منوی Spacing

با فعال کردن این بخش می‌توانید حاشیهٔ محتوای هر بلاک با لبه‌های آن را تنظیم کنید.

منوی Spacing

بلاک‌ها و تنظیمات بلاک

انواع بلاک‌

  1. اضافه کردن عنوان
  2. اضافه کردن متن
  3. اضافه کردن تصویر
  4. اضافه کردن دکمه
  5. اضافه کردن شبکه‌های اجتماعی
  6. اضافه کردن کد HTML
  7. این بلاک برای اضافه کردن چیدمان‌های مختلف دوتایی، سه‌تایی و تمام صفحه استفاده می‌شود.
  8. اضافه کردن سربرگ (لوگو)
  9. اضافه کردن پاورقی (اطلاعات تماس و لینک «لغو عضویت»)
  10. اضافه کردن خطوط افقی
  11. اضافه کردن منو (لینک‌های مورد نظر)

بلاک‌ها و تنظیمات بلاک

با کلیک کردن روی هر بلاک، یک نوار ابزار در سمت چپ صفحه ظاهر می‌شود که می‌توانید با استفاده از آن، تنظیمات بلاک مورد نظر را انجام دهید.

  • این تنظیمات برای همهٔ بلاک‌ها یکسان است.
  • توضیحات هر بخش در ادامه آمده.
  • مطابق شکل، هر بلاک شامل دو بخش محتوا و بدنه است.

تنظیمات بلاک

  1. منوی Background
    1. از این قسمت می‌توانید انتخاب کنید که تغییرات پس زمینه به بخش محتوا یا کل بلاک اعمال شود.
    2. تغییر رنگ پس‌زمینه
    3. اضافه کردن تصویر پس‌زمینه
    4. لینک تصویر پس‌زمینه
      منوی Background
  2. منوی Block setting
    1. قرارگیری اجزای بلاک نسبت به هم
    2. فاصلهٔ اجزای بلاک از لبه‌ها
      منوی Block setting
  3. منوی Spacing
    1. فضای اطراف محتوا
    2. تعیین فاصلهٔ یک بلاک از بلاک‌های اطرافش
      منوی Spacing
  4. ابزار ظاهر شده در پایین بلاک برای موارد زیر استفاده می‌شود:

a. کپی کردن

b. نمایش یا عدم نمایش

c. تکرار کردن

d. ذخیره کردن

e. پاک کردن

منوی Spacing پنل ایمیل

اضافه کردن فونت فارسی

* ابزار طراحی ایمیل از برخی فونت‌های فارسی پشتیبانی می‌کند و می‌توانید فونت‌های دلخواه را به قالب ایمیل خود اضافه نمایید. اما ممکن است این وب فونت‌ها در برخی دستگاه‌ها پشتیبانی نشود. بنابراین بهتر است پیش از شروع طراحی، فونت پیش‌فرض را در تنظیمات سربرگ design انتخاب نمایید.

برای اضافه کردن فونت فارسی از مسیر سربرگ Design و منوی Text appearance، روی منوی کشویی انتخاب فونت کلیک کنید و روی گزینهٔ manage fonts + بزنید. در صفحهٔ باز شده، اسم فونت دلخواه را سرچ کنید و فونت پیدا شده را انتخاب نمایید.

در قسمت پایین صفحه، فونت fallback را انتخاب نمایید تا اگر دستگاهی فونت فارسی مورد نظر شما را پشتیبانی نکرد، فونت fallback نمایش داده شود.

اضافه کردن فونت فارسی

اضافه کردن فونت فارسی