---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
title: 'صمّموا قسم بطل | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:12: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:12: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/hero-section'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      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/marketing-landing)
- [قسم](/ar/hc/documentation/learn-dxpr-builder/layout/sections)
- [علامة تبويب النمط](/ar/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

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

يبني الفيديو بطل منتج تقارير.

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

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

## الخطوة 1: إضافة القسم

1. انقروا **إضافة العناصر** على الصفحة الفارغة واختاروا **القسم** من تبويب **التخطيط**. مرّروا المؤشر فوقه وافتحوا **المزيد** > **الإعدادات**.
2. تحت **فئات HTML** اختاروا **توسيط النص**، ليتوسّط العنوان والنص والزر معًا.
3. فعّلوا **ارتفاع 100%** ليملأ البطل الشاشة، و**التوسيط العمودي** ليجلس المحتوى في الوسط.
4. افتحوا لوحة **النمط**. تحت **صورة الخلفية** انقروا **اختيار صورة**، وحدّدوا صورة عريضة وانقروا **إدراج المحدد**.
5. اضبطوا **نمط الخلفية** على **التغطية** لتملأ الصورة القسم.
6. اختاروا لون **خلفية** داكنًا، يظهر بينما تُحمَّل الصورة. اضبطوا **لون الخط** على الأبيض، ثم انقروا **حفظ**.

**تلميح**

اضغطوا الصورة إلى أقل من 500 كيلوبايت ليُحمَّل البطل بسرعة.

## الخطوة 2: إضافة الزر

1. انقروا **+** على القسم واختاروا **الزر** من تبويب **المحتوى**.
2. اضبطوا **العنوان** على «ابدؤوا تجربة مجانية» و**الرابط** على `/trial` و**النوع** على **فاتح** للتباين على الصورة و**الحجم** على **كبير**، ثم انقروا **حفظ**.

## الخطوة 3: إضافة العنوان

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

## الخطوة 4: إضافة البارالاكس

1. مرّروا المؤشر فوق القسم وافتحوا **المزيد** > **الإعدادات** مجددًا.
2. افتحوا لوحة **مؤثرات الخلفية** واضبطوا **مؤثر الخلفية** على **صورة بارالاكس**. تبدأ **سرعة البارالاكس** عند 20؛ اسحبوها إلى 35 لمؤثر أقوى وانقروا **حفظ**.

## الخطوة 5: إضافة محتوى تحت البطل

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

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

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

## للمضي أبعد

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

- **التراكب**: اضبطوا **مؤثر الخلفية** على **تدرج لوني** واختاروا **لون بداية** و**لون نهاية** داكنين بشفافية 50% تقريبًا. فيبقى النص مقروءًا على أي صورة. ويحمل المؤثر قيمة واحدة، فالتراكب يستبدل البارالاكس.
- **بطل أقصر**: عطّلوا **ارتفاع 100%** وامنحوا القسم حشوه العلوي والسفلي الخاص في لوحة **النمط**، مثل 100 بكسل.
- **زر عريض**: فعّلوا **زر الكتلة** لزر بعرض عموده.

## تنويعات

بدائل للبناء في الفيديو:

### بطل بخلفية فيديو

1. في لوحة **مؤثرات الخلفية**، اضبطوا **مؤثر الخلفية** على **فيديو YouTube**.
2. الصقوا عنوان URL للفيديو في **عنوان URL لفيديو YouTube**.
3. تحت **خيارات الفيديو**، حدّدوا **تكرار** و**التعطيل على أجهزة الجوال**؛ واتركوا الصوت مطفأ.

### بطل بتدرج فقط

تخطوا صورة الخلفية واستخدموا مؤثر **التدرج اللوني** بلوني علامة صلبين لبطل يُحمَّل بسرعة.

### بطل مقسّم

1. أضيفوا **صفًا** داخل القسم؛ فيأتي بعمودين متساويين.
2. ضعوا النص والزر في العمود الأيسر وصورة في العمود الأيمن.

## ما سترونه

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

## إذا لم يظهر البطل كما هو معروض

- **البطل بطول نصه فقط.** **ارتفاع 100%** مطفأ. فعّلوه في إعدادات القسم وانقروا **حفظ**.
- **الصورة تبقى ثابتة بينما تمرّرون.** **مؤثر الخلفية** ما زال على **صورة بسيطة**، أو **سرعة البارالاكس** 0، أو لا شيء تحت البطل للتمرير إليه. اضبطوا **صورة بارالاكس**، واسحبوا **سرعة البارالاكس** فوق 0 وأضيفوا القسم الثاني من الخطوة 5.
- **العنوان يبقى داكنًا على الصورة.** عنصر النص بلا **لون خط** خاص به. افتحوا لوحة **النمط** الخاصة به واضبطوا **لون الخط** على الأبيض.

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

- [صفحة الهبوط](/ar/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) لبناء صفحة كاملة حول بطلكم
- [الأقسام](/ar/hc/documentation/learn-dxpr-builder/layout/sections) لخيارات تخطيط القسم
- [مرجع تبويب النمط](/ar/hc/documentation/learn-dxpr-builder/element-settings/style-tab) لكل خيارات التنسيق