لا تزال الأشرطة الثابتة عنصرًا شائعًا في تصميم المواقع الإلكترونية. فهي مثالية لزيادة معدلات التحويل من خلال الحفاظ على فعالية دعوات اتخاذ الإجراءات دون أن تكون مزعجة مثل النوافذ المنبثقة.
في هذا المثال، سنصمم شريطًا ثابتًا لمنتجات WooCommerce باستخدام وحدات Divi الخاصة بـ Woo. يمكن أن يتضمن الشريط الثابت أي وحدة من وحدات Divi. في هذا الدرس، سننشئ شريطًا ثابتًا يتضمن زر "إضافة إلى السلة" بحيث يبقى مرئيًا أثناء تصفح المستخدم للصفحة. بالإضافة إلى ذلك، سننشئ أيضًا شريط إشعارات السلة بحيث يرى المستخدم دائمًا زر "عرض السلة" بعد النقر على زر "إضافة إلى السلة".
ستساعد عناصر الشريط اللاصق هذه في زيادة التحويلات عن طريق الحفاظ على CTAs المهمة هذه في الاعتبار.
مسح
فيما يلي معاينة لما سنصممه في هذا البرنامج التعليمي.
الجزء 1: تصميم شريط لاصق على صفحة المنتج
سنستخدم منتجًا تجريبيًا بسيطًا في هذا المثال، لذا ستحتاج إلى إنشاء منتج جديد أو تعديل منتج موجود. تفاصيل المنتج ليست ضرورية لهذا الشرح. تأكد فقط من توفر الأساسيات، مثل عنوان المنتج وسعره ووصفه وصورته، إلخ.
بمجرد تجهيز منتج بسيط، انقر لتعديله في لوحة التحكم، ثم انشر أداة Divi Builder على صفحة المنتج. ضمن إعدادات صفحة Divi، اختر "عرض كامل" للتصميم، ثم انقر على "إنشاء في واجهة المستخدم".
يجب أن تبدو صفحة المنتج هكذا.
أسفل السطر الأول الذي يحتوي على مسار التنقل وإشعار سلة التسوق، أضف سطرًا جديدًا بتصميم عمود واحد.
إعدادات الخط
قبل إضافة الوحدات النمطية ، قم بتحديث إعدادات الخط كما يلي:
- لون الخلفية: # 333333
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- العرض: 100٪
- مواد التنجيد: 0px Top ، 0px أسفل
جعل الخط لزجة
لجعل الخط ثابتًا، أضف كود CSS المخصص التالي إلى عنصر سطح المكتب الرئيسي:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
ثم أضف كود CSS التالي إلى نفس العنصر الرئيسي لشاشة الكمبيوتر اللوحي:
top: 0px;
إذا لم تكن على دراية بخاصية CSS `position: sticky`، فهي نوع من التهجين بين التموضع الثابت والنسبي، حيث يتحرك العنصر (في هذه الحالة، الصف) مع حاويته حتى يصل إلى موضع محدد في أعلى أو أسفل الصفحة (أو الإزاحة المحددة). في هذا المثال، نضبط الإزاحة على 50 بكسل من أعلى نافذة المتصفح (مع ترك مساحة لارتفاع رأس الصفحة الثابت الافتراضي على أجهزة سطح المكتب). ثم، على الأجهزة اللوحية، يتم تغيير الإزاحة إلى `top: 0px` لتصحيح ثبات الصف/الشريط في أعلى نافذة المتصفح على الهواتف المحمولة.
ملاحظة: تجاهل أي أخطاء تراها عند إضافة CSS إلى المربع. سوف يعمل الرمز بشكل جيد.
بعد تحديث ملف CSS، قم بتحديث قيمة Z index كما يلي:
- مؤشر Z: 10
الآن، سيصبح الخط ثابتاً أثناء قيام المستخدم بالتمرير لأسفل صفحة المنتج.
عمود CSS مخصص
قبل البدء في ملء الصف بالمحتوى، نحتاج إلى التأكد من أن الوحدة داخل صفنا ذي العمود الواحد ستتم محاذاتها أفقيًا بدلًا من رأسيًا. يمكننا استخدام حيلة بسيطة في CSS لتحقيق ذلك باستخدام خاصية flex. افتح إعدادات العمود وأضف CSS المخصص التالي إلى العنصر الرئيسي:
display:flex; align-items:center;
هذا يُكمل تصميم صفنا اللاصق. الآن، علينا ملء الصف بالمحتوى.
أضف عنوان Woo
أضف وحدة عنوان Woo جديدة إلى عمود الخط اللاصق.
ثم قم بتحديث الإعدادات كما يلي:
- عنوان نص اللون: #ffffff
- حجم عنوان النص: 28px (سطح المكتب) ، 20px (الكمبيوتر اللوحي) ، 16px (الهاتف)
- العرض: 30٪
- مواد التنجيد: 2vw في الأعلى ، 2vw في الأسفل ، 2vw في اليسار ، 2vw في اليمين
أضف السعر
ثم قم بإضافة وحدة أسعار Woo من خلال النقر على أيقونة الرمادي زائد التي تظهر عند التمرير فوق وحدة عنوان woo التي أنشأتها للتو.
ثم قم بتحديث إعدادات Woo Price على النحو التالي:
- حجم نص السعر: 28px (سطح المكتب) ، 20px (الكمبيوتر اللوحي) ، 16px (الهاتف)
- العرض: 30٪
- مواد التنجيد: 2vw في الأعلى ، 2vw في الأسفل ، 2vw في اليسار ، 2vw في اليمين
- عرض الحد الأيمن: 1px
- لون الحد الأيمن: #777777
- عرض الحد الأيسر: 1px
- لون الحدود اليسرى: #777777
إضافة وحدة إضافة إلى السلة
بالنسبة للجزء الأخير من المحتوى، أضف وحدة Woo Add to Cart مباشرة بعد وحدة Woo Price.
ثم قم بتحديث الإعدادات كما يلي:
قم بتبسيط عنصر "إضافة إلى السلة" عن طريق إخفاء كمية المخزون وحقل الكمية على الهاتف المحمول.
- عرض كمية الحقل: OFF (الكمبيوتر اللوحي)
- عرض الأسهم: OFF
- محاذاة النص: صحيح
- استخدام أنماط مخصصة لزر: نعم
- حجم نص الزر: 18px (الكمبيوتر اللوحي) ، 14px (الهاتف)
- لون نص الزر: #ffffff
- لون خلفية الزر: #0c71c3
- عرض حد الزر: 0px
- العرض: 40٪
- مواد التنجيد: 2vw على اليسار ، 2vw على اليمين
نتيجة
دعونا نرى ما يبدو على الصفحة الحية.
الجزء 2: إنشاء شريط إعلام سلة
إنشاء شريط إشعارات سلة التسوق يتطلب بضع خطوات بسيطة، لكن النتيجة قد تكون فعّالة للغاية. كما تعلمون، لا يظهر إشعار سلة التسوق إلا عند نقر المستخدم على زر "إضافة إلى السلة". لكن هذه هي الخطوة التالية الحاسمة في عملية الدفع، والتي تنقل المستخدمين إلى صفحة الدفع. لذا، عندما يظهر إشعار سلة التسوق كشريط أسفل النافذة، يكون أكثر وضوحًا للمستخدم.
لإنشاء شريط ملصقات إشعارات سلة التسوق، أنشئ أولاً صفًا جديدًا من عمود واحد في أسفل صفحة المنتج. ثم حدّث إعدادات الصف كما يلي:
- العرض: 100٪
- مواد التنجيد: 0px في الأعلى ، 0px في الأسفل
اجعل السطر مثبتًا عن طريق إضافة CSS المخصص التالي إلى العنصر الرئيسي:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
ملاحظة: كما فعلنا سابقًا، يمكنك تجاهل الأخطاء التي تظهر عند إضافة الخاصية position: sticky.
سيتمسك الصف بأسفل النافذة عند التمرير لأعلى.
ثم قم بتحديث قيمة z-index لإبقائها في المقدمة، كما يلي:
- مؤشر Z: 10
أضف وحدة إخطار السلة
بمجرد إنشاء الخط ، أضف وحدة Woo Cart Notice إلى السطر وقم بتحديث الإعدادات كما يلي:
- حجم النص (الهاتف): 15px
- الهامش: 0em في الأسفل
هذا كل شيء! الأمر متروك لك فيما إذا كنت تريد إزالة عنصر تحذير سلة التسوق الافتراضي في أعلى الصفحة، ولكن قد يكون من الحكمة تركه لتحسين معدلات التحويل.
نتيجة نهائية
إليك ما قد تبدو عليه النتيجة النهائية.
الأفكار النهائية
نأمل أن تساعدنا هذه المقالة في فهم كيفية إنشاء أشرطة ثابتة لصفحات منتجاتنا في Divi. شرحنا كيفية إنشاء شريط ثابت يتضمن عنوان المنتج وسعره وزر "إضافة إلى السلة". كما أوضحنا كيفية إنشاء شريط ثابت. من شأن هذين العنصرين تبسيط عملية الشراء وزيادة المبيعات. والأفضل من ذلك، أننا لا نحتاج إلى أي إضافة!