नेविगेशन शैलियाँ
अपने चर्च की वेबसाइट की नेविगेशन पट्टी के रंगों को अपने ब्रांडिंग से मेल करने के लिए अनुकूलित करें। आप ठोस पृष्ठभूमि और पारदर्शी ओवरले दोनों के लिए रंगों को कॉन्फ़िगर कर सकते हैं, जिससे आपको अपनी नेविगेशन की उपस्थिति पर पूर्ण नियंत्रण मिलता है।
शुरू करने से पहले
- आपको अपनी चर्च वेबसाइट का प्रबंधन करने की अनुमति चाहिए। विवरण के लिए भूमिकाएँ और अनुमतियाँ देखें।
- अपने ब्रांड के रंग तैयार रखें, जिसमें हेक्स रंग कोड शामिल हों (जैसे, #03A9F4)।
- अपनी वेबसाइट पर ठोस और पारदर्शी नेविगेशन शैलियों के बीच अंतर को समझें।
नेविगेशन मोड को समझना
आपकी वेबसाइट नेविगेशन पृष्ठ के आधार पर दो अलग-अलग शैलियों में दिखाई दे सकती है:
- ठोस नेविगेशन -- नेविगेशन पट्टी पृष्ठभूमि रंग के साथ, आम तौर पर सामग्री पृष्ठों पर उपयोग किया जाता है
- पारदर्शी नेविगेशन -- नेविगेशन जो पृष्ठ सामग्री को ओवरले करता है, आम तौर पर नायक छवियों या पूर्ण-स्क्रीन पृष्ठभूमि वाले पृष्ठों पर उपयोग किया जाता है
आप दोनों मोड के लिए रंगों को स्वतंत्र रूप से अनुकूलित कर सकते हैं।
नेविगेशन शैलियों तक पहुँचना
- B1 Admin में वेबसाइट पर नेविगेट करें
- साइडबार में उपस्थिति पर क्लिक करें
- नेविगेशन शैलियाँ अनुभाग तक स्क्रॉल करें
- नेविगेशन शैलियों को संपादित करें पर क्लिक करें
ठोस नेविगेशन कॉन्फ़िगर करना
ठोस नेविगेशन नेविगेशन पट्टी के पीछे एक पृष्ठभूमि रंग के साथ प्रदर्शित होता है। आप अनुकूलित कर सकते हैं:
पृष्ठभूमि रंग
- पृष्ठभूमि रंग के लिए ओवरराइड स्विच को टॉगल करें
- रंग चयनकर्ता पर क्लिक करें
- अपने वांछित पृष्ठभूमि रंग चुनें
- डिफ़ॉल्ट सफेद (#FFFFFF) है
लिंक रंग
- लिंक रंग के लिए ओवरराइड स्विच को टॉगल करें
- नेविगेशन लिंक पाठ के लिए रंग चुनें
- यह डिफ़ॉल्ट स्थिति में लिंक को प्रभावित करता है
- डिफ़ॉल्ट गहरा ग्रे (#555555) है
लिंक होवर रंग
- लिंक होवर रंग के लिए ओवरराइड स्विच को टॉगल करें
- लिंक बदल जाने वाले रंग चुनें जब उपयोगकर्ता उन पर होवर करते हैं
- यह क्लिक योग्य लिंक के लिए दृश्य प्रतिक्रिया प्रदान करता है
- डिफ़ॉल्ट हल्का नीला (#03A9F4) है
सक्रिय रंग
- सक्रिय रंग के लिए ओवरराइड स्विच को टॉगल करें
- वर्तमान में सक्रिय पृष्ठ लिंक के लिए रंग चुनें
- यह उपयोगकर्ताओं को यह जानने में मदद करता है कि वे किस पृष्ठ पर हैं
- डिफ़ॉल्ट हल्का नीला (#03A9F4) है
पारदर्शी नेविगेशन कॉन्फ़िगर करना
पारदर्शी नेविगेशन कोई पृष्ठभूमि के बिना आपकी पृष्ठ सामग्री को ओवरले करता है। आप अनुकूलित कर सकते हैं:
लिंक रंग
- लिंक रंग के लिए ओवरराइड स्विच को टॉगल करें
- एक ऐसा रंग चुनें जो आपकी पृष्ठ पृष्ठभूमि के विपरीत हो
- अक्सर सफेद या हल्के रंग अंधेरी पृष्ठभूमि पर अच्छी तरह काम करते हैं
- डिफ़ॉल्ट गहरा ग्रे (#555555) है
लिंक होवर रंग
- लिंक होवर रंग के लिए ओवरराइड स्विच को टॉगल करें
- होवर स्थिति रंग चुनें
- सुनिश्चित करें कि यह आपकी पृष्ठ पृष्ठभूमि के विरुद्ध दृश्यमान है
- डिफ़ॉल्ट हल्का नीला (#03A9F4) है
सक्रिय रंग
- सक्रिय रंग के लिए ओवरराइड स्विच को टॉगल करें
- सक्रिय पृष्ठ संकेतक रंग चुनें
- यह आपकी डिज़ाइन में फिट करते समय खड़ा होना चाहिए
- डिफ़ॉल्ट हल्का नीला (#03A9F4) है
जानकारी
पारदर्शी नेविगेशन के पास पृष्ठभूमि रंग सेटिंग नहीं है क्योंकि यह सीधे पृष्ठ सामग्री को ओवरले करता है।
अपने परिवर्तनों को सहेजना
- अपने रंगों को कॉन्फ़िगर करने के बाद, नेविगेशन शैलियों को सहेजें पर क्लिक करें
- आपके परिवर्तन आपकी लाइव वेबसाइट पर तुरंत लागू होते हैं
- नेविगेशन को दोनों मोड में देखने के लिए अपनी वेबसाइट का दौरा करें
डिफ़ॉल्ट पर रीसेट करना
यदि आप डिफ़ॉल्ट रंगों पर वापस जाना चाहते हैं:
- किसी भी कस्टम रंगों के लिए ओवरराइड स्विच को बंद करें
- नेविगेशन शैलियों को सहेजें पर क्लिक करें
- नेविगेशन डिफ़ॉल्ट रंग योजना में लौट जाता है
या सहेजे बिना सभी परिवर्तनों को त्यागने के लिए रद्द करें पर क्लिक करें।
सर्वोत्तम प्रथाएँ
रंग विपरीतता
- पठनीयता -- सुनिश्चित करें कि लिंक रंग की पृष्ठभूमि के साथ पर्याप्त विपरीत है
- WCAG अनुपालन -- पहुँच्यता के लिए कम से कम 4.5:1 विपरीत अनुपात का लक्ष्य रखें
- दोनों मोड का परीक्षण करें -- ठोस और पारदर्शी नेविगेशन के साथ अपनी साइट का प्रीव्यू करें
ब्रांड संगति
- अपने ब्रांड रंग का उपयोग करें -- अपने लोगो और वेबसाइट विषय से मेल खाएँ
- अपनी पैलेट को सीमित करें -- एक सुसंगत रूप के लिए 2-3 रंगों पर टिकें
- अपनी छवियों पर विचार करें -- यदि पारदर्शी नेविगेशन का उपयोग कर रहे हैं तो यह विशिष्ट पृष्ठ पृष्ठभूमि के विरुद्ध परीक्षण करें
होवर और सक्रिय स्थितियाँ
- स्पष्ट प्रतिक्रिया -- होवर स्थितियों को डिफ़ॉल्ट लिंक से स्पष्ट रूप से अलग बनाएँ
- सक्रिय पृष्ठों को अलग करें -- एक अलग रंग का उपयोग करें इसलिए उपयोगकर्ता जानते हैं कि वे कहाँ हैं
- चिकनी संक्रमण -- सिस्टम स्वचालित रूप से रंग परिवर्तन को चेतन करता है
समस्या निवारण
रंग सही नहीं दिख रहे हैं
- अपना कैश साफ़ करें -- ब्राउज़र कैशिंग पुराने रंग दिखा सकती है
- हेक्स कोड की जाँच करें -- सुनिश्चित करें कि आपने वैध हेक्स रंग कोड दर्ज किए हैं
- विभिन्न पृष्ठभूमि पर परीक्षण करें -- रंग पृष्ठ पर निर्भर करते हुए अलग दिख सकते हैं
नेविगेशन दृश्यमान नहीं है
- पारदर्शी मोड -- यदि हल्की छवियों पर पारदर्शी नेविगेशन का उपयोग कर रहे हैं तो गहरा पाठ देखना मुश्किल हो सकता है
- समाधान -- अपने लिंक रंगों को समायोजित करें या गहरी पृष्ठ पृष्ठभूमि का उपयोग करें
- विकल्प -- नेविगेशन क्षेत्र में सूक्ष्म छाया या पृष्ठभूमि ओवरले जोड़ें
तकनीकी विवरण
नेविगेशन शैलियों को JSON के रूप में संग्रहीत किया जाता है और CSS वेरिएबल का उपयोग करके लागू किया जाता है:
- परिवर्तन साइट को पुनर्निर्माण किए बिना तुरंत लागू होते हैं
- रंग सभी नेविगेशन तत्वों में कैस्केड होते हैं
- ओवरराइड वैकल्पिक हैं; अनुपस्थित रंग थीम डिफ़ॉल्ट का उपयोग करते हैं
संबंधित लेख
- उपस्थिति -- अपनी वेबसाइट के समग्र रूप और अनुभूति को अनुकूलित करें
- पृष्ठों का प्रबंधन -- अपने वेबसाइट पृष्ठों को बनाएँ और व्यवस्थित करें
- पृष्ठ संपादक -- पृष्ठ लेआउट और सामग्री डिज़ाइन करें