---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/about-page'
title: 'ابنوا صفحة من نحن | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:11:21+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:11:21+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/about-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/about-page'
      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/tutorials/team-directory)
- [Card](/hc/documentation/learn-dxpr-builder/elements/card)

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

يبني الفيديو الصفحة لاستوديو تصميم في روتردام.

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

- يملك دوركم صلاحية **التحرير باستخدام DXPR Builder**.
- تحمل مكتبة الوسائط صورة لمكتبكم أو فريقكم أو منتجكم.
- الصفحة موجودة: انتقلوا إلى **المحتوى** > **إضافة محتوى** > **صفحة هبوط** (`/node/add/landing_page`)، واكتبوا «من نحن» كـ **العنوان** وانقروا **حفظ**. فتُفتَح الصفحة والمنشئ عليها.
- على DXPR CMS، أخفوا عنوان صفحة القالب على هذه الصفحة: في نموذج تحريرها، افتحوا **إعدادات قالب DXPR** وحدّدوا **عنوان الصفحة** تحت **إخفاء مناطق DXPR**. فيكون **عنوان** الجامبوترون حينها العنوان 1 الوحيد في الصفحة، كما يشرح [بناء صفحات صديقة لتحسين محركات البحث](/ar/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).
- تهبط العناصر الجديدة في أعلى قسمها أو عمودها. أضيفوا صفوف القسم، أو عناصر العمود، بترتيب عكسي، أو اسحبوها إلى مواضعها بعد ذلك.

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

1. انقروا **إضافة العناصر** على الصفحة الفارغة واختاروا **القسم** من تبويب **التخطيط**.
2. مرّروا المؤشر فوق القسم وافتحوا **المزيد** > **الإعدادات**. افتحوا لوحة **النمط** واختاروا عيّنة **خلفية** داكنة وانقروا **حفظ**.
3. انقروا **+** على القسم واختاروا **الجامبوترون** من تبويب **المحتوى**.
4. اكتبوا بيان رسالتكم كـ **العنوان**: «نبني مواقع يستمتع الناس باستخدامها».
5. اكتبوا جملة داعمة في حقل **التمهيد**: «استوديو من 24 شخصًا في روتردام يعمل مع علامات في كل أوروبا منذ 2012».
6. اضبطوا **النوع** على **أساسي** لنص أبيض على لونكم الأساسي، ثم انقروا **حفظ**.

## الخطوة 2: رواية قصة شركتكم

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

**تلميح**

أبقوا القصة قصيرة وقسّموها بعنوان فرعي. فالزوّار يمسحون قبل أن يقرؤوا.

## الخطوة 3: إضافة إحصاءات أساسية بعدّادات

1. أضيفوا قسمًا ثالثًا مع **إضافة قسم تحت**. افتحوا **المزيد** > **الإعدادات** الخاصة به، واختاروا **خلفية** رمادية فاتحة في لوحة **النمط** وانقروا **حفظ**.
2. انقروا **+** على القسم واختاروا **صفًا**. انقروا أيقونة الشبكة (**تخطيط الأعمدة**) الخاصة به، واختاروا الإعداد المسبق **1/3 + 1/3 + 1/3** وانقروا **حفظ**.
3. في كل عمود، أضيفوا عنصر **نص** بتسمية الإحصاء: «مشاريع مُسلَّمة» و«سنوات العمل» و«عملاء يعودون».
4. في كل عمود، انقروا **+** مجددًا واختاروا **عدّاد الأرقام**؛ فيهبط فوق التسمية. اضبطوا:
    - **النهاية**: الإحصاء (140 و12 و98)
    - **اللاحقة**: «+» أو «%» حيث تنطبق
    - **فاصل الآلاف**: **فاصلة**
    - **السرعة**: 2500، المللي ثانية التي يستغرقها العد
5. انقروا **حفظ** على كل عدّاد.

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

## الخطوة 4: بناء قسم فريق

1. أضيفوا قسمًا رابعًا مع **إضافة قسم تحت**.
2. انقروا **+** على القسم واختاروا **صفًا**. انقروا أيقونة الشبكة (**تخطيط الأعمدة**) الخاصة به، واختاروا الإعداد المسبق **1/3 + 1/3 + 1/3** وانقروا **حفظ**.
3. في كل عمود، انقروا **+** واختاروا **بطاقة**. افتحوا **المزيد** > **الإعدادات** الخاصة بها، واضبطوا **الترويسة** على اسم الشخص («Sofia Andersen») و**العنوان** على دوره («Creative Director»)، ثم انقروا **حفظ**.
4. انقروا **+** على القسم نفسه واختاروا **نصًا**؛ فيهبط فوق صف البطاقات. اكتبوا «تعرّفوا على الفريق» كـ **عنوان 2** ووسّطوه وانقروا **حفظ**.

## الخطوة 5: إضافة قسم ختامي

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

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

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

## للمضي أبعد

غير معروض في الفيديو، لكن يستحق الإضافة:

- أضيفوا **نص** سيرة و**صورة** شخصية داخل كل بطاقة، و**روابط اجتماعية** تحتها
- **ارتفاع 100%** في إعدادات القسم الأول لترويسة تملأ الشاشة

## ما سترونه

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

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

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

- **لا يوجد زر إضافة العناصر على الصفحة الفارغة.** مساعد إنشاء الصفحات مطفأ، فلا تقدم الصفحة إلا **اختيار قالب**. انقروا المساحة الفارغة لفتح منتقي العناصر بدلًا من ذلك.
- **عنصر جديد يجلس فوق الذي أضفتموه قبله.** يُدرِج المنشئ العناصر الجديدة في أعلى قسمها أو عمودها. اسحبوه إلى موضعه بمقبض السحب على شريط تحكمه.
- **عدّاد الأرقام أو البطاقة مفقود من المنتقي.** ملف مستخدم المنشئ الخاص بكم يخفيه. اطلبوا من مسؤول تحديده تحت **العناصر** على **DXPR Studio** > **DXPR Builder** > **ملفات المستخدم** (`/admin/dxpr_studio/dxpr_builder/profile`).
- **ذهبت تغييراتكم بعد إعادة التحميل.** غادرتم الصفحة قبل نقر **حفظ** على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا [التغييرات لا تُحفَظ](/ar/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

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

- [دليل الفريق](/ar/hc/documentation/learn-dxpr-builder/tutorials/team-directory) لصفحة فريق مخصصة
- [عنصر البطاقة](/hc/documentation/learn-dxpr-builder/elements/card) لأنواع البطاقات والعناصر الفرعية
- [العناصر](/hc/documentation/learn-dxpr-builder/elements) للمرجع الكامل للعناصر