ابنوا صفحة منتج.
هنا تبنون صفحة لمنتج واحد. صورة بجانب الاسم والسعر وزر اشترِ الآن، تليها ثلاث ميزات وقائمة مواصفات ودعوة مبيعات إلى إجراء. استخدموها لأي شيء تبيعونه. ولمقارنة باقات عدة، أضيفوا إليها جدول أسعار.
يبني الفيديو صفحة منتج عتادي اسمه Insight Hub.
قبل أن تبدؤوا
- يملك دوركم صلاحية التحرير باستخدام DXPR Builder.
- تحمل مكتبة الوسائط صورة للمنتج.
- الصفحة مفتوحة في المنشئ. فلصفحة جديدة، انتقلوا إلى المحتوى > إضافة محتوى > صفحة هبوط (
/node/add/landing_page) وانقروا حفظ. - تهبط العناصر الجديدة في أعلى عمودها. ولذلك يُبنَى العمود الأيمن من الزر صعودًا.
الخطوة 1: إضافة المنتج
- انقروا إضافة العناصر على الصفحة الفارغة واختاروا القسم من تبويب التخطيط.
- انقروا + على القسم واختاروا صفًا؛ فيأتي بعمودين متساويين.
- انقروا + في العمود الأيسر واختاروا صورة. انقروا اختيار صورة، وحدّدوا صورة المنتج وانقروا إدراج المحدد. اكتبوا سمة Alt في لوحة SEO وانقروا حفظ.
- انقروا + في العمود الأيمن واختاروا زرًا. اضبطوا العنوان على «اشترِ الآن» والرابط على متجركم والنوع على أساسي والحجم على كبير، ثم انقروا حفظ.
- انقروا + في العمود الأيمن مجددًا واختاروا نصًا؛ فيهبط فوق الزر. اكتبوا السعر كـ عنوان 2 وانقروا حفظ.
- انقروا + مرة أخرى واختاروا نصًا؛ فيهبط في الأعلى. اكتبوا اسم المنتج كـ عنوان 2، وأضيفوا سطرًا واحدًا من الوصف وانقروا حفظ. يطبع القالب عنوان الصفحة كالعنوان 1 للصفحة. ولجعل هذا العنوان هو العنوان 1 بدلًا منه، راجعوا بناء صفحات صديقة لتحسين محركات البحث.
الخطوة 2: إضافة الميزات
- مرّروا المؤشر فوق القسم وانقروا إضافة قسم تحت. امنحوا القسم الجديد فئة توسيط النص.
- انقروا + على القسم واختاروا صفًا. انقروا أيقونة الشبكة (تخطيط الأعمدة) الخاصة به، واختاروا الإعداد المسبق 1/3 + 1/3 + 1/3 وانقروا حفظ.
- انقروا + في العمود الأول واختاروا نصًا. اكتبوا اسم الميزة كـ عنوان 3، وأضيفوا سطرًا واحدًا وانقروا حفظ.
- انقروا + في العمود نفسه واختاروا الأيقونة؛ فتهبط فوق النص. اختاروا مجموعة Font Awesome Free Solid، وابحثوا عن
plugوانقروا الأيقونة. اضبطوا الحجم على كبير للغاية (3x)، وافتحوا أدوات الأيقونة، واضبطوا النمط على دائرة وانقروا حفظ. - كرّروا للعمود الثاني مع
cloudوالثالث معbattery-full.
الخطوة 3: إضافة المواصفات
- أضيفوا قسمًا ثالثًا مع إضافة قسم تحت. افتحوا المزيد > الإعدادات الخاصة به، واختاروا خلفية رمادية فاتحة في لوحة النمط وانقروا حفظ.
- انقروا + على القسم واختاروا نصًا. اكتبوا «المواصفات» كـ عنوان 2، ثم مواصفة واحدة في كل سطر، وانقروا حفظ.
الخطوة 4: إضافة الدعوة إلى الإجراء
- أضيفوا قسمًا رابعًا وافتحوا المزيد > الإعدادات الخاصة به. اختاروا توسيط النص تحت فئات HTML، ثم الخلفية الأرجوانية ولون الخط الأبيض في لوحة النمط. انقروا حفظ.
- انقروا + على القسم واختاروا زرًا. اضبطوا العنوان على «اتصلوا بالمبيعات» والرابط على
/contactوالنوع على فاتح والحجم على كبير، ثم انقروا حفظ. - انقروا + مجددًا واختاروا نصًا؛ فيهبط فوق الزر. اكتبوا «Insight Hub من 249 يورو» كـ عنوان 2 وأضيفوا سطرًا واحدًا. اضبطوا لون الخط على الأبيض وانقروا حفظ.
الخطوة 5: الحفظ والمعاينة
- انقروا حفظ على شريط أدوات المنشئ.
- افتحوا قائمة العرض (أيقونة العين) واختاروا معاينة.
للمضي أبعد
غير معروض في الفيديو:
- جدول المواصفات: أدرجوا جدولًا مع زر الجدول على شريط أدوات النص بدل سطر واحد لكل مواصفة.
- المعرض: استبدلوا الصورة الواحدة بـ معرض صور للقطات المنتج.
- الباقات: اربطوا السعر بـ جدول أسعار.
ما سترونه
تملأ صورة المنتج النصف الأيسر، مع الاسم والسعر وزر اشترِ الآن على اليمين. تليها ثلاث ميزات موسّطة، لكل منها أيقونة محاطة بدائرة فوق اسمها وسطرها. وتقف المواصفات على شريط رمادي، ويختم الصفحة شريط أرجواني مع اتصلوا بالمبيعات.
إذا لم تظهر الصفحة كما هي معروضة
- الاسم والسعر والزر بترتيب خطأ. دخلت من الأعلى إلى الأسفل، والعناصر الجديدة تهبط في أعلى عمودها. اسحبوها إلى مواضعها بمقبض السحب على شريط تحكمها.
- الأيقونات بلا دائرة. النمط يجلس في لوحة أدوات الأيقونة، لا في العامة. افتحوا إعدادات الأيقونة، وافتحوا أدوات الأيقونة واضبطوا النمط على دائرة.
- العنوان يبقى داكنًا على الأرجواني. عنصر النص بلا لون خط خاص به. افتحوا لوحة النمط الخاصة به واضبطوا لون الخط على الأبيض.
- ذهبت تغييراتكم بعد إعادة التحميل. غادرتم الصفحة قبل نقر حفظ على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا التغييرات لا تُحفَظ.
ما الخطوة التالية؟
- جدول الأسعار لقسم أسعار متعدد المستويات
- عنصر الأيقونة لأحجام الأيقونات وأنماطها
- صفحة الهبوط التسويقية لصفحة حملة حول المنتج