---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
title: 'ابنوا معرض أعمال | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:13:05+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  هنا تبنون صفحة أعمال: عنوان موسّط وثلاثة مشاريع جنبًا
  إلى جنب بصورة غلاف ونتيجة من سطر واحد لكل منها ودعوة
  إلى إجراء. استخدموها لعرض عملكم بلمحة وربط كل مشروع
  بقصته. ولكتابة مشروع واحد بتعمق، اتبعوا كتابة دراسة
  حالة.
  يبني الفيديو صفحة وكالة اسمها «أعمالنا».
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+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:13:05+0000'
      dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      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
---
[Help Center](/ar/hc)/[Documentation](/ar/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # ابنوا معرض أعمال.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [وجهات نظر دروبال](/ar/hc/documentation/learn-dxpr-builder/integrations/drupal-views)
- [اكتبوا دراسة حالة](/ar/hc/documentation/learn-dxpr-builder/tutorials/case-study)
- [صورة](/ar/hc/documentation/learn-dxpr-builder/elements/image)

هنا تبنون صفحة أعمال: عنوان موسّط وثلاثة مشاريع جنبًا إلى جنب بصورة غلاف ونتيجة من سطر واحد لكل منها ودعوة إلى إجراء. استخدموها لعرض عملكم بلمحة وربط كل مشروع بقصته. ولكتابة مشروع واحد بتعمق، اتبعوا [كتابة دراسة حالة](/ar/hc/documentation/learn-dxpr-builder/tutorials/case-study).

يبني الفيديو صفحة وكالة اسمها «أعمالنا».

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

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

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

1. انقروا **إضافة العناصر** على الصفحة الفارغة واختاروا **القسم** من تبويب **التخطيط**.
2. مرّروا المؤشر فوق القسم وافتحوا **المزيد** > **الإعدادات**. تحت **فئات HTML** اختاروا **توسيط النص**، ثم انقروا **حفظ**.
3. انقروا **+** على القسم واختاروا **النص** من تبويب **المحتوى**.
4. اكتبوا «أعمالنا» كـ **عنوان 2**، وأضيفوا سطرًا واحدًا من المقدمة وانقروا **حفظ**. يطبع القالب عنوان الصفحة كالعنوان 1 للصفحة. ولجعل هذا العنوان هو العنوان 1 بدلًا منه، راجعوا [بناء صفحات صديقة لتحسين محركات البحث](/ar/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

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

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

## الخطوة 3: إضافة الدعوة إلى الإجراء

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

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

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

## للمضي أبعد

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

- **ربط كل مشروع**: اضبطوا **رابط الصورة** على صورة الغلاف إلى صفحة دراسة الحالة.
- **الارتفاع عند التحويم**: في لوحة **النمط** لكل صورة اضبطوا **نصف قطر الحدود** على 4 و**الظل المنسدل** على 1. وفي **نمط التحويم** ارفعوا **الظل المنسدل** إلى 3.
- **المزيد من المشاريع**: أضيفوا **صفًا** آخر بالإعداد المسبق نفسه تحت الأول.

## جعل الشبكة قابلة للتصفية

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

### 1. إنشاء نوع محتوى Portfolio

1. انتقلوا إلى **البنية** > **أنواع المحتوى** > **إضافة نوع محتوى** (`/admin/structure/types/add`).
2. سمّوه «Portfolio» واحفظوا.
3. على تبويب **إدارة الحقول**، أضيفوا حقل **صورة** مسمى «Cover image».
4. أضيفوا حقل **قائمة (نص)** مسمى «Project type» بقيم مثل `web|Web` و`branding|Branding` و`campaign|Campaign`.
5. أنشئوا بعض عناصر Portfolio على **المحتوى** > **إضافة محتوى** > **Portfolio**.

### 2. بناء العرض

1. انتقلوا إلى **البنية** > **طرق العرض** > **إضافة عرض** (`/admin/structure/views/add`).
2. سمّوه «Portfolio grid»؛ وتحت **إعدادات العرض** اعرضوا **محتوى** من نوع **Portfolio**.
3. حدّدوا **إنشاء كتلة**، واضبطوا تنسيق العرض على **شبكة** من **الحقول** واحفظوا.
4. في محرر العرض، أضيفوا الحقلين **صورة الغلاف** و**العنوان**، واضبطوا الشبكة على 3 أعمدة في إعدادات تنسيقها.
5. تحت **معايير التصفية**، انقروا **إضافة**، واختاروا **نوع المشروع** وحدّدوا **كشف هذا المرشح للزوّار**. سمّوه «التصفية حسب النوع».
6. تحت **الخيارات المتقدمة**، اضبطوا **استخدام AJAX** على نعم. فالمرشحات المكشوفة في صفحة منشئ لا تعمل إلا عبر AJAX.
7. احفظوا العرض.

### 3. إدراج العرض في الصفحة

1. عائدين إلى DXPR Builder، أفرغوا الأعمدة الثابتة الثلاثة أو أضيفوا **صفًا** جديدًا.
2. انقروا **+**، وافتحوا تبويب **طرق عرض Drupal** واختاروا **View: Portfolio grid (Block)**.
3. في مربع الإعدادات، حدّدوا **عرض المرشحات المكشوفة** وانقروا **حفظ**. فتُعرض الشبكة مع القائمة المنسدلة «التصفية حسب النوع» فوقها، وتظهر عناصر Portfolio الجديدة وحدها.
4. انقروا **حفظ** على شريط أدوات المنشئ.

## ما سترونه

يفتتح عنوان «أعمالنا» الموسّط الصفحة. وعلى الشريط الرمادي تحته، تقف ثلاثة مشاريع جنبًا إلى جنب، لكل منها صورة غلاف فوق اسمه ونتيجته. ويختم الصفحة شريط أرجواني مع **اتصلوا بنا**.

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

- **صورة غلاف تجلس تحت نصها.** دخلت الصورة قبل النص، والعناصر الجديدة تهبط في أعلى عمودها. اسحبوا الصورة فوق النص بمقبض السحب على شريط تحكمها.
- **الأغلفة بارتفاعات مختلفة.** نسبها مختلفة. قصّوها بالنسب نفسها، وارفعوها مجددًا واختاروا النسخ الجديدة.
- **شبكة Portfolio ليست في تبويب طرق عرض Drupal.** العرض معطّل، أو ملف مستخدم المنشئ الخاص بكم يخفيه. فعّلوه على **البنية** > **طرق العرض**، أو اطلبوا من مسؤول تحديده تحت **طرق العرض** في ملف المستخدم الخاص بكم.
- **يعرض المحرر «فعّلوا Ajax على هذا العرض لاستخدام المرشحات المكشوفة.»** العرض لا يستخدم Ajax. اضبطوا **استخدام AJAX** على نعم تحت **الخيارات المتقدمة** في محرر العرض؛ راجعوا [عنصر يبدو أو يتصرف خطأً](/ar/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong).
- **القائمة المنسدلة «التصفية حسب النوع» مفقودة.** **عرض المرشحات المكشوفة** مطفأ على العنصر. افتحوا إعدادات عنصر العرض، وحدّدوه وانقروا **حفظ**.

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

- [تكامل طرق عرض Drupal](/ar/hc/documentation/learn-dxpr-builder/integrations/drupal-views) لكيفية وصول معروضات العرض إلى منتقي العناصر
- [دراسة الحالة](/ar/hc/documentation/learn-dxpr-builder/tutorials/case-study) للصفحة التي يربط بها كل مشروع
- [عنصر الصورة](/ar/hc/documentation/learn-dxpr-builder/elements/image) لكل إعدادات الصورة