बिना प्लगइन के वर्डप्रेस में कॉलम कैसे बनाएं

बिना प्लगइन के वर्डप्रेस में कॉलम कैसे बनाएं

वर्डप्रेस कॉलम ब्लॉक की बदौलत सामग्री को कॉलम में व्यवस्थित करना आसान काम है। यह ब्लॉक उन कोर ब्लॉकों से संबंधित है जिनका उपयोग प्रत्येक WP थीम में किया जा सकता है। कॉलम ब्लॉक में अधिकतम 6 कॉलम हो सकते हैं। इसलिए आपके पास एक साथ 6 अलग-अलग सामग्रियां हो सकती हैं।

आज हम आपको दिखाएंगे कि बिना प्लगइन के कॉलम ब्लॉक का उपयोग करके वर्डप्रेस में कॉलम कैसे बनाएं। हम आपके लिए इसका सारांश भी लेकर आए हैं WP 5.3 संस्करण से नवीनतम सुविधाएँ अद्यतन।

इस ट्यूटोरियल में आपको इसके बारे में जानकारी मिलेगी:

स्तम्भों का उद्देश्य क्या है?

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

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

सेवाओं के साथ मल्टी कॉलम लेआउट
सेवाओं के साथ बहु-स्तंभ लेआउट

सेवाओं की तरह ही आप उत्पादों या उत्पाद श्रेणियों को दिखाने के लिए वर्डप्रेस पर कॉलम का उपयोग कर सकते हैं। यदि आपके पास एक साधारण व्यावसायिक वेबसाइट है तो यह आदर्श है।

उत्पादों और श्रेणियों के साथ मल्टी कॉलम लेआउट
उत्पादों और श्रेणियों को दिखाने के लिए उपयोग किए जाने वाले कॉलम

ब्लॉग पोस्ट में आप सामग्री को अलग करने के लिए कॉलम का उपयोग कर सकते हैं। आप टेक्स्ट, बुलेट पॉइंट या छवियों को एक साथ रख सकते हैं।

कॉलम का उपयोग करके अलग की गई सामग्री
सामग्री को अलग करने के लिए कॉलम का उपयोग करना

पुराने संपादक में कॉलम कैसे काम करते थे

वर्डप्रेस 5+ से पहले यदि आप मल्टी-कॉलम सामग्री बनाना चाहते थे, तो आपको तालिकाओं का उपयोग करना पड़ता था। यह नवीनतम संपादक की तुलना में कहीं अधिक कठिन था। और क्या, आमतौर पर मोबाइल उपकरणों पर शैलियों और तालिकाओं को प्रदर्शित करने में समस्या थी। यह कैसे काम करता था?

वर्डप्रेस वेबसाइट में कॉलम कैसे बनाएं, इस पर आपके पास कई विकल्प हैं:

1. टेक्स्ट एडिटर में मैन्युअल रूप से HTML कोड डालें

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

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

2. वर्डप्रेस एडिटर में टेबल की अनुमति देना

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

3. एआईटी थीम में कॉलम तत्व का उपयोग करना

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

स्तंभ तत्व
ऑर्डर करने योग्य तत्व कॉलम - आप इसे किसी भी एआईटी थीम में उपयोग कर सकते हैं

4. तालिकाओं को प्रबंधित करने के लिए तृतीय पक्ष प्लगइन डाउनलोड करें

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

प्लगइन के बिना वर्डप्रेस में कॉलम कैसे बनाएं (ब्लॉक एडिटर में)

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

यह ब्लॉक उन सभी लोगों के लिए एक स्वागत योग्य बदलाव है जो मल्टी-कॉलम सामग्री के साथ काम करना चाहते हैं, उत्पाद प्रस्तुत करना चाहते हैं या ब्लॉग लिखना चाहते हैं और जिनके पास प्रोग्रामिंग का अनुभव नहीं है।

आइए देखें कि कॉलम ब्लॉक कैसे जोड़ें और प्लगइन के बिना वर्डप्रेस में कॉलम कैसे बनाएं:

  • पहला विकल्प शीर्ष बार में "+" पर क्लिक करना और उपलब्ध ब्लॉकों में से कॉलम ब्लॉक का चयन करना है।
  • दूसरा विकल्प संपादक के अंदर कहीं भी "+" पर क्लिक करना है।
“+” पर क्लिक करके वर्डप्रेस में कॉलम जोड़ें
“+” पर क्लिक करके वर्डप्रेस में कॉलम जोड़ना
स्लैश "/" के साथ कॉलम ब्लॉक जोड़ें
स्लैश "/" का उपयोग करके वर्डप्रेस में कॉलम जोड़ना

वर्डप्रेस कॉलम ब्लॉक के पूर्वनिर्धारित लेआउट (WP 5.3 से नया)

नवीनतम संस्करण कॉलम सेटिंग्स में भारी सुधार लेकर आया है। सबसे पहले, डिफ़ॉल्ट लेआउट शैलियाँ उपलब्ध हैं। इसका मतलब क्या है?

उपयोगकर्ता सामग्री क्षेत्र में एक नया ब्लॉक जोड़ने की प्रक्रिया में अपना लेआउट और संरेखण शैली चुन सकते हैं। पूर्वनिर्धारित लेआउट बहुत मददगार हो सकते हैं - खासकर उन उपयोगकर्ताओं के लिए जिनके पास उन्नत वर्डप्रेस कौशल नहीं है। यह सुविधा दर्शाती है कि हम वर्डप्रेस में कॉलम बनाने के तरीके की कल्पना कैसे करते हैं (प्लगइन या किसी अन्य ऐड-ऑन के बिना)।

कॉलम ब्लॉक में पूर्वनिर्धारित लेआउट
पूर्वनिर्धारित लेआउट विकल्प

 

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

कॉलम ब्लॉक बनाया गया
कॉलम 2 डिफ़ॉल्ट क्षेत्रों (कॉलम) के साथ ब्लॉक होते हैं जिन्हें आप संपादित कर सकते हैं

कॉलम बुनियादी सेटिंग्स को ब्लॉक करें

वर्डप्रेस कॉलम ब्लॉक में स्वयं बहुत सारे विकल्प नहीं हैं। ऐसा क्यों है ये हम बाद में बताएंगे. शीर्ष पट्टी में आप संरेखण को चौड़ी या पूरी चौड़ाई में बदल सकते हैं। यदि यह आपकी सक्रिय थीम द्वारा समर्थित है तो आप इस संरेखण को बदल सकते हैं।

कॉलम ब्लॉक का शीर्ष टूलबार
संरेखण विकल्पों के साथ शीर्ष टूलबार

सबसे महत्वपूर्ण कॉलम ब्लॉक सेटिंग दाईं ओर इंस्पेक्टर साइडबार में कॉलम की संख्या है। डिफ़ॉल्ट रूप से 2 कॉलम होते हैं, लेकिन आप इस संख्या को 6 तक बढ़ा सकते हैं। आप इसे माउस का उपयोग करके बदल सकते हैं या कोई संख्या दर्ज कर सकते हैं। कॉलम बढ़ाने या घटाने के बाद आप तुरंत देखेंगे कि यह कैसा दिखता है। स्लाइडर के आधार पर ब्लॉक स्वयं को गतिशील रूप से बदलता है।

स्तंभों की संख्या बदलना
अपनी आवश्यकतानुसार कॉलमों की संख्या बदलने के लिए स्लाइडर का उपयोग करें

यह बहुत व्यावहारिक है क्योंकि आप सेटिंग्स या कोडिंग में किसी भी कठिन बदलाव के बिना कुछ ही सेकंड में कॉलमों की संख्या बदल देते हैं।

वर्डप्रेस संपादक के अन्य ब्लॉकों की तरह, आप कस्टम सीएसएस क्लास को कॉलम ब्लॉक में भी सम्मिलित कर सकते हैं।

ब्लॉकों के साथ सुचारू कार्य के लिए ब्लॉक परिशिष्ट

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

वर्डप्रेस कॉलम ब्लॉक में एपेंडर को ब्लॉक करें
पृष्ठभूमि रंग के साथ परिशिष्ट को ब्लॉक करें

वर्डप्रेस कॉलम ब्लॉक के साथ कैसे काम करें

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

मल्टी कॉलम लेआउट में विभिन्न प्रकार की सामग्री
कॉलम ब्लॉक के साथ आप विभिन्न प्रकार की सामग्री को एक साथ प्रस्तुत कर सकते हैं

ग्रिड बनाने के लिए आप एक के नीचे एक कई कॉलम ब्लॉक का भी उपयोग कर सकते हैं। आप इसका उपयोग अपनी सेवाओं को प्रस्तुत करने या महत्वपूर्ण सुविधाओं के प्रचार के लिए कर सकते हैं।

कॉलम ब्लॉक 'ग्रिड प्रभाव
एक दूसरे के नीचे रखे गए कॉलम ब्लॉक का ग्रिड प्रभाव

नेस्टेड ब्लॉकों का संपादन

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

छवि ब्लॉक को नेस्टेड ब्लॉक के रूप में संपादित करना
कॉलम ब्लॉक में नेस्टेड इमेज ब्लॉक के लिए उपलब्ध सेटिंग्स

निष्कर्ष: कॉलम फायदे को रोकते हैं

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

मल्टी-कॉलम लेआउट में आपकी सामग्री ग्रिड में अच्छी तरह से संरेखित की जाएगी। यह तुरंत रिस्पॉन्सिव वर्जन में भी अच्छा लगेगा।

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

"How to make columns in WordPress without plugin" पर 2 विचार

    1. नमस्ते डेविड,

      लिखने के लिए धन्यवाद। आपको गुटेनबर्ग संपादक को सक्रिय करना चाहिए जो अलग-अलग कॉलम का चयन करने का विकल्प प्रदान करता है, सेटिंग्स साइडबार (दाईं ओर) में आप इसकी चौड़ाई समायोजित कर सकते हैं।

      साभार!
      ज़्लात्को
      एआईटी टीम

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