وبادیتور ساخت تمپلیت ایمیل با قابلیت Drag-and-Drop (انگلیسی/فارسی)
یک پلتفرم وبمحور برای طراحی تمپلیتهای ایمیل که امکان کشیدن و رها کردن المانها، پشتیبانی از زبانهای فارسی و انگلیسی (RTL و LTR) و قابلیت شخصیسازی حرفهای را فراهم میکند.
۱. ویژگیهای اصلی
الف) Drag-and-Drop Builder
کتابخانه المانهای ازپیشساخته:
متن (با ویرایشگر Rich Text)، تصاویر، دکمههای فراخوان (Call-to-Action)، جداول، خطوط جداکننده، آیکون شبکههای اجتماعی، اسلایدر تصاویر.
المانهای خاص ایمیل: لوگو، هدر، فوتر، بخش لغو اشتراک (Unsubscribe)، بلوک محصول (برای ایمیلهای تجاری).
قالبهای آماده: تمپلیتهای پیشفرض برای مواردی مانند تخفیفها، خبرنامهها، دعوتنامهها، همراه با امکان شخصیسازی.
ب) شخصیسازی پیشرفته
استایلدهی: تغییر فونت، رنگ، اندازه، پسزمینه، حاشیه و تراز متن (راست/چپ/وسط).
پشتیبانی از متغیرها: امکان استفاده از متغیرهای دینامیک مانند {نام} و {شماره سفارش} برای ارسال شخصیسازیشده.
ریسپانسیو بودن: پیشنمایش و تنظیمات پیشرفته برای موبایل و دسکتاپ، همراه با تنظیم Breakpointهای دلخواه.
ج) پشتیبانی از زبانهای فارسی و انگلیسی
راستچین (RTL):
پشتیبانی از جهت متن، اعداد، تاریخها و آیکونها در حالت فارسی.
شامل کتابخانه فونتهای فارسی (مثل Vazir، Sahel) یا امکان آپلود فونت دلخواه.
ترجمه رابط کاربری:
تمامی کلیدها، منوها، و راهنماها به دو زبان، همراه با امکان سوئیچ لحظهای.
د) پیشنمایش و تست
پیشنمایش زنده: تغییرات در زمان واقعی در یک پنجره پیشنمایش.
تست ارسال: ارسال نسخه تست به ایمیل برای بررسی عملکرد نهایی.
تست Cross-Client: مشاهده پیشنمایش در کلاینتهای مختلف مانند Gmail، Outlook و Apple Mail.
ه) خروجی
کد HTML سازگار با ایمیلها: خروجی بهینهسازیشده با inline CSS برای تضمین سازگاری.
ذخیره به JSON: امکان ویرایش مجدد در وبادیتور.
یکپارچگی با سرویسها: اتصال مستقیم به سرویسهایی مانند Mailchimp، SendGrid و HubSpot.
۲. جزئیات فنی و معماری
هدف اصلی
ایجاد ابزاری ساده و قدرتمند برای طراحی ایمیلهای تعاملی و قابل شخصیسازی که خروجی آن با کلاینتهای ایمیل سازگار باشد.
جزئیات فنی
فرانتاند:
رابط Drag-and-Drop با تنظیمات استایلی کامل.
پیشنمایش زنده و پشتیبانی کامل از RTL و LTR.
ذخیره خودکار پیشرفت کاربر.
بکاند:
APIها برای ایجاد، ویرایش و مدیریت تمپلیتها.
قابلیت بازگردانی نسخههای قبلی تمپلیتها.
کانتینرزاسیون (Docker):
استفاده از فایلهای Dockerfile و Docker-compose برای مدیریت سرویسها.
ساختار کانتینر جداگانه برای سرور و پایگاه داده.
مزایا: آسانی در توسعه، تست، و مقیاسپذیری.
۳. طراحی UI/UX
نوار ابزار: دستهبندی المانها با آیکونهای کاربردی و ساده.
صفحه اصلی (Canvas): امکان طراحی با خطوط راهنما و قابلیت زوم.
پنل تنظیمات: ابزارهای ویرایش برای هر المان با رابط کاربری ساده و کاربرپسند.
راهنماهای تعاملی: آموزش سریع برای کاربران جدید.
۴. چالشها
سازگاری با کلاینتهای مختلف: بهرهگیری از تکنیکهای خاص برای پشتیبانی از Outlook و سایر ایمیلکلاینتها.
عملکرد بالا: بهینهسازی برای رندر و اجرای تمپلیتهای پیچیده.
۵. سیستمهای مشابه
انگلیسی: Stripo، HubSpot Email Builder، Canva.
فارسی: نمونههای اختصاصی شرکتها مانند پیامپویا.
۶. نمونه کاربری (Use Case)
انتخاب تمپلیت «خبرنامه».
ویرایش متن و اضافه کردن متغیر {نام کاربر}.
تغییر حالت طراحی به RTL و تنظیم فونت فارسی.
تست تمپلیت در Gmail و Outlook.
اکسپورت خروجی HTML و ارسال از طریق SendGrid.