> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# خيارات التصميم

> تخصيص بصري لكل كتلة باستخدام علامة تبويب Design.

## ما هي خيارات التصميم

تحتوي معظم الكتل على علامة تبويب **Design** في المفتّش الأيمن. تتيح لك خيارات التصميم تجاوز النمط البصري لكتلة واحدة دون تغيير بقية الصفحة. عندما يُترك حقل تصميم فارغًا (يظهر "Theme default")، ترث الكتلة قيمتها من الثيم النشط بدلاً من ذلك.

<Frame caption="علامة تبويب Design على كتلة Description، تعرض مجموعات Card Style وEffects وTypography">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/design-tab-card-effects.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=5c1b30c73f04cf3562a90ed6be89a49f" alt="علامة تبويب Design مفتوحة على كتلة Description، تعرض Card Style (Style وCard Background وTransparent background)، وEffects (Card Effect وCard Surface وShadow)، وTypography (Text Color وFont Family وFont Size)" width="1440" height="1000" data-path="images/v2/page-builder/design-options/design-tab-card-effects.png" />
</Frame>

## كيفية الوصول إلى خيارات التصميم

<Steps>
  <Step title="تحديد كتلة">
    انقر على كتلة في اللوحة أو في الشريط الجانبي الأيسر لتحديدها.
  </Step>

  <Step title="فتح علامة تبويب Design">
    في اللوحة اليمنى، انقر على علامة تبويب **Design**. (إذا لم يكن لدى الكتلة أي نمط بصري لتجاوزه، تكون علامة التبويب هذه معطّلة — على سبيل المثال Footer وMenu وContact Details لا تحتوي على علامة تبويب Design إطلاقًا.)
  </Step>

  <Step title="تعديل خيار">
    تتحدّث اللوحة في الوقت الفعلي.

    <Tip>
      لإعادة ضبط حقل إلى قيمته الافتراضية في الثيم، امسحه (أو أعد اختيار "Theme default" من قائمته المنسدلة).
    </Tip>
  </Step>
</Steps>

## Typography

تظهر خيارات نمط النص على الكتل التي تحتوي على نص فقرات أو عناوين أو تسميات — Page Title وDescription وEvent Schedule وEvent Venue وCouple Names وغيرها.

| الخيار      | الوصف                                                                                                                                                |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text color  | يتجاوز لون نص الكتلة. اتركه فارغًا لاستخدام لون المقدمة (foreground) الخاص بالثيم.                                                                   |
| Font family | يتجاوز الخط المستخدم لهذه الكتلة. يقبل أي خط في المنتقي.                                                                                             |
| Font size   | **مُضاعِف** حجم متدرّج، وليس مقياس صغير/متوسط/كبير: **0.5×، 0.75×، 1×، 1.25×، 1.5×، 2×، 2.5×، 3×، 3.5×، 4×**. 1× هو الحجم الافتراضي للثيم لذلك النص. |

<Frame caption="القائمة المنسدلة Font Size مفتوحة على علامة تبويب Design لكتلة، تعرض قائمة المضاعِف الكاملة من 0.5× إلى 4×">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/font-size-multiplier.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=af48a44af33da86980b078235017bf75" alt="القائمة المنسدلة Font Size مفتوحة تعرض خيارات المضاعِف من 0.5x إلى 4x، مع تحديد 1x كخيار حالي" width="1440" height="1000" data-path="images/v2/page-builder/design-options/font-size-multiplier.png" />
</Frame>

<Warning>
  حقل Font Size **ليس** مقياسًا مسمّى (Small/Medium/Large/Extra Large). إنه مضاعِف عددي يُطبَّق على الحجم الأساسي للثيم لعنصر النص ذلك — اختر 1× للإبقاء على القيمة الافتراضية للثيم، أو مضاعِفًا أعلى/أقل لتكبيره أو تصغيره.
</Warning>

## Card style

تتحكم خيارات نمط البطاقة في مظهر حاوية الكتلة. تظهر هذه معًا على أي كتلة ذات إطار بطاقة مرئي (Description وCoupon Details وAbout Us وBrand Info ومعظم الأخرى).

| الخيار                              | الوصف                                                                                                                                     |
| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Style (يُسمّى أحيانًا "Appearance") | اختر **Card** (لوحة داخلية بحدود وظل) أو **Full width** (بلا انحسار خارجي — تمتد الكتلة على كامل عرض المحتوى).                            |
| Card Background                     | يتجاوز لون خلفية بطاقة الكتلة. اتركه فارغًا لاستخدام لون السطح الخاص بالثيم. ليس له تأثير مرئي عندما يكون Transparent background مفعّلاً. |
| Transparent background              | يفرض خلفية شفافة بالكامل لهذه الكتلة، بدلاً من لون سطح الثيم — يعمل مع أي إعداد لـ Style.                                                 |

## Effects (لكل كتلة)

بالإضافة إلى Card Background، تعرض معظم الكتل القائمة على البطاقات ثلاثة تجاوزات إضافية ضمن مجموعة **Effects** في علامة تبويب Design:

| الخيار       | الوصف                                                                                                                                                                |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Card Effect  | اختر "Theme default" لوراثة تأثير بطاقة الثيم، أو تجاوزه لهذه الكتلة فقط — راجع [التأثيرات المتحركة](/ar/page-builder/animated-effects) للاطلاع على الكتالوج الكامل. |
| Card Surface | يتجاوز مادة البطاقة (الافتراضي "Theme default") — يعكس عنصر التحكم "Card material" في قسم Surface على مستوى الثيم، معروضًا هنا لكل كتلة على حدة.                     |
| Shadow       | يتجاوز نوع الظل المستخدم لبطاقة هذه الكتلة (الافتراضي "Theme default") — يعكس عنصر التحكم بالظل في قسم Surface على مستوى الثيم.                                      |

<Note>
  **Card Surface** و**Shadow** هما تجاوزان لكل كتلة على نفس الرموز (tokens) المضبوطة عالميًا في قسم **Surface** الخاص بالثيم (راجع [الثيمات](/ar/page-builder/themes)). ضبطهما هنا يؤثر فقط على الكتلة المحدَّدة؛ يستمر كل شيء آخر في الصفحة باستخدام قيم الثيم.
</Note>

## Button styles

تظهر خيارات نمط الزر على كتلة **Button** وعلى الكتل التي تحتوي على زر مدمج (Map وFile Download).

| الخيار        | الوصف                                                                            |
| ------------- | -------------------------------------------------------------------------------- |
| Button color  | لون تعبئة خلفية الزر                                                             |
| Border color  | لون حدود الزر                                                                    |
| Corner radius | منتقي إعدادات مسبقة بخمسة خيارات — **None وS وM وL وFull** — وليس قيمة بيكسل خام |
| Border width  | سماكة حدود الزر بالبيكسل. اضبطها على 0 لإزالة الحدود.                            |

## Icon styles

تظهر خيارات نمط الأيقونة على الكتل التي تعرض أيقونة زخرفية. مؤكَّدة على أرض الواقع في كتلة **Event Venue** (صفحات Wedding/Event):

| الخيار      | الوصف                            |
| ----------- | -------------------------------- |
| Icon colour | اللون المطبَّق على أيقونة الكتلة |

<Frame caption="علامة تبويب Design الخاصة بـ Event Venue، تعرض حقل Icon colour ضمن مجموعة ICON">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/icon-color-event-venue.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=b999139ffe53c7d77a5e2b03a041e356" alt="علامة تبويب Design على كتلة Event Venue تعرض Typography وCard Style ومجموعة ICON تحتوي على Icon colour وEffects" width="1440" height="1000" data-path="images/v2/page-builder/design-options/icon-color-event-venue.png" />
</Frame>

<Note>
  لا تحتوي كل كتلة بها أيقونة على عنصر التحكم هذا — فمثلاً تعرض Contact Us أيقونات لكنها لا تحتوي على تجاوز Icon colour في علامة تبويب Design الخاصة بها.
</Note>

## Separator styles

تظهر خيارات نمط الفاصل على الكتل التي تتضمن خطًا زخرفيًا مدمجًا. مؤكَّدة على أرض الواقع في كتلة **Couple Names** (صفحات Wedding):

| الخيار           | الوصف                                       |
| ---------------- | ------------------------------------------- |
| Separator style  | يختار التصميم البصري للفاصل (الأنماط 01–09) |
| Separator colour | لون خط الفاصل                               |

<Frame caption="علامة تبويب Design الخاصة بـ Couple Names، تعرض مجموعة SEPARATOR مع Separator style وSeparator colour">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/separator-style-couple-names.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=9d657a0d5976bbc87ddf0c7e157311b4" alt="علامة تبويب Design على كتلة Couple Names تعرض Typography وCard Style ومجموعة SEPARATOR مع Separator style مضبوطة على 01 وSeparator colour، وEffects" width="1440" height="1000" data-path="images/v2/page-builder/design-options/separator-style-couple-names.png" />
</Frame>

تختلف هذه عن كتلة **Separator** المستقلة — فهي خطوط زخرفية مدمجة داخل كتل محددة.

## التأثيرات على مستوى الصفحة

تتيح مجموعة Effects في العديد من الكتل لتلك الكتلة تجاوز تأثير الخلفية أو البطاقة أو الزر الافتراضي للثيم لنفسها فقط. راجع [التأثيرات المتحركة](/ar/page-builder/animated-effects) للاطلاع على القائمة الكاملة وكيفية ضبط الإعدادات الافتراضية على مستوى الثيم.

## الأسبقية

تتبع خيارات التصميم ترتيب الأولوية هذا (من الأعلى إلى الأدنى):

1. إعداد علامة تبويب Design الخاص بالكتلة (إن وُجد)
2. تجاوز الثيم على مستوى الصفحة (في لوحة Customise الخاصة بمنتقي Theme)
3. القيمة الافتراضية للثيم المُعدّ مسبقًا

الحقل الفارغ في علامة تبويب Design يعني "استخدم قيمة الثيم". الحقل غير الفارغ يتجاوز الثيم لهذه الكتلة فقط.

## نصائح

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

## ذات صلة

* [الثيمات](/ar/page-builder/themes) — الرموز (tokens) على مستوى الصفحة التي ترجع إليها هذه التجاوزات الخاصة بكل كتلة.
* [التأثيرات المتحركة](/ar/page-builder/animated-effects) — الكتالوج الكامل وراء خياري Card Effect وButton Effect.
* [مرجع الكتل](/ar/page-builder/blocks-reference) — أي الكتل تعرض علامة تبويب Design أصلاً.