---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/one-page-website'
title: 'أنشئوا موقع صفحة واحدة ممرَّرة | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:12:58+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  هنا تبنون موقعًا كاملًا على صفحة واحدة: بطل بطول
  الشاشة تقفز أزراره إلى أقسام من نحن والخدمات
  والاتصال تحته. يحمل كل قسم معرف HTML، هدف زرّه.
  استخدموه لشركة صغيرة أو حملة أو معرض أعمال. ولصفحة
  حول عرض واحد، اتبعوا بناء صفحة هبوط
  تسويقية بدلًا من ذلك.
  يبني الفيديو موقع استوديو تصميم اسمه Studio Nord.
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: |-
        هنا تبنون موقعًا كاملًا على صفحة واحدة: بطل بطول
        الشاشة تقفز أزراره إلى أقسام من نحن والخدمات
        والاتصال تحته. يحمل كل قسم معرف HTML، هدف زرّه.
        استخدموه لشركة صغيرة أو حملة أو معرض أعمال. ولصفحة
        حول عرض واحد، اتبعوا بناء صفحة هبوط
        تسويقية بدلًا من ذلك.
        يبني الفيديو موقع استوديو تصميم اسمه Studio Nord.
      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:58+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/one-page-website'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/one-page-website'
      description: |-
        هنا تبنون موقعًا كاملًا على صفحة واحدة: بطل بطول
        الشاشة تقفز أزراره إلى أقسام من نحن والخدمات
        والاتصال تحته. يحمل كل قسم معرف HTML، هدف زرّه.
        استخدموه لشركة صغيرة أو حملة أو معرض أعمال. ولصفحة
        حول عرض واحد، اتبعوا بناء صفحة هبوط
        تسويقية بدلًا من ذلك.
        يبني الفيديو موقع استوديو تصميم اسمه Studio Nord.
      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/hero-section)
- [ابنوا صفحة هبوط تسويقية](/ar/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Custom CSS classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)

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

يبني الفيديو موقع استوديو تصميم اسمه Studio Nord.

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

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

## الخطوة 1: بناء البطل

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

## الخطوة 2: إضافة قسم النبذة

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

## الخطوة 3: إضافة قسم الخدمات

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

## الخطوة 4: إضافة قسم الاتصال

1. أضيفوا قسمًا رابعًا وافتحوا **المزيد** > **الإعدادات** الخاصة به. اضبطوا **معرف HTML** على `contact`، واختاروا **توسيط النص** تحت **فئات HTML** وانقروا **حفظ**.
2. انقروا **+** على القسم واختاروا **الروابط الاجتماعية**. اكتبوا `linkedin` كعلامة الصف الأول والصقوا عنوان URL للملف، ثم `instagram` وعنوانه في الثاني. اضبطوا **النمط** على **دائرة** و**الحجم** على **2x**، ثم انقروا **حفظ**.
3. انقروا **+** مجددًا واختاروا **زرًا**؛ فيهبط فوق الروابط. اضبطوا **العنوان** على «راسلونا» و**الرابط** على `mailto:hello@studionord.example` وأبقوا **النوع** على **أساسي**، ثم انقروا **حفظ**.
4. انقروا **+** مجددًا واختاروا **نصًا**؛ فيهبط فوق الزر. اكتبوا «اتصلوا بنا» كـ **عنوان 2** وعنوان بريدكم ورقم هاتفكم تحته، ثم انقروا **حفظ**.

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

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

## للمضي أبعد

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

- **قائمة ثابتة**: أنشئوا قائمة على **البنية** &gt; **القوائم** &gt; **إضافة قائمة** برابط واحد لكل قسم، مثل `/studio-nord#about`، أو `<front>#about` على الصفحة الأمامية. ضعوها في منطقة الترويسة على **البنية** &gt; **تخطيط الكتل**. وفي DXPR Theme، فعّلوا **الترويسة الثابتة** على **المظهر** &gt; **الإعدادات** &gt; **DXPR Theme**.
- **الصفحة الأمامية**: اجعلوا الصفحة صفحتكم الأمامية على **الإعدادات** &gt; **النظام** &gt; **إعدادات الموقع الأساسية**.
- **نموذج الاتصال**: أدرجوا نموذجًا من تبويب **كتل Drupal** بدل النص التمهيدي؛ راجعوا [إضافة النماذج إلى الصفحات](/ar/hc/documentation/learn-dxpr-builder/tutorials/add-forms).

## ما سترونه

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

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

- **زر لا يقفز إلى قسمه.** **الرابط** الخاص به لا يطابق **معرف HTML** للقسم. فالرابط هو `#` مع المعرف نفسه تمامًا، مثل `#about` للمعرف `about`.
- **قسم يهبط تحت ترويستكم الثابتة.** لا يعرف المنشئ ارتفاع الترويسة. تحت **الإعدادات المتقدمة** على **DXPR Studio** &gt; **DXPR Builder** &gt; **الإعدادات العامة** (`/admin/dxpr_studio/dxpr_builder/settings`)، اضبطوا **محدد إزاحة التمرير** على محدد CSS لترويستكم.
- **رابط تواصل يعرض «تعذّر العثور على أيقونة علامة مطابقة».** العلامة ليست اسم أيقونة معروفًا. اكتبوها بأحرف صغيرة، مثل `linkedin` أو `instagram`.
- **ذهبت تغييراتكم بعد إعادة التحميل.** غادرتم الصفحة قبل نقر **حفظ** على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا [التغييرات لا تُحفَظ](/ar/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

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

- [قسم البطل](/ar/hc/documentation/learn-dxpr-builder/tutorials/hero-section) لخيارات التراكب والبارالاكس
- [صفحة الهبوط](/ar/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) لصفحة حملة
- [الربط بالأقسام وإعادة استخدام الأنماط مع الفئات](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) للمزيد عن معرفات HTML