दिखावट
दिखावट पेज आपको अपनी चर्च वेबसाइट के समग्र लुक और फील को कस्टमाइज़ करने देता है। रंगों और फ़ॉन्ट से लेकर स्पेसिंग और कस्टम CSS तक, आप अपनी साइट के हर दृश्य पहलू को एक ही जगह से नियंत्रित कर सकते हैं।
शुरू करने से पहले
- अपनी वेबसाइट के लिए प्रारंभिक सेटअप पूरा करें
- अपने चर्च लोगो को PNG प्रारूप में पारदर्शी पृष्ठभूमि और 4:1 पहलू अनुपात के साथ तैयार रखें
- यदि आपके पास मौजूदा स्टाइल गाइड है तो अपने चर्च के ब्रांड रंग (हेक्स वैल्यू) जानें
दिखावट सेटिंग्स तक पहुंचना
- B1 Admin में, बाएं मेनू में वेबसाइट पर क्लिक करें।
- वेबसाइट पेजों के दृश्य के शीर्ष पर दिखावट टैब पर क्लिक करें।
- साइट स्टाइल पेज बाईं ओर आपकी वेबसाइट का लाइव पूर्वावलोकन और दाईं ओर स्टाइल सेटिंग्स विकल्पों के साथ लोड होता है।
रंग पैलेट
- स्टाइल सेटिंग्स पैनल में रंग पैलेट पर क्लिक करें।
- आपको बेस रंग (हल्के, एक्सेंट, और गहरे शेड्स) और सेमेंटिक रंग (प्राथमिक, द्वितीयक, सफलता, चेतावनी, और त्रुटि) दिखाई देंगे।
- रंग पिकर खोलने के लिए किसी भी रंग स्वैच पर क्लिक करें। सिलेक्टर को ड्रैग करें या अपना रंग चुनने के लिए एक हेक्स वैल्यू दर्ज करें।
- रंग संयोजन पूर्वावलोकन दिखाता है कि आपके चयनित रंग एक साथ कैसे काम करते हैं।
- पूर्व-डिज़ाइन की गई रंग योजना को जल्दी से लागू करने के लिए सुझाए गए पैलेट का उपयोग करें।
- जब आप संतुष्ट हों तो सहेजें पर क्लिक करें।
टाइपोग्राफी
- स्टाइल सेटिंग्स पैनल में टाइपोग्राफी सेटिंग्स पर क्लिक करें।
- फ़ॉन्ट ब्राउज़र खोलने के लिए एक फ़ॉन्ट चुनें पर क्लिक करें। आप नाम से खोज सकते हैं या सेरिफ़, सैन्स सेरिफ़, डिस्प्ले, हैंडराइटिंग, और मोनोस्पेस जैसी श्रेणियों को ब्राउज़ कर सकते हैं।
- शीर्षक और बॉडी टेक्स्ट दोनों के लिए फ़ॉन्ट सेट करें।
- शीर्षक 1 से शीर्षक 4 के लिए आकार पदानुक्रम को समायोजित करने के लिए टाइपोग्राफी स्केल पर क्लिक करें। फाइन-ट्यून करने के लिए स्केल गुणक और बेस साइज़ फ़ील्ड का उपयोग करें।
- अपनी फ़ॉन्ट पसंद को लागू करने के लिए सहेजें पर क्लिक करें।
स्पेसिंग
- स्टाइल सेटिंग्स पैनल में स्पेसिंग स्केल पर क्लिक करें।
- एक्स्ट्रा स्मॉल से एक्स्ट्रा लार्ज तक स्पेसिंग मानों को समायोजित करें। व्यावहारिक उदाहरण दिखाते हैं कि प्रत्येक मान लेआउट को कैसे प्रभावित करता है।
- अपनी पूरी साइट पर मानों को लागू करने के लिए स्पेसिंग सहेजें पर क्लिक करें।
लोगो और ब्रांडिंग
- स्टाइल सेटिंग्स पैनल में लोगो पर क्लिक करें।
- अपना लाइट बैकग्राउंड लोगो और डार्क बैकग्राउंड लोगो अपलोड करें। सर्वोत्तम परिणामों के लिए पारदर्शी पृष्ठभूमि और 4:1 पहलू अनुपात वाली छवियों का उपयोग करें।
- लिंक पूर्वावलोकन के लिए सोशल मीडिया इमेज और ब्राउज़र टैब आइकन के लिए फेविकॉन अपलोड करें।
सर्वोत्तम परिणामों के लिए, PNG प्रारूप में पारदर्शी पृष्ठभूमि वाले लोगो का उपयोग करें। यह सुनिश्चित करता है कि यह आपकी वेबसाइट और मोबाइल ऐप दोनों पर हल्की और गहरी पृष्ठभूमि पर बहुत अच्छा लगे।
नेविगेशन स्टाइल
सॉलिड और पारदर्शी दोनों मोड के लिए अपनी वेबसाइट के नेविगेशन बार के रंगों को कस्टमाइज़ करें:
- नेविगेशन स्टाइल अनुभाग तक स्क्रॉल करें
- नेविगेशन स्टाइल संपादित करें पर क्लिक करें
- सॉलिड नेविगेशन (पृष्ठभूमि के साथ) और पारदर्शी नेविगेशन (ओवरले मोड) के लिए रंग कॉन्फ़िगर करें
- अपने नेविगेशन रंगों को लागू करने के लिए सहेजें पर क्लिक करें
विस्तृत निर्देशों के लिए, नेविगेशन स्टाइल देखें।
कस्टम CSS और JavaScript
- स्टाइल सेटिंग्स पैनल में CSS और Javascript पर क्लिक करें।
- उन्नत कस्टमाइज़ेशन के लिए डिफ़ॉल्ट स्टाइल को ओवरराइड करने के लिए कस्टम CSS जोड़ें।
- ट्रैकिंग कोड या अन्य स्क्रिप्ट के लिए कस्टम HTML जोड़ें।
- Google Analytics एकीकरण जैसे स्निपेट के लिए सामान्य Javascript उदाहरण अनुभाग का उपयोग करें।
कस्टम CSS शक्तिशाली है लेकिन यदि गलत तरीके से उपयोग किया जाता है तो यह आपकी साइट के लेआउट को तोड़ सकता है। अधिकांश चर्च अंतर्निहित रंग, फ़ॉन्ट, और स्पेसिंग नियंत्रणों का उपयोग करके वह लुक प्राप्त कर सकते हैं जो वे चाहते हैं। केवल कस्टम CSS का उपयोग करें यदि आप वेब विकास के साथ सहज हैं।
स्टाइल थीम
यदि आप एक त्वरित शुरुआती बिंदु चाहते हैं, तो रंग पैलेट अनुभाग में सुझाए गए पैलेट पूर्व-निर्मित थीम प्रदान करते हैं जो एक क्लिक में समन्वित रंग सेट करते हैं। थीम लागू करने के बाद आप हमेशा व्यक्तिगत सेटिंग्स को फाइन-ट्यून कर सकते हैं।
अगले कदम
- पेज प्रबंधित करना -- अपनी वेबसाइट पेज बनाएं और व्यवस्थित करें
- फाइलें -- अपनी साइट के लिए मीडिया एसेट अपलोड करें