مكون المحتوى المتحرك (Scrolled Content Component)

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

الميزات الرئيسية

📱 تصميم متجاوب

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

🎯 محتوى متحرك مرن

• إضافة نصوص وصور وروابط متنوعة
• حركة مستمرة وسلسة أفقياً
• إمكانية إيقاف الحركة عند التمرير بالماوس

🎨 خيارات تخصيص شاملة

• تحكم كامل في ألوان الخلفية والنصوص
• إعدادات خطوط متقدمة
• تأثيرات تلاشي في الحواف

إعدادات المكون

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

عناصر المحتوى المتحرك

{
  "contents": [
    {
      "contents.text": "🎉 عروض خاصة تصل إلى 50%",
      "contents.image": "https://example.com/image.png",
      "contents.url": []
    }
  ]
}

النص (Text)

• نوع البيانات: نص
• مطلوب: نعم
• الحد الأدنى: 1 حرف
• الحد الأقصى: 100 حرف
• متعدد اللغات: نعم
• الوصف: النص الذي سيظهر في الشريط المتحرك

الصورة (Image) - اختياري

• نوع البيانات: رابط صورة
• مطلوب: لا
• تنسيق: URL صالح للصورة
• الوصف: صورة اختيارية تظهر بجانب النص

الرابط (URL) - اختياري

• نوع البيانات: قائمة متغيرة
• مطلوب: لا
• المصادر المتاحة:
  • منتج (products)
  • تصنيف (categories)
  • ماركة تجارية (brands)
  • صفحة تعريفية (pages)
  • مقالة (blog_articles)
  • تصنيف ضمن المدونة (blog_categories)
  • التخفيضات (offers_link)
  • الماركات التجارية (brands_link)
  • المدونة (blog_link)
  • رابط خارجي (custom)

حدود المجموعة:

• الحد الأدنى: 2 عنصر
• الحد الأقصى: 12 عنصر

🎨 خيارات التصميم والألوان

لون خلفية الشريط المتحرك

{
  "background_color": "#111111"
}

• نوع البيانات: كود لوني (Hex)
• القيمة الافتراضية: #111111
• الوصف: لون خلفية الشريط المتحرك

لون النص المتحرك

{
  "text_color": "#ffffff"
}

• نوع البيانات: كود لوني (Hex)
• القيمة الافتراضية: #ffffff
• الوصف: لون النصوص في الشريط المتحرك

حجم الصور للحاسوب

{
  "image_size_desktop": 24
}

• نوع البيانات: رقم (بالبكسل)
• القيمة الافتراضية: 24
• النطاق: 1-100
• الخطوة: 2
• الوصف: ارتفاع الصور على أجهزة الحاسوب

حجم الصور للجوال

{
  "image_size_mobile": 20
}

• نوع البيانات: رقم (بالبكسل)
• القيمة الافتراضية: 20
• النطاق: 1-80
• الخطوة: 2
• الوصف: ارتفاع الصور على أجهزة الجوال

انحناء زوايا الصور للحاسوب

{
  "image_border_radius_desktop": 4
}

• نوع البيانات: رقم (بالبكسل)
• القيمة الافتراضية: 4
• النطاق: 0-50
• الخطوة: 1

انحناء زوايا الصور للجوال

{
  "image_border_radius_mobile": 4
}

• نوع البيانات: رقم (بالبكسل)
• القيمة الافتراضية: 4
• النطاق: 0-50
• الخطوة: 1

✍️ خيارات الطباعة والخطوط

وزن الخط

{
  "font_weight": "400"
}

الخيارات المتاحة:

• 300 - خفيف
• 400 - عادي (افتراضي)
• 500 - متوسط
• 600 - عريض
• 700 - عريض جداً
• 800 - عريض جداً جداً
• 900 - عريض جداً جداً جداً

حجم النص للحاسوب

{
  "text_size_desktop": 16
}

• نوع البيانات: رقم (بالبكسل)
• القيمة الافتراضية: 16
• النطاق: 1-48
• الخطوة: 1
• الوصف: حجم النص على أجهزة الحاسوب

حجم النص للجوال

{
  "text_size_mobile": 14
}

• نوع البيانات: رقم (بالبكسل)
• القيمة الافتراضية: 14
• النطاق: 1-36
• الخطوة: 1
• الوصف: حجم النص على أجهزة الجوال

⚙️ خيارات سلوك التمرير

سرعة التمرير

{
  "scroll_speed": 1.3
}

• نوع البيانات: رقم عشري
• القيمة الافتراضية: 1.3
• النطاق: 0.5-5.0
• الخطوة: 0.1
• الوصف: سرعة حركة المحتوى المتحرك

اتجاه التمرير

{
  "scroll_direction": "ltr"
}

الخيارات المتاحة:

• ltr - من اليسار إلى اليمين (افتراضي)
• rtl - من اليمين إلى اليسار

إيقاف الحركة عند التمرير بالماوس

{
  "pause_on_hover": true
}

• نوع البيانات: منطقي (true/false)
• القيمة الافتراضية: true
• الوصف: إيقاف حركة المحتوى مؤقتاً عند تمرير الماوس فوقه

📐 خيارات التخطيط والحاوية

استخدام الحاوية المحدودة

{
  "use_container": false
}

• نوع البيانات: منطقي (true/false)
• القيمة الافتراضية: false
• الوصف: عند التفعيل، سيتم وضع المحتوى داخل حاوية محدودة العرض

إظهار حواف التلاشي

{
  "show_fade_edges": true
}

• نوع البيانات: منطقي (true/false)
• القيمة الافتراضية: true
• الوصف: إضافة تأثير تلاشي في بداية ونهاية الشريط المتحرك

نصائح للاستخدام الأمثل

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

1. استخدم نصوص مختصرة وواضحة لضمان سهولة القراءة أثناء الحركة
2. اختر ألوان متباينة بين الخلفية والنص لضمان وضوح القراءة
3. لا تفرط في عدد العناصر لتجنب إرهاق المستخدم
4. اختبر السرعة المناسبة لضمان قراءة مريحة
5. استخدم الصور بحكمة فقط عند الحاجة وبأحجام مناسبة

⚠️ تجنب هذه الأخطاء

• تجنب النصوص الطويلة جداً التي تصعب القراءة
• لا تستخدم سرعة عالية جداً تجعل النص غير قابل للقراءة
• تجنب الألوان المتشابهة للخلفية والنص
• لا تضع معلومات مهمة فقط في الشريط المتحرك
• تجنب استخدام صور كبيرة تؤثر على أداء الصفحة

🎯 حالات الاستخدام المُوصى بها

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

إعدادات الاستجابة للشاشات

شاشات الحاسوب

• حجم النص: 16 بكسل (افتراضي)
• حجم الصور: 24 بكسل (افتراضي)
• انحناء زوايا الصور: 4 بكسل (افتراضي)

شاشات الجوال

• حجم النص: 14 بكسل (افتراضي)
• حجم الصور: 20 بكسل (افتراضي)
• انحناء زوايا الصور: 4 بكسل (افتراضي)

نصائح التحسين

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

الدعم الفني

إذا واجهت أي مشاكل في استخدام مكون المحتوى المتحرك، يمكنك:

1. مراجعة الوثائق: تأكد من اتباع الإعدادات الصحيحة
2. اختبار على متصفحات مختلفة: تحقق من توافق المكون
3. التواصل مع الدعم: فريق الدعم الفني متاح لمساعدتك

أسئلة شائعة

س: لماذا لا يظهر المحتوى المتحرك؟ ج: تأكد من وجود عناصر في مجموعة contents وأن النصوص غير فارغة.

س: كيف يمكنني تغيير اتجاه الحركة؟ ج: استخدم إعداد scroll_direction واختر بين ltr أو rtl.

س: هل يمكنني إضافة روابط خارجية؟ ج: نعم، اختر "رابط خارجي" في إعدادات الرابط وأدخل الرابط المطلوب.

هذا المكون جزء من باقة مكونات Luxe Salla Theme المتقدمة، مصمم خصيصاً لإضافة حيوية وجاذبية لموقعك التجاري.