उपस्थिति
Appearance पृष्ठ आपको अपनी चर्च वेबसाइट के समग्र रूप और अनुभव को कस्टमाइज़ करने देता है। रंगों और फ़ॉन्ट से लेकर स्पेसिंग और कस्टम CSS तक, आप एक ही जगह से अपनी साइट के हर दृश्य पहलू को नियंत्रित कर सकते हैं।
शुरू करने से पहले
- अपनी वेबसाइट के लिए प्रारंभिक सेटअप पूरा करें
- अपना चर्च लोगो PNG प्रारूप में पारदर्शी पृष्ठभूमि और 4:1 आस्पेक्ट रेशियो के साथ तैयार रखें
- यदि आपके पास मौजूदा स्टाइल गाइड है तो अपने चर्च के ब्रांड रंग (हेक्स वैल्यू) जानें
Appearance सेटिंग्स तक पहुंचना
- B1 Admin में, बाईं मेनू में Website पर क्लिक करें।
- Website Pages दृश्य के शीर्ष पर Appearance टैब पर क्लिक करें।
- Site Styles पृष्ठ बाईं ओर आपकी वेबसाइट के लाइव प्रीव्यू और दाईं ओर Style Settings विकल्पों के साथ लोड होता है।
रंग पैलेट
- Style Settings पैनल में Color Palette पर क्लिक करें।
- आपको Base Colors (हल्के, एक्सेंट और गहरे शेड) और Semantic Colors (Primary, Secondary, Success, Warning, और Error) दिखाई देंगे।
- रंग चयनकर्ता खोलने के लिए किसी भी रंग स्वैच पर क्लिक करें। अपना रंग चुनने के लिए सिलेक्टर को खींचें या हेक्स वैल्यू दर्ज करें।
- Color Combinations Preview दिखाता है कि आपके चुने हुए रंग एक साथ कैसे काम करते हैं।
- एक पहले से डिज़ाइन की गई रंग योजना जल्दी से लागू करने के लिए Suggested Palettes का उपयोग करें।
- जब आप संतुष्ट हों तो Save पर क्लिक करें।
टाइपोग्राफी
- Style Settings पैनल में Typography Settings पर क्लिक करें।
- फ़ॉन्ट ब्राउज़र खोलने के लिए Select a Font पर क्लिक करें। आप नाम से खोज सकते हैं या Serif, Sans Serif, Display, Handwriting, और Monospace जैसी श्रेणियों को ब्राउज़ कर सकते हैं।
- शीर्षकों और मुख्य पाठ दोनों के लिए फ़ॉन्ट सेट करें।
- Heading 1 से Heading 4 तक के आकार पदानुक्रम को समायोजित करने के लिए Typography Scale पर क्लिक करें। बारीकी से समायोजन के लिए स्केल मल्टीप्लायर और बेस साइज़ फ़ील्ड का उपयोग करें।
- अपनी फ़ॉन्ट पसंद लागू करने के लिए Save पर क्लिक करें।
स्पेसिंग
- Style Settings पैनल में Spacing Scale पर क्लिक करें।
- Extra Small से Extra Large तक के स्पेसिंग मान समायोजित करें। व्यावहारिक उदाहरण दिखाते हैं कि प्रत्येक मान लेआउट को कैसे प्रभावित करता है।
- आपकी पूरी साइट पर मान लागू करने के लिए Save Spacing पर क्लिक करें।
लोगो और ब्रांडिंग
- Style Settings पैनल में Logo पर क्लिक करें।
- अपना Light Background Logo और Dark Background Logo अपलोड करें। सर्वोत्तम परिणामों के लिए पारदर्शी पृष्ठभूमि और 4:1 आस्पेक्ट रेशियो वाली इमेज का उपयोग करें।
- लिंक प्रीव्यू के लिए एक Social Media Image और ब्राउज़र टैब आइकन के लिए एक Favicon अपलोड करें।
सर्वोत्तम परिणामों के लिए, PNG प्रारूप में पारदर्शी पृष्ठभूमि वाला लोगो उपयोग करें। इससे यह सुनिश्चित होता है कि यह आपकी वेबसाइट और मोबाइल ऐप पर हल्की और गहरी दोनों पृष्ठभूमियों पर बेहतरीन दिखता है।
नेविगेशन शैलियां
सॉलिड और ट्रांसपेरेंट दोनों मोड के लिए अपनी वेबसाइट की नेविगेशन बार के रंग कस्टमाइज़ करें:
- Navigation Styles सेक्शन तक स्क्रॉल करें
- Edit Navigation Styles पर क्लिक करें
- सॉलिड नेविगेशन (बैकग्राउंड के साथ) और ट्रांसपेरेंट नेविगेशन (ओवरले मोड) के लिए रंग कॉन्फ़िगर करें
- अपने नेविगेशन रंग लागू करने के लिए Save पर क्लिक करें
विस्तृत निर्देशों के लिए, नेविगेशन शैलियां देखें।
साइट विजेट्स
साइट विजेट्स आपकी साइट के हर पृष्ठ पर दिखाई देते हैं, पृष्ठ सामग्री के ऊपर तैरते हुए:
- Announcement Banner -- समय-संवेदनशील संदेशों के लिए, जैसे आने वाला इवेंट या सेवा में बदलाव, आपकी साइट के शीर्ष पर एक हटाने योग्य बार।
- Launcher -- एक फ्लोटिंग बटन जो एक त्वरित-एक्सेस मेनू खोलता है, उदाहरण के लिए दान, चेक इन, या बुलेटिन देखने के लिंक।
- Style Settings पैनल में Site Widgets पर क्लिक करें।
- जो विजेट्स आप चाहते हैं उन्हें चालू करें और उनका टेक्स्ट, लिंक और रंग कॉन्फ़िगर करें।
- Save पर क्लिक करें।
एनालिटिक्स
अपनी वेबसाइट पर विज़िटर ट्रैफ़िक को ट्रैक करने के लिए Style Settings पैनल में अपना Google Analytics 4 Measurement ID जोड़ें।
कस्टम CSS और JavaScript
- Style Settings पैनल में CSS and Javascript पर क्लिक करें।
- उन्नत कस्टमाइज़ेशन के लिए डिफ़ॉल्ट स्टाइल को ओवरराइड करने हेतु Custom CSS जोड़ें।
- ट्रैकिंग कोड या अन्य स्क्रिप्ट के लिए Custom HTML जोड़ें।
- Google Analytics इंटीग्रेशन जैसे स्निपेट के लिए Common Javascript Examples सेक्शन का उपयोग करें।
Custom CSS शक्तिशाली है लेकिन गलत तरीके से उपयोग करने पर आपकी साइट के लेआउट को बिगाड़ सकता है। अधिकांश चर्च बिल्ट-इन रंग, फ़ॉन्ट और स्पेसिंग नियंत्रणों का उपयोग करके अपनी इच्छित रूपरेखा प्राप्त कर सकते हैं। कस्टम CSS का उपयोग केवल तभी करें जब आप वेब डेवलपमेंट के साथ सहज हों।
स्टाइल थीम
यदि आप एक त्वरित शुरुआती बिंदु चाहते हैं, तो Color Palette सेक्शन में Suggested Palettes पहले से बने थीम प्रदान करते हैं जो एक क्लिक में समन्वित रंग सेट करते हैं। थीम लागू करने के बाद आप हमेशा व्यक्तिगत सेटिंग्स को बारीकी से समायोजित कर सकते हैं।
अगले कदम
- पृष्ठों का प्रबंधन -- अपनी वेबसाइट के पृष्ठ बनाएं और व्यवस्थित करें
- फ़ाइलें -- अपनी साइट के लिए मीडिया एसेट अपलोड करें