Studio Two एडिटर: सेल्स और ग्रिड्स के साथ काम करना | हेल्प सेंटर

यह आर्टिकल नवंबर 2026 में रिलीज़ किए गए नए Studio Two एडिटर के बारे में है। अगर आप तय नहीं कर पा रहे हैं कि आप Studio एडिटर इस्तेमाल कर रहे हैं या Studio Two एडिटर, तो यहाँ ज़्यादा जानकारी देखें।

अपने कंटेंट को ग्रिड पर व्यवस्थित करें। Studio Two एडिटर के हर सेक्शन में एक सेक्शन ग्रिड होता है, जो स्क्रीन साइज़ बदलने पर भी आपके लेआउट को व्यवस्थित रखता है।

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

सेक्शन ग्रिड के साथ काम करना

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

सेक्शन ग्रिड को कस्टमाइज़ करने के लिए:

अपने एडिटर पर जाएँ।
संबंधित सेक्शन चुनें।
एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।

Studio Two एडिटर में इंस्पेक्टर पैनल खोलने वाले ऐरो पर क्लिक करना

(अगर पहले से खुला नहीं है) डिज़ाइन टैब पर क्लिक करें और नीचे स्क्रॉल करके लेआउट पर जाएँ।
चुनें कि आप ग्रिड को कैसे कस्टमाइज़ करना चाहते हैं:

लेआउट बदलना

सेल जोड़ना या डिलीट करना

सेल स्प्लिट करें

सेल मर्ज या स्वैप करें

ग्रिड को बराबर करें या फ्लिप करें

वर्टिकल स्पेसिंग मैन्युअल तरीके से सेट करें

ध्यान रखें:

आप कैनवस पर सीधे ग्रिड सेल का साइज बदल सकते हैं। सेक्शन या उसके किसी सेल को चुनें और ग्रिडलाइन को अपनी मनचाही जगह तक ड्रैग करें।

CSS ग्रिड को मैन्युअली एडिट करना

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

आप पूरे सेक्शन या किसी एक सेल का CSS ग्रिड एडिट कर सकते हैं:

सेक्शन: यह सेक्शन ग्रिड को बदल देता है। इसके सेल नए ग्रिड पर कंटेनर बन जाते हैं।
सेल: यह सिर्फ उस सेल के लेआउट को CSS ग्रिड में बदलता है। सेक्शन का बाकी ग्रिड वैसा ही रहता है।

ज़रूरी जानकारी:

मैन्युअल CSS ग्रिड को वापस सेक्शन ग्रिड में बदलना संभव नहीं है। अगर आपने गलती से स्विच कर दिया है, तो तुरंत एडिटर में सबसे ऊपर दाईं ओर अनडू आइकन पर क्लिक करें।

CSS ग्रिड को मैन्युअली एडिट करने के लिए:

अपने एडिटर पर जाएं।
एडिटर में सबसे ऊपर डेस्कटॉप ब्रेकपॉइंट चुनें।
संबंधित सेक्शन या सेल चुनें।
एडिटर में सबसे ऊपर दाईं ओर ओपन इंस्पेक्टर आइकन पर क्लिक करें।

Studio Two Editor में इंस्पेक्टर पैनल खोलने वाले ऐरो पर क्लिक करना

(अगर पहले से खुला नहीं है) डिज़ाइन टैब पर क्लिक करें और नीचे लेआउट तक स्क्रॉल करें।
CSS ग्रिड के आगे एडिट मैन्युअली पर क्लिक करें।
(पॉपअप में) कन्फर्म करने के लिए एडिट मैन्युअली पर क्लिक करें।
टिप: आगे से इस साइट पर यह कन्फर्मेशन स्किप करने के लिए, डोंट शो अगेन चेकबॉक्स चुनें।

मैन्युअल CSS ग्रिड के साथ काम करना

ग्रिड को एक-एक लाइन करके बनाएं। मैन्युअल CSS ग्रिड में रो, कॉलम और गैप अलग-अलग वैल्यू के रूप में मिलते हैं, जिनके लिए आप fr, min/max और % जैसी रिस्पॉन्सिव यूनिट इस्तेमाल कर सकते हैं। हर ब्रेकपॉइंट पर ग्रिड को अपनी ज़रूरत के मुताबिक सेट करें। डिज़ाइन डेस्कटॉप से नीचे की ओर कैस्केड होता है, इसलिए इसे छोटी स्क्रीन के मुताबिक भी एडजस्ट करना न भूलें।