---
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%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'
title: 'الربط بالأقسام وإعادة استخدام الأنماط بالفئات | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:34:48+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  امنحوا قسما معرّف HTML فيقفز إليه زر. أضيفوا فئات HTML لإخفاء عنصر على الهواتف، أو لضبط التباعد لكل حجم شاشة، أو لإعادة استخدام مظهر يعرّفه قالبكم. تجدون الحقلين أسفل لوحة عام لكل عنصر. تُبقي الفئة المظهر متسقا: فعندما تتغيّر قاعدة CSS الخاصة بها، يتبعها كل عنصر يحملها.
  يتبع الفيديو الوصفة الأولى أدناه: فيجعل زرا يقفز إلى قسم أبعد أسفل الصفحة.
tags:
  - 'Style your elements'
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 فيقفز إليه زر. أضيفوا فئات HTML لإخفاء عنصر على الهواتف، أو لضبط التباعد لكل حجم شاشة، أو لإعادة استخدام مظهر يعرّفه قالبكم. تجدون الحقلين أسفل لوحة عام لكل عنصر. تُبقي الفئة المظهر متسقا: فعندما تتغيّر قاعدة CSS الخاصة بها، يتبعها كل عنصر يحملها.
        يتبع الفيديو الوصفة الأولى أدناه: فيجعل زرا يقفز إلى قسم أبعد أسفل الصفحة.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:34:48+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%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'
      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%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'
      description: |-
        امنحوا قسما معرّف HTML فيقفز إليه زر. أضيفوا فئات HTML لإخفاء عنصر على الهواتف، أو لضبط التباعد لكل حجم شاشة، أو لإعادة استخدام مظهر يعرّفه قالبكم. تجدون الحقلين أسفل لوحة عام لكل عنصر. تُبقي الفئة المظهر متسقا: فعندما تتغيّر قاعدة CSS الخاصة بها، يتبعها كل عنصر يحملها.
        يتبع الفيديو الوصفة الأولى أدناه: فيجعل زرا يقفز إلى قسم أبعد أسفل الصفحة.
      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/build) /[تنسيق العناصر](/ar/hc/documentation/learn-dxpr-builder/element-settings) # الربط بالأقسام وإعادة استخدام الأنماط بالفئات.

 تعلّم DXPR Builderبناء الصفحاتتنسيق العناصر

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

 أدلة ذات صلة

- [جعل تخطيطكم يعمل على الهواتف](/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%B5%D9%85%D9%8A%D9%85/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8)

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

يتبع الفيديو الوصفة الأولى أدناه: فيجعل زرا يقفز إلى قسم أبعد أسفل الصفحة.

  ## قبل أن تبدؤوا

- افتحوا الصفحة في DXPR Builder؛ فالإشارة إلى عنصر تعرض شريط التحكم الخاص به مع **المزيد**. جدد على المنشئ؟ انظروا [صفحتكم الأولى](/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%A8%D8%AF%D8%A1/%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%89).
- **حفظ** في مربع الحوار يحفظ تغييرا في المحرّر. ويخزّن **حفظ** في شريط أدوات المنشئ فوق محتواكم الصفحة ويعرض «حُفظ الحقل».
- **استخدموا معرّف HTML** لهدف قفزة. يمكن لزر «احجزوا جولة» التمرير إلى نموذج الحجز. ويمكن لقائمة روابط أعلى صفحة طويلة أن تقود إلى كل جزء.
- **استخدموا فئة لمظهر يتكرر.** يكتب مسؤول موقعكم CSS مرة واحدة، وتضيفون الفئة حيث تحتاجونها. أما لوحة **النمط** فتنسخ القيم إلى كل عنصر بدلا من ذلك، فتتباعد مع الوقت.
- **استخدموا فئة لما لا تستطيعه لوحة النمط**، كإخفاء عنصر على الهواتف أو تغيير التباعد لكل حجم شاشة.

## وصفة: زر يقفز إلى قسم

1. حوموا فوق **القسم** الهدف، وانقروا **المزيد** ثم **الإعدادات**.
2. في لوحة **عام**، اكتبوا اسما قصيرا، مثل `programmes`، في **معرّف HTML**. انقروا **حفظ**.
3. افتحوا إعدادات **الزر**. في **الرابط**، اكتبوا `#` متبوعا بالاسم نفسه تماما: `#programmes`. انقروا **حفظ**.
4. انقروا **حفظ** في شريط أدوات المنشئ.
5. اختاروا **معاينة** في قائمة العرض (أيقونة العين) وانقروا الزر.

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

## وصفة: إخفاء عنصر على الهواتف

1. حوموا فوق العنصر، وانقروا **المزيد** ثم **الإعدادات**.
2. في لوحة **عام**، انقروا مربع **فئات HTML**.
3. اختاروا **مخفي على الأجهزة الصغيرة جدا، الهواتف (<576px)**. يقع في مجموعة **الظهور المتجاوب**.
4. انقروا **حفظ** في مربع الحوار، ثم **حفظ** في شريط الأدوات.

يختفي العنصر الآن على الشاشات الأضيق من 576 بكسل، في المحرّر أيضا. للتحقق منه، افتحوا الصفحة على هاتف.

## وصفة: كتابة فئاتكم

لا يتيح مربع **فئات HTML** إلا الاختيار من قائمته. لكتابة اسم فئة، حوّلوه إلى نص أولا.

1. حوموا فوق العنصر، وانقروا **المزيد** ثم **الإعدادات**.
2. ضمن **فئات HTML**، انقروا **تحرير كنص**. يتحول المربع إلى حقل نص عادي يسرد الفئات التي يحملها العنصر أصلا.
3. أضيفوا أسماء فئاتكم بعدها، مفصولة بمسافات، مثلا `brand-card py-3 py-lg-5`. احذفوا النقطة: فـ `.brand-card` في CSS فريقكم هي `brand-card` هنا.
4. انقروا **حفظ** في مربع الحوار، ثم **حفظ** في شريط الأدوات.

يأخذ العنصر المظهر الذي عرّفه فريق الويب لديكم.

## ما ترونه

في **معاينة**، يمرّر الزر الصفحة بسلاسة إلى القسم ويترك مساحة لترويسة ثابتة؛ وينتهي شريط العناوين بـ `#programmes`. وتحت عرض 576 بكسل، يختفي العنصر المخفي. تظهر الفئات التي كتبتموها كرقاقات عندما تفتحون مربع الحوار في المرة التالية، بين علامتي اقتباس عندما لا تكون في القائمة، مثل "brand-card".

## كيف تعمل الحقول

### معرّف HTML

يجب أن يبدأ المعرّف بحرف. وبعد ذلك قد يحمل حروفا وأرقاما وشرطات وشرطات سفلية، بلا مسافات. ويعرض المعرّف الخاطئ خطأ تحت الحقل، ولا يفعل **حفظ** شيئا حتى تصلحوه.

وإذا تركتم الحقل فارغا، يحتفظ العنصر بمعرّف صنعه DXPR Builder. يعرضه الحقل الفارغ بالرمادي. استخدموا كل معرّف مرة لكل صفحة: فعندما يتشارك عنصران واحدا، تقفز الروابط إلى الأول.

### فئات HTML

تحمل القائمة فئات الظل وفئات Bootstrap 5، مجمّعة حسب المهمة، مثل **الهوامش** و**الحشو** و**الظهور المتجاوب** و**الزوايا المستديرة**. ويمكن لقالبكم إضافة مجموعة خاصة في النهاية.

مرّروا القائمة المفتوحة، أو اكتبوا جزءا من اسم مثل padding أو py-5 أو circular لتضييقها. الكتابة ترشّح القائمة فقط؛ ولفئة ليست فيها، استخدموا **تحرير كنص**.

لا تعمل فئات Bootstrap إلا عندما تحمّل الصفحة Bootstrap 5. تأتي من قالبكم، أو من **الإعدادات العامة** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`)، حيث يُضبط **تحميل ملفات Bootstrap جانبيا** على **Bootstrap 5**.

فئات أدوات Bootstrap، كفئات الألوان والتباعد، موسومة بـ `!important`. فتتغلب على لوحة **النمط** على الخاصية نفسها. تتغلب **خلفية رئيسية** على **الخلفية**، ويتغلب **حجم الهامش العلوي 3 (mt-3)** على **الهامش** العلوي.

الفئة التي تحمل حجم شاشة في اسمها تنطبق من ذلك العرض فصاعدا:

| في اسم الفئة | ينطبق من |
|---|---|
| `sm` | 576 بكسل |
| `md` | 768 بكسل |
| `lg` | 992 بكسل |
| `xl` | 1200 بكسل |
| `xxl` | 1400 بكسل |

فـ `py-3 py-lg-5` يمنح 16 بكسل من الحشو في الأعلى والأسفل على الشاشات الأصغر، و48 بكسل من عرض 992 بكسل.

### لمطوّر قالبكم

تحتاج الفئة إلى قاعدة CSS في القالب، مثلا:

```css
.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

```

لعرض الفئة في قائمة **فئات HTML** للمحرّرين، سجّلوها في `.info.yml` الخاص بالقالب؛ انظروا [فئات الأدوات](/ar/hc/documentation/learn-dxpr-builder/customization/utility-classes). وللأنماط عبر الموقع كاملا، انظروا [CSS مخصصة](/ar/hc/documentation/learn-dxpr-builder/customization/custom-css).

## إذا لم يظهر لكم

- **لا يفعل حفظ شيئا ويقول معرّف HTML «يجب أن يبدأ المعرّف بحرف».** فالمعرّف يخالف القواعد أعلاه. ابدؤوه بحرف، واستخدموا الحروف والأرقام والشرطات والشرطات السفلية فقط.
- **لا تستطيعون كتابة فئة جديدة.** فالمربع يرشّح قائمته فقط. انقروا **تحرير كنص** أولا.
- **فئة تتوقعونها مفقودة من القائمة.** فلا تحمل القائمة إلا الفئات التي يعرّفها DXPR Builder وقالبكم. انقروا **تحرير كنص** واكتبوها.
- **الزر لا يمرّر إطلاقا.** **الرابط** يجب أن يكون `#` متبوعا بمعرّف HTML تماما، بالأحرف الكبيرة نفسها. تحققوا من الحقلين، واختبروا في **معاينة**.
- **لا أثر لفئة.** فالاسم مكتوب خطأ، أو لا قاعدة للقالب له، أو Bootstrap 5 غير محمّلة. تحققوا من الإملاء، ثم اسألوا مسؤول موقعكم عن القاعدة أو **تحميل ملفات Bootstrap جانبيا**.
- **فئة فريقكم تغيّر بعض الأشياء فقط.** فقيمة لوحة **النمط** على الخاصية نفسها تتغلب على فئة قالب. امسحوا تلك القيمة في لوحة **النمط**.
- **يقفز الزر إلى المكان الخاطئ.** فعنصران يتشاركان المعرّف، والأول يفوز. امنحوا كل عنصر معرّفه.
- **يختبئ عنوان القسم تحت الترويسة الثابتة.** فلا يتعرّف DXPR Builder على ترويستكم. يضبط مسؤول الموقع **منتقي إزاحة التمرير** ضمن **الإعدادات العامة** > **الإعدادات المتقدمة** (`/admin/dxpr_studio/dxpr_builder/settings`) على منتقي CSS للترويسة.

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

- [التصميم المتجاوب](/ar/hc/documentation/learn-dxpr-builder/design/responsive-design): خططوا أي العناصر تعرضون على كل حجم شاشة.