---
url: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/%D9%81%D8%A6%D8%A7%D8%AA-%D8%A7%D9%84%D8%A3%D8%AF%D9%88%D8%A7%D8%AA'
title: 'فئات الأدوات | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T06:18:49+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  يحمل كل عنصر حقل فئات HTML مع قائمة فئات مُسمّاة. وأدوات Bootstrap 5
  المساعدة وظلال الإسقاط مدمجة. ويمكن لقالبكم إضافة مجموعة خاصة به عبر ملف
  .info.yml الخاص به، ولوحدة عبر خطاف تعديل. تشرح هذه الصفحة ما تحويه
  القائمة وكيف تسجّلون فئاتكم الخاصة، فيختار المحرّرون مظهر العلامة بالاسم بدل
  كتابة أسماء الفئات.
tags:
  - 'Match your brand'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'فئات الأدوات'
      description: |-
        يحمل كل عنصر حقل فئات HTML مع قائمة فئات مُسمّاة. وأدوات Bootstrap 5
        المساعدة وظلال الإسقاط مدمجة. ويمكن لقالبكم إضافة مجموعة خاصة به عبر ملف
        .info.yml الخاص به، ولوحدة عبر خطاف تعديل. تشرح هذه الصفحة ما تحويه
        القائمة وكيف تسجّلون فئاتكم الخاصة، فيختار المحرّرون مظهر العلامة بالاسم بدل
        كتابة أسماء الفئات.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T06:18:49+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/%D9%81%D8%A6%D8%A7%D8%AA-%D8%A7%D9%84%D8%A3%D8%AF%D9%88%D8%A7%D8%AA'
      articleSection: 'طابقوا علامتكم'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/%D9%81%D8%A6%D8%A7%D8%AA-%D8%A7%D9%84%D8%A3%D8%AF%D9%88%D8%A7%D8%AA'
      description: |-
        يحمل كل عنصر حقل فئات HTML مع قائمة فئات مُسمّاة. وأدوات Bootstrap 5
        المساعدة وظلال الإسقاط مدمجة. ويمكن لقالبكم إضافة مجموعة خاصة به عبر ملف
        .info.yml الخاص به، ولوحدة عبر خطاف تعديل. تشرح هذه الصفحة ما تحويه
        القائمة وكيف تسجّلون فئاتكم الخاصة، فيختار المحرّرون مظهر العلامة بالاسم بدل
        كتابة أسماء الفئات.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[مركز المساعدة](/ar/hc)/[التوثيق](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82) /[تعلّم DXPR Builder](/ar/hc/documentation/learn-dxpr-builder) /[إدارة الموقع](/ar/hc/documentation/learn-dxpr-builder/manage) /[طابقوا علامتكم](/ar/hc/documentation/learn-dxpr-builder/customization) # فئات الأدوات.

 تعلّم DXPR Builderإدارة الموقعطابقوا علامتكم

   ## في هذا الدليل

 أدلة ذات صلة

- [تنسيق محتوى المنشئ باستخدام CSS الخاص بقالبكم](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9)
- [إضافة أنماط العلامة وأزرارها إلى محرر النصوص](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/%D9%85%D8%AD%D8%B1%D8%B1-%D8%A7%D9%84%D9%86%D8%B5%D9%88%D8%B5)
- [مرجع واجهة الخطافات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1/api-%D8%A7%D9%84%D8%AE%D8%B7%D8%A7%D9%81%D8%A7%D8%AA)

يحمل كل عنصر حقل **فئات HTML** مع قائمة فئات مُسمّاة. وأدوات Bootstrap 5 المساعدة وظلال الإسقاط مدمجة. ويمكن لقالبكم إضافة مجموعة خاصة به عبر ملف `.info.yml` الخاص به، ولوحدة عبر خطاف تعديل. تشرح هذه الصفحة ما تحويه القائمة وكيف تسجّلون فئاتكم الخاصة، فيختار المحرّرون مظهر العلامة بالاسم بدل كتابة أسماء الفئات.

## تطبيق فئة

1. افتحوا إعدادات العنصر وجدوا **فئات HTML** أسفل لوحة **عام**.
2. انقروا المربع واختاروا فئة من القائمة. فالكتابة في المربع ترشّح القائمة.
3. لإدخال فئة ليست في القائمة، انقروا **تحرير كنص** واكتبوها.
4. انقروا **حفظ** في مربع الحوار، ثم **حفظ** على شريط أدوات المنشئ.

تدخل الفئات في سمة `class` الخاصة بالعنصر في HTML المحفوظ. ويُرشد [معرّف HTML والفئات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9) المحرّرين عبر الاستخدامات الشائعة.

## ما الذي تحويه القائمة

يبني المحرّر القائمة عندما يبدأ. وهو يدمج ثلاثة مصادر بهذا الترتيب:

1. القائمة المدمجة. وهي تحمل مجموعة **ظلال الإسقاط** ومجموعة **فئات Bootstrap** قصيرة وأدوات Bootstrap 5 المساعدة، مجمّعة حسب المهمة: **العرض والظهور** و**الظهور المتجاوب** و**الهوامش** و**الحشوات** و**ألوان النصوص** وغيرها.
2. مجموعة لكل قالب مثبّت يحمل ملف `.info.yml` الخاص به مفتاح `dxpr_builder_classes`. وتُسمّى المجموعة باسم القالب.
3. تغييرات من الوحدات، انظر [تسجيل الفئات من وحدة](#register-classes-from-a-module).

فكل موقع يحمل فئات للمسافات، مثل `mt-3` و`px-4`، وللعرض، مثل `d-none`، وللنصوص، مثل `text-center` و`fw-bold`. ولا تُعِدّون شيئًا لها.

## تسجيل الفئات في قالب

أضيفوا ربط `dxpr_builder_classes` إلى ملف `.info.yml` الخاص بالقالب. فكل مفتاح اسم فئة، أو عدة أسماء مفصولة بمسافات؛ وكل قيمة هي التسمية التي يراها المحرّرون. يسجّل قالب DXPR فئاته بهذه الطريقة:

```yaml
dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

```

1. أضيفوا الربط إلى `themes/custom/mytheme/mytheme.info.yml`:

    ```yaml
    dxpr_builder_classes:
      brand-card: 'Brand card'
      brand-card shadow-lg: 'Brand card with shadow'

    ```
2. اكتبوا CSS الخاص بالفئات في مكتبة يحمّلها القالب على كل صفحة؛ انظر [CSS مخصص](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9).
3. امسحوا ذاكرات التخزين المؤقت باستخدام `drush cr`، ليقرأ Drupal ملف المعلومات مجددًا.
4. افتحوا إعدادات عنصر وتأكدوا من أن **فئات HTML** تعرض مجموعة باسم قالبكم والمدخلين.

يضيف كل قالب مثبّت يحمل المفتاح مجموعته، لا القالب الافتراضي وحده. وتحمل المجموعة دائمًا اسم القالب؛ فلا يستطيع ملف المعلومات إعادة تسميتها.

## تسجيل الفئات من وحدة

تستطيع الوحدة المخصصة إضافة فئات، أو إزالة فئات سجّلها قالب، بخطاف تعديل. ولا تستطيع إزالة مدخلات Bootstrap المدمجة، لأن المحرّر يضيفها في المتصفح. والشيفرة في [مرجع واجهة الخطافات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1/api-%D8%A7%D9%84%D8%AE%D8%B7%D8%A7%D9%81%D8%A7%D8%AA#hook_dxpr_builder_classes_alter).

## إصدار Bootstrap

القائمة المدمجة هي Bootstrap 5. وإذا كان قالبكم لا يحمّل Bootstrap 5، فاضبطوا **تحميل ملفات Bootstrap جانبيًا** على **Bootstrap 5** ضمن **Bootstrap** في **DXPR Studio** > **DXPR Builder** > **الإعدادات العامة**، ليكون للفئات CSS خلفها. انظر [الأداء](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D9%85%D8%AA%D9%82%D8%AF%D9%85/%D8%A7%D9%84%D8%A3%D8%AF%D8%A7%D8%A1#bootstrap-sideloading) لما يحمّله ذلك.

## إذا لم تروا فئاتكم

- **مجموعة قالبكم غائبة عن فئات HTML.** ما زال Drupal يستخدم النسخة القديمة من ملف معلومات القالب. انقروا **مسح كل ذاكرات التخزين المؤقت** في **الإعدادات** > **التطوير** > **الأداء** (`/admin/config/development/performance`)، أو شغّلوا `drush cr`.
- **قالب يحمل المفتاح لا يضيف مجموعة.** تُحتسَب القوالب المثبّتة فقط. ثبّتوا القالب في **المظهر** (`/admin/appearance`)؛ ولا حاجة لأن يكون القالب الافتراضي.
- **يبدو العنصر متماثلًا بعد اختيار فئة.** لا يُحمَّل CSS لتلك الفئة على الصفحة. أضيفوا القواعد إلى مكتبة يحمّلها قالبكم، انظر [CSS مخصص](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9). ولفئات Bootstrap، انظر [إصدار Bootstrap](#bootstrap-version).

## ما الخطوة التالية؟

- [CSS مخصص](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5/css-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9): كتابة القواعد خلف فئاتكم.
- [محرر النصوص](/ar/hc/documentation/learn-dxpr-builder/customization/text-editor): عرض الفئات للفقرات والكلمات في قائمة **الأنماط**.
- [مرجع واجهة الخطافات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1/api-%D8%A7%D9%84%D8%AE%D8%B7%D8%A7%D9%81%D8%A7%D8%AA): الخطافات الأخرى التي يقدّمها DXPR Builder.