إنشاء محتوى البريد الإلكتروني باستخدام محرر السحب والإفلات

أنشئ محتوى البريد الإلكتروني في محرر Pushwoosh المدمج دون كتابة أي كود. ستحصل على تصميم قابل لإعادة الاستخدام مع كتل محتوى وصور وأزرار ونصوص مخصصة وتذييل متوافق يمكنك استخدامه في Customer Journey أو في بريد إلكتروني لمرة واحدة.

ملاحظة

هل تفضل HTML؟ استخدم محرر كود HTML في Pushwoosh لمزيد من التحكم. اعرف المزيد

هام

قبل أن تبدأ، قم بإعداد لغات بريدك الإلكتروني وسطر الموضوع وتفاصيل المرسل. تعرف على كيفية القيام بذلك

إنشاء محتوى بريد إلكتروني جديد

1. اذهب إلى المحتوى ← محتوى البريد الإلكتروني.
2. اختر كيف ستبدأ:
   • انقر على إنشاء محتوى بريد إلكتروني لفتح محرر السحب والإفلات وإنشاء بريد إلكتروني من البداية.
   • انقر على السهم بجوار إنشاء محتوى بريد إلكتروني، ثم حدد استخدام قالب للبدء من تصميم جاهز في المعرض.
   • انقر على السهم بجوار إنشاء محتوى بريد إلكتروني، ثم حدد كود HTML لاستخدام محرر كود HTML. اعرف المزيد

استكشاف تصميم المحرر

بمجرد فتح بريد إلكتروني، يحتوي المحرر المدمج على هذه المناطق:

الشريط العلوي

أعد تسمية البريد الإلكتروني، تراجع عن التغييرات أو أعدها، احفظ عملك، أو أرسل بريدًا إلكترونيًا تجريبيًا.

شريط اللغة / الموضوع / الترويسة المسبقة

فوق لوحة العمل، قم بتبديل لغة التحرير وتعيين سطر الموضوع والترويسة المسبقة للبريد الإلكتروني. تعرف على كيفية إعدادها.

لوحة العمل (Canvas)

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

لوحة الطبقات (Layers)

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

اللوحة اليمنى

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

ابدأ في بناء بريدك الإلكتروني

1. اسحب كتلة من لوحة الكتل إلى لوحة العمل، أو انقر على كتلة في اللوحة لإضافتها.
2. استمر في إضافة الكتل بنفس الطريقة حتى يصبح التصميم جاهزًا.
3. افتح علامة تبويب الإعدادات عندما تحتاج إلى تنسيق على مستوى البريد الإلكتروني.

إضافة كتل المحتوى

افتح علامة تبويب الكتل واسحب كتلة إلى لوحة العمل، أو انقر على كتلة لإضافتها. الكتل المتاحة:

• العنوان: العناوين الرئيسية والعناوين الفرعية القصيرة في البريد الإلكتروني
• النص: النص الأساسي والأوصاف الطويلة
• الزر: دعوة إلى إجراء قابلة للنقر
• الصورة: صور من متجر الوسائط، أو تحميل، أو من رابط URL
• الفاصل: خط يفصل الأقسام بصريًا
• عمودان: عمودان متساويان جنبًا إلى جنب
• 3 أعمدة: ثلاثة أعمدة متساوية جنبًا إلى جنب
• 4 أعمدة: أربعة أعمدة متساوية جنبًا إلى جنب
• 33 / 67: عمودان حيث يأخذ الأيسر حوالي 33% من العرض والأيمن حوالي 67%
• 67 / 33: عمودان حيث يأخذ الأيسر حوالي 67% من العرض والأيمن حوالي 33%
• المؤقت: عد تنازلي للعروض والمواعيد النهائية
• القائمة: صف أو عمود من الروابط، مثل التنقل أو جهات الاتصال
• الوسائط الاجتماعية: أيقونات ترتبط بملفاتك الشخصية على وسائل التواصل الاجتماعي
• HTML: كود HTML مخصص، مثل نموذج أو استبيان أو فيديو مضمن

العنوان والنص

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

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

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

الصورة

تعرض كتلة الصورة صورة في البريد الإلكتروني. حددها على لوحة العمل لفتح إعدادات الصورة في اللوحة اليمنى.

• إضافة صورة / استبدال الصورة: انقر على إضافة صورة عندما تكون الكتلة فارغة، أو استبدال الصورة عندما تكون هناك صورة معينة بالفعل. يمكنك تحميل ملف أو اختيار واحد من متجر الوسائط.
• رابط الصورة: الصق رابطًا مستضافًا للصورة.
• النص البديل: صف الصورة لتسهيل الوصول.
• رابط URL: يفتح رابطًا عند النقر على الصورة. انظر إضافة روابط لأنواع الروابط المتاحة.
• وجهة الرابط: افتح الرابط في نفس علامة التبويب أو في علامة تبويب جديدة.
• الملف: بعد إضافة صورة، يعرض مسار الملف المستخدم.

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

الزر

الزر هو دعوة إلى إجراء قابلة للنقر في البريد الإلكتروني.

انقر على كتلة الزر لتحرير تسميتها على لوحة العمل. استخدم شريط الأدوات لتغيير حجم الخط، لون النص، غامق، مائل، تسطير، والمحاذاة.

لتعيين ما يحدث عندما ينقر المستلم على الزر:

• انقر على أيقونة الرابط في شريط الأدوات لفتح إدراج/تحرير رابط.
• أو استخدم نوع الإجراء وURL في قسم الرابط في اللوحة اليمنى.

انظر إضافة روابط لأنواع الإجراءات المتاحة.

في اللوحة اليمنى، تحت الأنماط:

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

الفاصل

الفاصل هو خط أفقي بين كتل المحتوى. استخدمه لفصل الأقسام بصريًا في البريد الإلكتروني.

قم بتكوين نمط الخط (صلب، متقطع، منقط)، اللون، السماكة، والعرض في لوحة الإعدادات.

HTML

تتيح لك كتلة HTML لصق كود HTML مخصص في بريدك الإلكتروني. استخدمها لنموذج مخصص أو استبيان أو فيديو مضمن.

أمثلة

نموذج عميل محتمل

يجمع هذا النموذج عنوان بريد إلكتروني لإرسال رمز ترويجي لتخفيضات رأس السنة الجديدة.

كود HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

استبيان

يسأل هذا الاستبيان عن الفئة التي يتسوق المستلم من أجلها ويربط كل خيار بصفحة التخفيضات ذات الصلة.

كود HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

فيديو

يضمّن هذا المثال فيديو ترويجيًا لتخفيضات رأس السنة الجديدة في البريد الإلكتروني.

كود HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

ملاحظة

يمكنك أيضًا إضافة رابط إلغاء الاشتراك مباشرة في كتلة HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

يتم استبدال العنصر النائب %%PW_EMAIL_UNSUBSCRIBE%% برابط إلغاء الاشتراك الخاص بـ Pushwoosh عند إرسال البريد الإلكتروني.

القائمة

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

لكل عنصر في القائمة، قم بتعيين:

• التسمية: النص الذي يراه المستلمون
• URL: أين يفتح العنصر
• الوجهة: نفس علامة التبويب أو علامة تبويب جديدة

في إعدادات الكتلة، يمكنك أيضًا تعيين:

• الاتجاه: أفقي أو عمودي
• المحاذاة: يسار، وسط، أو يمين
• الفاصل: فاصل اختياري بين العناصر
• الخط، الحجم، الوزن، تباعد الأحرف، وألوان الرابط/النص

الوسائط الاجتماعية

تعرض كتلة الوسائط الاجتماعية صفًا من أيقونات وسائل التواصل الاجتماعي التي ترتبط بملفاتك الشخصية. استخدمها لإرسال المستلمين إلى Facebook و Instagram و X ومنصات أخرى من البريد الإلكتروني.

أضف إدخالات المنصات، ثم قم بتعيين المحاذاة وحجم الأيقونة والمسافة بين الأيقونات.

مؤقت العد التنازلي

كتلة المؤقت هي عد تنازلي في البريد الإلكتروني. استخدمها للعروض محدودة الوقت، والتخفيضات السريعة، وتذكيرات الأحداث.

لإعداده:

1. في العد التنازلي، قم بتعيين تاريخ الانتهاء ووقت الانتهاء، ثم اختر المنطقة الزمنية واللغة لتسميات المؤقت.
2. قم بتشغيل التسميات لإظهار تعليقات “أيام / ساعات / دقائق / ثوانٍ” تحت الأرقام، أو أوقفها للأرقام فقط.
3. في المظهر، قم بتعيين الخلفية، لون الأرقام، لون التسميات، وحجم الخط للأرقام (الافتراضي 40 بكسل) والتسميات (الافتراضي 16 بكسل).
4. اضبط التباعد (الحشو) حسب الحاجة.

الأعمدة

تقسم الأعمدة لوحة العمل إلى أقسام جنبًا إلى جنب حتى تتمكن من وضع المحتوى بجانب بعضه البعض في صف واحد.

اسحب إحدى هذه الكتل إلى لوحة العمل:

• عمودان: عمودان متساويان
• 3 أعمدة: ثلاثة أعمدة متساوية
• 4 أعمدة: أربعة أعمدة متساوية
• 33 / 67: العمود الأيسر بعرض حوالي 33%، والأيمن حوالي 67%
• 67 / 33: العمود الأيسر بعرض حوالي 67%، والأيمن حوالي 33%

ثم أضف محتوى إلى كل عمود. لتغيير التباعد لجميع الأعمدة في البريد الإلكتروني، افتح الإعدادات ← الإعدادات الافتراضية للأعمدة واضبط الحشو الخارجي، وحشو العمود، والمسافة بين الأعمدة.

إضافة روابط

استخدم مربع حوار إدراج/تحرير رابط لتعيين ما يحدث عندما ينقر المستلم على زر أو نص محدد. اختر نوع الإجراء، ثم املأ الحقول الخاصة بهذا الإجراء.

فتح موقع ويب

يفتح رابطًا عندما ينقر المستلم. أدخل العنوان في URL.

رابط إدارة التفضيلات

يضيف رابطًا إلى مركز تفضيلات الاشتراك حيث يمكن للمستلمين اختيار فئات البريد الإلكتروني التي يتلقونها. يتم إدراج الرابط تلقائيًا.

رابط إلغاء الاشتراك

يتيح للمستلمين إلغاء الاشتراك بما يتماشى مع اللوائح وتفضيلاتهم.

نصيحة

يمكنك أيضًا إضافة رابط إلغاء الاشتراك في كتلة HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

يتم استبدال العنصر النائب %%PW_EMAIL_UNSUBSCRIBE%% برابط إلغاء الاشتراك الخاص بـ Pushwoosh عند إرسال البريد الإلكتروني.

ماذا يحدث عندما ينقر المستلم على رابط إلغاء الاشتراك

إذا كان مركز تفضيلات الاشتراك ممكّنًا

يتم إلغاء اشتراك المستلم فقط من الفئة المخصصة لهذا البريد الإلكتروني (على سبيل المثال، النشرة الإخبارية). تتم إضافة اسم الفئة إلى وسم فئات البريد الإلكتروني الملغى اشتراكها الخاص بهم.

تظهر شاشة تأكيد مع خياري إعادة الاشتراك وإدارة التفضيلات. اعرف المزيد.

إذا لم يكن مركز تفضيلات الاشتراك ممكّنًا

يتم إلغاء اشتراك المستلم من جميع رسائل البريد الإلكتروني التسويقية ويتم تعيين وسم رسائل البريد الإلكتروني الملغى اشتراكها إلى true. لا تتأثر رسائل البريد الإلكتروني للمعاملات وستستمر في التسليم. اعرف المزيد عن أنواع الرسائل.

هام

للسماح لك بتسليم رسائل البريد الإلكتروني المهمة لعملائك، لا نحذف المستخدمين الذين ألغوا اشتراكهم من قاعدة المستخدمين الخاصة بك.

لمواصلة مراسلة المستلمين المتفاعلين، قم بإنشاء شريحة تمت تصفيتها بواسطة رسائل البريد الإلكتروني الملغى اشتراكها = false. لتجنب الشكاوى، لا ترسل بريدًا إلكترونيًا إلى المستلمين الذين ألغوا اشتراكهم.

يتم احتساب النقرات في معدل إلغاء الاشتراك في سجل الرسائل.

رابط نسخة الويب

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

رابط تأكيد نموذج الاشتراك

يدرج رابط تأكيد لإرسال نموذج اشتراك (على سبيل المثال، لتأكيد الاشتراك المزدوج). اعرف المزيد عن الاشتراك المزدوج.

تكوين التنسيق على مستوى البريد الإلكتروني

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

افتح علامة تبويب الإعدادات في اللوحة اليمنى.

الأقسام المتاحة:

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

تنطبق الإعدادات الافتراضية في أي مكان لا تتجاوزها فيه كتلة فردية.

تكوين تذييل البريد الإلكتروني

يتضمن كل بريد إلكتروني كتلة تذييل للمعلومات المطلوبة قانونيًا للمرسل ورابط إلغاء الاشتراك. حدد تذييل في لوحة الطبقات لفتح إعداداته.

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

• نوع البريد الإلكتروني: تسويقي أو معاملاتي. تتبع رؤية إلغاء الاشتراك هذا الإعداد.
• الشعار: قم بتعيين رابط الشعار أو اختر واحدًا من المعرض، ثم قم بتعيين العرض بالبكسل ورابط نقر اختياري.
• اسم الشركة، العنوان البريدي، وحقوق النشر: هوية المرسل الخاصة بك في التذييل.

تنبيه

يجب أن تتضمن رسائل البريد الإلكتروني التسويقية عنوانًا بريديًا فعليًا (CAN-SPAM).

في الروابط والشارات:

• روابط التذييل: أضف روابط مسماة، مثل سياسة الخصوصية أو الشروط.
• شارات متجر التطبيقات: أضف شارات App Store أو Google Play مع عناوين URL للوجهة.
• روابط الوسائط الاجتماعية: أضف أيقونات ترتبط بملفاتك الشخصية على وسائل التواصل الاجتماعي.

في النمط:

• لون النص: قم بتعيين لون نص التذييل.
• حجم الخط (بكسل): قم بتعيين حجم خط التذييل.
• المحاذاة: يسار، وسط، أو يمين.
• تسطير الروابط: قم بتشغيله لتسطير روابط التذييل.

في الخيارات:

• نص رابط إلغاء الاشتراك: التسمية لرابط إلغاء الاشتراك المُدار في رسائل البريد الإلكتروني التسويقية. تحذفه رسائل البريد الإلكتروني للمعاملات.

توطين محتوى بريدك الإلكتروني

استخدم مبدل اللغة فوق لوحة العمل لإضافة لغات وتحرير المحتوى لكل لغة. تعرف على كيفية إضافة اللغات.

يظهر المحتوى الذي لم تترجمه بعد للغة الحالية باهتًا. ابدأ في الكتابة لإنشاء الترجمة. تستمر اللغة الافتراضية في الظهور حتى تفعل ذلك.

ملاحظة

تظهر أي كتلة تضيفها بنفس المحتوى لكل لغة. تذكر ترجمة النصوص الجديدة وتسميات الأزرار لكل لغة تستخدمها في بريدك الإلكتروني.

حفظ بريدك الإلكتروني

انقر على حفظ في الشريط العلوي لحفظ تغييراتك. استخدم تراجع/إعادة في الشريط العلوي للتنقل بين تعديلاتك.

ملاحظة

يخزن الحفظ بريدك الإلكتروني في المحتوى ← محتوى البريد الإلكتروني. من هناك يمكنك تحريره وإدارته، واستخدامه في حملاتك. اعرف المزيد

إرسال بريد إلكتروني تجريبي

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

1. انقر على بريد إلكتروني تجريبي في الشريط العلوي.

2. في النافذة التي تفتح، اختر جهاز اختبار محفوظًا أو اكتب أي عنوان بريد إلكتروني.

3. انقر على إرسال لإرسال الرسالة التجريبية إلى العنوان الذي اخترته.

استخدام محتوى البريد الإلكتروني المحفوظ

الآن بعد أن أصبح محتوى بريدك الإلكتروني جاهزًا، يمكن استخدامه في حملات البريد الإلكتروني. اعرف المزيد حول كيفية استخدامه