مبدل اللغة هو عنصر التنقل الأساسي لحركة المرور الدولية الخاصة بك. توفر MultiLipi محررًا بواجهة مزدوجة، مما يتيح لك التحكم في سلوك وجماليات هذا العنصر بشكل مستقل لعرض سطح المكتب والجوال.
يغطي هذا الدليل تكوين التخطيطات, تحديد الموضع، و تنسيق العلامة التجارية عبر مركز أوامر MultiLipi.
1. الوصول إلى محرر الواجهة
لبدء تخصيص تكامل الواجهة الأمامية الخاص بك:
- 1انتقل إلى لوحة تحكم MultiLipi.
- 2فتح الإعدادات من القائمة اليسرى.
- 3تحديد مبدل اللغة.
💡 نصيحة احترافية: ستدخل إلى محرر التبديل، والذي يتميز بلوحة معاينة في الوقت الفعلي. استخدم المفتاح في الأعلى للتبديل بين سطح المكتب و جوال طرق العرض لضمان الاستجابة عبر الأجهزة.
2. الخطوة 1: اختيار البنية (التحديد)
حدد كيف يتصرف المحول داخل DOM الخاص بك. لديك وضعان للنشر:
الوضع أ: عائم (افتراضي)
السلوك: يظهر المحول فوق المحتوى الخاص بك، مثبتًا في زاوية معينة من الشاشة (على سبيل المثال، أسفل اليمين).
حالة الاستخدام: الأفضل للرؤية الفورية دون تغيير كود تخطيط موقعك الحالي.
الوضع ب: مضمن (متكامل)
السلوك: يتم حقن المحول في عنصر HTML محدد تحدده (على سبيل المثال، داخل شريط التنقل أو التذييل).
⚠️ بروتوكول الرجوع الاحتياطي
إذا لم يتم العثور على حاوية HTML المحددة الخاصة بك في صفحة معينة، فإن MultiLipi's منطق الاستعادة يعيد المبدل تلقائيًا إلى "وضع التعويم". يضمن هذا عدم حظر المستخدمين أبدًا من اختيار اللغة، حتى لو تغير التخطيط.
3. الخطوة 2: الهوية المرئية (القوالب والألوان)
قم بمحاذاة المحول مع نظام تصميم علامتك التجارية.
اختيار القالب
اختر من مكتبتنا لأنماط واجهة المستخدم المعدة مسبقًا لتتناسب مع جمالية موقعك:
تكامل اللوحة
تجاوز الأنماط الافتراضية لتتناسب مع إرشادات علامتك التجارية باستخدام منتقي الألوان المدمج أو قيم RGB الخام:
- •لون الخلفية: طابق أنماط شريط التنقل أو الأزرار الخاصة بك.
- •لون النص: تأكد من وجود تباين عالٍ لسهولة الوصول (الامتثال لمعايير WCAG).
4. الخطوة 3: التنسيق المتقدم (CSS مخصص)
للمطورين الذين يحتاجون إلى تحكم دقيق بالبكسل، يمكنك إدخال قواعد CSS مخصصة مباشرة في Shadow DOM للأداة.
محددات CSS الشائعة:
#dynamicDropdown- يستهدف الحاوية الرئيسية لقائمة القائمة المنسدلة.#lang-switcher-selected-lang .fi- يستهدف أيقونة العلم للغة المحددة حاليًا.
مثال على التكوين:
/* Remove border radius for a sharp, square design */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Customize the dropdown background */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}💎 ملاحظة للمطور: يسمح لك CSS المخصص بتجاوز أي خاصية مرئية مع الحفاظ على المنطق الوظيفي للمحول. هذا مفيد بشكل خاص لمطابقة أنظمة التصميم المعقدة أو تنفيذ اختلافات الوضع المظلم.
5. النشر والتحقق
بمجرد اكتمال التكوين الخاص بك:
معاينة
قم بالتبديل بين وضعي سطح المكتب والجوال في المحرر للتحقق من الاتساق البصري.
حفظ
انقر حفظ لدفع التغييرات إلى موقع الإنتاج المباشر الخاص بك على الفور.
إعادة تعيين
إذا كنت بحاجة إلى البدء من جديد، استخدم إعادة تعيين الوظيفة للعودة إلى أنماط MultiLipi الافتراضية.
✅ نجاح: مبدل اللغة الخاص بك جاهز الآن! تنتشر التغييرات فورًا عبر جميع الصفحات التي تم نشر MultiLipi عليها. لا حاجة لمسح ذاكرة التخزين المؤقت أو تحديث الصفحة لمعظم التكوينات.