ابنوا صفحة خدمات.

تعلّم DXPR Builderبناء الصفحاتاتبعوا دليلًا تطبيقيًا

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

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

قبل أن تبدؤوا

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

الخطوة 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 وهكذا.
  • الشهادات: أضيفوا عنصر الاقتباس لكل عميل فوق الشعارات.

ما سترونه

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

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

  • الشريط ما زال يعرض الشعارات النموذجية. تبقى الصور النموذجية الثلاث حتى تزيلوها. افتحوا إعدادات الشريط، وانقروا × على كل صورة نموذجية واحفظوا.
  • الشعارات ملونة. التدرج الرمادي مطفأ. افتحوا إعدادات الشريط، وفعّلوه وانقروا حفظ.
  • الأيقونات بلا دائرة. النمط يجلس في لوحة أدوات الأيقونة، لا في العامة. افتحوا إعدادات الأيقونة، وافتحوا أدوات الأيقونة واضبطوا النمط على دائرة.
  • ذهبت تغييراتكم بعد إعادة التحميل. غادرتم الصفحة قبل نقر حفظ على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا التغييرات لا تُحفَظ.

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