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

पेज एडिटर का उपयोग

B1 पेज एडिटर एक दृश्य, ड्रैग-एंड-ड्रॉप बिल्डर है जो आपको बिना कोई कोड लिखे चर्च वेबसाइट के पेज डिज़ाइन करने देता है। आप सेक्शन और कंटेंट ब्लॉक जोड़ सकते हैं, स्टाइल अनुकूलित कर सकते हैं, अपने काम का preview देख सकते हैं, और बदलाव पूर्ववत कर सकते हैं -- यह सब आपके ब्राउज़र के भीतर।

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

  • अपनी वेबसाइट कॉन्फ़िगर करने के लिए Initial Setup पूरा करें
  • Managing Pages में कम से कम एक पेज बनाएँ
  • एडिटर तक पहुँचने के लिए आपको content.edit अनुमति चाहिए

एडिटर खोलना​

  1. B1 Admin में, Jump menu खोलें (ऊपर-बाएँ कोने में search bar), Website को विस्तारित करें, और Pages पर क्लिक करें।
  2. Pages तालिका में वह पेज खोजें जिसे संपादित करना है, और Edit Content पर क्लिक करें।

एडिटर फ़ुल-स्क्रीन मोड में खुलता है। बाएँ पैनल में आपके पेज की संरचना और उपलब्ध कंटेंट एलिमेंट्स दिखते हैं; बीच के क्षेत्र में आपके पेज का लाइव preview रहता है।

जानकारी

एडिटर आपकी B1 Admin थीम सेटिंग चाहे जो भी हो, हमेशा लाइट मोड में दिखता है, और उन heading और body फ़ॉन्ट्स का उपयोग करता है जो आपने Appearance में चुने हैं। इससे सुनिश्चित होता है कि preview ठीक वैसा दिखे जैसा वेबसाइट के विज़िटर को आपका पेज दिखेगा।

पेज संरचना: सेक्शन और एलिमेंट्स​

हर पेज दो स्तरों से बनता है:

  • सेक्शन -- शीर्ष-स्तरीय कंटेनर जो आपके पेज को क्षैतिज पट्टियों में बाँटते हैं (जैसे हीरो सेक्शन, कंटेंट ब्लॉक, या फ़ुटर स्ट्रिप)। कंटेंट जोड़ने से पहले हर पेज में कम से कम एक सेक्शन होना चाहिए।
  • एलिमेंट्स -- किसी सेक्शन के भीतर रखे गए व्यक्तिगत कंटेंट टुकड़े, जैसे text, images, buttons, cards, forms, और calendars।

सेक्शन जोड़ना​

  1. Add Section पर क्लिक करें (या बाएँ पैनल के शीर्ष पर + बटन)।
  2. शुरू करने का तरीका चुनें:
    • Template से — श्रेणी के अनुसार व्यवस्थित section template gallery (Hero, About, Services, Giving, आदि) देखें और किसी एक पर क्लिक करके उसे पूरी तरह स्टाइल किया हुआ, पहले से भरा हुआ सेक्शन डालें। जोड़ने के बाद आप सब कुछ अनुकूलित कर सकते हैं।
    • खाली सेक्शन — कॉलम लेआउट (एक कॉलम, दो कॉलम, तीन कॉलम, आदि) चुनें और शुरू से बनाएँ।
  3. नया सेक्शन preview में दिखता है। उसे चुनने के लिए उस पर क्लिक करें और उसका बैकग्राउंड रंग, padding, और अन्य स्टाइल विकल्प कॉन्फ़िगर करें।

सेक्शन का लेआउट बदलना​

अगर आपने कोई सेक्शन पहले से बना लिया है पर उसकी संरचना अलग चाहते हैं, तो उस सेक्शन पर layout switcher का उपयोग करें ताकि गैलरी से उसका कॉलम क्रम बदल सकें, जबकि आपका मौजूदा कंटेंट और एलिमेंट्स अपनी जगह पर रहें।

किसी सेक्शन में एलिमेंट्स जोड़ना​

  1. प्रिव्यू में किसी सेक्शन के भीतर क्लिक करके उसे चुनें।
  2. Add Content पर क्लिक करें और सूची से एलिमेंट प्रकार चुनें:
    • Text -- शीर्षक, अनुच्छेद और rich text
    • Image -- फ़ोटो अपलोड करें या उसका लिंक दें
    • Button -- क्लिक करने योग्य call-to-action लिंक
    • Card -- शीर्षक और विवरण के साथ एक छवि
    • Form -- पेज पर सीधे एक form एम्बेड करें। अगर फ़ॉर्म में header photo है, तो वह प्रश्नों के ऊपर दिखती है
    • Calendar -- इवेंट कैलेंडर दिखाएँ
    • FAQ -- अकॉर्डियन-शैली के प्रश्न और उत्तर ब्लॉक
    • Video -- URL से वीडियो एम्बेड करें
    • Groups Browser -- सभी चर्च ग्रुप्स की फ़िल्टर योग्य डायरेक्टरी, वैकल्पिक खोज, श्रेणी फ़िल्टर और लेबल फ़िल्टर के साथ
    • Icon Feature -- एक आइकन, शीर्षक और छोटे विवरण के साथ, फ़ीचर या सेवकाई की प्रमुख बातों के लिए
    • Gallery -- कई फ़ोटो का ग्रिड या masonry लेआउट
    • Testimonial -- लेखक के नाम, भूमिका और फ़ोटो के साथ एक या अधिक उद्धरण
    • Social Icons -- आपके चर्च की सोशल मीडिया प्रोफ़ाइलों के लिंक वाले आइकन: Facebook, Instagram, WhatsApp, YouTube, X, TikTok, Vimeo, और Podcast। जिस हर एक को दिखाना चाहते हैं उसके लिए लिंक भरें; WhatsApp के लिए, अपने नंबर वाला https://wa.me/ लिंक या ग्रुप invite लिंक उपयोग करें
    • Countdown -- किसी तारीख या साप्ताहिक सेवा समय की ओर गिनती करता टाइमर
    • Stats -- लेबल (सदस्य, वर्ष, कैंपस) के साथ बड़े अंकों की पंक्ति
    • Campaign Progress -- किसी giving campaign के लिए लाइव प्रगति पट्टी, जो फ़ंड लक्ष्य की ओर जुटाई गई कुल राशि दिखाती है
    • Staff Grid -- किसी ग्रुप के सदस्यों के लिए फ़ोटो कार्ड; ग्रुप का public roster विकल्प चालू होना चाहिए
    • Service Times -- आपके कैंपस का सेवा शेड्यूल, जो attendance setup से अपने-आप लिया जाता है
    • Sermons -- आपकी sermon library, पूर्ण browser के रूप में या grid, list, या featured-latest लेआउट में
    • Map -- आपके चर्च के पते पर केंद्रित एम्बेडेड मानचित्र
    • Table -- तालिकाबद्ध कंटेंट के लिए पंक्तियों और कॉलमों का सरल ग्रिड
    • Text with Photo -- text और एक छवि साथ-साथ
    • Logo -- आपका चर्च लोगो, Appearance से लिया गया
    • Live Stream -- आपका live stream player, सीधे पेज पर एम्बेड किया गया
    • Podcast -- आपके दिए गए बाहरी podcast RSS feed URL से लिए गए एपिसोड की सूची, जिसमें यह तय करने की सेटिंग्स हैं कि कितने एपिसोड दिखें और तारीखें व विवरण दिखाने हैं या नहीं। लाइव साइट पर हर एपिसोड में एक audio player और एक Download लिंक होता है जो एपिसोड की audio फ़ाइल को एपिसोड के शीर्षक के नाम से सहेजता है। यह किसी भी podcast feed को अपनी साइट पर दिखाने के लिए है; अपने ही sermons को podcast के रूप में प्रकाशित करने के लिए इसकी जगह देखें Managing Sermons।
    • Donation -- giving बटन या एम्बेडेड donation फ़ॉर्म
    • HTML -- आपका अपना कच्चा HTML, उन्नत उपयोग के लिए, जैसे किसी third-party widget को एम्बेड करना (देखें Using the HTML element)
    • iFrame -- URL द्वारा बाहरी कंटेंट एम्बेड करें
  3. प्रकट होने वाले settings पैनल का उपयोग करके एलिमेंट कॉन्फ़िगर करें।

HTML एलिमेंट का उपयोग​

HTML एलिमेंट में दो बॉक्स होते हैं:

  • HTML Content -- वह markup जो पेज पर दिखाया जाएगा। यहाँ आप जो भी <script> टैग शामिल करते हैं, वे आपकी लाइव साइट पर चलते हैं।
  • JavaScript (exclude script tag) -- पेज लोड होने पर चलने वाला script कोड। आप किसी vendor का embed snippet यहाँ उसके <script> टैग सहित भी पेस्ट कर सकते हैं, और वह लाइव साइट पर चलेगा।

अगर आप JavaScript बॉक्स में केवल कोई वेब पता (जैसे किसी छवि का लिंक) पेस्ट करते हैं, तो बॉक्स लाल हो जाता है और चेतावनी दिखती है "This is a web address, not JavaScript." उस बॉक्स में अकेला पता कुछ नहीं करता। कोई चित्र दिखाने के लिए Image एलिमेंट उपयोग करें या HTML Content में <img src="..."> डालें।

Calendar एलिमेंट का उपयोग​

Calendar एलिमेंट आपके किसी एक कैलेंडर के इवेंट दिखाता है:

  1. Select के अंतर्गत Group Calendar (एक ग्रुप के इवेंट -- सूची में वे ग्रुप दिखते हैं जिनके आप सदस्य हैं) या Curated Calendar (Calendars के अंतर्गत बनाया गया कैलेंडर; देखें Curated Calendar) चुनें।
  2. Select Calendar के अंतर्गत ग्रुप या कैलेंडर चुनें।
  3. Display के अंतर्गत चुनें कि कैसे दिखाना है:
    • Month calendar -- एक महीने का ग्रिड जिसमें विज़िटर पन्ने पलट सकते हैं।
    • Upcoming events -- आगामी 12 इवेंट्स के टाइल्स का ग्रिड, जिसमें दोहराने वाला इवेंट अपनी अगली तारीख पर एक बार दिखता है। हर टाइल में इवेंट की फ़ोटो (या फ़ोटो न होने पर आपकी थीम के गहरे रंग पर उसका शीर्षक), तारीख का बैज, दिन और समय, और विवरण की पहली पंक्ति दिखती है। टाइल्स के ऊपर एक Subscribe बटन है जिससे विज़िटर कैलेंडर का ICS लिंक कॉपी कर सकते हैं या उसे डाउनलोड कर सकते हैं।
  4. केवल कुछ इवेंट दिखाने के लिए Only events tagged में टैग लिखें -- उदाहरण के लिए, youth। केवल वही इवेंट दिखते हैं जिनके Tags में वह शब्द है। सभी इवेंट दिखाने के लिए इसे खाली छोड़ें। टैग हर इवेंट पर सेट होते हैं; देखें Adding and Editing Events।

दोनों डिस्प्ले में, किसी इवेंट पर क्लिक करने से वह आपकी वेबसाइट पर अपने ही पेज पर खुलता है। इवेंट पेज में इवेंट की फ़ोटो, शीर्षक, तारीख और समय, और विवरण दिखता है, साथ ही एक बॉक्स जिसमें When (दोहराने वाले इवेंट के लिए दोहराव पैटर्न सहित) और Where (उसके लिए बुक किए गए कमरे) होते हैं। जब पंजीकरण चालू हो, तब इसमें Register for this Event बटन भी होता है, और एक Add to my calendar लिंक जो इवेंट को कैलेंडर फ़ाइल के रूप में डाउनलोड करता है। पेज ऐसा बना है कि सर्च इंजन अपने परिणामों में इवेंट की तारीख और विवरण दिखा सकें। आपके पेजों पर दिखाए गए curated calendars के इवेंट पेज (अगले छह महीनों के इवेंट्स के लिए) आपकी साइट के sitemap में भी सूचीबद्ध होते हैं, ताकि सर्च इंजन उन्हें खोज सकें।

कंटेंट का क्रम बदलना​

सेक्शन या एलिमेंट्स को पुनर्व्यवस्थित करने के लिए हर आइटम के बाईं ओर के हैंडल आइकन (छह बिंदु) को खींचें। आप किसी सेक्शन के भीतर एलिमेंट्स खींच सकते हैं या उन्हें सेक्शनों के बीच ले जा सकते हैं।

पेज की स्टाइलिंग​

सेक्शन स्टाइल​

किसी भी सेक्शन पर क्लिक करके उसका स्टाइल पैनल खोलें। आप ये सेट कर सकते हैं:

  • Background -- ठोस रंग, ग्रेडिएंट, या छवि। छवि बैकग्राउंड उपयोग करते समय, Focal Point पिकर आपको क्लिक करके यह तय करने देता है कि सेक्शन के स्केल होने पर छवि का कौन-सा हिस्सा केंद्र में रहे, और Overlay रंग विकल्प आपको छवि पर अर्ध-पारदर्शी रंग की परत जोड़ने देता है ताकि पाठ पढ़ने में आसान हो।
  • Padding -- सेक्शन के भीतर ऊपर और नीचे का spacing
  • Width -- पूरी चौड़ाई या केंद्रित/सीमित
  • Dividers -- सेक्शन के ऊपरी या निचले किनारे पर सजावटी आकार विभाजक (wave, slant, curve, triangle, और अन्य), जिनमें रंग, ऊँचाई और flip विकल्प हैं

एलिमेंट स्टाइल​

किसी भी एलिमेंट पर क्लिक करके उसका स्टाइल पैनल खोलें। सामान्य विकल्पों में फ़ॉन्ट आकार, रंग, संरेखण, margin, और padding शामिल हैं। छवियों के लिए आप alt text और link targets सेट कर सकते हैं।

Custom CSS​

उन्नत स्टाइलिंग के लिए, हर सेक्शन और एलिमेंट में एक Custom CSS फ़ील्ड है जहाँ आप अपने CSS नियम लिख सकते हैं। ये उस एलिमेंट तक सीमित रहते हैं, इसलिए पेज के बाकी हिस्से पर अनजाने में असर नहीं डालते।

सुझाव

अगर आपको पूरी साइट पर स्टाइल लागू करनी है -- जैसे कोई कस्टम फ़ॉन्ट या वैश्विक रंग -- तो व्यक्तिगत पेजों पर custom CSS की जगह Appearance सेटिंग्स का उपयोग करें।

अपने पेज का Preview​

पेज को विभिन्न स्क्रीन आकारों पर देखने के लिए टूलबार के preview नियंत्रणों का उपयोग करें:

  • Desktop -- पूरी चौड़ाई वाला ब्राउज़र दृश्य
  • Mobile -- संकरा फ़ोन-आकार का दृश्य

लाइव पेज ठीक वैसा देखने के लिए जैसा विज़िटर देखेंगे, Pages सूची पर वापस जाएँ और पेज के path पर क्लिक करें। वह एक नए ब्राउज़र टैब में खुलता है।

एक्सेसिबिलिटी जाँचना​

आम समस्याओं की त्वरित जाँच के लिए टूलबार में Accessibility आइकन पर क्लिक करें -- जैसे alt text के बिना छवियाँ, कम रंग कंट्रास्ट, या क्रम से बाहर शीर्षक। हर समस्या सीधे उस एलिमेंट से लिंक होती है जिसे ध्यान चाहिए, ताकि आप उसे वहीं ठीक कर सकें।

बदलाव पूर्ववत करना​

एडिटर आपका संपादन इतिहास अपने-आप रखता है। नेविगेट करने के लिए टूलबार बटन या कीबोर्ड शॉर्टकट का उपयोग करें:

  • Undo (Ctrl+Z / Cmd+Z) -- आपकी अंतिम कार्रवाई वापस लें
  • Redo (Ctrl+Shift+Z या Ctrl+Y / Cmd+Shift+Z) -- पूर्ववत की गई कार्रवाई फिर से लागू करें

आप पेज को किसी पिछले snapshot पर भी वापस ला सकते हैं। सहेजे गए snapshots की विवरण सहित सूची देखने के लिए टूलबार में View history पर क्लिक करें, और किसी भी प्रविष्टि पर क्लिक करके उस बिंदु पर लौटें।

चेतावनी

Snapshot बहाल करने से आपकी मौजूदा पेज सामग्री snapshot वाले संस्करण से बदल जाती है। यह standard undo बटन से वापस नहीं हो सकता। अगर आप पुराने snapshot को बहाल करने से पहले उसे वापस पाने का विकल्प रखना चाहते हैं, तो अपनी मौजूदा स्थिति का snapshot पहले सहेजें।

सहेजना और प्रकाशित करना​

आपके काम के दौरान बदलाव अपने-आप सहेजे जाते हैं। टूलबार में एक स्थिति संकेतक दिखाता है कि आपके बदलाव सहेजे गए हैं या नहीं।

ड्राफ़्ट और प्रकाशित स्थिति​

पेज की published स्थिति हो सकती है, जो तय करती है कि विज़िटर आपके बदलाव कब देखें। टूलबार वर्तमान स्थिति दिखाने वाला एक status chip प्रदर्शित करता है:

  • Live on save -- पेज किसी प्रकाशन प्रक्रिया का उपयोग नहीं करता। हर सहेजा गया बदलाव तुरंत लाइव हो जाता है। नए पेजों के लिए यही डिफ़ॉल्ट है।
  • Unpublished changes -- पेज पहले प्रकाशित हो चुका है, लेकिन पिछले प्रकाशन के बाद आपने बदलाव किए हैं। विज़िटर अब भी पिछले प्रकाशित संस्करण को देखते हैं।
  • Published -- पेज लाइव है और आपका सहेजा गया कंटेंट वही है जो विज़िटर देखते हैं।

अपने बदलाव प्रकाशित करने के लिए टूलबार में Publish बटन पर क्लिक करें। पेज तुरंत लाइव हो जाता है।

विज़िटर को जो दिखता है उस पर असर डाले बिना अंतिम प्रकाशित संस्करण पर लौटने के लिए, overflow मेनू (⋮) खोलें और Discard unpublished changes पर क्लिक करें।

प्रकाशन प्रक्रिया का उपयोग बंद करने के लिए, overflow मेनू खोलें और Turn off publishing पर क्लिक करें। फिर संपादन तुरंत फिर से लाइव होने लगते हैं।

सुझाव

ड्राफ़्ट/प्रकाशन प्रक्रिया का उपयोग तब करें जब आप किसी पेज को तैयार करना चाहते हैं -- उदाहरण के लिए, किसी आगामी इवेंट के लिए -- और उसे सही समय पर ही लाइव करना चाहते हैं। पेज बनाएँ और उसका preview देखें, फिर तैयार होने पर Publish पर क्लिक करें।

संबंधित लेख​

  • Managing Pages -- पेज बनाएँ, URL सेट करें, और साइट नेविगेशन प्रबंधित करें
  • Appearance -- साइट-व्यापी रंग, फ़ॉन्ट और ब्रांडिंग सेट करें
  • Files -- एडिटर में उपयोग के लिए छवियाँ और दस्तावेज़ अपलोड करें
  • Creating Forms -- ऐसे फ़ॉर्म बनाएँ जिन्हें पेजों पर एम्बेड किया जा सके