Studio एडिटर: कंटेनर का इस्तेमाल करना
4 मिनट
कंटेनर रिस्पॉन्सिव लेआउट टूल्स हैं, जिनसे आप साइट के कंटेंट को बेहतर तरीके से व्यवस्थित और स्ट्रक्चर कर सकते हैं। साइट के डिज़ाइन के अनुसार इन्हें कस्टमाइज़ किया जा सकता है और इनमें टेक्स्ट, मीडिया और बटन जैसे एलिमेंट्स जोड़े जा सकते हैं।
साइट पर कंटेनर जोड़ना
शुरू करने के लिए, क्लाइंट के डिज़ाइन और कंटेंट की ज़रूरतों के अनुसार कंटेनर जोड़ें। आप पहले से डिज़ाइन किए गए और होवर कंटेनर में से चुन सकते हैं या खाली डिज़ाइन से शुरुआत कर सकते हैं।
कंटेनर जोड़ने के लिए:
- एडिटर के बाईं ओर ऐड एलिमेंट्स
पर क्लिक करें। - कंटेनर्स चुनें।
- कंटेनर स्टाइल चुनें (एम्प्टी, डिज़ाइन्ड या होवर)।
- अपने चुने हुए कंटेनर को पृष्ठ पर जोड़ने के लिए, उस पर क्लिक करके ड्रैग करें।
कंटेनर डिज़ाइन करना
साइट के लुक के अनुसार कंटेनर का डिज़ाइन कस्टमाइज़ करें। आप बैकग्राउंड का रंग बदल सकते हैं, रेडियस सेट कर सकते हैं और भी बहुत कुछ कर सकते हैं।
कंटेनर डिज़ाइन करने के लिए:
- संबंधित कंटेनर चुनें।
- एडिटर में ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन
पर क्लिक करें।
- डिज़ाइन में जाकर चुनें कि आप कंटेनर को कैसे कस्टमाइज़ करना चाहते हैं:
- बैकग्राउंड: बैकग्राउंड सेट करें और उसकी विज़िबिलिटी कम या ज़्यादा करें:
- कलर: साइट के थीम कलर्स में से चुनें या अपना कस्टम शेड इस्तेमाल करें।
- ग्रेडिएंट: कंटेनर पर ग्रेडिएंट या लीनियर ग्रेडिएंट अप्लाई करें। आप इसके रंग, एंगल और दूसरी सेटिंग्स चुन सकते हैं।
- ग्लास इफ़ेक्ट: कंटेनर पर फ्रॉस्टेड ग्लास इफ़ेक्ट अप्लाई करें और ब्लर की इंटेंसिटी सेट करें।
- बॉर्डर: कंटेनर में बॉर्डर जोड़ें और उपलब्ध ऑप्शंस से उसका साइज़, रंग और अपारदर्शिता सेट करें।
- कॉर्नर्स: कंटेनर के कॉर्नर्स को ज़्यादा गोल या चौकोर बनाने के लिए उनका रेडियस (px में) एडजस्ट करें।
- शैडो: कंटेनर पर शैडो इफ़ेक्ट जोड़ें और उसे कस्टमाइज़ करें।
- बैकग्राउंड: बैकग्राउंड सेट करें और उसकी विज़िबिलिटी कम या ज़्यादा करें:
टिप: 
आप कैनवस पर रेडियस हैंडल को ड्रैग करके कंटेनर के कोनों को भी एडजस्ट कर सकते हैं।
एलिमेंट्स को कंटेनर से अटैच करना
जब आप किसी कंटेनर के अंदर एलिमेंट्स रखते हैं, तो वे अपने-आप अटैच हो जाते हैं। इसका मतलब है कि आप कंटेनर और उससे अटैच एलिमेंट्स को एक साथ ड्रैग कर सकते हैं और उन्हें
लेयर्स पैनल में एक साथ देख सकते हैं।
किसी एलिमेंट को कंटेनर से अटैच करने के लिए:
- संबंधित एलिमेंट पर क्लिक करें।
- इसे ड्रैग करके कंटेनर में अपनी पसंद की जगह पर ले जाएं।
- अटैच मैसेज दिखने पर एलिमेंट को ड्रॉप करें।
कंटेनर का रिस्पॉन्सिव बिहेवियर सेट करना
जब आप पृष्ठ पर कोई कंटेनर जोड़ते हैं, तो उसमें पहले से बिल्ट-इन
रिस्पॉन्सिव बिहेवियर होता है। इसका मतलब है कि आपको अलग-अलग स्क्रीन पर एलिमेंट कैसा दिखेगा, इसकी चिंता करने की जरूरत नहीं है—रिस्पॉन्सिव बिहेवियर यह पक्का करता है कि उसका साइज अपने-आप एडजस्ट हो जाए।
हालांकि, अगर आपको अपने डिजाइन के लिए कोई दूसरा रिस्पॉन्सिव बिहेवियर ज्यादा सही लगे, तो आप इसे बदल सकते हैं।
कंटेनर का रिस्पॉन्सिव बिहेवियर सेट करने के लिए:
- संबंधित कंटेनर चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- रिस्पॉन्सिव बिहेवियर के नीचे ड्रॉपडाउन पर क्लिक करें और अपनी पसंद का बिहेवियर चुनें:
- स्केल प्रपोर्शनली: कंटेनर की चौड़ाई और ऊंचाई का आस्पेक्ट रेशियो सभी स्क्रीन पर एक जैसा रहता है।
- रिलेटिव विड्थ: कंटेनर की चौड़ाई उसके पैरेंट एलिमेंट के हिसाब से अपने-आप बदलती है।
- फिक्स्ड: कंटेनर की चौड़ाई और ऊंचाई हमेशा एक जैसी रहती है और स्क्रीन साइज के हिसाब से एडजस्ट नहीं होती।
- स्ट्रेच: हर ब्रेकपॉइंट पर कंटेनर अपने पैरेंट, जैसे सेल या सेक्शन, में फिट होने के लिए स्ट्रेच होता है।
कंटेनर पर ग्रिड अप्लाई करना
कंटेनर के लेआउट को व्यवस्थित करने के लिए उस पर
एडवांस्ड CSS ग्रिड अप्लाई करें। आप अपनी जरूरत के हिसाब से रो और कॉलम की संख्या चुन सकते हैं और रिस्पॉन्सिव मेजरमेंट, जैसे fr, मिन/मैक्स और %, का इस्तेमाल करके
उनका साइज सेट कर सकते हैं।
कंटेनर पर ग्रिड अप्लाई करने के लिए:
- सही कंटेनर चुनें।
- मोर ऐक्शंस आइकन
पर क्लिक करें। - अप्लाई एडवांस्ड CSS ग्रिड पर क्लिक करें।
- 1x1 ड्रॉप-डाउन से कोई लेआउट चुनें।
टिप: अगर आप रो और कॉलम की संख्या खुद सेट करना चाहते हैं, तो अदर चुनें।
