---
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%B5%D9%81%D8%AD%D8%A9-%D8%AE%D8%AF%D9%85%D8%A7%D8%AA'
title: 'ابنوا صفحة خدمات | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:13:35+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:13:35+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%B5%D9%81%D8%AD%D8%A9-%D8%AE%D8%AF%D9%85%D8%A7%D8%AA'
      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%B5%D9%81%D8%AD%D8%A9-%D8%AE%D8%AF%D9%85%D8%A7%D8%AA'
      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%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA/%D8%B5%D9%81%D8%AD%D8%A9-%D9%87%D8%A8%D9%88%D8%B7-%D8%AA%D8%B3%D9%88%D9%8A%D9%82%D9%8A%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/%D8%A7%D9%84%D8%A3%D9%8A%D9%82%D9%88%D9%86%D8%A9)
- [إضافة عنصر Marquee](/ar/hc/documentation/learn-dxpr-builder/elements/marquee)

هنا تبنون صفحة تسرد عروضكم. فيها ترويسة وثلاث خدمات بأيقونات وخدمة واحدة بالتفصيل بجانب صورة وشعارات عملاء ودعوة إلى إجراء. استخدموها عندما تبيعون خدمات عدة. ولصفحة عن عرض واحد، اتبعوا [بناء صفحة هبوط تسويقية](/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%B5%D9%81%D8%AD%D8%A9-%D9%87%D8%A8%D9%88%D8%B7-%D8%AA%D8%B3%D9%88%D9%8A%D9%82%D9%8A%D8%A9) بدلًا من ذلك.

يبني الفيديو صفحة خدمات لوكالة رقمية.

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

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

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

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

## الخطوة 2: إضافة نظرة الخدمات

1. مرّروا المؤشر فوق القسم وانقروا **إضافة قسم تحت**. امنحوا القسم الجديد فئة **توسيط النص**.
2. انقروا **+** على القسم واختاروا **صفًا**. انقروا أيقونة الشبكة (**تخطيط الأعمدة**) الخاصة به، واختاروا الإعداد المسبق **1/3 + 1/3 + 1/3** وانقروا **حفظ**.
3. انقروا **+** في العمود الأول واختاروا **نصًا**. اكتبوا «التصميم» كـ **عنوان 3**، وأضيفوا سطرًا واحدًا وانقروا **حفظ**.
4. انقروا **+** في العمود نفسه واختاروا **الأيقونة**؛ فتهبط فوق النص. اختاروا مجموعة **Font Awesome Free Solid**، وابحثوا عن `palette` وانقروا الأيقونة. اضبطوا **الحجم** على **كبير للغاية (3x)**، وافتحوا **أدوات الأيقونة**، واضبطوا **النمط** على **دائرة** وانقروا **حفظ**.
5. كرّروا لـ «التطوير» مع `code` ولـ «التسويق» مع `bullhorn`.

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

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

## الخطوة 4: إضافة شعارات العملاء

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

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

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

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

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

## للمضي أبعد

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

- **قسم تفاصيل واحد لكل خدمة**: كرّروا الخطوة 3 للتطوير والتسويق. فعّلوا **عكس الصف** في إعدادات كل صف ثانٍ، لتتناوب الصور الجوانب على الأجهزة اللوحية والحواسيب.
- **روابط القفز**: اضبطوا **معرف HTML** لكل قسم تفاصيل (`design` و`development` و`marketing`). أضيفوا **زرًا** تحت كل نص نظرة مع **الرابط** `#design` وهكذا.
- **الشهادات**: أضيفوا **عنصر الاقتباس** لكل عميل فوق الشعارات.

## ما سترونه

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

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

- **الشريط ما زال يعرض الشعارات النموذجية.** تبقى الصور النموذجية الثلاث حتى تزيلوها. افتحوا إعدادات الشريط، وانقروا **×** على كل صورة نموذجية واحفظوا.
- **الشعارات ملونة.** **التدرج الرمادي** مطفأ. افتحوا إعدادات الشريط، وفعّلوه وانقروا **حفظ**.
- **الأيقونات بلا دائرة.** **النمط** يجلس في لوحة **أدوات الأيقونة**، لا في **العامة**. افتحوا إعدادات الأيقونة، وافتحوا **أدوات الأيقونة** واضبطوا **النمط** على **دائرة**.
- **ذهبت تغييراتكم بعد إعادة التحميل.** غادرتم الصفحة قبل نقر **حفظ** على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا [التغييرات لا تُحفَظ](/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/%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%B5%D9%81%D8%AD%D8%A9-%D9%87%D8%A8%D9%88%D8%B7-%D8%AA%D8%B3%D9%88%D9%8A%D9%82%D9%8A%D8%A9) لصفحة مخصصة لكل خدمة
- [عنصر الأيقونة](/ar/hc/documentation/learn-dxpr-builder/elements/icon) للأحجام والأنماط
- [عنصر Marquee](/ar/hc/documentation/learn-dxpr-builder/elements/marquee) لإعدادات شريط الشعارات