---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
title: 'ابنوا صفحة هبوط تسويقية | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:12:43+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  هنا تبنون صفحة هبوط لعرض واحد: بطل صورة مع زر
  اطلبوا عرضًا وثلاث ميزات بأيقونات وشهادتين ودعوة
  ختامية إلى إجراء. استخدموها لصفحة حملة أو منتج بهدف
  واحد. ولموقع كامل على صفحة ممرَّرة واحدة، اتبعوا إنشاء موقع
  صفحة واحدة ممرَّرة بدلًا من ذلك.
  يبني الفيديو صفحة لمنتج تحليلات اسمه Insight.
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: |-
        هنا تبنون صفحة هبوط لعرض واحد: بطل صورة مع زر
        اطلبوا عرضًا وثلاث ميزات بأيقونات وشهادتين ودعوة
        ختامية إلى إجراء. استخدموها لصفحة حملة أو منتج بهدف
        واحد. ولموقع كامل على صفحة ممرَّرة واحدة، اتبعوا إنشاء موقع
        صفحة واحدة ممرَّرة بدلًا من ذلك.
        يبني الفيديو صفحة لمنتج تحليلات اسمه Insight.
      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:43+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/marketing-landing'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
      description: |-
        هنا تبنون صفحة هبوط لعرض واحد: بطل صورة مع زر
        اطلبوا عرضًا وثلاث ميزات بأيقونات وشهادتين ودعوة
        ختامية إلى إجراء. استخدموها لصفحة حملة أو منتج بهدف
        واحد. ولموقع كامل على صفحة ممرَّرة واحدة، اتبعوا إنشاء موقع
        صفحة واحدة ممرَّرة بدلًا من ذلك.
        يبني الفيديو صفحة لمنتج تحليلات اسمه Insight.
      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/add-forms)

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

يبني الفيديو صفحة لمنتج تحليلات اسمه Insight.

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

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

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

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

## الخطوة 2: إضافة الميزات

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

## الخطوة 3: إضافة الشهادات

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

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

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

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

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

## للمضي أبعد

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

- **نموذج العملاء المحتملين**: أدرجوا كتلة نموذج ويب من تبويب **كتل Drupal** بدل الزر الأخير؛ راجعوا [إضافة النماذج إلى الصفحات](/ar/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **تغميق الصورة**: في لوحة **مؤثرات الخلفية** للبطل اضبطوا **مؤثر الخلفية** على **تدرج لوني**. اختاروا اللون الداكن نفسه بشفافية 60% تقريبًا كـ **لون البداية** و**لون النهاية**
- **بطل أطول**: امنحوا قسم البطل 100 بكسل من الحشو العلوي والسفلي في **النمط** (لوحة)
- **البدء من قالب**: على صفحة فارغة، انقروا **اختيار قالب** واختاروا تخطيط صفحة هبوط؛ راجعوا [قوالب الصفحات](/ar/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)

## ما سترونه

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

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

- **الأيقونات بلا دائرة.** **النمط** يجلس في لوحة **أدوات الأيقونة**، لا في **العامة**. افتحوا إعدادات الأيقونة، وافتحوا **أدوات الأيقونة** واضبطوا **النمط** على **دائرة**.
- **صورة البطل لا تملأ القسم.** **نمط الخلفية** ما زال على **افتراضيات القالب**. افتحوا لوحة **النمط** للقسم واضبطوه على **التغطية**.
- **أيقونة تجلس تحت نص ميزتها.** دخلت الأيقونة قبل النص، والعناصر الجديدة تهبط في أعلى عمودها. اسحبوا الأيقونة فوق النص بمقبض السحب على شريط تحكمها.
- **ذهبت تغييراتكم بعد إعادة التحميل.** غادرتم الصفحة قبل نقر **حفظ** على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا [التغييرات لا تُحفَظ](/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/add-forms) لإضافة نموذج تسجيل
- [اختبار A/B](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview) لاختبار نسختين من الصفحة