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