---
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%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D9%85%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D8%B5%D9%88%D8%B1'
title: 'ابنوا معرض صور | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:12:28+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  هنا تبنون معرض صور: عنوان موسّط وثلاث صور جنبًا
  إلى جنب بنص بديل وعرض شرائح على شريط رمادي. استخدموه
  لعرض مكان أو فعالية بالصور. ولعرض مشاريع بوصف لكل منها،
  اتبعوا بناء معرض أعمال بدلًا من ذلك.
  يبني الفيديو معرض لوحات طلاب لجامعة.
tags:
  - 'Follow a tutorial'
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: |-
        هنا تبنون معرض صور: عنوان موسّط وثلاث صور جنبًا
        إلى جنب بنص بديل وعرض شرائح على شريط رمادي. استخدموه
        لعرض مكان أو فعالية بالصور. ولعرض مشاريع بوصف لكل منها،
        اتبعوا بناء معرض أعمال بدلًا من ذلك.
        يبني الفيديو معرض لوحات طلاب لجامعة.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:12:28+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%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D9%85%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D8%B5%D9%88%D8%B1'
      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%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D9%85%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D8%B5%D9%88%D8%B1'
      description: |-
        هنا تبنون معرض صور: عنوان موسّط وثلاث صور جنبًا
        إلى جنب بنص بديل وعرض شرائح على شريط رمادي. استخدموه
        لعرض مكان أو فعالية بالصور. ولعرض مشاريع بوصف لكل منها،
        اتبعوا بناء معرض أعمال بدلًا من ذلك.
        يبني الفيديو معرض لوحات طلاب لجامعة.
      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/tutorials/overview) # ابنوا معرض صور.

 تعلّم 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%B9%D9%86%D8%A7%D8%B5%D8%B1/%D8%A7%D9%84%D8%B5%D9%88%D8%B1%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%B9%D9%86%D8%A7%D8%B5%D8%B1/%D9%83%D8%A7%D8%B1%D9%88%D8%B3%D9%8A%D9%84-%D8%A7%D9%84%D8%B5%D9%88%D8%B1)
- [ابنوا معرض أعمال](/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%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D9%85%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D8%A3%D8%B9%D9%85%D8%A7%D9%84)

هنا تبنون معرض صور: عنوان موسّط وثلاث صور جنبًا إلى جنب بنص بديل وعرض شرائح على شريط رمادي. استخدموه لعرض مكان أو فعالية بالصور. ولعرض مشاريع بوصف لكل منها، اتبعوا [بناء معرض أعمال](/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%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D9%85%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D8%A3%D8%B9%D9%85%D8%A7%D9%84) بدلًا من ذلك.

يبني الفيديو معرض لوحات طلاب لجامعة.

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

- يملك دوركم صلاحية **التحرير باستخدام DXPR Builder**.
- تحمل مكتبة الوسائط ست صور على الأقل، مقصوصة بالنسب نفسها.
- الصفحة مفتوحة في المنشئ. فلصفحة جديدة، انتقلوا إلى **المحتوى** > **إضافة محتوى** > **صفحة هبوط** (`/node/add/landing_page`) وانقروا **حفظ**.

## الخطوة 1: إضافة الترويسة

1. انقروا **إضافة العناصر** على الصفحة الفارغة واختاروا **القسم** من تبويب **التخطيط**.
2. مرّروا المؤشر فوق القسم وافتحوا **المزيد** > **الإعدادات**. تحت **فئات HTML** اختاروا **توسيط النص**، ثم انقروا **حفظ**.
3. انقروا **+** على القسم واختاروا **النص** من تبويب **المحتوى**.
4. اكتبوا «معرض الفنون الطلابية» كـ **عنوان 2**، وأضيفوا سطرًا واحدًا من المقدمة وانقروا **حفظ**. يطبع القالب عنوان الصفحة كالعنوان 1 للصفحة. ولجعل هذا العنوان هو العنوان 1 بدلًا منه، راجعوا [بناء صفحات صديقة لتحسين محركات البحث](/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%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D9%85%D8%AD%D8%B1%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB#step-1-start-the-content-at-heading-2).

## الخطوة 2: إضافة شبكة الصور

1. مرّروا المؤشر فوق القسم وانقروا **إضافة قسم تحت**. انقروا **+** على القسم الجديد واختاروا **صفًا**؛ فيأتي بعمودين متساويين.
2. انقروا أيقونة الشبكة (**تخطيط الأعمدة**) للصف، واختاروا الإعداد المسبق **1/3 + 1/3 + 1/3** وانقروا **حفظ**.
3. انقروا **+** في العمود الأول واختاروا **صورة**.
4. انقروا **اختيار صورة**، وابحثوا في مكتبة الوسائط مع **تطبيق المرشحات**، وانقروا صورة وانقروا **إدراج المحدد**.
5. افتحوا لوحة **SEO** واكتبوا **سمة Alt**: ما يجب أن يعرفه من لا يستطيع رؤية الصورة. انقروا **حفظ**.
6. كرّروا للعمودين الثاني والثالث.

الصور المقصوصة بالنسب نفسها تُبقي الصف متساويًا.

## الخطوة 3: إضافة عرض الشرائح

1. أضيفوا قسمًا ثالثًا مع **إضافة قسم تحت** وافتحوا **المزيد** > **الإعدادات** الخاصة به. اختاروا **توسيط النص** تحت **فئات HTML** و**خلفية** رمادية فاتحة في لوحة **النمط**. انقروا **حفظ**.
2. انقروا **+** على القسم واختاروا **معرض الصور**.
3. انقروا **اختيار صورة**، وابحثوا في المكتبة، وانقروا ثلاث صور وانقروا **إدراج المحدد**، ثم انقروا **حفظ**.
4. انقروا **+** على القسم مجددًا واختاروا **نصًا**؛ فيهبط فوق الكاروسيل. اكتبوا «عرض الشرائح» كـ **عنوان 2** وانقروا **حفظ**.

## الخطوة 4: الحفظ والمعاينة

1. انقروا **حفظ** على شريط أدوات المنشئ.
2. افتحوا قائمة العرض (أيقونة **العين**) واختاروا **معاينة**.

## للمضي أبعد

غير معروض في الفيديو:

- **التسميات التوضيحية**: ضعوا **بطاقة** في العمود وأضيفوا عنصر **نص** بالتسمية في داخلها. ثم أضيفوا **الصورة** داخل البطاقة؛ فتهبط فوق التسمية.
- **الصور بالحجم الكامل**: اضبطوا **رابط الصورة** على الملف بالحجم الكامل و**هدف رابط الصورة** على **نافذة جديدة**.
- **النمط**: على كل صورة، اضبطوا **نصف قطر الحدود** على 4 و**الظل المنسدل** على 1 في لوحة **النمط** لرفع ناعم.
- **توقيت عرض الشرائح**: اضبطوا **الفاصل الزمني** على الكاروسيل، بالمللي ثانية. وتحت **إخفاء**، حدّدوا **إخفاء عنصر ترقيم الصفحات** أو **إخفاء زرّي السابق/التالي** لإزالة عناصر التحكم تلك.
- **معرض يملأ نفسه**: على **البنية** > **طرق العرض** > **إضافة عرض**، أنشئوا عرضًا من وسائط الصور بمعروض كتلة بتنسيق **الشبكة**. أدرجوه من تبويب **طرق عرض Drupal**، وتظهر الرفوعات الجديدة وحدها.

## ما سترونه

يفتتح العنوان الموسّط الصفحة، تليه ثلاث صور جنبًا إلى جنب. وعلى الشريط الرمادي تحته، يعرض عرض الشرائح صورة واحدة في المرة وينتقل إلى التالية كل خمس ثوانٍ.

## إذا لم تظهر الصور كما هي معروضة

- **إدراج المحدد لا يضيف صورة.** كانت المكتبة ما زالت تُعاد تحميلها بعد **تطبيق المرشحات**، فنقرتكم لم تحدّد الصورة. انتظروا حتى تستقر الشبكة، وتأكدوا من أن الصورة تعرض علامة تحديد، وانقروا **إدراج المحدد** مجددًا.
- **مكتبة الوسائط فارغة.** لا صور مرفوعة بعد، أو متصفح الوسائط غير مُعَد. راجعوا [الصور لا تُرفَع أو تختفي](/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%D8%B3%D8%AA%D9%83%D8%B4%D8%A7%D9%81-%D8%A7%D9%84%D8%A3%D8%AE%D8%B7%D8%A7%D8%A1-%D9%88%D8%A5%D8%B5%D9%84%D8%A7%D8%AD%D9%87%D8%A7/%D9%85%D8%B4%D8%A7%D9%83%D9%84-%D8%A7%D9%84%D8%B1%D9%81%D8%B9-%D9%88%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA).
- **الصور الثلاث بارتفاعات مختلفة.** نسبها مختلفة. قصّوها بالنسب نفسها، وارفعوها مجددًا واختاروا النسخ الجديدة.
- **ذهبت تغييراتكم بعد إعادة التحميل.** غادرتم الصفحة قبل نقر **حفظ** على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا [التغييرات لا تُحفَظ](/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%D8%B3%D8%AA%D9%83%D8%B4%D8%A7%D9%81-%D8%A7%D9%84%D8%A3%D8%AE%D8%B7%D8%A7%D8%A1-%D9%88%D8%A5%D8%B5%D9%84%D8%A7%D8%AD%D9%87%D8%A7/%D9%8A%D9%81%D8%B4%D9%84-%D8%A7%D9%84%D8%AD%D9%81%D8%B8).

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

- [عنصر الصورة](/ar/hc/documentation/learn-dxpr-builder/elements/image) لكل إعدادات الصورة
- [عنصر معرض الصور](/ar/hc/documentation/learn-dxpr-builder/elements/image-carousel) لخيارات عرض الشرائح
- [معرض الأعمال](/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%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D9%85%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D8%A3%D8%B9%D9%85%D8%A7%D9%84) لشبكة مشاريع بمرشح