# قسم الدورة التدريبية عبر الإنترنت

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

<figure><img src="/files/ce8eeaa6642dd942e55ea2df0e9ab7d36e4e87bf" alt=""><figcaption></figcaption></figure>

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

بدلاً من استخدام البطاقات التعليمية عبر الإنترنت، يمكنك إضافة قوائم الدروس إلى صفحة الموقع الإلكتروني: ما عليك سوى تحديد الدورة المطلوبة في القسم وستُعرض جميع الدروس.

## كيفية إضافة قسم "بطاقات الدورات"

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

ثم ابحث عن قسم "بطاقات الدورات" في القائمة التي تفتح وانقر عليه لإضافة القسم إلى موقعك الإلكتروني:

<figure><img src="/files/35a0a2822040a0d8060ae7dcae12d85b6a367d1a" alt=""><figcaption></figcaption></figure>

سيتم إضافة القسم إلى موقعك الإلكتروني، وستفتح لك قائمة إعدادات المحتوى:

<figure><img src="/files/67458f896a71af30bf170970c9e435425e2c346a" alt=""><figcaption></figcaption></figure>

### قسم المحتوى

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

{% hint style="info" %}
يتم وصف كيفية إنشاء الدورات على منصة Salebot في القسم “[الدورات عبر الإنترنت”](broken://pages/fe5abb76322b26b346c8447bf575c0e35d4e0bd1).
{% endhint %}

#### اختيار دورة

اختر الدورات التي ترغب في عرضها على موقعك الإلكتروني:

<figure><img src="/files/12e4924bcd2fc8771e47c4dbf4a912f81d4d0db6" alt=""><figcaption></figcaption></figure>

للقيام بذلك، ضع علامة في المربع بجانب اسم الدورة المطلوبة.

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

#### التخصيص

بعد أن تحدد الدورات اللازمة، انتقل إلى تخصيص عناصر البطاقة:

<figure><img src="/files/77a5710c248e5c2c6181e2976ff0d31b88c6a930" alt=""><figcaption></figcaption></figure>

* الظل

<figure><img src="/files/e5d8fb78f96920d5e11831860c26f6db6b532f2f" alt=""><figcaption></figcaption></figure>

يمكنك ضبط شدة الظل لبطاقات الدورات في القسم:

أ) بدون ظل:

<figure><img src="/files/28003af29761a42798e0207760ebce7122eda91d" alt=""><figcaption></figcaption></figure>

ب) ظل خفيف:

<figure><img src="/files/48bbfc9367cb22ab1be382382a8509d442110244" alt=""><figcaption></figcaption></figure>

ج) ظل قوي:

<figure><img src="/files/6c4ff423d71c88992f7716330ed303c96746f30c" alt=""><figcaption></figcaption></figure>

#### إعدادات ألوان عناصر البطاقة

خصّص مظهر البطاقة من خلال ضبط الألوان لعناصر مختلفة. يمكنك أيضًا إضافة تأثيرات تفاعلية عند التمرير.

* **لون النص:** يغيّر لون النص الأساسي على البطاقة (باستثناء الأزرار).
* **خلفية البطاقة:** يضبط لون خلفية البطاقة.
* **لون الحدود:** يحدد لون إطار البطاقة أو حدها الخارجي.
* **نص الزر:** يضبط لون النص داخل الزر (الحالة الثابتة).
* **خلفية الزر:** يضبط لون خلفية الزر.

**تأثيرات تفاعلية عند التمرير (قسم اختياري):**

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

الآن تعرف كيف تعرض الدورات المتاحة في موقع MaviBot الخاص بك باستخدام قسم "بطاقات الدورات".

{% hint style="info" %}
لإعدادات الخلفية والعرض، راجع المقال [«إعدادات القسم العامة»](/doc/ar/websites/almwaqa/blocks/settings.md).
{% endhint %}

## كيفية إضافة كتلة "الدروس"

لإضافة كتلة لعرض قائمة الدروس في الدورة، انتقل إلى وضع تحرير الموقع الإلكتروني وحوم فوق مساحة العمل، ثم انقر على "+":

تفتح قائمة على اليمين مع الأقسام المتاحة في الموقع، حيث تحتاج إلى العثور على كتلة "الدروس":

<figure><img src="/files/de673be88f7698feb24beefc2baca45655f2ca9e" alt=""><figcaption></figcaption></figure>

انقر على "بطاقات الدورات"، ثم ستفتح قائمة لتكوين محتوى الكتلة:

<figure><img src="/files/12dfd6557d9363a3b9d7bedfe85fb11509fe52f4" alt=""><figcaption></figcaption></figure>

ما عليك سوى تحديد الدورة المطلوبة، التي تم إنشاؤها بالفعل في Salebot، من القائمة المنسدلة ثم انقر على "حفظ".

ثم انتقل إلى الإعدادات لتخصيص محتوى الكتلة:

<figure><img src="/files/e579a03c953ed45de0032e612dc894bff8e60bcc" alt=""><figcaption></figcaption></figure>

### التخصيص

عند النقر على زر "الإعدادات" والتمرير فوق القسم، تُفتح إعدادات تخصيص المحتوى والكتلة نفسها:

<figure><img src="/files/7c2caa165d995c5f8891df9216951e2ae0dde267" alt=""><figcaption></figcaption></figure>

**ما الإعدادات المتاحة؟**

1. نمط قائمة الدروس

<figure><img src="/files/25e68da79e1a6a09e29dfc3c762f69b5339465b4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/2e865a63acbf3351e81d80e6bdc14becb95f7c64" alt=""><figcaption><p>النمط الكلاسيكي</p></figcaption></figure>

2. نمط الترقيم

<figure><img src="/files/2c7a29cb1e68523a081e812fd4466fe4f8609ee3" alt=""><figcaption></figcaption></figure>

يتوفر نمط الترقيم للنمط الجديد لعرض دروس الدورة. يتغير الترقيم داخل بطاقة الدرس نفسها:

<figure><img src="/files/f24cc5469831059f855a9b81d88388e1853bb2d0" alt=""><figcaption></figcaption></figure>

3. أيقونات الدروس

<figure><img src="/files/81da976c19fce0678e32ff86e3b88e05a845729d" alt=""><figcaption></figcaption></figure>

**تُعرض إذا أضفت معاينة داخل الدرس نفسه في إعدادات الدورة.**

#### **كيفية إضافة الأيقونات**

الخطوة 1. انتقل إلى إعدادات الدرس:

للقيام بذلك، انتقل إلى وضع إعدادات الدورة وابحث عن علامة التبويب "الدروس":

<figure><img src="/files/3f077a2bd262df33ea862f93d1185208333eaa50" alt=""><figcaption></figcaption></figure>

بعد ذلك، انقر على "تعديل"، وبعد ذلك ستفتح صفحة الدرس للتحرير.

الخطوة 2. افتح إعدادات صفحة الدرس.

<figure><img src="/files/eba949daf93c5de3e5d2658729e66ab97711f6d6" alt=""><figcaption></figcaption></figure>

انتقل إلى قسم "عام" في إعدادات صفحة الدرس:

<figure><img src="/files/35163ccd7fb25649958bd1fb4d8afd02f6056d9c" alt=""><figcaption></figcaption></figure>

الخطوة 3. تحميل معاينة الدرس

وسّع قائمة إعدادات الصورة في إعدادات المعلومات الأساسية:

<figure><img src="/files/0f4fcd5efd465d0a4b1e9c506e57b84e75d7230f" alt=""><figcaption></figcaption></figure>

ارفع صورة لمعاينة الدرس:

<figure><img src="/files/cfcc29e3042f0e1d9d46f80e9332e99b59ebcc47" alt=""><figcaption></figcaption></figure>

احفظ الإعدادات.

{% hint style="success" %}
تم! الآن ستُعرض معاينات الدروس كأيقونات في قسم الدروس على الموقع الإلكتروني.
{% endhint %}

<figure><img src="/files/c6c1ce9d5b18eb9d1da19082e497780b0e1b6a04" alt=""><figcaption></figcaption></figure>

3. نمط الخلفية

<figure><img src="/files/e86609f7f75cbc44019acd103334ea5d8f819a59" alt=""><figcaption></figcaption></figure>

إنه يضيف حجمًا وتميزًا إلى بطاقات الدروس الخاصة بك:

<figure><img src="/files/692a363686ed1bc90118e2f9df818dd25170c38e" alt=""><figcaption></figcaption></figure>

4. استدارة العناصر

تُضبط القيمة بالبكسل وتقوم بتدوير زوايا بطاقات الدروس.

5. نمط بطاقة الدرس

<figure><img src="/files/d8fb024ca0f671e17a04728c9ef545f476da951d" alt=""><figcaption></figcaption></figure>

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

6. لون الخلفية والنص

<figure><img src="/files/86e51a108fdddd3d4e6074791f2ae2fc05467734" alt=""><figcaption></figcaption></figure>

تتوفر لوحة ألوان واسعة لضبط لون خلفية البطاقة ولون الخط على بطاقة الدرس:

<figure><img src="/files/dca478f81a3673ab94fda4de2fb6eaeb2b9dd29f" alt=""><figcaption></figcaption></figure>

الآن تعرف كيف تضيف قوائم الدروس إلى موقعك الإلكتروني وتخصّص محتوى القسم.

{% hint style="info" %}
لإعدادات الخلفية والعرض، راجع المقال [«إعدادات القسم العامة»](/doc/ar/websites/almwaqa/blocks/settings.md).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/ar/websites/almwaqa/blocks/course.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.