مكون سلايدر منتجات مع صورة خلفية

يتيح لك هذا المكون عرض مجموعة من المنتجات بشكل متحرك (سلايدر) مع إمكانية إضافة صورة خلفية وعناوين ونصوص توضيحية، ليمنح متجرك مظهرًا عصريًا وجذابًا.

متى تستخدم هذا المكون؟

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

خيارات الإعدادات

المحتوى الأساسي

• العنوان الفرعي:

  • نص فرعي يظهر أعلى العنوان الرئيسي
  • يدعم تعدد اللغات
  • طول النص: 2-100 حرف

• العنوان:

  • العنوان الرئيسي للقسم
  • يدعم تعدد اللغات
  • طول النص: 2-100 حرف

• الوصف:

  • وصف تفصيلي للقسم
  • يدعم تعدد اللغات
  • طول النص: 20-255 حرف

• المنتجات:

  • اختر المنتجات التي تريد عرضها في السلايدر
  • يمكن اختيار منتجات متعددة
  • قابل للبحث ومطلوب

تنسيق النصوص

• حجم النص:

  • صغير
  • متوسط
  • كبير

• سمك النص:

  • الافتراضي
  • عادي
  • خفيف
  • متوسط
  • عريض

الألوان والخلفية

• لون الخلفية:

  • يُستخدم فقط في حالة عدم وجود صورة خلفية
  • افتراضي: #ffffff

• لون النصوص:

  • لون جميع النصوص في المكون
  • افتراضي: #ffffff

• صورة الخلفية:

  • صورة خلفية عالية الجودة
  • تنسيقات مدعومة: JPG, PNG, WebP

إعدادات الأزرار

• الأزرار فوق السلايدر:

  • يمكن إضافة حتى 3 أزرار
  • لكل زر:
    • عنوان الزر: نص يدعم تعدد اللغات (3-30 حرف)
    • الرابط: اختيار من عدة أنواع:
      • منتج
      • تصنيف
      • ماركة تجارية
      • صفحة تعريفية
      • مقالة
      • تصنيف ضمن المدونة
      • التخفيضات
      • الماركات التجارية
      • المدونة
      • رابط خارجي

• حجم الأزرار:

  • صغير
  • متوسط
  • كبير

• تنسيق الأزرار:

  • نص
  • نص مسطر
  • محدد
  • مملوء

• ألوان الأزرار:

  • لون خلفية الأزرار والإطار: افتراضي #ffffff
  • لون نصوص الأزرار: افتراضي #000000

إعدادات السلايدر

• تشغيل تلقائي للسلايدر:

  • تفعيل/تعطيل الحركة التلقائية
  • افتراضي: مفعل

• إخفاء الأسهم:

  • إظهار أو إخفاء أسهم التنقل
  • افتراضي: معطل (الأسهم ظاهرة)

• عرض السلايد بكامل الشاشة:

  • تمديد السلايدر لكامل عرض الشاشة
  • افتراضي: معطل

تخطيط العرض

• عدد المنتجات في الشاشات الكبيرة:

  • نطاق: 1-8 منتجات
  • افتراضي: 4 منتجات

• عدد المنتجات في الموبايل:

  • نطاق: 1-4 منتجات
  • افتراضي: 2 منتج

• المساحة بين المنتجات في الشاشات الكبيرة:

  • نطاق: 0-50 بكسل
  • افتراضي: 16 بكسل

• المساحة بين المنتجات في الموبايل:

  • نطاق: 0-30 بكسل
  • افتراضي: 8 بكسل

أفضل الممارسات

اختيار المحتوى

• استخدم صورة خلفية متناسقة مع هوية متجرك ولا تشتت الانتباه عن المنتجات
• اختر منتجات متنوعة أو عروض موسمية لجذب الزوار
• أضف عنوانًا مختصرًا وواضحًا مع نص توضيحي يعزز الرسالة التسويقية

تحسين الأداء

• لا تكثر من عدد المنتجات حتى لا يصبح السلايدر مزدحمًا
• استخدم صور خلفية محسنة للويب لسرعة التحميل
• اختبر التصميم على أجهزة مختلفة

تجربة المستخدم

• تأكد من وضوح النصوص على صورة الخلفية
• استخدم ألوان متباينة للنصوص والأزرار
• فعّل التشغيل التلقائي بحذر حتى لا تشتت المستخدم

مثال عملي

إعداد أساسي:

• العنوان: "منتجاتنا المميزة"
• الوصف: "اكتشف أحدث المنتجات مع عروض خاصة"
• عدد المنتجات: 6 منتجات
• صورة خلفية: صورة بألوان هادئة لا تتعارض مع المنتجات

إعداد الأزرار:

• زر 1: "تسوق الآن" (رابط لتصنيف)
• زر 2: "عروض خاصة" (رابط للتخفيضات)
• حجم الأزرار: متوسط
• تنسيق: مملوء

إعداد السلايدر:

• الشاشات الكبيرة: 4 منتجات
• الموبايل: 2 منتج
• تشغيل تلقائي: مفعل
• المساحة بين المنتجات: 16px للكمبيوتر، 8px للموبايل

ملاحظة: هذا المكون مثالي لجذب الانتباه إلى منتجاتك المميزة مع لمسة تصميمية احترافية.