مكون مقارنة قبل وبعد (Before/After Comparison)
يمكنك من عرض مقارنة تفاعلية بين صورتين (قبل وبعد) مع إمكانية التحكم بالسلايدر أو النقر للتبديل، مما يجعله مثالياً لعرض نتائج المنتجات أو التحسينات.
مكون مقارنة قبل وبعد في قالب لوكس - أداة تفاعلية مثالية لعرض التحسينات والنتائج بطريقة بصرية مقنعة
🖼️ خيارات الوسائط والصور
يمكنك رفع صورتين للمقارنة مع إمكانية رفع نسخ منفصلة للجوال والحاسوب:
صور المقارنة
- صورة قبل (الحاسوب): الصورة التي تظهر على الجانب الأيسر في المقارنة (مطلوبة)
- صورة قبل (الجوال): نسخة محسنة للجوال من صورة قبل (اختيارية)
- صورة بعد (الحاسوب): الصورة التي تظهر على الجانب الأيمن في المقارنة (مطلوبة)
- صورة بعد (الجوال): نسخة محسنة للجوال من صورة بعد (اختيارية)
مميزات إدارة الصور
- دعم منصات متعددة: صور منفصلة للحاسوب والجوال لأفضل أداء
- جودة محسنة: رفع صور عالية الجودة لعرض واضح للتفاصيل
- مرونة في الأحجام: دعم نسب عرض مختلفة لتناسب المحتوى
📝 خيارات المحتوى والنصوص
يمكنك إضافة عناوين ونصوص توضيحية مع تخصيص الألوان والتنسيق:
العناوين والوصف
- عنوان القسم: العنوان الرئيسي للمكون (2-100 حرف)
- العنوان الفرعي: نص فرعي أسفل العنوان الرئيسي (2-100 حرف)
- وصف القسم: وصف تفصيلي للمقارنة (10-500 حرف)
تسميات الصور
- تسمية صورة قبل: النص الذي يظهر على صورة "قبل" (افتراضي: "قبل")
- تسمية صورة بعد: النص الذي يظهر على صورة "بعد" (افتراضي: "بعد")
خيارات الألوان
- لون النصوص: تخصيص لون جميع النصوص في المكون
- لون خلفية القسم: تحديد لون خلفية المكون بالكامل
🎮 خيارات التفاعل والسلوك
يمكنك تخصيص طريقة تفاعل المستخدم مع المقارنة والتحكم في السلوك العام:
أنواع التفاعل
اختر من بين ثلاثة أنماط تفاعل مختلفة:
1. السلايدر التفاعلي (الافتراضي)
- السلايدر الكلاسيكي القابل للسحب
- الموضع الابتدائي: تحديد موضع السلايدر عند التحميل (0-100%)
- التشغيل التلقائي: إمكانية تشغيل المقارنة تلقائياً
- سرعة التشغيل التلقائي: التحكم في سرعة الحركة (1-10 ثواني)
2. النقر للتبديل
- التبديل بين الصورتين بالنقر
- مثالي للمقارنات السريعة
3. تمرير الماوس
- عرض الصورة "بعد" عند تمرير الماوس
- تجربة تفاعلية سلسة
خيارات إضافية
- حساسية اللمس على الجوال: تحكم في استجابة السلايدر للمس (1-10)
- تحسين للأجهزة المحمولة: تجربة محسنة للشاشات اللمسية
✨ خيارات التأثيرات والحركة
يمكنك التحكم في عناصر المؤشرات والتأثيرات المرئية للمقارنة:
مؤشرات التقدم
- شريط التقدم السفلي: مؤشر بصري يظهر موضع المقارنة الحالي
- إخفاء شريط التقدم: خيار لإخفاء المؤشر للحصول على مظهر أنظف
تأثيرات الحركة
- انتقالات ناعمة: حركات سلسة ومريحة للعين
- استجابة فورية: تفاعل سريع مع حركات المستخدم
🎨 خيارات التصميم والمظهر
يمكنك تخصيص شكل السلايدر والحدود والظلال لتتناسب مع تصميم موقعك:
أشكال الحاوية
اختر من بين ثلاثة أشكال مختلفة:
- مستطيل: الشكل التقليدي الكلاسيكي
- مستطيل مدور: زوايا منحنية لمظهر عصري
- دائري: شكل دائري فريد ولافت
تخصيص المظهر
- انحناء الزوايا: تحكم دقيق في درجة انحناء الزوايا (0-50px)
- إضافة ظل للحاوية: ظل ناعم لإضافة عمق وأناقة
ألوان مخصصة
- لون السلايدر: لون الخط الفاصل بين الصورتين
- لون مقبض السلايدر: لون الدائرة القابلة للسحب
- لون خلفية التسميات: خلفية نصوص "قبل" و "بعد"
- لون نص التسميات: لون النصوص على التسميات
📐 خيارات التخطيط والحجم
يمكنك التحكم في أبعاد المقارنة والمسافات وسلوك الاستجابة:
نسب العرض للارتفاع
اختر النسبة المثالية لمحتواك:
- 1:1 (مربع): مثالي للصور المربعة أو البورتريه
- 4:3 (تقليدي): النسبة الكلاسيكية للصور
- 16:9 (عريض): مثالي للمناظر الطبيعية والعروض
- 20:10 (عريض جداً): للعروض البانورامية
التحكم في الأبعاد
- الحد الأقصى للارتفاع: تحديد أقصى ارتفاع للمكون (0-1000px)
- ارتفاع على الجوال: ارتفاع منفصل للأجهزة المحمولة (0-800px)
المسافات والتباعد
- المسافة العلوية: تباعد أعلى المكون (0-100px)
- المسافة السفلية: تباعد أسفل المكون (0-100px)
💡 حالات الاستخدام المثالية
هذا المكون مثالي لعرض:
في التجارة الإلكترونية
- نتائج المنتجات: قبل وبعد استخدام منتجات التجميل أو العناية
- مقارنة الجودة: إظهار الفرق في جودة المواد أو التصنيع
- عمليات التحسين: تطوير المنتجات أو الخدمات
في الخدمات
- التصميم الداخلي: مشاريع التجديد والتحسين
- خدمات التنظيف: النتائج قبل وبعد التنظيف
- الصيانة والإصلاح: حالة الأشياء قبل وبعد الخدمة
في التسويق
- قصص نجاح العملاء: رحلة التحسين والتطوير
- عروض المنتجات: إثبات فعالية المنتج بصرياً
- التحديات والحلول: عرض المشاكل والحلول المقدمة
✨ مميزات المكون
- تفاعلية متقدمة: ثلاثة أنماط تفاعل مختلفة
- تصميم متجاوب: يعمل بشكل مثالي على جميع الأجهزة
- تخصيص شامل: تحكم كامل في المظهر والسلوك
- أداء محسن: صور منفصلة للجوال والحاسوب
- سهولة الاستخدام: واجهة بديهية وسلسة
- مرونة في التخطيط: خيارات متعددة للأحجام والنسب
- تأثيرات بصرية: انتقالات ناعمة وتجربة مميزة
مكون مقارنة قبل وبعد هو أداة تسويقية قوية تساعدك في عرض قيمة منتجاتك أو خدماتك بطريقة بصرية مقنعة وتفاعلية، مما يزيد من ثقة العملاء ومعدلات التحويل.