नेविगेशन शैलियां

अपनी चर्च वेबसाइट के नेविगेशन बार रंगों को अपने ब्रांडिंग से मेल खाने के लिए अनुकूलित करें। आप ठोस पृष्ठभूमि और पारदर्शी ओवरले दोनों के लिए रंग कॉन्फ़िगर कर सकते हैं, आपको अपनी नेविगेशन अलग-अलग पृष्ठों पर कैसे दिखती है इसके ऊपर पूर्ण नियंत्रण देता है।

शुरू करने से पहले

• आपको अपनी चर्च वेबसाइट का प्रबंधन करने की अनुमति की आवश्यकता है। विवरण के लिए Roles & Permissions देखें।
• आपके ब्रांड रंगों को तैयार करें, हेक्स रंग कोड सहित (जैसे #03A9F4)।
• आपकी वेबसाइट पर ठोस और पारदर्शी नेविगेशन शैलियों के बीच अंतर को समझें।

नेविगेशन मोड को समझना

आपकी वेबसाइट नेविगेशन पृष्ठ के आधार पर दो अलग-अलग शैलियों में दिखाई दे सकती है:

• Solid navigation -- पृष्ठभूमि रंग के साथ नेविगेशन बार, आमतौर पर सामग्री पृष्ठों पर उपयोग किया जाता है
• Transparent navigation -- नेविगेशन जो पृष्ठ सामग्री को ओवरले करता है, आमतौर पर हीरो छवियों या पूर्ण-स्क्रीन पृष्ठभूमि वाले पृष्ठों पर उपयोग किया जाता है

आप दोनों मोड्स के लिए स्वतंत्र रूप से रंग अनुकूलित कर सकते हैं।

नेविगेशन शैलियों तक पहुंचना

1. B1 Admin में, Jump menu खोलें (ऊपर-बाएं में खोज बार) और Website को विस्तृत करें
2. Appearance पर क्लिक करें
3. Style Settings सूची में Navigation पर क्लिक करें

Navigation Styling संपादक में दो कार्ड हैं: Header (solid) और Header over hero (transparent)।

ठोस नेविगेशन कॉन्फ़िगर करना

ठोस नेविगेशन नेविगेशन बार के पीछे पृष्ठभूमि रंग के साथ दिखाई देता है। ये सेटिंग्स Header (solid) कार्ड में हैं। आप अनुकूलित कर सकते हैं:

पृष्ठभूमि रंग

1. Background color के लिए Override स्विच को टॉगल करें
2. रंग पिकर पर क्लिक करें
3. अपना वांछित पृष्ठभूमि रंग चुनें
4. डिफ़ॉल्ट सफेद है (#FFFFFF)

लिंक रंग

1. Link color के लिए Override स्विच को टॉगल करें
2. नेविगेशन लिंक पाठ के लिए रंग चुनें
3. यह उनकी डिफ़ॉल्ट स्थिति में लिंक को प्रभावित करता है
4. डिफ़ॉल्ट गहरा ग्रे है (#555555)

लिंक होवर रंग

1. Link hover color के लिए Override स्विच को टॉगल करें
2. चुनें कि उपयोगकर्ता इन पर होवर करते समय लिंक किस रंग में बदल जाते हैं
3. यह क्लिक करने योग्य लिंक के लिए दृश्य प्रतिक्रिया प्रदान करता है
4. डिफ़ॉल्ट हल्का नीला है (#03A9F4)

सक्रिय रंग

1. Active link color के लिए Override स्विच को टॉगल करें
2. वर्तमान में सक्रिय पृष्ठ लिंक के लिए रंग चुनें
3. यह आगंतुकों को यह जानने में मदद करता है कि वे कहाँ हैं
4. डिफ़ॉल्ट हल्का नीला है (#03A9F4)

पारदर्शी नेविगेशन कॉन्फ़िगर करना

पारदर्शी नेविगेशन कोई पृष्ठभूमि के साथ आपकी पृष्ठ सामग्री को ओवरले करता है। ये सेटिंग्स Header over hero (transparent) कार्ड में हैं। आप अनुकूलित कर सकते हैं:

लिंक रंग

1. Link color के लिए Override स्विच को टॉगल करें
2. ऐसा रंग चुनें जो आपकी पृष्ठ पृष्ठभूमि के साथ अच्छी तरह से विपरीत करता हो
3. अक्सर सफेद या हल्के रंग गहरी पृष्ठभूमि पर सर्वोत्तम काम करते हैं
4. डिफ़ॉल्ट गहरा ग्रे है (#555555)

लिंक होवर रंग

1. Link hover color के लिए Override स्विच को टॉगल करें
2. होवर स्थिति रंग चुनें
3. सुनिश्चित करें कि यह आपकी पृष्ठ पृष्ठभूमि के विरुद्ध दृश्यमान है
4. डिफ़ॉल्ट हल्का नीला है (#03A9F4)

सक्रिय रंग

1. Active link color के लिए Override स्विच को टॉगल करें
2. सक्रिय पृष्ठ संकेतक रंग चुनें
3. आपके डिजाइन के अनुसार फिट होते समय स्पष्ट होना चाहिए
4. डिफ़ॉल्ट हल्का नीला है (#03A9F4)

जानकारी

पारदर्शी नेविगेशन के पास कोई पृष्ठभूमि रंग सेटिंग नहीं है क्योंकि यह पृष्ठ सामग्री को सीधे ओवरले करता है।

आपके परिवर्तन सहेजना

1. आपके रंगों को कॉन्फ़िगर करने के बाद, Save Navigation पर क्लिक करें
2. आपके परिवर्तन तुरंत आपकी लाइव वेबसाइट पर लागू होते हैं
3. अपनी वेबसाइट पर जाएँ नेविगेशन को दोनों मोड्स में देखने के लिए

डिफ़ॉल्ट पर रीसेट करना

यदि आप डिफ़ॉल्ट रंगों पर वापस जाना चाहते हैं:

1. किसी भी कस्टम रंगों के लिए Override स्विच को बंद करें
2. Save Navigation पर क्लिक करें
3. नेविगेशन डिफ़ॉल्ट रंग योजना पर वापस आता है

या सहेजे बिना सभी परिवर्तनों को त्यागने के लिए Cancel पर क्लिक करें।

सर्वोत्तम प्रथाएं

रंग विपरीतता

• Readability -- सुनिश्चित करें कि लिंक रंग पृष्ठभूमि के साथ पर्याप्त विपरीत हैं
• WCAG compliance -- पहुंच-योग्यता के लिए कम से कम 4.5:1 विपरीत अनुपात का लक्ष्य रखें
• Test both modes -- ठोस और पारदर्शी नेविगेशन दोनों के साथ अपनी साइट का पूर्वावलोकन करें

ब्रांड सामंजस्य

• Use your brand colors -- अपने लोगो और वेबसाइट थीम से मेल खाएँ
• Limit your palette -- एक सामंजस्यपूर्ण रूप के लिए 2-3 रंगों को रखें
• Consider your images -- यदि पारदर्शी नेविगेशन का उपयोग कर रहे हैं, तो इसे विशिष्ट पृष्ठ पृष्ठभूमि के विरुद्ध परीक्षण करें

होवर और सक्रिय स्थितियां

• Clear feedback -- होवर स्थितियों को डिफ़ॉल्ट लिंक से स्पष्ट रूप से अलग बनाएँ
• Distinguish active pages -- एक विशिष्ट रंग का उपयोग करें ताकि उपयोगकर्ता जान सकें कि वे कहाँ हैं
• Smooth transitions -- सिस्टम स्वचालित रूप से रंग परिवर्तनों को एनिमेट करता है

समस्या निवारण

रंग सही नहीं दिखते

• Clear your cache -- ब्राउज़र कैशिंग पुराने रंगों को दिखा सकता है
• Check hex codes -- सुनिश्चित करें कि आपने वैध हेक्स रंग कोड दर्ज किए हैं
• Test on different backgrounds -- पृष्ठ के आधार पर रंग अलग दिख सकते हैं

नेविगेशन दृश्यमान नहीं है

• Transparent mode -- यदि हल्की छवियों पर पारदर्शी नेविगेशन का उपयोग कर रहे हैं, तो गहरा पाठ देखना मुश्किल हो सकता है
• Solution -- अपने लिंक रंगों को समायोजित करें या गहरी पृष्ठभूमि का उपयोग करें
• Alternative -- नेविगेशन क्षेत्र में एक सूक्ष्म छाया या पृष्ठभूमि ओवरले जोड़ें

तकनीकी विवरण

नेविगेशन शैलियां JSON के रूप में संग्रहीत होती हैं और CSS चर का उपयोग करके लागू होती हैं:

• साइट को फिर से बनाने के बिना परिवर्तन तुरंत प्रभावी होते हैं
• रंग सभी नेविगेशन तत्वों को कास्केड करते हैं
• ओवरराइड वैकल्पिक हैं; अनसेट रंग थीम डिफ़ॉल्ट का उपयोग करते हैं

संबंधित लेख

• Appearance -- अपनी वेबसाइट के समग्र रूप और अनुभव को अनुकूलित करें
• Pages प्रबंधित करें -- अपनी वेबसाइट पृष्ठों को बनाएं और व्यवस्थित करें
• Page Editor -- पृष्ठ लेआउट और सामग्री डिजाइन करें