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

# إعدادات التصميم

> إعدادات التصميم العامة والخاصة بكل بلوك في Aftersell Cart: الألوان والأزرار والتخطيط وكيف تُطبَّق تجاوزات البلوكات فوقها.

يعمل تصميم Aftersell Cart على مستويين: إعدادات **عامة** تنسّق السلة بأكملها، وتجاوزات **لكل بلوك** تضبط بلوكًا بعينه بدقة.

<div id="global-design-settings">
  ## إعدادات التصميم العامة
</div>

افتح **Cart settings** من الشريط الجانبي للمحرر للوصول إلى التصميم العام للسلة. الإعدادات مجمّعة في Design وButtons وLayout.

<div id="design">
  ### Design
</div>

| الإعداد                  | ما الذي يتحكم فيه                                               | القيمة الافتراضية |
| ------------------------ | --------------------------------------------------------------- | ----------------- |
| **Background color**     | خلفية السلة.                                                    | `#ffffff`         |
| **Text color**           | النص الأساسي.                                                   | `#000000`         |
| **Secondary text color** | النص الباهت / الثانوي.                                          | `#a8a8a8`         |
| **Accent color**         | الشارات والفواصل والأسعار المشطوبة.                             | `#f2f2f2`         |
| **Border radius**        | استدارة الزوايا للحاويات والبطاقات والصور وحقول الإدخال النصية. | `8px`             |

<div id="buttons">
  ### Buttons
</div>

| الإعداد              | ما الذي يتحكم فيه                                             | القيمة الافتراضية |
| -------------------- | ------------------------------------------------------------- | ----------------- |
| **Background color** | تعبئة الزر.                                                   | `#000000`         |
| **Text color**       | تسمية الزر.                                                   | `#ffffff`         |
| **Border color**     | حدود الزر.                                                    | `#000000`         |
| **Border radius**    | استدارة الزوايا للأزرار والقوائم المنسدلة وعناصر تحكم الكمية. | `8px`             |

<div id="layout">
  ### Layout
</div>

| الإعداد                | ما الذي يتحكم فيه                             | القيمة الافتراضية |
| ---------------------- | --------------------------------------------- | ----------------- |
| **Horizontal padding** | الحشو الأيسر/الأيمن داخل السلة.               | `24px`            |
| **Desktop width**      | عرض الدرج على سطح المكتب (الحد الأدنى 320px). | `440px`           |

<div id="per-block-design-overrides">
  ## تجاوزات التصميم لكل بلوك
</div>

لكل بلوك باستثناء [**Custom code**](/ar/aftersell/cart/custom-code-blocks) تجاوزات تصميم خاصة به في أسفل لوحة إعداداته — بعنوان **Design** في كل بلوك عدا **Express payments**، الذي تقع تجاوزاته في قسمي Style وSpacing غير المعنونين. (لا توجد لوحة إعدادات لـ Custom code إطلاقًا — البلوك *هو* الكود، فلا يعرض إلا علامة تبويب Code.) تتحكم هذه التجاوزات في أمور مثل النمط والتباعد وإعدادات تصميم أخرى خاصة بالبلوك. **إعدادات التصميم لكل بلوك** هذه، عندما تُترك فارغة، تعود إلى الإعداد العام لتلك الخاصية.

تتضمن العديد من البلوكات أيضًا قسم **Text** ضمن لوحة Design الخاصة بها، حيث يمكنك ضبط الطباعة لعناصر نصية محددة في ذلك البلوك — عائلة الخط والحجم وارتفاع السطر والتباعد بين الأحرف. البلوكات التي تحتوي على عدة عناصر نصية (مثل Notes وEmpty cart) تعرض منتقي **Text element** لتتمكن من تنسيق كل عنصر بشكل مستقل.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="معاينة متحركة للوحة إعدادات Design الخاصة بكل بلوك في محرر السلة" title="معاينة متحركة للوحة إعدادات Design الخاصة بكل بلوك في محرر السلة" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## الخطوط وموضع الدرج
</div>

* **الخطوط:** ترث السلة **خط قالبك** افتراضيًا. يمكنك تعيين عائلة خط مخصصة لعناصر نصية محددة (مثل عنوان المنتج وعنوان قسم البيع الإضافي) من قسم **Text** في إعدادات التصميم الخاصة بكل بلوك — راجع [بلوك عناصر السلة](/ar/aftersell/cart/cart-items-block) و[بلوك البيع الإضافي](/ar/aftersell/cart/upsells-block) للتفاصيل.
* **موضع الدرج:** **عرض** الدرج قابل للتعديل (Desktop width أعلاه)؛ لا يوجد إعداد لموضعه يمينًا/يسارًا.

<div id="behavior-settings">
  ## إعدادات السلوك
</div>

إلى جانب التنسيق، تحتوي **Cart settings** أيضًا على خيارات سلوك — فتح الدرج عند الإضافة إلى السلة، ومحددات القالب التي تُبقي واجهة متجرك متزامنة. راجع [إعدادات السلة](/ar/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## متى تستخدم CSS المخصص بدلًا منها
</div>

تغطي الإعدادات المدمجة الحالات الشائعة. لأي شيء يتجاوزها — استهداف عنصر محدد، أو تباعد مخصص، أو تعديلات متجاوبة — استخدم [CSS المخصص](/ar/aftersell/cart/custom-css).