मुख्य सामग्री पर जाएं

उपस्थिति

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

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

  • अपनी वेबसाइट के लिए प्रारंभिक सेटअप पूरा करें
  • आपके चर्च का लोगो PNG प्रारूप में स्वच्छ पृष्ठभूमि और 4:1 पहलू अनुपात के साथ तैयार रखें
  • यदि आपके पास मौजूदा शैली गाइड है तो अपने चर्च के ब्रांड रंग (हेक्स मान) जानें

उपस्थिति सेटिंग्स तक पहुँचना

  1. B1 Admin में, बाईं ओर मेनू में वेबसाइट पर क्लिक करें।
  2. वेबसाइट पृष्ठों दृश्य के शीर्ष पर उपस्थिति टैब पर क्लिक करें।
  3. साइट शैलियाँ पृष्ठ अपने वेबसाइट का लाइव प्रीव्यू बाईं ओर और दाईं ओर शैली सेटिंग्स विकल्प के साथ लोड होता है।

रंग पैलेट

  1. शैली सेटिंग्स पैनल में रंग पैलेट पर क्लिक करें।
  2. आप बेस रंग (हल्के, उच्चारण और गहरे रंगों) और सिमेंटिक रंग (प्राथमिक, द्वितीयक, सफलता, चेतावनी और त्रुटि) देखेंगे।
  3. रंग चयनकर्ता खोलने के लिए किसी भी रंग नमूने पर क्लिक करें। अपने रंग को चुनने के लिए चयनकर्ता को खींचें या हेक्स मान दर्ज करें।
  4. रंग संयोजन प्रीव्यू दिखाता है कि आपके चुने हुए रंग कैसे एक साथ काम करते हैं।
  5. एक पूर्व-डिज़ाइन किए गए रंग योजना को शीघ्रता से लागू करने के लिए सुझाए गए पैलेट का उपयोग करें।
  6. जब आप संतुष्ट हों तो सहेजें पर क्लिक करें।

टाइपोग्राफी

  1. शैली सेटिंग्स पैनल में टाइपोग्राफी सेटिंग्स पर क्लिक करें।
  2. फ़ॉन्ट ब्राउज़र खोलने के लिए फ़ॉन्ट का चयन करें पर क्लिक करें। आप नाम के अनुसार खोज कर सकते हैं या Serif, Sans Serif, Display, Handwriting और Monospace जैसी श्रेणियों को ब्राउज़ कर सकते हैं।
  3. शीर्षकों और मुख्य पाठ दोनों के लिए फ़ॉन्ट सेट करें।
  4. शीर्षक 1 से शीर्षक 4 के लिए आकार पदानुक्रम को समायोजित करने के लिए टाइपोग्राफी स्केल पर क्लिक करें। स्केल को ठीक करने के लिए स्केल गुणक और आधार आकार फ़ील्ड का उपयोग करें।
  5. अपनी फ़ॉन्ट पसंद लागू करने के लिए सहेजें पर क्लिक करें।

दूरी

  1. शैली सेटिंग्स पैनल में स्पेसिंग स्केल पर क्लिक करें।
  2. अतिरिक्त छोटी से अतिरिक्त बड़ी तक दूरी मान समायोजित करें। व्यावहारिक उदाहरण दिखाते हैं कि प्रत्येक मान लेआउट को कैसे प्रभावित करता है।
  3. मान को अपनी पूरी साइट में लागू करने के लिए स्पेसिंग सहेजें पर क्लिक करें।

लोगो और ब्रांडिंग

  1. शैली सेटिंग्स पैनल में लोगो पर क्लिक करें।
  2. अपने हल्के पृष्ठभूमि लोगो और गहरे पृष्ठभूमि लोगो अपलोड करें। सर्वोत्तम परिणामों के लिए स्वच्छ पृष्ठभूमि और 4:1 पहलू अनुपात वाली छवियों का उपयोग करें।
  3. लिंक प्रीव्यू के लिए एक सोशल मीडिया छवि और ब्राउज़र टैब आइकन के लिए एक फेविकॉन अपलोड करें।
सुझाव

सर्वोत्तम परिणामों के लिए, PNG प्रारूप में स्वच्छ पृष्ठभूमि वाला एक लोगो उपयोग करें। यह सुनिश्चित करता है कि यह आपकी वेबसाइट और मोबाइल ऐप भर में हल्के और गहरे दोनों पृष्ठभूमि पर अच्छा दिखता है।

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

अपनी वेबसाइट की नेविगेशन पट्टी रंगों को ठोस और पारदर्शी मोड दोनों के लिए अनुकूलित करें:

  1. नेविगेशन शैलियाँ अनुभाग तक स्क्रॉल करें
  2. नेविगेशन शैलियों को संपादित करें पर क्लिक करें
  3. ठोस नेविगेशन (पृष्ठभूमि के साथ) और पारदर्शी नेविगेशन (ओवरले मोड) के लिए रंग कॉन्फ़िगर करें
  4. अपनी नेविगेशन रंगों को लागू करने के लिए सहेजें पर क्लिक करें

विस्तृत निर्देशों के लिए, नेविगेशन शैलियाँ देखें।

कस्टम CSS और JavaScript

  1. शैली सेटिंग्स पैनल में CSS और Javascript पर क्लिक करें।
  2. उन्नत अनुकूलन के लिए डिफ़ॉल्ट शैलियों को ओवरराइड करने के लिए कस्टम CSS जोड़ें।
  3. ट्रैकिंग कोड या अन्य स्क्रिप्ट के लिए कस्टम HTML जोड़ें।
  4. Google Analytics एकीकरण जैसे स्निपेट के लिए सामान्य Javascript उदाहरण अनुभाग का उपयोग करें।
चेतावनी

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

शैली थीम

यदि आप एक त्वरित शुरुआती बिंदु चाहते हैं, तो रंग पैलेट अनुभाग में सुझाए गए पैलेट पूर्व-निर्मित थीम प्रदान करते हैं जो एक क्लिक में समन्वित रंग सेट करते हैं। आप थीम लागू करने के बाद हमेशा व्यक्तिगत सेटिंग्स को ठीक कर सकते हैं।

अगले कदम