مكون الفاصل (Divider)
يتيح لك هذا المكون إضافة خط فاصل أنيق بين أقسام الصفحة الرئيسية أو أي جزء من المتجر، مما يساعد على تنظيم المحتوى بصريًا وجعل تجربة المستخدم أكثر وضوحًا واحترافية.
مكون الفاصل في قالب لوكس - أداة بسيطة وفعّالة لتنظيم المحتوى وتحسين التخطيط البصري
🎨 خيارات التصميم والمظهر
يمكنك تخصيص مظهر الفاصل من خلال تحديد اللون والسُمك ونوع الخط والعرض:
خصائص الخط
- سُمك خط الفاصل: تحكم في سُمك الخط من 1 إلى 10 بكسل (افتراضي: 1px)
- لون الفاصل: اختر اللون المناسب لتصميم موقعك (افتراضي: #e5e7eb)
- عرض الفاصل: حدد عرض الفاصل بنسبة مئوية أو بكسل (افتراضي: 100%)
أنماط الخط
اختر من بين ثلاثة أنماط مختلفة:
- متصل (Solid): خط مستمر تقليدي - الخيار الافتراضي
- متقطع (Dashed): خط مكون من شرطات متباعدة
- منقط (Dotted): خط مكون من نقاط متتالية
📐 خيارات المسافات والهوامش
يمكنك التحكم في المسافات العلوية والسفلية للفاصل لكل من الجوال والحاسوب بشكل منفصل:
هوامش الجوال
- الهامش العلوي للجوال: المسافة فوق الفاصل على الأجهزة المحمولة (0-200px، افتراضي: 32px)
- الهامش السفلي للجوال: المسافة تحت الفاصل على الأجهزة المحمولة (0-200px، افتراضي: 32px)
هوامش سطح المكتب
- الهامش العلوي لسطح المكتب: المسافة فوق الفاصل على الحاسوب (0-200px، افتراضي: 48px)
- الهامش السفلي لسطح المكتب: المسافة تحت الفاصل على الحاسوب (0-200px، افتراضي: 48px)
مرونة في التحكم
- خطوات التحكم: زيادة أو تقليل المسافات بخطوات 4 بكسل لضبط دقيق
- تخصيص منفصل: إعدادات مستقلة للجوال والحاسوب لأفضل تجربة مستخدم
📐 خيارات التخطيط والموضع
يمكنك التحكم في تخطيط الفاصل وموضعه داخل الصفحة:
إعدادات الحاوية
- استخدام الحاوية المحدودة: عند التفعيل، يتم وضع الفاصل داخل حاوية محدودة العرض مع هوامش جانبية (مفعل افتراضياً)
- إزالة المسافات الافتراضية: عند التفعيل، يتم إزالة المسافات الافتراضية واستخدام المسافات المخصصة فقط
فوائد الخيارات
- الحاوية المحدودة: تجعل الفاصل متناسقاً مع عرض المحتوى الآخر
- المسافات المخصصة: تحكم كامل في التباعد بدلاً من الاعتماد على القيم الافتراضية
💡 متى تستخدم هذا المكون؟
في التجارة الإلكترونية
- الفصل بين أقسام المنتجات: تمييز واضح بين فئات مختلفة من المنتجات
- تنظيم المحتوى التسويقي: فصل العروض والإعلانات عن المحتوى الأساسي
- تحسين تجربة التصفح: جعل الصفحة أكثر تنظيماً وسهولة في القراءة
في التصميم
- التوازن البصري: إنشاء نقاط راحة بصرية للعين
- التدرج المنطقي: الانتقال السلس بين أجزاء المحتوى المختلفة
- التركيز على المحتوى: مساعدة المستخدم على التركيز على كل قسم بشكل منفصل
🎯 أفضل الممارسات
التصميم
- الاعتدال في الاستخدام: تجنب الإفراط في استخدام الفواصل
- التناسق اللوني: اختر ألواناً متناسقة مع هوية العلامة التجارية
- السُمك المناسب: استخدم سُمك خط مناسب - ليس رفيعاً جداً ولا سميكاً جداً
التخطيط
- المسافات المتوازنة: حافظ على تناسق المسافات العلوية والسفلية
- الاستجابة للأجهزة: استخدم إعدادات مختلفة للجوال والحاسوب
- التكامل مع العناصر: تأكد من تناسق الفاصل مع عرض العناصر الأخرى
🛠️ مثال عملي للإعداد
إعداد أساسي
- السُمك: 1px
- اللون: #e5e7eb
- النمط: متصل
- العرض: 100%
- الحاوية المحدودة: مفعلةإعداد متقدم
- السُمك: 2px
- اللون: #d1d5db
- النمط: متقطع
- العرض: 80%
- هوامش مخصصة للجوال: 24px
- هوامش مخصصة للحاسوب: 40px✨ مميزات المكون
- تصميم متجاوب: إعدادات منفصلة للجوال والحاسوب
- تخصيص شامل: تحكم كامل في المظهر والتخطيط
- سهولة الاستخدام: واجهة بديهية للإعداد
- مرونة في التصميم: خيارات متعددة للأنماط والألوان
- تحكم دقيق: ضبط المسافات بدقة عالية
- تناسق مع القالب: تكامل مثالي مع تصميم لوكس
مكون الفاصل أداة أساسية لتحسين تنظيم المحتوى وجعل تصميم موقعك أكثر احترافية ووضوحاً.