# إعدادات القسم العامة

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

لتكوين الإعدادات العامة لأي كتلة، مرّر المؤشر فوقها ثم اختر **الإعدادات** الزر الذي يظهر.

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

انقر على **الإعدادات** الزر لفتح قائمة إعدادات القسم العام على اليمين.

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

## إعدادات الخطوط

يمكنك تغيير الإعدادات التالية:

* الخط والأسلوب: عائلة الخط، والأسلوب (عادي أو مائل)، والوزن (السُمك).
* التباعد: تباعد الأحرف، وارتفاع السطر، وحجم الخط.

<figure><img src="/files/34e24c6880cab976635357aa8d72d49d3fb6344f" alt=""><figcaption></figcaption></figure>

بالنسبة إلى الكتل التي تحتوي على كلٍّ من حقل العنوان وحقل النص، لديك خياران للتنسيق:

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

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

### كيفية إضافة خط مخصص

لإضافة خط مخصص، ابحث عن الزر الذي يحمل الاسم نفسه وانقر عليه:

<figure><img src="/files/57ef434068f09d3ff87ff425d75dfd98484cb776" alt=""><figcaption></figcaption></figure>

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

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

الخطوة 1. ابحث عن الخط المطلوب

أ) يمكن القيام بذلك باستخدام شريط البحث:

<figure><img src="/files/52de58a57de000ceee4c4a267f35982f05decf11" alt=""><figcaption></figcaption></figure>

حدّد المعايير اللازمة للخط:

* فئة الخط
* sans-serif (أحرف بلا زوائد)
* serif (أحرف ذات زوائد)
* handwriting (خط يحاكي الكتابة اليدوية)
* monospace (خط أحادي المسافة أو غير متناسب، وهو خط تكون فيه جميع الأحرف بنفس العرض)
* display (خط عريض للعرض)
* دعم اللغة
* السيريلية
* اللاتينية

ب) للعثور على خط يدويًا، مرّر عبر القائمة في شريط التنسيق.

الخطوة 2. انقر على الخط المحدد:

سترى نافذة منبثقة تحتوي على خيارات الخط:

<figure><img src="/files/9d66e5d337b9c45bc443e10484d50bca10ef4c22" alt=""><figcaption></figcaption></figure>

الخطوة 3. اختر خيار خط بوضع علامة في المربع بجانب الخيار الذي تحتاجه:

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

الخطوة 4. انقر على **"إضافة"** الزر:

<figure><img src="/files/5ba063d895c2b766c648a8b455974e70dd6c9dc8" alt=""><figcaption></figcaption></figure>

ستظهر إعدادات الخط المخصص هنا بمجرد حفظها.

<figure><img src="/files/1355210b4ed5759be8e9c88b2feb1fa458df7539" alt=""><figcaption></figcaption></figure>

الخطوة 6. انقر على **"حفظ"**:

<figure><img src="/files/735da02850a9a4a96aba47976e9c729be3222ce3" alt=""><figcaption></figcaption></figure>

ستظهر الخطوط المضافة في القائمة نفسها التي تحتوي على الخطوط الافتراضية.

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

## إعدادات الخلفية

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

خصّص خلفية القسم بلونٍ صلب أو تدرج أو صورة أو فيديو.

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

يمكنك وضع لون أو تدرج فوق صورة الخلفية.

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

يمكن إضافة الصورة كملف أو كرابط إلى الصورة:

<figure><img src="/files/9bb0249d64078a19038cb26c8ff8583bd6178df7" alt=""><figcaption></figcaption></figure>

يمكن إضافة فيديو من التخزين

<figure><img src="/files/94a133e926f5f00e19301f7d4c46de20f1702db5" alt=""><figcaption></figcaption></figure>

أولًا، حمّل ملف الفيديو إلى مساحة التخزين.

<figure><img src="/files/9a56039e9d0df7aeb412df1dba6fc0caf44a892e" alt=""><figcaption></figcaption></figure>

### إعدادات صورة الخلفية

**عنصر التحكم في موضع الصورة**

يتم تحديد موضع الصورة داخل القسم باستخدام معاملين مستقلين:

1. **المحاذاة الأفقية** (المحور X)
2. **المحاذاة الرأسية** (المحور Y)

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

| الكلمة المفتاحية                            | التأثير          |
| ------------------------------------------- | ---------------- |
| `أعلى`, `أسفل`, `الوسط`                     | المحاذاة الرأسية |
| `اليسار`, `اليمين`, `الوسط`                 | المحاذاة الأفقية |
| `أسفل اليسار`, `أعلى اليمين`, `الوسط الوسط` | موضع مركّب       |

**لتحكم دقيق**، يمكنك أيضًا استخدام قيم رقمية:

* نِسَب مئوية (مثل، `30% 75%`)
* بكسلات (مثل، `20px 100px`)
* أو وحدات مختلطة

<figure><img src="/files/4977716b5016ac1a7d332b81bbafb4a4aa1aec03" alt=""><figcaption><p>الموضع 100%؛ الحجم 100%؛ عدم التكرار</p></figcaption></figure>

**خيارات تحجيم الصورة**

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

**1. تعيين أبعاد مخصصة**

حدّد كلًّا من العرض والارتفاع باستخدام قيم مرنة.

* **الصيغة:** `[العرض] [الارتفاع]`
* **مثال 1 (بالبكسل):** `500px 300px`
* **مثال 2 (النسبة المئوية):** `15% 10%`

**2. استخدام كلمة مفتاحية مسبقة الإعداد**

حدّد معاملًا واحدًا لتطبيق سلوك تحجيم معين:

* **`contain`** — يغيّر حجم الصورة لتناسب ارتفاع القسم بالكامل مع الحفاظ على نسبة أبعادها (مثال 3).
* **`cover`** — يعرض الصورة بأبعادها الأصلية بالبكسل (مثال 4: الحجم الأصلي 1268 × 1343 بكسل).

<figure><img src="/files/5c8529a12f678b91580b68e2edb80d99f8f2272b" alt=""><figcaption></figcaption></figure>

**تكرار الصورة**

هذا الخيار معطّل افتراضيًا. تتضمن الإعدادات المتاحة ما يلي:

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

**كيفية تثبيت صورة**

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

<figure><img src="/files/8845b89f155699ff90d77890d340a24fd58cd884" alt=""><figcaption></figcaption></figure>

### لون الخلفية والتدرج

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

<figure><img src="/files/d121f589b82a5e78fbf6753f647a1d87e60359ef" alt="" width="563"><figcaption></figcaption></figure>

## إعدادات العرض

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

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

**نصف قطر الحدود:**

<figure><img src="/files/947f751eec76bb680eab7c1c753edb451a586a44" alt=""><figcaption></figcaption></figure>

يُشار إلى نصف قطر الحدود بالبكسل - px.

ارتفاع القسم

<figure><img src="/files/62addd3e01bacecae218753befc1f48bd856fb72" alt=""><figcaption></figcaption></figure>

يمكن تحديد ارتفاع القسم باستخدام الوحدات التالية:

* px: بكسل (قيمة ثابتة)
* vh: ارتفاع منطقة العرض (متجاوب مع حجم الشاشة)

### عرض القسم

عرض عمود واحد = 106 بكسل

افتراضيًا، يتم ضبط عرض القسم على كامل الشاشة، ويتم عرض المحتوى ضمن تخطيط مكوّن من 8 أعمدة.

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

مثال 1: يتم توسيط المحتوى داخل القسم ويمتد عبر 5 أعمدة من التخطيط.

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

مثال 2. يمتد قسم عبر 8 أعمدة، مع تغطية المحتوى للعرض الكامل للقسم:

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

**تأثير الظهور عند التمرير**

<figure><img src="/files/4569d3df1cf4eaaacc7039047ec37519e54059fd" alt=""><figcaption></figcaption></figure>

فعّل هذا المفتاح لتمكين الرسوم المتحركة المرتبطة بالتمرير لمحتواك. يمكنك اختيار ظهور المحتوى من الأسفل أو الأعلى أو اليسار أو اليمين.

### عرض المحتوى

يُعرض المحتوى أفقيًا ومتمركزًا افتراضيًا. ويمكن نقله إلى الحافة اليسرى أو اليمنى للصفحة.

<figure><img src="/files/1e4f5fb543fa7458509cdef6ff55fa77198dcd2b" alt=""><figcaption></figcaption></figure>

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

لضبط النص ليتناسب مع الشاشات الضيقة وفقًا لأنماط Mavibot، يُرجى تفعيل هذا الشريط:

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

### الهوامش (للقسم)

#### الهوامش الخارجية

يمكنك استخدام هذه الحقول لضبط المسافة بين الأقسام. افتراضيًا، يكون الحشو الداخلي (أعلى/أسفل/يسار/يمين) مضبوطًا على 0 بكسل.

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

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

<figure><img src="/files/76ebfcb31cb45454e877b920cb9d4246ff80dbb8" alt=""><figcaption></figcaption></figure>

لضمان الاتساق البصري، يجب تكوين الهوامش بشكل منفصل لكل قسم.

#### الهوامش الداخلية

استخدم هذه الحقول لضبط الهامش الداخلي للقسم. افتراضيًا، يكون الهامش (أعلى، أسفل، يسار، يمين) مضبوطًا على 32 بكسل.

<figure><img src="/files/454531a7dfa402be398d4c27520dcd5c6506f7ec" alt=""><figcaption></figcaption></figure>

#### نطاق الظهور حسب الجهاز

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

<figure><img src="/files/19cb42f8ceb18c7c081f1139c9922e87e08ace4c" alt=""><figcaption></figcaption></figure>

**لماذا هذا مفيد وكيف يعمل؟**

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

بعد ذلك، تحتاج إلى نسخ هذا المقطع وتخصيص مظهره خصيصًا للأجهزة المحمولة (تغيير الصورة، وحجم الخط، إلخ). لهذا المقطع، اضبط الظهور ضمن النطاق من 0 إلى 960 بكسل. ستكون هذه هي النسخة المحمولة من المقطع.

ونتيجةً لذلك، سيتم عرض نسخة سطح المكتب على أجهزة الكمبيوتر، بينما ستُعرض النسخة المحمولة على الهواتف الذكية والأجهزة اللوحية.

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

{% hint style="info" %}
افتراضيًا، يتم عرض القسم على الأجهزة من أي حجم.
{% endhint %}

#### مثال

تكوين القسم الأول للأجهزة المحمولة والأجهزة اللوحية

* أنشئ قسمًا
* اضبط نطاق ظهوره من 0 إلى 640 بكسل
* حمّل صورة محسّنة للشاشات الصغيرة

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

القسم الثاني مخصص لأجهزة الكمبيوتر الشخصي (أجهزة اللابتوب). اضبط نطاق الظهور من 641 بكسل فما فوق.

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

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

<figure><img src="/files/32286ec1bcf5e1bc9ec77014d16d3d475a1b9b8e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/09eab6fc171acce8632ed7d5233bd669f69cc3f2" alt=""><figcaption></figcaption></figure>

حدّد الجهاز الذي تريد أن ترى كيف سيبدو عليه الموقع.

#### توقيت الظهور

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

يمكنك استخدام هذا الحقل لتحديد مدة التأخير قبل ظهور القسم، وتُحدَّد بالثواني (s) أو الدقائق (m).


---

# 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/settings.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.
