اكتبوا دراسة حالة.

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

يكتب الفيديو عمل وكالة لـ Northwind Retail.

قبل أن تبدؤوا

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

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

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

الخطوة 2: إضافة النظرة العامة

1. مرّروا المؤشر فوق البطل وانقروا إضافة قسم تحت. أضيفوا صفًا إلى القسم الجديد، وانقروا أيقونة الشبكة (تخطيط الأعمدة) الخاصة به، واختاروا الإعداد المسبق 2/3 + 1/3 وانقروا حفظ.
2. انقروا + في العمود الواسع واختاروا نصًا. اكتبوا «نظرة عامة» كـ عنوان 2 وأضيفوا الملخص وانقروا حفظ.
3. انقروا + في العمود الضيق واختاروا نصًا. اكتبوا تسمية المقياس «مزيد من الطلبات عبر الإنترنت» وانقروا حفظ.
4. انقروا + في العمود الضيق مجددًا واختاروا عدّاد الأرقام؛ فيهبط فوق التسمية. اضبطوا النهاية على 32 واللاحقة على % وفاصل الآلاف على فاصلة، واضبطوا السرعة على 2500، ثم انقروا حفظ.

العدّاد بلا حقل تسمية خاص به؛ فعنصر النص تحته يقوم بتلك المهمة.

الخطوة 3: إضافة التحدي

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

الخطوة 4: إضافة الحل

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

الخطوة 5: إضافة النتائج

1. أضيفوا قسمًا خامسًا وافتحوا المزيد > الإعدادات الخاصة به. اختاروا توسيط النص تحت فئات HTML، ثم الخلفية الكحلية ولون الخط الأبيض في لوحة النمط. انقروا حفظ.
2. انقروا + على القسم واختاروا صفًا. انقروا أيقونة الشبكة (تخطيط الأعمدة) الخاصة به، واختاروا الإعداد المسبق 1/3 + 1/3 + 1/3 وانقروا حفظ.
3. في كل عمود، أضيفوا تسمية نص أولًا، ثم عدّاد أرقام فوقها، كما في الخطوة 2: النهاية 32 مع اللاحقة %، والنهاية 2 مع اللاحقة s، والنهاية 15000.

الخطوة 6: إضافة الاقتباس

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

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

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

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

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

ما سترونه

يجلس اسم العميل وزر زوروا الموقع موسّطين على الصورة. وتعرض النظرة العامة 32% بجانب ملخصها؛ ويراها الزوّار تعد تصاعديًا عندما تُمرَّر إلى المرأى. ويقف التحدي على شريط رمادي، ويجلس الحل بجانب صورته.

على الشريط الكحلي تعد النتائج الثلاث تصاعديًا وهي تُمرَّر إلى المرأى: 32% و2s و15,000. ويختم الصفحة اقتباس العميل وشريط اتصلوا بنا أرجواني.

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

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

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

• عنصر الاقتباس لخيارات تنسيق الشهادات
• عنصر عدّاد الأرقام لكل إعدادات العدّاد
• معرض الأعمال لسرد كل دراسات الحالة الخاصة بكم على صفحة واحدة