वर्डप्रेस में इमेज बैकग्राउंड कैसे सेट करें

वर्डप्रेस में इमेज बैकग्राउंड कैसे सेट करें
अन्य तत्वों के साथ होमपेज के लिए वर्डप्रेस पृष्ठभूमि छवि।

वर्डप्रेस में बैकग्राउंड इमेज जोड़ने के और भी तरीके हैं। थीम कोड बदलने के साथ बुनियादी से लेकर सबसे उन्नत तक। हालाँकि, हमें कोडिंग और डिज़ाइन ज्ञान के बिना वेबसाइट प्रशासकों के लिए आदर्श उपयोगकर्ता-अनुकूल टूल पेश करने में खुशी हो रही है। Citadela Pro प्लगइन वेबसाइट अनुकूलन के लिए कई सुविधाओं और सेटिंग्स के साथ आता है।

Citadela Pro प्लगइन में शक्तिशाली ब्लॉक, सेटिंग्स और सुविधाओं को निःशुल्क आज़माएँ। हम सभी प्रीमियम सुविधाओं के साथ 7-दिवसीय परीक्षण की पेशकश करते हैं। आप सही टूल का पता लगा सकते हैं जो आपको वर्डप्रेस पेज, पोस्ट और कस्टम पोस्ट प्रकारों में पृष्ठभूमि छवियां जोड़ने की अनुमति देता है।

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

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

गुटेनबर्ग ब्लॉक का उपयोग करके वर्डप्रेस में बैकग्राउंड इमेज कैसे जोड़ें

अब शुरू हो जाओ

जोखिम-मुक्त परीक्षण के साथ अभी शुरुआत करें। किसी क्रेडिट कार्ड की आवश्यकता नहीं।

क्लस्टर ब्लॉक के माध्यम से वर्डप्रेस पृष्ठभूमि छवि

हम आपको उस आसान ब्लॉक से परिचित कराते हैं जो हमने पृष्ठभूमि छवि के लिए वर्डप्रेस गुटेनबर्ग ब्लॉक के लिए बनाया था - क्लस्टर ब्लॉक। यह हमारे अपने ब्लॉक समूह का हिस्सा है। Citadela Pro प्लगइन में आपको सुंदर वेबसाइट बनाने में मदद करने के लिए कई सुविधाएं हैं। सभी AitThemes कस्टम ब्लॉक उपलब्ध हैं Citadela Pro प्लगइन.

कृपया पढ़ें क्लस्टर ब्लॉक दस्तावेज़ीकरण विस्तृत सेटिंग्स के लिए.

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

क्लस्टर पूरी चौड़ाई तक नहीं फैलेगा यदि:

  • आपके पास एक सक्रिय साइडबार है
  • यदि आप ऐसे कॉलम का उपयोग करते हैं जो क्लस्टर के लिए स्थान सीमित कर देगा

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

इस लेख में हम आपको दिखाएंगे:

क्लस्टर ब्लॉक कैसे जोड़ें

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

क्लस्टर ब्लॉक को पोस्ट और पेज दोनों में जोड़ा जा सकता है। बस शीर्ष बार में या संपादक डेस्कटॉप पर कहीं भी "+" साइन पर क्लिक करें। उसके बाद बस क्लस्टर ब्लॉक खोजें।

"+" पर क्लिक करके वर्डप्रेस एडिटर में क्लस्टर ब्लॉक जोड़ें
"+" पर क्लिक करके क्लस्टर ब्लॉक जोड़ना

क्लस्टर ब्लॉक जोड़ने का दूसरा विकल्प "/" टाइप करना है और उसके बाद ब्लॉक का नाम लिखना है। क्लस्टर ब्लॉक तब उपयोग के लिए तैयार है।

स्लैश "/" के साथ क्लस्टर ब्लॉक जोड़ें
स्लैश "/" का उपयोग करके क्लस्टर ब्लॉक जोड़ना

क्लस्टर का उपयोग करके ब्लॉकों को समूहीकृत करना

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

नेस्टेड ब्लॉक चुनने की प्रक्रिया
नेस्टेड ब्लॉकों को चुनने और डालने की प्रक्रिया

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

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

छवि ब्लॉक क्लस्टर ब्लॉक में नेस्टेड
क्लस्टर ब्लॉक की सहायता से पोर्टफोलियो वेबसाइट बनाई गई

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

सर्विस ब्लॉक क्लस्टर ब्लॉक में नेस्टेड है
अपने उत्पाद (और इसकी विशेषताओं) को अधिक आकर्षक तरीके से प्रस्तुत करने के लिए क्लस्टर ब्लॉक में सर्विस ब्लॉक का उपयोग करें

एक ही में एकाधिक ब्लॉक

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

क्लस्टर ब्लॉक के साथ संयोजन में एकाधिक कॉलम का विशिष्ट उदाहरण एक पेज की वेबसाइट है।

कॉलम ब्लॉक क्लस्टर ब्लॉक में नेस्टेड हैं
एक पेज की वेबसाइट में क्लस्टर ब्लॉक का उपयोग कैसे किया जा सकता है?

टूलबार में बुनियादी सेटिंग्स: सामग्री संरेखण विकल्प

डिफ़ॉल्ट रूप से, क्लस्टर ब्लॉक की चौड़ाई सामग्री के आकार पर सेट होती है। आप इस व्यवहार को टूलबार में बदल सकते हैं. निम्नलिखित विकल्प उपलब्ध हैं:

  • सामग्री का आकार - डिफ़ॉल्ट विकल्प, क्लस्टर ब्लॉक की चौड़ाई सामग्री के समान है।
  • विस्तृत आकार - क्लस्टर के अंदर की सामग्री सामग्री की चौड़ाई से अधिक व्यापक है।
  • पूर्ण चौड़ाई का आकार - इस मामले में क्लस्टर की चौड़ाई ब्राउज़र विंडो के अगल-बगल से होती है।

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

Citadela वर्डप्रेस थीम और प्लगइन्स डाउनलोड करें

जोखिम-मुक्त परीक्षण के साथ अभी शुरुआत करें। किसी क्रेडिट कार्ड की आवश्यकता नहीं।

शीर्षक और विभाजक रंग सेटिंग्स

शीर्षक का रंग बदलना

WP 5.3 के बाद से आप हेडिंग ब्लॉक के माध्यम से अपने हेडर का रंग बदल सकते हैं। यह एक बहुत ही उपयोगी सुविधा है - खासकर यदि आपके पास एक गहरा लेआउट और रंग योजना है, तो डिफ़ॉल्ट टेक्स्ट रंग (जो काला है) को हल्के रंग में बदलना बेहतर है।

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

आपकी वेबसाइट पर सेपरेटर के लिए नए रंग का उपयोग किया गया है

जब आप अपने WP में पृष्ठभूमि छवि या किसी अन्य प्रकार की सामग्री जोड़ते हैं, तो आपको कभी-कभी इसे बाकी वेबसाइट से अलग करने की आवश्यकता हो सकती है। इस उद्देश्य के लिए आप सेपरेटर नामक विशेष ब्लॉक का उपयोग कर सकते हैं। सेपरेटर डालकर आप यह कर सकते हैं:

  • विशिष्ट ब्लॉक अलग करें
  • संपूर्ण पाठ को छोटे-छोटे खंडों में विभाजित करें
  • महत्वपूर्ण भागों को हाइलाइट करें
  • सामग्री की बेहतर पठनीयता सुनिश्चित करें
  • अपनी वेबसाइट पर नेविगेशन को सरल बनाएं

इसके अलावा अब आप अपडेटेड वर्डप्रेस के साथ सेपरेटर लाइन का रंग बदल सकते हैं। रंगीन विभाजक आपकी वेबसाइट की रंग योजना को पूरा करने के लिए बिल्कुल उपयुक्त है।

समूहीकृत ब्लॉकों के अंतर्गत पृष्ठभूमि छवि कैसे जोड़ें

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

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

अब शुरू हो जाओ

जोखिम-मुक्त परीक्षण के साथ अभी शुरुआत करें। किसी क्रेडिट कार्ड की आवश्यकता नहीं।

पृष्ठभूमि ओवरले

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

वर्डप्रेस पृष्ठभूमि छवि ओवरले
आकर्षक डिज़ाइन बनाने के लिए बैकग्राउंड ओवरले सेट करें और उसकी अपारदर्शिता बदलें

नया ग्रुप ब्लॉक कोर में उपलब्ध है

ग्रुप ब्लॉक और AitThemes क्लस्टर ब्लॉक के बीच क्या अंतर है?

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

पृष्ठभूमि छवि संपादन हमारे क्लस्टर ब्लॉक में आसान काम है।

आप अपनी वर्डप्रेस पृष्ठभूमि छवि पर अपलोड कर सकते हैं, इसके लिए पृष्ठभूमि रंग और पृष्ठभूमि रंग ओवरले भी सेट कर सकते हैं (और ओवरले अपारदर्शिता को भी अनुकूलित कर सकते हैं!)। इसमें बस कुछ ही मिनट लगते हैं.

"How to set image background in WordPress" पर 4 विचार

  1. क्या यह संभव है कि क्लस्टर ब्लॉक का उपयोग करके आपकी वेबसाइट पर आने वाले किसी आगंतुक को छवियों के चयन में से एक पृष्ठभूमि छवि और एक ओवरले छवि चुनने की अनुमति दी जाए?

    1. नमस्ते जॉन,

      Citadela उत्पादों में रुचि लेने के लिए धन्यवाद। हाँ, पृष्ठभूमि सेट करने के लिए आप विभिन्न विकल्पों में से चुन सकते हैं। विस्तृत जानकारी यहां पाई जा सकती है: https://www.ait-themes.club/citadela-doc/cluster-block/

      सधन्यवाद!
      ज़्लात्को
      एआईटी टीम

टिप्पणियाँ बंद हैं।