محول اللغة هو عنصر التنقل الأساسي لحركة المرور الدولية الخاصة بك. يوفر MultiLipi محررا مزدوج الواجهة، يتيح لك التحكم في سلوك وجمالية هذا العنصر بشكل مستقل لأجهزة عرض سطح المكتب والهواتف المحمولة.
يغطي هذا الدليل تكوين التصاميم, التموضع، و تصميم العلامة التجارية عبر مركز قيادة MultiLipi.
1. الوصول إلى محرر الواجهة
لبدء تخصيص دمج الواجهة الأمامية الخاصة بك:
- 1انتقل إلى لوحة تحكم MultiLipi.
- 2مفتوح الإعدادات من القائمة اليسرى.
- 3سيلكت محول اللغة.
💡 نصيحة محترفة: ستدخل محرر Switch، الذي يحتوي على لوحة معاينة في الوقت الحقيقي. استخدم زر التبديل في الأعلى للتبديل بينهما سطح المكتب و موبايل عروض لضمان الاستجابة عبر الأجهزة.
2. الخطوة 1: اختيار البنية التحتية (التموضع)
حدد كيف يتصرف المحول داخل الدوم. لديك وضعان للنشر:
الوضع أ: الطفو (الافتراضي)
السلوك: يمر المحول فوق محتواك، مثبتا في زاوية محددة من الشاشة (مثل أسفل اليمين).
حالة الاستخدام: الأفضل للظهور الفوري دون تغيير كود التخطيط الحالي لموقعك.
الوضع ب: مدمج (متكامل)
السلوك: يتم حقن المحول في عنصر HTML محدد تحدده (مثلا داخل شريط التنقل أو التذييل).
⚠️ بروتوكول الاحتياط
إذا لم يكن من الممكن العثور على حاوية HTML المحددة في صفحة معينة، فإن MultiLipi منطق الاحتياط يعيد التبديل تلقائيا إلى "الوضع العائم". هذا يضمن ألا يتم حظر المستخدمين من اختيار اللغة، حتى لو تغير التخطيط.
3. الخطوة 2: الهوية البصرية (القوالب والألوان)
قم بمحاذاة جهاز التحويل مع نظام التصميم الخاص بعلامتك التجارية.
اختيار القالب
اختر من مكتبتنا لأنماط واجهة المستخدم المعدة مسبقا لتتناسب مع جمالية موقعك:
تكامل اللوحة
تجاوز الأنماط الافتراضية لتتوافق مع إرشادات علامتك التجارية باستخدام أداة اختيار الألوان المدمجة أو قيم RGB الخام:
- •لون الخلفية: طابق نمط شريط التنقل أو الأزرار الخاصة بك.
- •لون النص: تأكد من تباين عالي لسهولة الوصول (الامتثال لمعايير WCAG).
4. الخطوة 3: التصميم المتقدم (CSS مخصص)
بالنسبة للمطورين الذين يحتاجون إلى تحكم دقيق في البكسل، يمكنك حقن قواعد CSS مخصصة مباشرة في DOM الظل الخاص بالأداة (DOM).
محددات CSS الشائعة:
#dynamicDropdown- تستهدف الحاوية الرئيسية في القائمة المنسدلة.#lang-switcher-selected-lang .fi- يستهدف أيقونة العلم للغة المحددة حاليا.
مثال على التكوين:
/* إزالة نصف قطر الحدود لتصميم مربع حاد */
#lang-switcher-selected-lang .fi {
نصف قطر الحدود: 0px;
}
/* تخصيص الخلفية المنسدلة */
#dynamicDropdown {
لون الخلفية: #ffffff؛
ظل الصندوق: 0 4 بكسل 12 بكسل RGB (0,0,0,0.1);
}💎 ملاحظة المطور: يسمح لك CSS المخصص بتجاوز أي خاصية بصرية مع الحفاظ على المنطق الوظيفي للمبديل. وهذا مفيد بشكل خاص لمطابقة أنظمة التصميم المعقدة أو تنفيذ تنويعات الوضع المظلم.
5. النشر والتحقق
بمجرد اكتمال إعدادك:
معاينة
قم بالتبديل بين وضعي سطح المكتب والجوال في المحرر للتحقق من الاتساق البصري.
حفظ
انقر حفظ لدفع التغييرات إلى موقع الإنتاج الحي الخاص بك فورا.
إعادة التعيين
إذا كنت بحاجة للبدء من جديد، استخدم إعادة التعيين للعودة إلى أنماط MultiLipi الافتراضية.
✅ النجاح: محول اللغة الخاص بك أصبح متاحا الآن! تنتشر التغييرات فورا عبر جميع الصفحات التي يتم فيها نشر MultiLipi. لا حاجة لمسح ذاكرة التخزين المؤقت أو تحديث الصفحة لمعظم الإعدادات.