भाषा स्विचर आपके अंतर्राष्ट्रीय ट्रैफ़िक के लिए प्राथमिक नेविगेशन तत्व है। मल्टीलिपि एक डुअल-इंटरफ़ेस संपादक प्रदान करता है, जिससे आप डेस्कटॉप और मोबाइल व्यूपोर्ट के लिए इस तत्व के व्यवहार और सौंदर्य को स्वतंत्र रूप से नियंत्रित कर सकते हैं।
यह गाइड इसकी कॉन्फ़िगरेशन को कवर करती है Layouts, पोजिशनिंग, आप स्केल और सटीकता दोनों हासिल कर सकते हैं। Brand Styling MultiLipi कमांड सेंटर के माध्यम से।
1. Interface Editor तक पहुँचना
To begin customizing your frontend integration:
- 1अपने MultiLipi डैशबोर्ड.
- 2Open सेटिंग्स बाएं मेनू से।
- 3चयन करें Language Switcher.
💡 प्रो टिप: आप Switch Editor में प्रवेश करेंगे, जिसमें एक real-time preview canvas है। Layouts के बीच स्विच करने के लिए शीर्ष पर स्थित टॉगल का उपयोग करें। डेस्कटॉप और मोबाइल views to ensure responsiveness across devices.
2. चरण 1: आर्किटेक्चर का चयन (पोजिशनिंग)
परिभाषित करें कि switcher आपके DOM में कैसे व्यवहार करता है। आपके पास दो deployment modes हैं:
Mode A: Floating (Default)
Behavior: स्विचर आपकी सामग्री पर मंडराता है, स्क्रीन के एक विशिष्ट कोने (जैसे, नीचे-दाएं) पर लंगर डाले हुए है।
उपयोग का मामला: आपकी वेबसाइट के मौजूदा लेआउट कोड को बदले बिना तत्काल दृश्यता के लिए सर्वश्रेष्ठ।
Mode B: Embedded (Integrated)
Behavior: स्विच HTML element में इंजेक्ट किया जाता है जिसे आप परिभाषित करते हैं (जैसे, Navigation Bar या Footer)।
☠️ फ़ॉलबैक प्रोटोकॉल
If your specified HTML container cannot be found on a particular page, MultiLipi's Fallback Logic स्वचालित रूप से स्विचर को "फ्लोटिंग मोड" पर वापस कर देता है। यह सुनिश्चित करता है कि भाषा चयन से उपयोगकर्ता कभी भी बाहर न हों, भले ही लेआउट बदल जाए।
3. Step 2: Visual Identity (Templates & Colors)
स्विचर को अपने ब्रांड के डिज़ाइन सिस्टम के साथ संरेखित करें।
Template Selection
अपनी site's aesthetic से मिलान करने के लिए pre-configured UI patterns की हमारी library से चुनें:
Palette Integration
built-in Color Picker या raw RGB values का उपयोग करके अपनी brand guidelines से मिलान करने के लिए default styles को ओवरराइड करें:
- •Background Color: Match your navbar or button styles.
- •टेक्स्ट का रंग: accessibility (WCAG अनुपालन) के लिए high contrast सुनिश्चित करें।
4. Step 3: Advanced Styling (Custom CSS)
उन डेवलपर्स के लिए जिन्हें पिक्सेल-परफेक्ट नियंत्रण की आवश्यकता है, आप सीधे विजेट के शैडो DOM में कस्टम CSS नियम इंजेक्ट कर सकते हैं।
सामान्य CSS चयनकर्ता:
#dynamicDropdown- ड्रॉपडाउन सूची के मुख्य कंटेनर को लक्षित करता है।#lang-switcher-selected-lang .fi- Targets the flag icon of the currently selected language.
Example Configuration:
/* 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);
}💎 Developer Note: कस्टम CSS आपको स्विचर के कार्यात्मक तर्क को बनाए रखते हुए किसी भी दृश्य गुण को ओवरराइड करने की अनुमति देता है। यह जटिल डिज़ाइन सिस्टम से मिलान करने या डार्क मोड भिन्नता लागू करने के लिए विशेष रूप से उपयोगी है।
5. परिनियोजन और सत्यापन
आपकी configuration पूरी होने के बाद:
पूर्वावलोकन
डेस्कटॉप और मोबाइल मोड के बीच टॉगल करें ताकि दृश्य स्थिरता सुनिश्चित हो सके।
Save
क्लिक करें Save to push the changes to your live production site instantly.
Reset
यदि आपको फिर से शुरू करने की आवश्यकता है, तो Reset डिफ़ॉल्ट मल्टीलिपि स्टाइल पर वापस जाने के लिए फ़ंक्शन।
✅ सफलता: आपका भाषा स्विचर अब लाइव है! मल्टीलिपि जहां भी तैनात है, सभी पेजों पर परिवर्तन तुरंत फैल जाते हैं। अधिकांश कॉन्फ़िगरेशन के लिए किसी भी कैश को साफ़ करने या पेज को रीफ़्रेश करने की आवश्यकता नहीं है।