ابنوا صفحة هبوط تسويقية.
هنا تبنون صفحة هبوط لعرض واحد: بطل صورة مع زر اطلبوا عرضًا وثلاث ميزات بأيقونات وشهادتين ودعوة ختامية إلى إجراء. استخدموها لصفحة حملة أو منتج بهدف واحد. ولموقع كامل على صفحة ممرَّرة واحدة، اتبعوا إنشاء موقع صفحة واحدة ممرَّرة بدلًا من ذلك.
يبني الفيديو صفحة لمنتج تحليلات اسمه Insight.
قبل أن تبدؤوا
- يملك دوركم صلاحية التحرير باستخدام DXPR Builder.
- تحمل مكتبة الوسائط صورة عريضة للبطل.
- الصفحة مفتوحة في المنشئ. فلصفحة جديدة، انتقلوا إلى المحتوى > إضافة محتوى > صفحة هبوط (
/node/add/landing_page) وانقروا حفظ. - تهبط العناصر الجديدة في أعلى قسمها أو عمودها. أضيفوا عناصر العمود بترتيب عكسي، أو اسحبوها إلى مواضعها بعد ذلك.
الخطوة 1: إضافة البطل
- انقروا إضافة العناصر على الصفحة الفارغة واختاروا القسم من تبويب التخطيط. مرّروا المؤشر فوقه وافتحوا المزيد > الإعدادات.
- تحت فئات HTML اختاروا توسيط النص.
- افتحوا لوحة النمط. تحت صورة الخلفية انقروا اختيار صورة، وحدّدوا صورة وانقروا إدراج المحدد. اضبطوا نمط الخلفية على التغطية.
- اختاروا خلفية كحلية داكنة ولون خط أبيض، ثم انقروا حفظ.
- انقروا + على القسم واختاروا زرًا. اضبطوا العنوان على «اطلبوا عرضًا» والرابط على
/demoوالنوع على فاتح والحجم على كبير، ثم انقروا حفظ. - انقروا + مجددًا واختاروا نصًا؛ فيهبط فوق الزر. اكتبوا العنوان كـ عنوان 2 والعنوان الفرعي تحته. اضبطوا لون الخط على الأبيض في لوحة النمط وانقروا حفظ. يطبع القالب عنوان الصفحة كالعنوان 1 للصفحة. ولجعل هذا العنوان هو العنوان 1 بدلًا منه، راجعوا بناء صفحات صديقة لتحسين محركات البحث.
الخطوة 2: إضافة الميزات
- مرّروا المؤشر فوق البطل وانقروا إضافة قسم تحت. امنحوا القسم الجديد فئة توسيط النص.
- انقروا + على القسم واختاروا صفًا. انقروا أيقونة الشبكة (تخطيط الأعمدة) الخاصة به، واختاروا الإعداد المسبق 1/3 + 1/3 + 1/3 وانقروا حفظ.
- انقروا + في العمود الأول واختاروا نصًا. اكتبوا اسم الميزة كـ عنوان 3، وأضيفوا سطرًا واحدًا وانقروا حفظ.
- انقروا + في العمود نفسه واختاروا الأيقونة؛ فتهبط فوق النص. اختاروا مجموعة Font Awesome Free Solid، وابحثوا عن
boltوانقروا الأيقونة. اضبطوا الحجم على كبير للغاية (3x)، وافتحوا أدوات الأيقونة، واضبطوا النمط على دائرة وانقروا حفظ. - كرّروا للعمود الثاني مع
chart-lineوالثالث معshield.
الخطوة 3: إضافة الشهادات
- أضيفوا قسمًا ثالثًا مع إضافة قسم تحت. افتحوا المزيد > الإعدادات الخاصة به، واختاروا خلفية رمادية فاتحة في لوحة النمط وانقروا حفظ.
- انقروا + على القسم واختاروا صفًا؛ فيأتي بعمودين متساويين.
- انقروا + في كل عمود واختاروا عنصر الاقتباس. اكتبوا الاقتباس، واملؤوا الاستشهاد باسم الشخص ودوره، وانقروا حفظ.
الخطوة 4: إضافة الدعوة إلى الإجراء
- أضيفوا قسمًا رابعًا وافتحوا المزيد > الإعدادات الخاصة به. اختاروا توسيط النص تحت فئات HTML، ثم الخلفية الأرجوانية ولون الخط الأبيض في لوحة النمط. انقروا حفظ.
- انقروا + على القسم واختاروا زرًا. اضبطوا العنوان على «احجزوا جولة تعريفية» والرابط على
/demoوالنوع على فاتح والحجم على كبير، ثم انقروا حفظ. - انقروا + مجددًا واختاروا نصًا؛ فيهبط فوق الزر. اكتبوا «شاهدوا Insight على بياناتكم» كـ عنوان 2 وأضيفوا سطرًا واحدًا. اضبطوا لون الخط على الأبيض وانقروا حفظ.
الخطوة 5: الحفظ والمعاينة
- انقروا حفظ على شريط أدوات المنشئ.
- افتحوا قائمة العرض (أيقونة العين) واختاروا معاينة.
للمضي أبعد
غير معروض في الفيديو:
- نموذج العملاء المحتملين: أدرجوا كتلة نموذج ويب من تبويب كتل Drupal بدل الزر الأخير؛ راجعوا إضافة النماذج إلى الصفحات
- تغميق الصورة: في لوحة مؤثرات الخلفية للبطل اضبطوا مؤثر الخلفية على تدرج لوني. اختاروا اللون الداكن نفسه بشفافية 60% تقريبًا كـ لون البداية ولون النهاية
- بطل أطول: امنحوا قسم البطل 100 بكسل من الحشو العلوي والسفلي في النمط (لوحة)
- البدء من قالب: على صفحة فارغة، انقروا اختيار قالب واختاروا تخطيط صفحة هبوط؛ راجعوا قوالب الصفحات
ما سترونه
يجلس العنوان والعنوان الفرعي وزر اطلبوا عرضًا موسّطة بيضاء على الصورة. تليها ثلاث ميزات، لكل منها أيقونة محاطة بدائرة فوق عنوان قصير وسطر. ويقف اقتباسان جنبًا إلى جنب على شريط رمادي، ويختم الصفحة شريط أرجواني مع احجزوا جولة تعريفية.
إذا لم تظهر الصفحة كما هي معروضة
- الأيقونات بلا دائرة. النمط يجلس في لوحة أدوات الأيقونة، لا في العامة. افتحوا إعدادات الأيقونة، وافتحوا أدوات الأيقونة واضبطوا النمط على دائرة.
- صورة البطل لا تملأ القسم. نمط الخلفية ما زال على افتراضيات القالب. افتحوا لوحة النمط للقسم واضبطوه على التغطية.
- أيقونة تجلس تحت نص ميزتها. دخلت الأيقونة قبل النص، والعناصر الجديدة تهبط في أعلى عمودها. اسحبوا الأيقونة فوق النص بمقبض السحب على شريط تحكمها.
- ذهبت تغييراتكم بعد إعادة التحميل. غادرتم الصفحة قبل نقر حفظ على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا التغييرات لا تُحفَظ.
ما الخطوة التالية؟
- قسم البطل لخيارات البطل بطول كامل والبارالاكس
- إضافة النماذج إلى الصفحات لإضافة نموذج تسجيل
- اختبار A/B لاختبار نسختين من الصفحة