إضافة CSS مخصص لويدجت انستافيد
الخطوة 5 من 5: القوالب تغطي 90% من الاحتياجات، وCSS المخصص يغطي الـ10% الباقية، الخط الذي لا يطابق هويتك، المسافة المزعجة، حجم العنوان. ميزة الباقة الاحترافية التي تمنحك تحكمًا بلا حدود.
متى تحتاج CSS مخصص؟
- خط الويدجت يختلف عن خط متجرك.
- ألوان الأزرار لا تطابق هوية علامتك.
- تريد ضبط أحجام أو مسافات دقيقة لا توفرها إعدادات التصميم.
نطاق التطبيق وحدود المحرر
- CSS المخصص في هذه الخطوة يغير ويدجت إنستغرام فقط، والتطبيق يعزل الكود كي لا يؤثر في بقية المتجر.
- حد المحرر 10,000 حرف، ويظهر عداد الأحرف أثناء الكتابة.
- لقسم فيديوهات التسوق CSS مستقل خاص به من التصميم والموضع، والاثنان لا يطبقان معًا.
الخطوات
- افتح **«إعدادات الويدجت» > خطوة «CSS متقدم».
- اكتب قواعدك في محرر CSS (خذه نسخة احتياطية من الكود الحالي أولًا إن كنت معدلًا سابقًا).
- استخدم المعاينة لرؤية الأثر مباشرة قبل الحفظ.
- تحقق من توازن أقواس الفتح والإغلاق قبل الحفظ، فالواجهة تنبه إليه.
- اضغط «حفظ»، تُطبَّق القواعد على الويدجت فقط ولا تؤثر على بقية المتجر.
العناصر الجاهزة للتخصيص
يوفر المحرر أسماء العناصر الأساسية جاهزة:
| العنصر | ماذا يتحكم فيه |
|---|---|
.widget-title | العنوان الرئيسي للويدجت |
.widget-subtitle | العنوان الفرعي |
.highlight-title | عناوين الهايلايت |
.instafeed-grid | شبكة الصور |
.instagram-account-info | معلومات الحساب (الاسم والإحصاءات) |
مثال جاهز: النص الأبيض للمتاجر الداكنة
يوجد زر «استخدم هذا المثال» داخل المحرر لنسخه مباشرة، وهذا نصه:
/* White text for dark theme */
.widget-title,
.widget-subtitle,
.highlight-title {
color: #ffffff !important;
}
.instagram-account-info * {
color: #ffffff !important;
}
انتبه: استخدام المثال يستبدل محتوى المحرر، فاحفظ نسخة من كودك الحالي أولًا.
أمثلة إضافية للنسخ
توحيد خط شريط الحساب مع خط المتجر:
.instagram-account-info {
font-family: 'Cairo', sans-serif !important;
}
تعديل حجم عنوان القسم:
.widget-title {
font-size: 22px !important;
font-weight: 700 !important;
}
أفضل الممارسات
| الممارسة | لماذا؟ |
|---|---|
| سمِّ كل مجموعة تعديلات | تعرف وظيفة كل قاعدة عند العودة بعد شهور |
استخدم !important بحذر وفقط عند الحاجة | قواعد القالب قد تحتاج تجاوزًا صريحًا |
| اختبر على الجوال بعد كل تعديل | أغلب الزوار جوال، راجع مراجعة الجوال |
| لا تعتمد على CSS لما توفره الإعدادات | حدود العناصر والعناوين لها إعدادات جاهزة أسهل صيانة |
أخطاء شائعة
| الخطأ | طريقة إصلاحه |
|---|---|
| عدّلت CSS ولا شيء يتغير | تحقق من صحة الأقواس والفواصل، ونظّف كاش المتجر، وإن استمر الأمر راجع استكشاف الأخطاء. |
| كسر CSS التصميم على الجوال | أضف استعلام وسائط @media لاستثناء الشاشات الصغيرة من التعديل الجريء. |
ماذا بعد؟
- حفظ الإعدادات ونشر الويدجت: آخر خطوة عملية.
- ويدجت تيك توك: نفس القوة بإعدادات مستقلة.
هل أجاب هذا المقال على سؤالك؟