غالبًا ما يعرض رأس المتجر سطرًا واحدًا من النص الترويجي (حد التوصيل المجاني، تخفيضات، ملاحظة شحن)، وهو ثابت في أغلب الأحيان، ما يعني أن كل رسالة جديدة تتطلب تعديل الكود أو استبدال عنصر نص كامل بدلًا من مجرد إضافة سطر.
لماذا لم يكن عنصر النص كافيًا
عنصر النص القياسي في Elementor يعرض رسالة واحدة، مرة واحدة، في مساحة ثابتة. عرض عدة رسائل متناوبة كان يعني إما بناء عارض JavaScript من الصفر داخل الصفحة، أو الأفضل: تحويل الأمر كله إلى عنصر Elementor حقيقي قابل لإعادة الاستخدام، يستطيع صاحب الموقع استخدامه في أي مكان وضبطه بالكامل من واجهة Elementor نفسها.
العنصر
بنينا Firefly Marquee Bar كعنصر Elementor أصلي بتبويبي محتوى ونمط خاصين به، ومسجّل بالطريقة نفسها التي تُسجَّل بها عناصر Elementor المدمجة:
- قائمة رسائل قابلة للتكرار، يمكن ربط كل منها برابط اختياريًا.
- اتجاه وسرعة تمرير قابلان للضبط، مع خيار الإيقاف المؤقت عند تمرير المؤشر.
- تحكم كامل في اللون وحجم الخط وتباعد الأحرف وسماكة الخط من تبويب النمط، دون الحاجة إلى معرفة CSS لتغيير مظهره.
تقنية الحلقة المتصلة
التمرير نفسه رسوم متحركة CSS خالصة، لا JavaScript: تُعرض قائمة الرسائل كاملة مرتين متتاليتين داخل حاوية flex، ويتحرك المسار كله عبر translateX من 0% إلى -50% بالضبط. ولأن النسخة الثانية مطابقة للأولى، فإن لحظة عودة الحركة إلى 0% لا يمكن تمييزها بصريًا عن منتصف الحلقة، ما ينتج تمريرًا لا نهائيًا متصلًا مهما كان حجم النص، دون منطق توقيت في JavaScript يمكن أن يخطئ.
أهم الدروس
- عندما يحتاج العميل إلى تكرار نمط تخصيص، فبناؤه كعنصر حقيقي قابل لإعادة الاستخدام أفضل من حل مؤقت على مستوى الصفحة، حتى لو كان الاستخدام الحالي رأس صفحة واحدًا.
- تقنية المحتوى المكرر مع إزاحة 50% تنتج حلقة شريط متحرك CSS متصلة دون أي JavaScript، ودون أخطاء توقيت عند حدود الحلقة.
- إتاحة أدوات التحكم في النمط (اللون، السرعة، التباعد) عبر تبويب النمط في أداة البناء نفسها هو ما يجعل العنصر «قابلًا للتعديل من العميل» لا مجرد «مبني للعميل».
اقرأ أيضًا: أعمالنا في تصميم UI وUX، خدمة تطوير WordPress لدينا.
هل تواجه قيدًا مشابهًا في لوحة إدارة WooCommerce أو WordPress لديك؟ لنتحدث؛ فـ ArtinTech Solution تبني هذا النوع تحديدًا من أدوات المتاجر المخصصة.