إنتقل إلى المحتوى الرئيسي

تنسيق الودجت المخصص

خصص مظهر ودجت التخصيص ليتناسق مع هوية متجرك البصرية. استوديو المنتجات V2 يوفر إعدادات تنسيق مدمجة (ألوان، أحجام، أنماط) مع دعم CSS مخصص للتجار المتقدمين. كل الإعدادات تراعي RTL وتتكيف مع اللغة العربية.

مستويات التنسيق​

المستوىالنطاقأين يُضبط
إعدادات المتجرجميع المنتجات في المتجرإعدادات الحساب
إعدادات المنتجمنتج واحد فقطالإعدادات العامة في الاستوديو

⚠️ إعدادات المنتج تتجاوز إعدادات المتجر. إذا عيّنت لونًا أزرق للمتجر وأحمر لمنتج معين، المنتج يظهر بالأحمر.

إعدادات النسق (Theme)​

الألوان​

العنصرالوصفالافتراضي
اللون الأساسي (Primary)لون الأزرار الرئيسية، الحدود النشطة، التحديداتبنفسجي (#7C3AED)
لون الخلفية (Background)خلفية الودجتأبيض (#FFFFFF)
لون النص (Text)لون النصوص والعناوينداكن (#1A1A1A)
لون النص الثانوي (Secondary Text)النصوص التوضيحية والمساعدةرمادي (#6B7280)
لون الحدود (Border)حدود الحقول والبطاقاترمادي فاتح (#E5E7EB)

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > الإعدادات العامة > قسم التنسيق > الألوان UI State: قسم تنسيق الألوان مع ٥ منتقيات ألوان (Color Pickers). كل منتقي مع اسم اللون ومعاينة دائرية للون الحالي. اللون الأساسي = بنفسجي. What to Capture: قسم الألوان كامل. RTL Note: RTL. Size: 500×300px

نصف قطر الحدود (Border Radius)​

يتحكم في استدارة زوايا الحقول والأزرار والبطاقات:

  • لا شيء (None): زوايا حادة — 0px
  • صغير (Small): استدارة خفيفة — 4px
  • متوسط (Medium): استدارة متوسطة — 8px (افتراضي)
  • كبير (Large): استدارة كبيرة — 16px
  • دائري (Round): أزرار دائرية بالكامل — 9999px

الكثافة (Density)​

تتحكم في تباعد العناصر وحجم الهوامش:

الكثافةالوصفمناسب لـ
مضغوط (Compact)مسافات صغيرة، خطوط أصغرالشاشات الصغيرة، المعلومات الكثيفة
مريح (Comfortable)مسافات متوسطة (افتراضي)معظم الاستخدامات
واسع (Spacious)مسافات كبيرة، خطوط أكبرالمنتجات الفاخرة، سهولة القراءة

تنسيق الأزرار​

نمط الأزرار​

النمطالشكل
صلب (Solid)زر بخلفية ملونة — الأكثر وضوحًا
مخطط (Outline)زر بإطار فقط بدون خلفية — أنيق
ناعم (Soft)زر بخلفية شفافة قليلاً — عصري

حالة التمرير (Hover)​

  • صلب: يغمق اللون قليلاً
  • مخطط: يمتلئ باللون
  • ناعم: يزداد وضوح الخلفية

الحجم​

  • صغير: للأزرار الثانوية
  • متوسط: افتراضي
  • كبير: للأزرار الرئيسية

تنسيق البطاقات والحاويات​

الإعدادالوصف
الظل (Shadow)عمق ظل البطاقات: لا شيء، خفيف، متوسط، ثقيل
التباعد الداخلي (Padding)المسافة داخل البطاقات
الشفافية (Opacity)شفافية خلفية البطاقات

CSS مخصص (للتجار المتقدمين)​

إذا كانت إعدادات التنسيق المدمجة غير كافية، يمكنك إضافة CSS مخصص:

  1. في قسم التنسيق، ابحث عن "CSS مخصص"
  2. أدخل كود CSS الخاص بك
  3. الكود يُطبق على الودجت فقط — لا يؤثر على باقي المتجر

قيود الأمان​

لأسباب أمنية:

  • ❌ لا يمكن استخدام position: fixed أو position: absolute خارج الودجت
  • ❌ لا يمكن تحميل خطوط أو صور خارجية
  • ❌ بعض الخصائص مقيدة لمنع تعارض مع سلة
  • ✅ معظم خصائص CSS مدعومة (ألوان، هوامش، خطوط، أحجام...)

مثال CSS مخصص​

/* تغيير خط العناوين */
.product-customizer-title {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  color: #C49A6C;
}

/* تنسيق خاص لأزرار الاختيار */
.product-customizer .choice-button.selected {
  border: 3px solid #C49A6C;
  box-shadow: 0 0 10px rgba(196, 154, 108, 0.3);
}

⚠️ قريبًا — محرر CSS مع معاينة مباشرة قيد التطوير

RTL والتنسيق​

الودجت يعمل بتخطيط RTL افتراضيًا للمتاجر العربية. التنسيقات المخصصة يجب أن تراعي RTL:

  • استخدم margin-right وpadding-right بدلاً من left
  • تأكد من أن الأزرار والقوائم تظهر بالترتيب الصحيح
  • النصوص العربية تحتاج أحجام خطوط أكبر قليلاً من الإنجليزية

معاينة التنسيق​

لتجربة التنسيق قبل النشر:

  1. في الإعدادات العامة، عدّل التنسيق
  2. انتقل إلى تبويب "معاينة العميل" في الشريط الجانبي
  3. الودجت في المعاينة سيعكس التنسيق الجديد
  4. جرب الوضعين: حاسب وجوال

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > معاينة العميل > ودجت منسق UI State: معاينة العميل تظهر الودجت بتنسيق مخصص: لون أساسي ذهبي (#C49A6C)، كثافة واسعة، نصف قطر كبير، أزرار صلبة. What to Capture: الودجت المنسق في المعاينة. RTL Note: RTL. Size: 500×600px

نصائح وأفضل الممارسات​

  1. تناسق مع هوية المتجر: استخدم ألوان متجرك الأساسية
  2. تباين كافٍ: تأكد من وضوح النص على الخلفية
  3. لا تفرط في التنسيق: البساطة أفضل — الودجت أداة وليس لوحة فنية
  4. اختبر RTL: إذا كنت تستخدم CSS مخصص، اختبره بالعربية
  5. الجوال أولاً: اختبر التنسيق على شاشة جوال
  6. استخدم إعدادات المتجر للثوابت: وإعدادات المنتج للاستثناءات

مقالات ذات صلة​

آخر تحديث: 2026-05-17

آخر تحديث في