---
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%B7%D9%88%D9%8A%D8%B1/%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82'
title: 'تنسيق DXPR Builder | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:16:09+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  محتوى المنشئ هو HTML عادي في صفحتكم، لذا ينسّقه قالبكم كأي محتوى آخر. تغطي هذه الصفحة ما يرثه القالب، وكيف يضيف الفئات إلى المحرر، وأين تُوضع التجاوزات.
  ما ينسّقه قالبكم
  يرث محتوى المنشئ المنشور أنماط قالبكم:
tags:
  - 'Build on it'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T19:16:09+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'تنسيق DXPR Builder'
      description: |-
        محتوى المنشئ هو HTML عادي في صفحتكم، لذا ينسّقه قالبكم كأي محتوى آخر. تغطي هذه الصفحة ما يرثه القالب، وكيف يضيف الفئات إلى المحرر، وأين تُوضع التجاوزات.
        ما ينسّقه قالبكم
        يرث محتوى المنشئ المنشور أنماط قالبكم:
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:16:09+0000'
      dateModified: '2026-10-24T19:16:09+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%B7%D9%88%D9%8A%D8%B1/%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82'
      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%B7%D9%88%D9%8A%D8%B1/%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82'
      description: |-
        محتوى المنشئ هو HTML عادي في صفحتكم، لذا ينسّقه قالبكم كأي محتوى آخر. تغطي هذه الصفحة ما يرثه القالب، وكيف يضيف الفئات إلى المحرر، وأين تُوضع التجاوزات.
        ما ينسّقه قالبكم
        يرث محتوى المنشئ المنشور أنماط قالبكم:
      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/extend) /[البناء عليه](/ar/hc/documentation/learn-dxpr-builder/extend/build-on-it) # تنسيق DXPR Builder.

 تعلّم DXPR Builderالتوسعةالبناء عليه

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

محتوى المنشئ هو HTML عادي في صفحتكم، لذا ينسّقه قالبكم كأي محتوى آخر. تغطي هذه الصفحة ما يرثه القالب، وكيف يضيف الفئات إلى المحرر، وأين تُوضع التجاوزات.

## ما ينسّقه قالبكم

يرث محتوى المنشئ المنشور أنماط قالبكم:

- تستخدم العناوين والنصوص والروابط أنماط قالبكم.
- يستخدم التخطيط صفوف Bootstrap 5 وأعمدته، لذا يتماشى معه قالب Bootstrap 5. ومع أي قالب آخر، انتقلوا إلى **DXPR Studio > DXPR Builder > الإعدادات العامة** واضبطوا **تحميل ملفات Bootstrap** على **Bootstrap 5**.
- لكل عنصر فئة واحدة لكل نوع، مثل `az-card` أو `az-button`، ومعظمها يحمل أيضًا `az-element`؛ راجعوا [بنية 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%B7%D9%88%D9%8A%D8%B1/%D8%A8%D9%86%D9%8A%D8%A9-css).

## إضافة الفئات إلى المحرر

### في ملف info.yml للقالب

ادرجوا الفئات تحت `dxpr_builder_classes` في ملف `.info.yml` لقالبكم. تظهر في قائمة **فئات HTML** لكل عنصر، في مجموعة خيارات مسماة باسم القالب، ما دام القالب مفعّلًا:

```yaml
# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

```

### من وحدة

نفّذوا `hook_dxpr_builder_classes_alter()`. يجب أن ينتهي الاسم بـ `_alter`؛ راجعوا [مرجع واجهة الخطافات](/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).

```php
/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

```

## أنماط الأزرار

يقدّم عنصر الزر أنماط Bootstrap: الأساسي والثانوي والنجاح والمعلومات والتحذير والخطر والرابط والفاتح والداكن. القائمة ثابتة في المحرر؛ ولا يغيّرها خطاف مجلدات الأزرار. ولإعطاء الأزرار مظهر علامتكم، نسّقوا فئات `btn-*` في قالبكم، أو أضيفوا فئتكم عبر **فئات HTML**.

## تجاوزات CSS

تجاوزوا ناتج المنشئ في CSS قالبكم:

```css
/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

```

تُكتب الإعدادات التي يضبطها المحرر في تبويب النمط كأنماط مضمّنة. وتتغلب الأنماط المضمّنة على قواعد القالب التي لا تستخدم `!important`، لذا استخدموا CSS القالب للقيم الافتراضية ودعوا المحررين يتجاوزونها لكل عنصر.

## المحرر وقالبكم

يعمل المحرر على الصفحة التي يُعرض فيها الحقل، أي داخل قالب الواجهة الأمامية، لا قالب الإدارة. وتحمل أشرطة التحكم والقوائم ومربعات الحوار الخاصة به الفئة `dxpr-builder-ui` وتحمّل ورقة أنماطها الخاصة، `dxpr_builder_backend.css`. لكن قواعد القالب التي تستهدف محددات واسعة مثل `button` أو `.modal` قد تصل إليها؛ لذا احصروا قواعدكم في مناطق المحتوى لتجنب ذلك.