# بطاقات قابلة للتخصيص

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

<figure><img src="/files/32007b9f4baf718d39afe31d093b196fe49b1f6f" alt=""><figcaption></figcaption></figure>

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

## كيفية إضافة كتلة؟

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

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

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

<figure><img src="/files/41abcaf530e780061a80f221a8488fd84ba32a62" alt=""><figcaption></figcaption></figure>

## كيفية إضافة بطاقة؟&#x20;

في قائمة تحرير محتوى قسم "البطاقات القابلة للتخصيص"، سترى أقسامًا مختلفة للإعدادات: نمط البطاقات، الصور، الأزرار، إلخ.

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

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

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

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

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

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

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

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

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

للقيام بذلك، حدّد النص (أو جزءًا منه) وطبّق الإعدادات اللازمة عليه:

<figure><img src="/files/33764efa2e527e5a40bcf286e763fa5424806671" alt=""><figcaption></figcaption></figure>

بعد أن تنتهي من إعداد البطاقة الأولى بالكامل، أضف التالية: للقيام بذلك، انقر على زر "إضافة بطاقة" الموجود أسفل شريط الإعدادات للبطاقة الأولى التي تمت إضافتها:

<figure><img src="/files/46bcd2e710d403a97451fe7003998996da44ac3f" alt=""><figcaption></figcaption></figure>

## إعدادات البطاقات

{% hint style="info" %}
تُضبط البطاقات بنمط واحد: جميع الإعدادات التي تستخدمها في هذا القسم ستُطبَّق على جميع البطاقات في القسم نفسه.
{% endhint %}

### نمط البطاقات

يوجد نمطان للبطاقات في أداة إنشاء المواقع Mavibot: نمط بسيط ونمط على شكل منزلق.

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

<figure><img src="/files/4970e9a434a2bb51f2c8cfdc33a159b13f964d71" alt=""><figcaption></figcaption></figure>

عند استخدام نمط "المنزلق"، ستظهر البطاقات على شكل شريط عرض متتابع، مما يضيف مزيدًا من الحيوية إلى الموقع:

في نمط المنزلق، يمكنك اختيار مكان ظهور أسهم البطاقة والنقاط:

<figure><img src="/files/8e22273c7670d9f3cd8d48ec4ba169375b474671" alt=""><figcaption></figcaption></figure>

يمكن أن تكون الأسهم داخل المنزلق أو خارجه أو مخفية (على سبيل المثال، إذا قمت بتعيين مؤقت لتقليب البطاقات تلقائيًا):

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

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

لتمرير البطاقات تلقائيًا، اضبط الفاصل الزمني لعرض صفحة واحدة:

<figure><img src="/files/24d40d29d7832c7a7a5bf4b4a458144e041db1e0" alt=""><figcaption></figcaption></figure>

إذا كانت قيمة المؤقت مضبوطة على 0، فلن يتم تمرير البطاقات تلقائيًا.

{% hint style="warning" %}
انتبه!&#x20;

يتم ضبط الوقت بالمللي ثانية، حيث إن المللي ثانية الواحدة تساوي 0.001 ثانية. وهذا يعني أنه إذا كنت بحاجة إلى ضبط 7 ثوانٍ، فأدخل القيمة 7000 في الحقل.
{% endhint %}

يمكنك أيضًا اختيار نوع البطاقة:

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

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

لتخصيص البطاقات بما يناسب أسلوبك، استخدم إعدادات الألوان:

<figure><img src="/files/6472a1e1f9755d38b12dff773813eaaf28a0cffa" alt=""><figcaption></figcaption></figure>

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

تتوفر لوحة ألوان واسعة لتخصيص الألوان:

<figure><img src="/files/67d0b9d29e2ff0efb3427a676cc708da2283ff04" alt=""><figcaption></figcaption></figure>

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

#### إعداد الحدود والحشوات الداخلية

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

1. **عدد البطاقات في الصف** - حقل نصي يساعدك على تحديد العدد المطلوب من البطاقات في صف واحد (صفحة واحدة).
2. **الحشوات الداخلية -** هي حقول لإدخال قيم رقمية تساعد على زيادة أو تقليل الهوامش الأفقية/العمودية بين البطاقات، وكذلك الهوامش داخل البطاقات،

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

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

<figure><img src="/files/0153bdfbf6d2c719374ab663d2d1665fb9b3eae4" alt=""><figcaption></figcaption></figure>

#### اتجاه البطاقة

<figure><img src="/files/9106dbaef5e443e09ce1d62ce62a49991ebdbe7f" alt=""><figcaption></figcaption></figure>

يمكن أن يكون اتجاه البطاقة أفقيًا وكذلك عموديًا.

#### المحاذاة

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

<figure><img src="/files/973e01ff17fe4ba20e91347d6395acac7102b657" alt=""><figcaption></figcaption></figure>

#### إعدادات الظل

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

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

## إعدادات الصورة

تُطبَّق إعدادات الصورة أيضًا على جميع الصور التي أضفتها إلى البطاقة.

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

في إعدادات الصورة، تحتاج إلى ضبط:

أ) عرض الصورة:

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

يتقبل الحقل قيمة رقمية بالبكسل، وإذا لم تُحدَّد، فسيُعرض تلقائيًا وفقًا للعرض الفعلي للصورة بالبكسل.

ب) ارتفاع الصورة:

<figure><img src="/files/10fe82f175fc367609c649731471d8e01ce29f3d" alt=""><figcaption></figcaption></figure>

يتقبل الحقل قيمة رقمية بالبكسل، وإذا لم تُحدَّد، فسيُعرض تلقائيًا بما يتناسب مع الارتفاع الفعلي للصورة.

ج) الاستدارة:

<figure><img src="/files/27a21f086a49a0e2ee89058f8c9a0a5e564743c1" alt=""><figcaption></figcaption></figure>

الحقل الذي يقبل قيمة رقمية بالبكسل يساعد على تدوير زوايا الصورة:

<figure><img src="/files/8e03638dd6dec8ae82296f61e6fedadc76fec7f2" alt=""><figcaption></figcaption></figure>

د) حجم الصورة:

<figure><img src="/files/019699289587c811baed32a9366a010a8d069661" alt=""><figcaption></figcaption></figure>

يُطبَّق هذا الإعداد إذا كان من الضروري ملء/تمديد/تحديد موضع الصورة بالنسبة إلى العرض والارتفاع المحددين لها.

هـ) خانة الاختيار "الصورة بعد النص"

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

## كيفية إعداد الأزرار

<figure><img src="/files/53f893c625a7f5308962ff8da4d4d23830cd7388" alt=""><figcaption></figcaption></figure>

الـ **نص،** وكذلك **الرابط** إلى الصفحة التي يجب على زائر موقعك النقر عليها، يتم ضبطها داخل البطاقة نفسها:

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

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

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

لتعيين لون النص وخلفية الزر، استخدم الإعدادات هنا:

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

بعد ذلك، يمكنك ضبط الحجم والعرض والحشوات الداخلية للزر:

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

1. **عرض الزر** - هو حقل يقبل قيمة رقمية بوحدتي البكسل والنسبة المئوية:

<figure><img src="/files/7084e5e3cb25c5e899a2b6c51a1cae7fc57930a2" alt=""><figcaption></figcaption></figure>

2. **محاذاة الزر** - يساعد على ضبط موضع الزر في البطاقة بالنسبة إلى الحافة اليمنى أو اليسرى، وكذلك في الوسط.

<figure><img src="/files/967c266df6c234f1327d4bbb05af8226b36e4f11" alt=""><figcaption></figcaption></figure>

3. **نصف قطر حدود الزر -** هو حقل يقبل قيمة رقمية بالبكسل لتدوير زوايا الزر:

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

4. **عرض الحدود -** هو حقل يقبل قيمة رقمية بالبكسل لتحديد عرض إطار الزر:

<figure><img src="/files/44028a5cf62010357f55fd67b5113875fb0dd82d" alt=""><figcaption></figcaption></figure>

5. **الهامش**&#x20;

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

<figure><img src="/files/68051da53350d5ab32752996490c6fdad6b0626b" alt=""><figcaption></figcaption></figure>

6. **الحشوة**

يساعدك على ضبط الحشوات الداخلية داخل الزر.

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

7. **الأيقونة**

إذا قمت بتحميل أيقونة إلى زر في البطاقة، فيمكن ضبط الأيقونة لتلائم:

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

وكذلك تعيين موضع الأيقونة بالنسبة إلى النص إلى اليسار أو اليمين:

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

8. **ظل الزر**

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

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

9. **حركة الزر**

<figure><img src="/files/8dbea28aff18b2d8a074b8eaffaed48571a7c243" alt=""><figcaption></figcaption></figure>

تساعد على جذب انتباه العملاء (مستخدمي الموقع) إلى الإجراء المستهدف على الزر وإضافة ديناميكية إلى الموقع:

1\) حركة وميض الزر:

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

2\) حركة تموج الزر:

<figure><img src="/files/6538bc4a52aab4b658ba87ee64c9c9dc900022e6" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
تم! \
الآن تعرف كيف تنشئ البطاقات على موقعك وتخصصها من الصفر.
{% 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/cards.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.