---
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/%D8%AF%D8%B1%D8%A7%D8%B3%D8%A9-%D8%AD%D8%A7%D9%84%D8%A9'
title: 'اكتبوا دراسة حالة | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:11:44+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  هنا تكتبون مشروع عميل واحدًا في ثلاثة أجزاء: التحدي
  والحل والنتائج. تنتهون بسبعة أشرطة: بطل صورة ونظرة
  عامة بالرقم الرئيسي والتحدي والحل بجانب صورة وثلاثة
  عدّادات واقتباس ودعوة إلى إجراء. ولعرض مشاريع كثيرة
  على صفحة واحدة، اتبعوا بناء معرض أعمال بدلًا من ذلك.
  يكتب الفيديو عمل وكالة لـ Northwind Retail.
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: |-
        هنا تكتبون مشروع عميل واحدًا في ثلاثة أجزاء: التحدي
        والحل والنتائج. تنتهون بسبعة أشرطة: بطل صورة ونظرة
        عامة بالرقم الرئيسي والتحدي والحل بجانب صورة وثلاثة
        عدّادات واقتباس ودعوة إلى إجراء. ولعرض مشاريع كثيرة
        على صفحة واحدة، اتبعوا بناء معرض أعمال بدلًا من ذلك.
        يكتب الفيديو عمل وكالة لـ Northwind Retail.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:11:44+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/%D8%AF%D8%B1%D8%A7%D8%B3%D8%A9-%D8%AD%D8%A7%D9%84%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%A7%D9%84%D8%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D8%AF%D8%B1%D8%A7%D8%B3%D8%A9-%D8%AD%D8%A7%D9%84%D8%A9'
      description: |-
        هنا تكتبون مشروع عميل واحدًا في ثلاثة أجزاء: التحدي
        والحل والنتائج. تنتهون بسبعة أشرطة: بطل صورة ونظرة
        عامة بالرقم الرئيسي والتحدي والحل بجانب صورة وثلاثة
        عدّادات واقتباس ودعوة إلى إجراء. ولعرض مشاريع كثيرة
        على صفحة واحدة، اتبعوا بناء معرض أعمال بدلًا من ذلك.
        يكتب الفيديو عمل وكالة لـ Northwind Retail.
      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%A7%D9%82%D8%AA%D8%A8%D8%A7%D8%B3)
- [إضافة عنصر عدّاد رقمي](/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%B9%D8%AF%D8%A7%D8%AF-%D8%B1%D9%82%D9%85%D9%8A)
- [ابنوا معرض أعمال](/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) بدلًا من ذلك.

يكتب الفيديو عمل وكالة لـ Northwind Retail.

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

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

## الخطوة 1: إضافة البطل

1. انقروا **إضافة العناصر** على الصفحة الفارغة واختاروا **القسم** من تبويب **التخطيط**. مرّروا المؤشر فوقه وافتحوا **المزيد** > **الإعدادات**.
2. تحت **فئات HTML** اختاروا **توسيط النص**.
3. افتحوا لوحة **النمط**. تحت **صورة الخلفية** انقروا **اختيار صورة** وحدّدوا صورة وانقروا **إدراج المحدد**. اضبطوا **نمط الخلفية** على **التغطية**.
4. اختاروا **خلفية** كحلية داكنة و**لون خط** أبيض، ثم انقروا **حفظ**. فيظهر اللون بينما تُحمَّل الصورة.
5. انقروا **+** على القسم واختاروا **زرًا**. اضبطوا **العنوان** على «زوروا الموقع» و**الرابط** على عنوان URL للعميل و**النوع** على **فاتح** و**الحجم** على **كبير**، ثم انقروا **حفظ**.
6. انقروا **+** مجددًا واختاروا **نصًا**؛ فيهبط فوق الزر. اكتبوا اسم العميل كـ **عنوان 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/3 + 1/3** وانقروا **حفظ**.
2. انقروا **+** في العمود الواسع واختاروا **نصًا**. اكتبوا «نظرة عامة» كـ **عنوان 2** وأضيفوا الملخص وانقروا **حفظ**.
3. انقروا **+** في العمود الضيق واختاروا **نصًا**. اكتبوا تسمية المقياس «مزيد من الطلبات عبر الإنترنت» وانقروا **حفظ**.
4. انقروا **+** في العمود الضيق مجددًا واختاروا **عدّاد الأرقام**؛ فيهبط فوق التسمية. اضبطوا **النهاية** على 32 و**اللاحقة** على % و**فاصل الآلاف** على **فاصلة**، واضبطوا **السرعة** على 2500، ثم انقروا **حفظ**.

العدّاد بلا حقل تسمية خاص به؛ فعنصر النص تحته يقوم بتلك المهمة.

## الخطوة 3: إضافة التحدي

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

## الخطوة 4: إضافة الحل

1. أضيفوا قسمًا رابعًا، ثم **صفًا**؛ فيأتي بعمودين متساويين.
2. انقروا **+** في العمود الأيسر واختاروا **نصًا**. اكتبوا «الحل» كـ **عنوان 2** واشرحوا ما بنيتموه وانقروا **حفظ**.
3. انقروا **+** في العمود الأيمن واختاروا **صورة**. انقروا **اختيار صورة** وحدّدوا صورة المُسلَّم وانقروا **إدراج المحدد**. اكتبوا **سمة Alt** في لوحة **SEO** وانقروا **حفظ**.

## الخطوة 5: إضافة النتائج

1. أضيفوا قسمًا خامسًا وافتحوا **المزيد** > **الإعدادات** الخاصة به. اختاروا **توسيط النص** تحت **فئات HTML**، ثم **الخلفية** الكحلية و**لون الخط** الأبيض في لوحة **النمط**. انقروا **حفظ**.
2. انقروا **+** على القسم واختاروا **صفًا**. انقروا أيقونة الشبكة (**تخطيط الأعمدة**) الخاصة به، واختاروا الإعداد المسبق **1/3 + 1/3 + 1/3** وانقروا **حفظ**.
3. في كل عمود، أضيفوا تسمية **نص** أولًا، ثم **عدّاد أرقام** فوقها، كما في الخطوة 2: **النهاية** 32 مع **اللاحقة** %، و**النهاية** 2 مع **اللاحقة** s، و**النهاية** 15000.

## الخطوة 6: إضافة الاقتباس

1. أضيفوا قسمًا سادسًا.
2. انقروا **+** على القسم واختاروا **عنصر الاقتباس**. اكتبوا كلمات العميل واملؤوا **الاستشهاد** باسمه ودوره، وانقروا **حفظ**.

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

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

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

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

## ما سترونه

يجلس اسم العميل وزر **زوروا الموقع** موسّطين على الصورة. وتعرض النظرة العامة 32% بجانب ملخصها؛ ويراها الزوّار تعد تصاعديًا عندما تُمرَّر إلى المرأى. ويقف التحدي على شريط رمادي، ويجلس الحل بجانب صورته.

على الشريط الكحلي تعد النتائج الثلاث تصاعديًا وهي تُمرَّر إلى المرأى: 32% و2s و15,000. ويختم الصفحة اقتباس العميل وشريط **اتصلوا بنا** أرجواني.

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

- **صورة البطل لا تملأ القسم.** **نمط الخلفية** ما زال على **افتراضيات القالب**. افتحوا لوحة **النمط** للقسم واضبطوه على **التغطية**.
- **العدّاد الأخير يقرأ 15000 بلا فاصلة.** **فاصل الآلاف** ما زال على **بلا**. افتحوا إعدادات العدّاد واختاروا **فاصلة**.
- **تسمية تجلس فوق عدّادها.** دخل العدّاد قبل تسميته، والعناصر الجديدة تهبط في أعلى عمودها. اسحبوا التسمية تحت العدّاد بمقبض السحب على شريط تحكمها.
- **ذهبت تغييراتكم بعد إعادة التحميل.** غادرتم الصفحة قبل نقر **حفظ** على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا [التغييرات لا تُحفَظ](/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/blockquote) لخيارات تنسيق الشهادات
- [عنصر عدّاد الأرقام](/ar/hc/documentation/learn-dxpr-builder/elements/number-counter) لكل إعدادات العدّاد
- [معرض الأعمال](/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) لسرد كل دراسات الحالة الخاصة بكم على صفحة واحدة