हेल्प सेंटर की एडवांस्ड ब्रांडिंग

लोगो, हीरो इमेज, हेडर लिंक, ब्रांड रंग और सपोर्ट ईमेल अपने पोर्टल की ब्रांडिंग कस्टमाइज़ करना में समझाए गए हैं। यह लेख बाकी सब बताता है। हर बदलाव अपने आप सेव होता है।

फ़ेविकॉन

फ़ेविकॉन ब्राउज़र टैब का छोटा आइकन है। ब्रांडिंग में फ़ेविकॉन के पास अपलोड करें पर क्लिक करें और 32 से 1024 पिक्सेल चौड़ी, 256 KB तक की चौकोर PNG या WebP चुनें। यह आपके हेल्प सेंटर के हर सार्वजनिक पेज पर दिखता है, और फ़ेविकॉन हटाएँ से इसे फिर हटाया जा सकता है। इसके बिना टैब आपके ब्रांड रंग पर आपके पोर्टल के नाम का पहला अक्षर दिखाता है। आपका हेल्प सेंटर कभी Deskwoot आइकन नहीं दिखाता। ऐसा सरल आइकन चुनें जो 16 पिक्सेल पर भी पढ़ा जा सके।

पेज, हेडिंग और पढ़ने का फ़ॉन्ट

रूप में फ़ॉन्ट से आप पूरे हेल्प सेंटर का फ़ॉन्ट चुनते हैं: सिस्टम डिफ़ॉल्ट (विज़िटर के अपने डिवाइस का फ़ॉन्ट), Instrument Sans, Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Source Sans या Plus Jakarta Sans। Deskwoot इसे आपके लिए लोड करता है, इसलिए होस्ट या अपलोड करने को कुछ नहीं है।

• हेडिंग का फ़ॉन्ट पेज के शीर्षक और सेक्शन की हेडिंग पर लागू होता है। डिफ़ॉल्ट पेज के फ़ॉन्ट जैसा है, और कोई भी पेज फ़ॉन्ट चुना जा सकता है।
• ब्रांडिंग में पढ़ने का फ़ॉन्ट सिर्फ़ आपके लेखों के टेक्स्ट पर लागू होता है। Literata लंबे पढ़ने के लिए बना एक शांत सेरिफ़ फ़ॉन्ट है, और हर पेज फ़ॉन्ट भी मिलता है।

लेख के टेक्स्ट के लिए सेरिफ़ और हेडर व मेनू के लिए साफ़ सैंस फ़ॉन्ट एक अच्छी तरह बनी किताब जैसा पढ़ा जाता है।

लाइट, डार्क या ऑटो

रंग थीम में 3 विकल्प हैं:

• लाइट (डिफ़ॉल्ट): हल्की सतहें, गहरा टेक्स्ट।
• डार्क: गहरी सतहें, हल्का टेक्स्ट, उन ब्रांड के लिए जो खुद डार्क हैं।
• ऑटो (विज़िटर के डिवाइस के अनुसार): जो लोग डिवाइस डार्क मोड में चलाते हैं उनके लिए डार्क और बाकी सबके लिए लाइट।

थीम हर सार्वजनिक पेज पर लागू होती है: होम, संग्रह, लेख, सर्च, और ऐसे पते का पेज जो मौजूद नहीं है।

अपने रंग

CSS लिखे बिना आप थीम के रंग में रंगों को बारीकी से सेट कर सकते हैं: पेज, कार्ड, बॉर्डर, टेक्स्ट, हल्का (दूसरे दर्जे का टेक्स्ट) और शीर्षक, हर एक हेक्स वैल्यू के रूप में। एक पैलेट लाइट मोड के लिए है और एक डार्क मोड के लिए। लाइट थीम लाइट पैलेट दिखाती है, डार्क थीम डार्क पैलेट और ऑटो दोनों, इसलिए वहां आप दोनों के रंग सेट करते हैं। जो रंग आप नहीं बदलते, वह बिल्ट इन रंग रखता है, और रीसेट करें पूरा पैलेट वापस ले आता है। लिंक, बटन और खास हिस्से अब भी आपके ब्रांड रंग से चलते हैं।

हीरो इमेज

रूप की तीन सेटिंग्स तय करती हैं कि आपकी हीरो इमेज पर टेक्स्ट कैसे दिखे। ये होम पेज और हर दूसरे पेज की तस्वीर वाली पट्टी पर लागू होती हैं।

• इमेज पर टेक्स्ट: हल्का या गहरा। गहरा टेक्स्ट चमकीली तस्वीरों पर अच्छा लगता है; तस्वीर पर बटन और चिप्स उसके हिसाब से बदल जाते हैं।
• इमेज पर छाया: कोई नहीं, हल्की (डिफ़ॉल्ट) या गहरी। गहरी छाया भरी हुई तस्वीरों पर टेक्स्ट को पढ़ने लायक रखती है।
• इमेज का हिस्सा: अपने आप, ऊपर, बीच या नीचे, यानी तस्वीर का वह हिस्सा जो दिखता रहता है जब कोई पट्टी उसका सिर्फ़ एक टुकड़ा दिखाती है।

कोने, हेडर और संग्रह के आइकन

• कोने: सीधे, हल्के गोल (डिफ़ॉल्ट) या गोल, कार्ड, बटन और छोटे लेबल के लिए।
• हेडर: हल्का (डिफ़ॉल्ट) या ब्रांड का रंग, यानी हर पेज के ऊपर की पट्टी।
• संग्रह के आइकन: लाइब्रेरी में हर संग्रह के आइकन के पीछे क्या दिखे। इमेज आपकी हीरो इमेज का एक हिस्सा दिखाता है, ब्रांड का रंग आपके रंग की एक हल्की छटा और सिर्फ़ आइकन अकेला आइकन। हीरो इमेज के बिना इमेज विकल्प ब्रांड का रंग दिखाता है।

लेख के पेज

लेख के पेज में आप पूरे हेल्प सेंटर के लिए टेक्स्ट के आसपास का हर हिस्सा चालू या बंद करते हैं:

• लेख पेजों पर संग्रहों का साइडबार, देखें हेल्प सेंटर में लेखों का नेविगेशन।
• इस पेज पर: लंबी गाइड की हेडिंग, टेक्स्ट के बगल में लिंक के रूप में, या फ़ोन पर उसके ऊपर।
• क्या यह गाइड मददगार थी?: हर गाइड के आखिर में यह सवाल, देखें हेल्प लेखों पर फ़ीडबैक।
• पिछली, अगली और आगे पढ़ें: पिछली और अगली गाइड के लिंक और संग्रह की और गाइड।

सेक्शन की अपनी हेडिंग

डिज़ाइन टैब में सेक्शन की हेडिंग से आप होम पेज के सेक्शन को खुद नाम दे सकते हैं: लाइब्रेरी की हेडिंग, सबसे ज़्यादा पढ़े गए की हेडिंग, अब भी मदद चाहिए? की हेडिंग और उसके नीचे का टेक्स्ट। भाषा के टैब (EN, DE, PT, HI) से हर हेडिंग को उसका अपना अनुवाद मिलता है। खाली फ़ील्ड बिल्ट इन हेडिंग रखता है, जो विज़िटर की भाषा के साथ चलती है, और बिना अनुवाद वाली हेडिंग आपका अंग्रेज़ी टेक्स्ट दिखाती है।

दूसरी भाषाओं में फ़ुटर

कस्टम फ़ुटर में कस्टम फ़ुटर इस्तेमाल करें से आप लिंक के 4 कॉलम तक और कॉपीराइट या कानूनी जानकारी की एक पंक्ति बनाते हैं। फ़ुटर की भाषाएँ के टैब से हर कॉलम के शीर्षक और हर लिंक के टेक्स्ट को जर्मन, पुर्तगाली या हिंदी रूप मिलता है। उसके बिना वह अंग्रेज़ी में दिखता है।

कस्टम CSS

जहां सेटिंग्स नहीं पहुंचतीं, उसके लिए डिज़ाइन टैब में Custom CSS (उन्नत) जोड़ें। यह सिर्फ़ आपके सार्वजनिक हेल्प सेंटर पर लागू होता है, कभी डैशबोर्ड पर नहीं, और !important के बिना Deskwoot की अपनी स्टाइल पर भारी पड़ता है।

• सेव करते समय @import नियम, javascript: पते और ऐसे ही जोखिम भरे हिस्से हटा दिए जाते हैं।
• 20,000 अक्षरों तक, ब्रांड के बदलावों के लिए काफ़ी।
• एलिमेंट में स्थिर data-hc एट्रिब्यूट होते हैं (जैसे [data-hc="article"] या [data-hc="category-grid"]), जो क्लास के नामों से बेहतर सेलेक्टर हैं।

अपना हेडर और फ़ुटर HTML (Enterprise)

Enterprise पर, जब आपका हेल्प सेंटर आपके अपने सक्रिय डोमेन पर चलता है, आप अपनी वेबसाइट का हेडर कस्टम हेडर HTML के रूप में चिपका सकते हैं। तब वह हेल्प सेंटर के हेडर की जगह ले लेता है, और अंदर के पेज पर सर्च और भाषा बदलने का विकल्प उसके नीचे की तस्वीर वाली पट्टी में चले जाते हैं। आपका अपना फ़ुटर HTML इसी तरह हर पेज के नीचे का फ़ुटर बदल देता है।

दोनों सेव करते समय साफ़ किए जाते हैं: स्क्रिप्ट, इवेंट हैंडलर, <style> ब्लॉक, iframe, फ़ॉर्म और javascript: पते हटा दिए जाते हैं। क्लास और इनलाइन स्टाइल रहते हैं, ताकि आप कस्टम CSS से लुक पूरा कर सकें।

डिज़ाइन का इतिहास

हर बार जब आप ब्रांड रंग, पेज का शीर्षक, उपशीर्षक, हेडर लिंक, कस्टम CSS, होम पेज के सेक्शन और उनकी हेडिंग, हीरो इमेज का टेक्स्ट, छाया या हिस्सा, कोने, हेडर, संग्रह के आइकन या लेख के पेजों के हिस्से बदलते हैं, Deskwoot पहले वाली स्थिति रखता है। डिज़ाइन टैब का इतिहास पैनल दिखाता है कि किसने क्या बदला, और एक क्लिक से पहले वाला लुक वापस आ जाता है। लोगो, हीरो इमेज, फ़ेविकॉन, फ़ॉन्ट, थीम, थीम के रंग और आपका अपना हेडर या फ़ुटर HTML इस इतिहास का हिस्सा नहीं हैं।

अक्सर पूछे जाने वाले प्रश्न

किन विकल्पों के लिए Enterprise प्लान चाहिए?

व्हाइट लेबल और अपना हेडर और फ़ुटर HTML, जिनके लिए सक्रिय कस्टम डोमेन भी चाहिए। इस गाइड का बाकी सब Startup से हेल्प सेंटर के साथ आता है।

क्या मैं हेडिंग के लिए एक फ़ॉन्ट और लेखों के लिए दूसरा इस्तेमाल कर सकता हूं?

हां। फ़ॉन्ट पूरे हेल्प सेंटर का फ़ॉन्ट तय करता है, हेडिंग का फ़ॉन्ट शीर्षक और सेक्शन की हेडिंग का, और पढ़ने का फ़ॉन्ट सिर्फ़ लेख के टेक्स्ट का, जैसे Literata के साथ Instrument Sans।

क्या मैं लाइट थीम के रंग बदल सकता हूं?

हां। थीम के रंग में डार्क मोड के पैलेट के साथ लाइट मोड का पैलेट भी है। ऑटो में आप दोनों सेट करते हैं।

मेरी हीरो इमेज चमकीली है और शीर्षक पढ़ना मुश्किल है। क्या मदद करेगा?

इमेज पर टेक्स्ट को गहरा करें, या हल्का टेक्स्ट रखें और इमेज पर छाया में गहरी चुनें। इमेज का हिस्सा तस्वीर के शांत हिस्से को टेक्स्ट के पीछे ले आता है।

क्या मैं "क्या यह गाइड मददगार थी?" या "इस पेज पर" छिपा सकता हूं?

हां। उन्हें सेटिंग्स > लेख के पेज में बंद करें। यह बदलाव हेल्प सेंटर के हर लेख पर लागू होता है।

क्या मेरा हेल्प सेंटर कभी Deskwoot का फ़ेविकॉन दिखाएगा?

नहीं। आपके अपने फ़ेविकॉन के बिना ब्राउज़र टैब आपके ब्रांड रंग पर आपके पोर्टल के नाम का पहला अक्षर दिखाता है।

मुझे सेटिंग्स इस्तेमाल करनी चाहिए या कस्टम CSS?

पहले सेटिंग्स: उन्हें कोड नहीं चाहिए और हेल्प सेंटर बदलने पर भी वे काम करती रहती हैं। कस्टम CSS सिर्फ़ उसके लिए इस्तेमाल करें जो सेटिंग्स में नहीं है।

क्या मैं अपनी वेबसाइट का नेविगेशन हेल्प सेंटर में चिपका सकता हूं?

हां, सक्रिय कस्टम डोमेन के साथ Enterprise पर, कस्टम हेडर HTML के रूप में। उसके बिना सेटिंग्स टैब के हेडर लिंक सामान्य हेडर में आपकी वेबसाइट के लिंक जोड़ते हैं।

क्या मैं डिज़ाइन का कोई बदलाव वापस ले सकता हूं?

ब्रांड रंग, पेज के शीर्षक, उपशीर्षक, हेडर लिंक, कस्टम CSS, होम पेज के सेक्शन और उनकी हेडिंग, हीरो इमेज के टेक्स्ट, छाया और हिस्से, कोनों, हेडर, संग्रह के आइकन और लेख के पेजों के हिस्सों के बदलाव डिज़ाइन टैब के इतिहास पैनल से वापस लाए जा सकते हैं। फ़ॉन्ट, थीम, थीम के रंग, फ़ेविकॉन, तस्वीरें और आपका अपना हेडर या फ़ुटर HTML नहीं।