كيفية بناء وتصميم قوالب البريد الإلكتروني المخصصة (Email Templates)

يعد تسليم رسائل بريد إلكتروني جذابة ومتوافقة مع الهوية البصرية لعلامتك التجارية أمراً ضرورياً للحفاظ على تفاعل قوي ومستمر مع العملاء. توفر وحدة قوالب البريد الإلكتروني (Email Templates) محرر تصاميم احترافياً ومتقدماً يعتمد على السحب والإفلات ومدمجاً بالكامل ومباشرة داخل لوحة إدارة ووردبريس الخاصة بك؛ مما يتيح لك تصميم قوالب مخصصة لإشعارات إتمام طلبات ووكومرس، ورموز تحقق الهوية (OTP)، وتدفقات تسجيل الدخول بدون كلمة مرور، وحملات البريد الإلكتروني الترويجية.

1. تصاميم البريد الإلكتروني المحفوظة: إدارة المكتبة

تعمل لوحة تصاميم البريد الإلكتروني المحفوظة (Saved Email Designs) كمستودع مركزي موحد لجميع تصاميم رسائل البريد الإلكتروني المخصصة الخاصة بك. وتوفر الواجهة بطاقات وشبكة عرض مرنة تحتوي على البيانات الوصفية والإجراءات المتاحة لكل قالب في مكتبتك.

إجراءات المكتبة الرئيسية

• إنشاء قالب جديد (+ NEW TEMPLATE): انقر لتهيئة لوحة تصميم بيضاء فارغة وإطلاق محرر التصميم المرئي.
• تحرير القالب: انقر فوق زر تحرير القالب (Edit Template) في أي بطاقة لتحميل بنية تخطيطه واستئناف التخصيص والتصميم.
• حذف القالب (أيقونة سلة المهملات): يحذف القالب تماماً من قاعدة البيانات. ويؤدي النقر هنا إلى إظهار إشعار تأكيد تفاعلي من المتصفح (هل أنت متأكد من رغبتك في حذف هذا القالب؟) قبل إتمام مسح السجل نهائياً.

سير عمل الاستيراد والتصدير

تسهّل Wawp عمليات هجرة القوالب وتصدير النسخ الاحتياطية لتصاميم البريد الإلكتروني عبر ميزات الاستيراد والتصدير:

• تصدير قالب فردي: انقر فوق أيقونة التحميل المتاحة على أي بطاقة قالب فردي؛ حيث يقوم النظام بإنشاء ملف JSON منظم يحمل الاسم wawp-template-[name].json يحتوي على الإعدادات الدقيقة للتصميم.
• تصدير جماعي لكافة القوالب (EXPORT ALL): انقر فوق زر تصدير الكل (Export All) الموجود في أعلى يمين بطاقات التصاميم لتجميع مكتبة القوالب المحفوظة بالكامل وتصديرها في ملف نسخ احتياطي JSON واحد منظم ومسمى wawp-all-email-templates-[date].json.
• استيراد ملفات النسخ الاحتياطي: انقر فوق خيار استيراد (Import) وحدد أي ملف نسخ احتياطي JSON صالح تم إنشاؤه مسبقاً من Wawp؛ حيث يقوم النظام بالتقاط بنية البيانات وتصنيفها برمجياً وتلقائياً:
  • استيراد قالب فردي: إذا كان الملف يحتوي على قالب واحد، تستخرج Wawp الإعدادات والتصاميم وتضيف وسم (Imported - مستورد) بجانب العنوان لتفتح لك محرر السحب والإفلات مباشرة لاستكمال العمل.
  • استيراد جماعي للقوالب: إذا كان الملف يضم مصفوفة تحتوي على قوالب متعددة، يقوم المحرك بتحليل بنية كل عنصر وإجراء عمليات استعلام متوازية وخلفية في قاعدة البيانات لاستيراد التصاميم دفعة واحدة مع إظهار إشعار تأكيد فوري يوضح العدد الدقيق للقوالب التي تم استيرادها بنجاح.

2. نظرة فاحصة وعميقة: واجهة تحرير وبناء القالب الجديد

عند إنشاء قالب جديد (action=create) أو تحرير تصميم حالي ومحفوظ (action=edit)، تفتح Wawp بيئة عمل بصرية متكاملة وشاشة ملء الشاشة (.wawp-editor-fullscreen) مبنية بالاعتماد على إطار عمل GrapesJS الشهير. وبهدف منحك أقصى مساحة تحرير وتصميم ممكنة، تعطل هذه الشاشة مؤقتاً عناصر التنقل وهياكل التمرير الخاصة بلوحة إدارة ووردبريس الأساسية.

تنقسم واجهة المحرر إلى ثلاث مناطق تشغيلية أساسية: شريط الأدوات العلوي (Top Header Toolbar)، الشريط الجانبي للتحكم (Left Control Sidebar)، ولوحة الرسم ومنطقة العمل المركزية (Central Workspace Canvas).

أ. شريط الأدوات العلوي (Top Header Toolbar)

يمتد شريط الأدوات العلوي بشكل أفقي في أعلى الشاشة، ويضم أدوات إدارة التخطيط، ومعاينة الأجهزة المختلفة، وتسمية القالب، وحالة الحفظ التلقائي الفورية، بالإضافة إلى أدوات إرسال وتتبع رسائل الاختبار التشخيصية.

1. إجراءات التحكم في لوحة الرسم (أقصى اليسار)

• طي/توسيع الشريط الجانبي (أيقونة اللوحة [|]): يطوي أو يمدد الشريط الجانبي للتحكم (بعرض 320 بكسل) فوراً للاستفادة الكاملة من حجم الشاشة.
• التراجع (أيقونة السهم للخلف <-): يتراجع عن آخر إجراء تصميم قمت به.
• الإعادة (أيقونة السهم للأمام ->): يعيد تطبيق الإجراء الذي تراجعت عنه مسبقاً.
• ملء الشاشة (أيقونة المربع [ ]): يعرض متصفحك في وضع ملء الشاشة بالكامل.
• تبديل المعاينة (أيقونة العين): يخفي خطوط الحدود وتخطيطات الصناديق وعناصر التحكم؛ مما يتيح لك معاينة دقيقة ومطابقة تماماً لشكل الرسالة عند وصولها لصندوق الوارد الفعلي للعميل.
• تصدير واستعراض الكود البرمجي (أيقونة <>): يعرض كود HTML و CSS الهيكلي الخام الذي تم توليده بواسطة محرر التصميم.
• مسح لوحة الرسم (أيقونة سلة المهملات): يظهر إشعاراً تفاعلياً يؤكد رغبتك في مسح الصفحة؛ وعند التأكيد، يفرغ مساحة العمل بالكامل لتبدأ تصميماً جديداً من الصفر.

2. أبعاد الشاشات المستجيبة (اليسار الأوسط)

أداة تحكم مجمعة تتيح لك التبديل السريع بين أبعاد شاشات الأجهزة لمعاينة مدى مرونة واستجابة تخطيط تصميمك:

• سطح المكتب (أيقونة الشاشة): شاشة العرض الكاملة والافتراضية للتصميم.
• الأجهزة اللوحية (أيقونة التابلت): يقيد عرض منطقة المعاينة إلى 768 بكسل للتحقق من التناسق.
• الهواتف المحمولة (أيقونة الهاتف الذكي): يقيد عرض منطقة المعاينة إلى 320 بكسل للتحقق من وضوح النصوص وسهولة القراءة على الهواتف.

3. تسمية القالب (الوسط)

• حقل إدخال اسم القالب: مربع نص مخصص لكتابة عنوان محدد ومعبّر لتصميمك (على سبيل المثال: رابط تحقق OTP أو إيصال دفع ووكومرس). يستخدم هذا العنوان للتعرف على القوالب واختيارها لاحقاً داخل إعدادات الإضافة.

4. شارة حالة الحفظ التلقائي (اليمين الأوسط)

تتضمن Wawp محرك حفظ تلقائي ذكي يعمل في الخلفية لمراقبة وتخزين كافة تغييرات التصميم فور حدوثها. وتظهر حالة الحفظ حالياً من خلال شارة لونية تصف الحالة البرمجية الفورية:

• 🟢 الحفظ التلقائي نشط (Auto-save Active): محرك المراقبة والحفظ بالخلفية مستعد ويعمل بكفاءة.
• 🟡 تغييرات غير محفوظة... (نبض أصفر): رصد المحرر تعديلات وتحديثات جديدة، وينتظر توقفاً عن الكتابة والتعديل لمدة 5 ثوانٍ لتخزينها.
• 🔵 جاري الحفظ... (نبض أزرق): يقوم النظام بإرسال واستعلام REST API خلفي لمزامنة البيانات وحفظ التعديلات.
• 🟢 تم الحفظ (Saved): تم تسليم وحفظ آخر التعديلات والتصاميم بنجاح داخل قاعدة البيانات.

5. زر الحفظ الرئيسي

• زر حفظ القالب (Save Template): يجمع بيانات التخطيط الهيكلي والتصميمي على الفور، ودمج قواعد تنسيق CSS (Inlining CSS) داخل نصوص HTML الصافية والمستقرة، ثم يحفظها في قاعدة البيانات عبر استدعاء مسار الطلب الآمن /email-templates.

6. مرسل البريد الإلكتروني الاختباري المباشر (أقصى اليمين)

• حقل البريد المستلم: أدخل أي عنوان بريد إلكتروني نشط (يكون افتراضياً بريد مسؤول الموقع).
• زر إرسال اختبار (Send Test): يوجه ويرسل بريداً إلكترونياً اختبارياً حياً فوراً للعنوان المدخل. يتيح لك ذلك فحص هيكل الـ HTML الفعلي وكفاءة التنسيق ومطابقة الألوان بداخل صناديق البريد والتطبيقات الحقيقية للعملاء قبل تفعيل القالب للجمهور.

ب. شريط التحكم الجانبي (Left Control Sidebar)

ينقسم شريط التحكم الجانبي إلى شريط تنقل رأسي (Vertical Navigation Dock) في أقصى اليسار، ونافذة للمحتوى التفاعلي (Interactive Content Drawer) بعرض 320 بكسل.

1. شريط التنقل الرأسي

يتحكم في تحديد أي قسم أو لوحة يتم تحميلها واستعراضها في عمود التحكم الجانبي:

• ➕ العناصر الأساسية (Basic Elements): يعرض العناصر الهيكلية والحاويات الأساسية لبناء الهيكل.
• 📰 مكتبة النماذج (Templates Library): يعرض أقساماً وتصنيفات مخصصة وجاهزة مثل الترويسات (Headers)، الصور الترويجية (Hero)، كتل التسويق، روابط التواصل الاجتماعي، كتل ووكومرس المخصصة، جداول الأسعار، والتذييلات (Footers).
• 🤖 نماذج WAWP الجاهزة: يضم تخطيطات مجهزة ومصممة مسبقاً خاصة بـ Wawp وتدفقات أمان وتوثيق المستخدمين:
  • رابط الدخول الذكي (Magic Link Login)
  • رابط الوصول الآمن (Secure Access Link)
  • رابط الدخول الذكي المظلم (Dark Magic Link)
  • توثيق الحساب ورقم الهاتف (Account Verification)
  • التنبيهات الأمنية وثغرات الحساب (Security Alert)
  • الترحيب والتوثيق المزدوج (Welcome & Verify)
  • نموذج تسجيل الدخول البسيط (Minimalist Login)
  • الموافقة على جهاز جديد (Approve Device)
  • استعادة وتأمين الحساب (Account Recovery)
  • انتهاء صلاحية الجلسة وعضوية الموقع (Session Expired)
• ⚙️ إعدادات الخصائص (Traits Settings): يُفتح تلقائياً عند النقر على عناصر معقدة؛ مما يتيح لك تعديل خصائص مثل نص الصورة البديل (alt)، رابط مصدر الصورة (src)، والروابط التوجيهية ونوعية فتح النافذة (href).
• 📂 مدير الطبقات (Layers Manager): يعرض شجرة هرمية (أب-ابن) واضحة للعناصر الهيكلية والكتل؛ مما يسهل رصد الحاويات المخفية وتحديد الصناديق المتداخلة والتحقق من سلامة البناء البرمجي.
• 🎨 مدير الأنماط والتنسيق (Style Manager): يوفر عناصر تحكم دقيقة وذكية لتنسيق وتلوين أي عنصر مائل أو محدد:
  • التخطيط والمرونة (Layout & Flex): تهيئة نوع العرض، صناديق Flex التفاعلية، المحاذاة، واتجاهات العناصر.
  • الأبعاد والمسافات (Dimensions & Spacing): تحديد الهوامش الداخلية والخارجية (Padding & Margins)، الأطوال والعروض المخصصة.
  • الخطوط والنصوص (Typography): اختيار نوع الخط، الألوان، الأحجام، ارتفاع الأسطر، ومحاذاة النصوص.
  • الزخرفة والجماليات (Decorations): تهيئة وتعيين خلفية الألوان، أنماط الحدود، ونسبة انحناء الزوايا (Border Radius).
• 🖼️ مدير الصور والوسائط (Images Manager): يفتح مكتبة وسائط ووردبريس الرسمية الخاصة بموقعك لرفع ملفات صور جديدة أو اختيار ملفات وسائط جاهزة وتضمينها بسهولة.
• ⬅️ العودة للقائمة (أيقونة الخروج بالأسفل): يغلق شاشة منشئ التصميم بملء الشاشة ويعيدك مباشرة إلى لوحة تحكم التصاميم المحفوظة بـ Wawp.

2. لوحة المحتوى التفاعلي

• صندوق البحث: يظهر في أعلى العمود للبحث الفوري وفلترة كتل العناصر والنماذج الجاهزة بالاسم أو بالتصنيف.
• شبكة العناصر المتاحة: تسرد كتل العناصر بأيقونات ورموز واضحة؛ حيث يمكنك سحب أي عنصر وإسقاطه (Drag and Drop) مباشرة داخل لوحة الرسم المركزية لبنائه.
• الحاوية الداخلية المطلقة: يتم تحميل وعرض المحتويات داخل حاوية ذات تموضع مطلق (Absolute Positioned Container) لمنع أي انزياحات في التخطيط وضمان سلاسة وانسيابية التمرير الرأسي.

ج. لوحة الرسم ومنطقة العمل المركزية (Central Workspace Canvas)

تمثل لوحة الرسم (Canvas) واجهة المعاينة الحية والتفاعلية لقالب بريدك حيث تقوم بترتيب وتنظيم العناصر والكتل بصرياً:

• قيود التخطيط المتمركز: يحد المحرر من مساحة التصميم داخل لوحة الرسم لعرض أقصى يبلغ 860 بكسل لمحاكاة ومعاينة التناسق والقيود القياسية الشائعة في تطبيقات البريد الإلكتروني، مع عرض ظل ناعم وجذاب حول شبكة التخطيط لتمييزها عن خلفية لوحة المحرر.
• تحرير النصوص بنقرة واحدة: على عكس بنية GrapesJS التقليدية التي تتطلب نقراً مزدوجاً لتحرير نصوص الكتل، قامت Wawp بتجاوز هذا السلوك برمجياً لتتمكن من تعديل النصوص، الحقول النصية، والروابط بمجرد النقر عليها بنقرة واحدة سريعة لراحة تامة أثناء العمل.
• محرر النصوص الغني والوسوم الديناميكية (Merge Tags): يؤدي تحديد أي جزء نصي إلى فتح شريط أدوات التنسيق العلوي والذي يضم زر الوسوم المدمجة (Merge Tags) الحصري المقترن برمز { } لإدراج بيانات متغيرة ديناميكياً:
  • {{magic_link}} - يدرج رابط تسجيل دخول المتسوق بدون كلمة مرور أو رابط التوثيق الآمن.
  • {{user_name}} - يعرض اسم المستخدم الفعلي المسجل للمستقبل.
  • {{site_name}} - يعرض الاسم الظاهر لموقعك الإلكتروني في ووردبريس.
  • {{site_url}} - يدرج رابط النطاق الرئيسي لموقعك بشكل ديناميكي.
  • {{order_id}} - يدرج رقم الطلب المرجعي الخاص بووكومرس (للرسائل الموجهة لتحديثات المعاملات والمشتريات).

3. اقتراحات نطاقات البريد الإلكتروني (Email Domain Suggestions)

توفر ميزة اقتراحات نطاقات البريد الإلكتروني (Email Domain Suggestions) قوائم إكمال تلقائي ذكية للمستخدمين داخل حقول إدخال البريد الإلكتروني في كافة نماذج موقعك بالواجهة الأمامية:

• الإعداد والتهيئة (Setup): اكتب قائمة بنطاقات البريد الإلكتروني الشهيرة أو الشائعة مفصولة بفواصل (على سبيل المثال: gmail.com, yahoo.com, hotmail.com, outlook.com, aol.com) بداخل مربع النص المخصص في بطاقة الإعدادات.
• اقتراحات الإكمال التلقائي: بمجرد أن يبدأ الزائر في كتابة عنوان بريده الإلكتروني داخل حقول الدخول، التسجيل، أو صفحة إتمام الشراء، تكتشف الإضافة شارة @ وتعرض النطاقات المعينة كقائمة خيارات منسدلة سريعة للإكمال.
• الفوائد المكتسبة: يساهم في تسريع ملء وتعبئة النماذج للأعضاء وخاصة على شاشات الهواتف المحمولة، ويلغي أخطاء وفشل تسليم الرسائل الناتجة عن الأخطاء الإملائية البسيطة للمستلمين.