# إنشاء رسائل داخل التطبيق في المحرر المدمج

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

<Aside type="note">
قبل أن تبدأ، قم بدمج Pushwoosh SDK حتى يمكن عرض الرسائل داخل التطبيق في تطبيقك. [اعرف المزيد](/ar/product/messaging-channels/in-apps/)
</Aside>

## إنشاء قالب جديد داخل التطبيق

قالب الرسالة داخل التطبيق هو تصميم قابل لإعادة الاستخدام تقوم بإنشائه مرة واحدة ثم تعرضه للمستخدمين في الحملات. يمكنك إنشاء واحد عن طريق تحميل ملف ZIP مخصص بصيغة HTML أو عن طريق بنائه في المحرر المدمج. يغطي هذا المقال إنشاء قالب من البداية في المحرر المدمج. اتبع نفس الخطوات لتخصيص قالب موجود.

1. اذهب إلى **المحتوى** ← **الرسائل داخل التطبيق**.
2. انقر على **إضافة قالب**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="صفحة المحتوى والرسائل داخل التطبيق مع زر إضافة قالب في أعلى يمين قائمة القوالب"/>

3. أدخل اسمًا للقالب.
4. اختر كيفية إنشاء القالب:
   * **تحميل ZIP:** [حمّل ملف ZIP](/ar/developer/guides/content/rich-media-templates-syntax) يحتوي على رسالتك داخل التطبيق بصيغة HTML.
   * **إنشاء قالب جديد:** أنشئ قالبًا في المحرر المدمج.
5. حدد **إنشاء قالب جديد**.
6. انقر على **إضافة قالب**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="نموذج قالب جديد مع حقل الاسم، وخيار تحميل ZIP، وخيار إنشاء قالب جديد محدد"/>


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

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

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

استخدم الشريط العلوي لإعادة تسمية القالب، التراجع عن الأخطاء، حفظ عملك، أو فتح **إعدادات الرسالة داخل التطبيق** عندما تحتاج إلى تغيير كيفية ظهور الرسالة على الجهاز. انظر [تكوين كيفية ظهور الرسالة داخل التطبيق على الجهاز](#configure-how-the-in-app-looks-on-device).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="الشريط العلوي لمحرر الرسائل داخل التطبيق مع اسم القالب، التراجع، الإعادة، إعدادات الرسالة داخل التطبيق، وحفظ"/>

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

استخدم لوحة العمل لرؤية الرسالة كما سيراها المستخدمون ولتحرير النصوص والصور والأزرار مباشرة على التصميم. يعرض القالب الفارغ **ابدأ بكتلة**. فوق لوحة العمل، يوجد مفتاح تبديل بين الهاتف/الجهاز اللوحي لتغيير عرض المعاينة — لا يغير هذا تصميمك، بل فقط عرض الشاشة التي تقوم بمعاينتها عليها.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="لوحة عمل فارغة في محرر الرسائل داخل التطبيق مع مطالبة ابدأ بكتلة في المنتصف" width="480"/>

**الطبقات (Layers)**

تسرد لوحة الطبقات كل كتلة في قالبك على شكل شجرة، بنفس الترتيب الموجود على لوحة العمل. افتحها من الحافة اليسرى عندما تريد تحديد كتلة متداخلة (على سبيل المثال، زر داخل مجموعة) أو اسحب الصفوف لتغيير ترتيب المحتوى.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="لوحة الطبقات تسرد البطاقة، الصورة، العنوان، النص، المؤقت، الأزرار، والتذييل في شجرة"/>

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

استخدم **الكتل** في اللوحة اليمنى لإضافة محتوى إلى الرسالة، و**الإعدادات** عندما تريد تطبيق أنماط على القالب بأكمله مرة واحدة. انظر [تكوين أنماط على مستوى القالب](#configure-template-wide-styling).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="علامة تبويب الكتل في اللوحة اليمنى مع العنوان، النص، الزر، الصورة، وكتل محتوى أخرى" width="320"/>

### ابدأ في بناء القالب

بعد إنشاء قالب، يفتح المحرر بلوحة عمل فارغة وعلامة تبويب **الكتل** على اليمين.

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


<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="محرر رسائل داخل التطبيق فارغ مع ابدأ بكتلة على لوحة العمل ولوحة الكتل مفتوحة"/>

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

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

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

* **[عنوان](#heading-and-text):** العناوين الرئيسية والعناوين القصيرة في الرسالة
* **[نص](#heading-and-text):** النص الأساسي والأوصاف الطويلة
* **[زر](#button):** دعوة لاتخاذ إجراء قابلة للنقر
* **[صورة](#image):** صور من [متجر الوسائط](/ar/product/content/media-store/)، أو تحميل، أو من رابط URL
* **[فاصل](#divider):** خط يفصل الأقسام بصريًا
* **[عمودان](#columns):** عمودان متساويان جنبًا إلى جنب
* **[3 أعمدة](#columns):** ثلاثة أعمدة متساوية جنبًا إلى جنب
* **[4 أعمدة](#columns):** أربعة أعمدة متساوية جنبًا إلى جنب
* **[33 / 67](#columns):** عمودان حيث يأخذ العمود الأيسر حوالي 33% من العرض والأيمن حوالي 67%
* **[67 / 33](#columns):** عمودان حيث يأخذ العمود الأيسر حوالي 67% من العرض والأيمن حوالي 33%
* **[مؤقت](#countdown-timer):** عد تنازلي للعروض والمواعيد النهائية
* **[قائمة](#menu):** صف أو عمود من الروابط، مثل التنقل أو جهات الاتصال
* **[وسائل التواصل الاجتماعي](#social):** أيقونات ترتبط بملفاتك الشخصية على وسائل التواصل الاجتماعي
* **[HTML](#html):** كود HTML مخصص، مثل نموذج أو فيديو مضمن

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

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="كتلة عنوان محددة على لوحة العمل مع شريط أدوات تنسيق النص الذي يعرض خيارات النمط والتنسيق"/>

Merge Tags هي عناصر نائبة تُدرج قيمة [Tag](/ar/product/audience-data-and-segmentation/user-data-tags/tags/) من ملف تعريف المستخدم في الرسالة، بحيث يرى كل مشترك نسخة مخصصة. لإضافة واحد، حدد النص، انقر على **Merge Tags** في شريط الأدوات، واختر Tag من حسابك. [اعرف المزيد عن الرسائل المخصصة داخل التطبيق](/ar/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


### صورة

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

* **إضافة صورة** / **استبدال صورة:** انقر على **إضافة صورة** عندما تكون الكتلة فارغة، أو **استبدال صورة** عندما تكون هناك صورة معينة بالفعل. يمكنك تحميل ملف أو اختيار واحد من [متجر الوسائط](/ar/product/content/media-store/) الخاص بك.
* **رابط الصورة:** الصق رابطًا مستضافًا للصورة.
* **نص بديل:** صف الصورة لتسهيل الوصول.
* **رابط URL:** افتح موقع ويب عند النقر على الصورة.
* **وجهة الرابط:** افتح الرابط في نفس علامة التبويب أو في علامة تبويب جديدة.
* **ملف:** بعد إضافة صورة، يعرض مسار الملف المستخدم.

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="كتلة صورة فارغة على لوحة العمل مع إعدادات الصورة التي تعرض إضافة صورة، رابط الصورة، نص بديل، رابط URL، والتباعد" width="600"/>

### زر

**الزر** هو دعوة لاتخاذ إجراء قابلة للنقر في الرسالة داخل التطبيق. استخدمه لفتح رابط URL، تشغيل JavaScript مخصص، أو إغلاق الرسالة.

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

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

1. انقر على أيقونة الرابط في شريط الأدوات لفتح **إدراج/تحرير رابط**.
2. اختر **نوع الإجراء**.
3. املأ الحقول الخاصة بهذا الإجراء (انظر أدناه).
4. انقر على **حفظ**.

#### فتح موقع ويب

**فتح موقع ويب** يفتح رابطًا عند نقر المستخدم على الزر. أدخل العنوان في **URL**. ما يمكنك إدخاله:

* موقع ويب: `https://example.com`
* رابط تطبيق يفتح شاشة داخل تطبيقك: `myapp://promo`
* إغلاق الرسالة داخل التطبيق بدون JavaScript: `pushwoosh://close`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="مربع حوار إدراج/تحرير رابط لزر مع نوع الإجراء فتح موقع ويب وحقل URL"/>

#### تشغيل JavaScript مخصص

**JavaScript مخصص** يقوم بتشغيل كود عند نقر المستخدم على الزر. أدخل الكود في حقل **onClick**.

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="مربع حوار إدراج/تحرير رابط لزر مع نوع الإجراء JavaScript مخصص و onClick مضبوط على closeInApp"/>

**الطرق المتاحة في onClick**

* `pushwoosh.closeInApp()`: إغلاق الرسالة داخل التطبيق. احذفه لإبقاء الرسالة مفتوحة بعد النقر.
* `pushwoosh.sendTags({...})`: حفظ القيم كـ [علامات جهاز](/ar/product/audience-data-and-segmentation/user-data-tags/tags/) لحملات لاحقة.
* `pushwoosh.postEvent(...)`: إرسال [حدث مخصص](/ar/product/audience-data-and-segmentation/events/custom-events/)، على سبيل المثال لبدء Customer Journey.
* `pushwoosh.getTags(...)`: قراءة العلامات الحالية. مفيد في HTML المخصص لتغيير ما تعرضه الرسالة.
* `pushwoosh.getCustomData()`: قراءة البيانات المخصصة التي تم تمريرها من الإشعار الفوري الذي فتح هذه الرسالة داخل التطبيق.

##### مثال: دع المستخدمين يختارون اهتمامًا ويحفظونه لحملات لاحقة

1. أضف سؤالًا في كتلة **نص** أو **عنوان**، على سبيل المثال: "أي رياضة تهتم بها؟"
2. أضف **زرًا** واحدًا لكل خيار، على سبيل المثال: **يوجا** و**جيم**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="قالب رسالة داخل التطبيق مع أزرار يوجا وجيم و JavaScript مخصص onClick لزر اليوجا"/>

3. اضبط **نوع الإجراء** على **JavaScript مخصص** لكل زر.
4. بالنسبة لزر **يوجا**، الصق هذا في **onClick**:

```js
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
```

5. بالنسبة لزر **جيم**، الصق هذا في **onClick**:

```js
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();
```


عندما ينقر المستخدم على **يوجا**، يكتب Pushwoosh علامة `interest` على جهازه ويغلق الرسالة داخل التطبيق. يمكنك بعد ذلك استهداف هذا المستخدم في [شريحة](/ar/product/audience-data-and-segmentation/segmentation/) أو [Customer Journey](/ar/product/customer-journey/journey-elements/#in-app).

<LinkCard title="اعرف المزيد عن كيفية إنشاء رسائل داخل التطبيق باستخدام JavaScript" href="/developer/guides/messaging-channels/inapp-with-javascript/" />

### فاصل

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

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

### HTML

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


##### أمثلة

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

<Aside type="note">
تقوم أمثلة النموذج والاستبيان بحفظ علامات الجهاز وإرسال الأحداث من خلال Pushwoosh. قم بإنشاء الأحداث المخصصة في حسابك قبل استخدامها في الحملات.
</Aside>

<Tabs>
<TabItem label="نموذج العملاء المحتملين">

يقوم هذا النموذج بكتابة الاسم والبريد الإلكتروني كعلامات، ويرسل حدث `promo_requested`، ويعرض رسالة شكر، ثم يغلق الرسالة داخل التطبيق.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="نموذج عملاء محتملين HTML في محرر الرسائل داخل التطبيق مع حقول الاسم والبريد الإلكتروني وزر أرسل لي الرمز" width="360"/>

<details>
<summary>كود HTML</summary>

```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: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="استبيان">

يقوم هذا الاستبيان بحفظ وقت التمرين المحدد كعلامة، ويرسل حدث `schedule_survey_completed`، ويعرض رسالة شكر، ثم يغلق الرسالة داخل التطبيق.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="استبيان HTML في محرر الرسائل داخل التطبيق يسأل متى يفضل المستخدم التمرين مع أربعة خيارات للوقت" width="360"/>

<details>
<summary>كود HTML</summary>

```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;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="فيديو">

يضمّن هذا المثال فيديو من YouTube في الرسالة داخل التطبيق.

<details>
<summary>كود HTML</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<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>In-App Video Example</h1>

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

</body>
</html>
```


</details>

</TabItem>
</Tabs>



### قائمة

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

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

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

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

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

### وسائل التواصل الاجتماعي

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="إعدادات كتلة وسائل التواصل الاجتماعي مع روابط TikTok، Instagram، و Facebook بالإضافة إلى المحاذاة، حجم الأيقونة، والمسافة" width="320"/>

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

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

لإعداده:

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="إعدادات كتلة المؤقت مع تاريخ ووقت انتهاء العد التنازلي، التسميات، المظهر، وخيارات التباعد"/>

### أعمدة

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

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

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

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

## تكوين أنماط على مستوى القالب

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-17.webp" alt="علامة تبويب الإعدادات مع أقسام المستند، النافذة المنبثقة، والأنماط الافتراضية للكتل والأعمدة" width="320"/>

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

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

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


<Aside type="note">
لا يوجد إعداد للارتفاع. تنمو النافذة المنبثقة مع محتواها. لرسالة بملء الشاشة، اضبط **العرض** في **الإعدادات** واختر **ملء الشاشة** في **إعدادات الرسالة داخل التطبيق**.
</Aside>

## توطين القالب

يخزن القالب متعدد اللغات نسخة مترجمة لكل لغة في تصميم واحد للرسالة داخل التطبيق. استخدم مبدل اللغة فوق لوحة العمل لإضافة لغات وتحرير المحتوى لكل لغة. لمعرفة كيفية عمل الرسائل متعددة اللغات عبر القنوات، انظر [الرسائل متعددة اللغات](/ar/product/personalization/multi-language/).

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

<Aside type="note">
أي كتلة تضيفها تظهر بنفس المحتوى لكل لغة. تذكر ترجمة النصوص الجديدة وتسميات الأزرار لكل لغة تستخدمها في قالبك.
</Aside>

## تكوين كيفية ظهور الرسالة داخل التطبيق على الجهاز

تتحكم **إعدادات الرسالة داخل التطبيق** في كيفية ظهور الرسالة وسلوكها على الجهاز: الموضع، الرسوم المتحركة، إيماءات السحب، وزر الإغلاق. تنطبق هذه الإعدادات فقط على iOS و Android Native.

انقر على **إعدادات الرسالة داخل التطبيق** في الشريط العلوي:

* **الموضع على الشاشة:** ملء الشاشة، أعلى، وسط، أو أسفل.
* **رسوم العرض المتحركة** / **رسوم الإغلاق المتحركة:** لا شيء، تلاشي، يسار، يمين، أعلى، أو أسفل، أو افتراضي لاستخدام الإعداد الافتراضي لـ SDK في تطبيقك.

<Aside type="note">
**لا شيء** و**تلاشي** يعملان حاليًا على Android. على iOS، تظهر الرسالة وتختفي على الفور (المحاذاة قادمة قريبًا).
</Aside>

* **مدة الرسوم المتحركة (مللي ثانية):** من 100 إلى 3000 مللي ثانية. اتركها فارغة لاستخدام التوقيت الافتراضي لـ SDK.
* **السحب للإغلاق:** قم بتمكين أي مجموعة من اليسار، اليمين، الأعلى، والأسفل.
* **إظهار زر الإغلاق:** قم بتشغيل أو إيقاف عنصر التحكم في الإغلاق. عند التشغيل، اضبط **الموضع** (أعلى اليمين، أعلى اليسار، أسفل اليمين، أسفل اليسار)، **الخلفية** (لون، أو **شفاف**)، و**لون الأيقونة**. على عكس الإعدادات الأخرى في هذه النافذة، يتم عرض مظهر زر الإغلاق في الرسالة نفسها ويظهر على كل منصة، وليس فقط iOS و Android Native.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="نافذة إعدادات الرسالة داخل التطبيق مع خيارات الموضع، الرسوم المتحركة، السحب للإغلاق، وزر الإغلاق"/>

انقر على **تطبيق** لحفظ اختياراتك، أو **إلغاء** لتجاهلها.

## حفظ القالب

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

<Aside type="note">
يخزن الحفظ قالب الرسالة داخل التطبيق في **المحتوى** ← **الرسائل داخل التطبيق**. من هناك يمكنك معاينة القوالب وتحريرها وإدارتها. [اعرف المزيد](/ar/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## استخدام القالب المحفوظ

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

* [عرض رسالة داخل التطبيق كجزء من رحلة العميل](/ar/product/customer-journey/journey-elements/#in-app)
* [إرسال إشعار فوري يفتح رسالة داخل التطبيق عند النقر عليه](/ar/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
* [عرض رسالة واحدة داخل التطبيق لمستخدميك](/ar/product/messaging-channels/in-apps/)