كيفية تصميم الأشرطة اللاصقة لصفحات المنتج باستخدام وحدات Divi Woo

نشرت: 2019-10-16

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

في حالة الاستخدام هذه ، سنقوم بتصميم شريط لاصق لمنتجات WooCommerce باستخدام Divi's Woo Modules. يمكن أن يشتمل الشريط اللاصق على أي وحدة Divi. بالنسبة لهذا البرنامج التعليمي ، سنقوم بإنشاء شريط لاصق واحد يتضمن الزر "إضافة إلى عربة التسوق" بحيث يظل مرئيًا أثناء قيام المستخدم بالتمرير لأسفل الصفحة. بالإضافة إلى ذلك ، سننشئ أيضًا شريط إشعار عربة التسوق اللاصق بحيث يرى المستخدمون دائمًا زر "عرض عربة التسوق" بمجرد النقر فوق الزر "إضافة إلى عربة التسوق".

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على ما سنصممه في هذا البرنامج التعليمي لحالة الاستخدام.

قم بتنزيل Sticky Bars Layout مجانًا

لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات
تنزيل مجاني

تنزيل مجاني

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

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

  1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme المثبت (أو البرنامج المساعد Divi Builder إذا لم تكن تستخدم Divi Theme).
  2. قم بتثبيت وتفعيل البرنامج المساعد WooCommerce. إذا كانت هذه هي المرة الأولى التي تقوم فيها بإعداد WooCommerce ، فستحتاج إلى تشغيل معالج الإعداد الأساسي لتجهيز متجرك. بمجرد الانتهاء ، تكون جاهزًا لإضافة منتجاتك الجديدة.
  3. قم بإنشاء بعض المنتجات إذا لم يكن لديك أي منها بعد. لمزيد من المعلومات حول كيفية إضافة منتج جديد ، راجع هذا البرنامج التعليمي.

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

الجزء 1: تصميم الشريط اللاصق على صفحة المنتج

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

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

يجب أن تبدو صفحة المنتج مشابهة لهذا.

تحت الصف الأول الذي يحتوي على فتات الخبز وإشعار العربة ، أضف صفًا جديدًا بتخطيط من عمود واحد.

إعدادات الصف

قبل إضافة أي وحدات نمطية ، قم بتحديث إعدادات الصف كما يلي:

  • لون الخلفية: # 333333
  • استخدام عرض مزراب مخصص: نعم
  • عرض الحضيض: 1
  • العرض: 100٪
  • المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

جعل الصف لزج

لجعل الصف ثابتًا ، أضف CSS المخصص التالي إلى العنصر الرئيسي لسطح المكتب: 

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

ثم أضف CSS التالي إلى نفس العنصر الرئيسي لشاشة الكمبيوتر اللوحي: 

top: 0px;

إذا لم تكن على دراية بخاصية css "position: sticky" ، فهي في الأساس نوع من المزج بين الموضع الثابت والموضع النسبي حيث سينتقل العنصر (في هذه الحالة الصف) مع الحاوية الخاصة به حتى يصل موضع معين في أعلى الصفحة أو أسفلها (أو الإزاحة المحددة). في هذا المثال ، نقوم بتعيين الإزاحة على 50 بكسل من أعلى نافذة المتصفح (مع ترك مساحة لارتفاع الرأس الثابت الافتراضي على سطح المكتب). ثم على الجهاز اللوحي ، يتم تغيير الإزاحة إلى "top: 0px" لإصلاح شريط الصف / الشريط اللاصق في الجزء العلوي من المتصفح على الهاتف المحمول.

ملاحظة: تجاهل الأخطاء التي تراها عند إضافة CSS إلى المربع. سوف يعمل الرمز بشكل جيد.

بعد استخدام CSS ، قم بتحديث فهرس Z على النحو التالي:

  • الفهرس Z: 10

الآن سيصبح الصف ثابتًا بينما يقوم المستخدم بالتمرير لأسفل في صفحة المنتج.

عمود CSS مخصص

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

display:flex;
align-items:center;

هذا يعتني بتصميم الصف اللزج لدينا. الآن ، نحتاج إلى ملء الصف ببعض المحتوى.

أضف عنوان Woo

أضف وحدة عنوان Woo جديدة إلى عمود الصف اللاصق.

ثم قم بتحديث الإعدادات كما يلي:

  • لون نص العنوان: #ffffff
  • حجم نص العنوان: 28 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 16 بكسل (هاتف)
  • العرض: 30٪
  • الحشو: 2vw أعلى ، 2vw أسفل ، 2vw يسار ، 2vw يمين

إضافة سعر Woo

بعد ذلك ، أضف وحدة سعر woo عن طريق النقر فوق رمز الجمع الرمادي الذي يظهر عند التمرير فوق وحدة العنوان woo التي أنشأتها للتو.

ثم قم بتحديث إعدادات Woo Price كما يلي:

  • حجم نص السعر: 28 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 16 بكسل (هاتف)
  • العرض: 30٪
  • الحشو: 2vw أعلى ، 2vw أسفل ، 2vw يسار ، 2vw يمين
  • عرض الحد الأيمن: 1 بكسل
  • لون الحد الأيمن: # 777777
  • عرض الحد الأيسر: 1 بكسل
  • لون الحد الأيسر: 777777 #

أضف Woo Add to Cart Module

بالنسبة إلى آخر جزء من المحتوى ، أضف وحدة Woo Add to Cart Module مباشرة بعد وحدة Woo Price.

ثم قم بتحديث الإعدادات كما يلي:

قم بتبسيط عنصر الإضافة إلى عربة التسوق بإخفاء مبلغ المخزون وحقل الكمية على الهاتف المحمول.

  • إظهار حقل الكمية: إيقاف تشغيل (كمبيوتر لوحي)
  • عرض المخزون: إيقاف

  • محاذاة النص: صحيح
  • استخدام الأنماط المخصصة للزر: نعم
  • حجم نص الزر: 18 بكسل (جهاز لوحي) ، 14 بكسل (هاتف)
  • لون نص الزر: #ffffff
  • لون خلفية الزر: # 7ac5af
  • عرض حد الزر: 0 بكسل

  • العرض: 40٪
  • الحشو: 2vw يسار ، 2vw يمين

نتيجة

الآن دعنا نتحقق من شكلها على الصفحة المباشرة.

وها هو على الهاتف المحمول.

الجزء 2: إنشاء شريط لاصق لإشعار عربة التسوق

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

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

  • العرض: 100٪
  • المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

ثم اجعل الصف ثابتًا عن طريق إضافة CSS المخصص التالي إلى العنصر الرئيسي: 

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

ملاحظة: كما فعلنا سابقًا ، يمكنك تجاهل الأخطاء التي تظهر عند إضافة الخاصية position: sticky property.

سيؤدي هذا إلى جعل الصف يلتصق بأسفل النافذة عند التمرير لأعلى.

ثم قم بتحديث الفهرس z لإبقائه في المقدمة على النحو التالي:

  • الفهرس Z: 10

أضف وحدة إشعار عربة التسوق

بمجرد إنشاء الصف ، أضف Woo Cart Notice Module إلى الصف وقم بتحديث الإعدادات على النحو التالي:

  • حجم نص النص (الهاتف): 15 بكسل
  • الهامش: 0em أسفل

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

النتيجة النهائية

ها هي النتيجة النهائية مع وجود القضبان اللاصقة في مكانها.

سطح المكتب

متحرك

افكار اخيرة

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

لا تتردد في استكشاف طرق جديدة لاستخدام الأشرطة اللاصقة لصفحة المنتج على موقعك الخاص.

نتطلع إلى الاستماع منك في التعليقات.

هتافات!