ग्रुप एक बॉक्स है जो दूसरे ब्लॉक को अपने अंदर रखता है और उन्हें व्यवस्थित करता है। इसका इस्तेमाल चीज़ों को साथ-साथ रखने, कॉलम बनाने, या किसी सेक्शन के एक हिस्से को उसका अपना बैकग्राउंड और बॉर्डर देने के लिए करें।
ग्रुप कहाँ इस्तेमाल किए जा सकते हैं
कई सेक्शन ग्रुप ब्लॉक लेते हैं: फ़ुटर, न्यूज़लेटर, हीरो, स्लाइडशो की स्लाइड, अक्सर पूछे जाने वाले प्रश्न, पहले और बाद में, रिव्यू, संपर्क, 404, ऑर्डर कन्फ़र्मेशन, कोलैप्सिबल रो, और प्रोडक्ट लिस्ट वाले सेक्शन (जैसे फ़ीचर्ड प्रोडक्ट्स और कलेक्शन) का टेक्स्ट वाला हिस्सा। हर सेक्शन तय करता है कि उसके ग्रुप के अंदर कौन से ब्लॉक जा सकते हैं, और वह कितने ग्रुप लेता है।
बिल्डर में ग्रुप जोड़ने के लिए, सेक्शन चुनें, नया ब्लॉक जोड़ें पर क्लिक करें, और ग्रुप चुनें। फिर दूसरे ब्लॉक उसमें खींचें। कुछ सेक्शन (फ़ुटर, न्यूज़लेटर, रिव्यू) आपको ग्रुप के अंदर ग्रुप रखने भी देते हैं।
लेआउट
- चौड़ाई: भरें खाली जगह ले लेता है और उसे बगल वाले दूसरे "भरें" ग्रुप के साथ बराबर बाँटता है। फ़िट सिर्फ़ अपने कंटेंट जितना चौड़ा होता है। कस्टम प्रतिशत में कस्टम चौड़ाई सेट करता है।
- दिशा: वर्टिकल ब्लॉक को एक के नीचे एक रखता है, हॉरिज़ॉन्टल उन्हें साथ-साथ रखता है। जगह कम होने पर साथ-साथ वाले ब्लॉक नई लाइन में चले जाते हैं।
- मोबाइल पर एक के नीचे एक रखें (सिर्फ़ हॉरिज़ॉन्टल): फ़ोन पर ब्लॉक एक के नीचे एक आ जाते हैं।
- पोज़िशन: ब्लॉक को ऊपर-नीचे रखता है (ऊपर, बीच में, नीचे)।
- अलाइनमेंट: ब्लॉक को बाएँ से दाएँ रखता है (बाएँ, बीच में, दाएँ)।
- बीच में बराबर जगह: ब्लॉक को फैला देता है ताकि उनके बीच बराबर जगह रहे। यह उसी दिशा में मिलता है जिसमें ब्लॉक चलते हैं: वर्टिकल ग्रुप के लिए पोज़िशन में, हॉरिज़ॉन्टल ग्रुप के लिए अलाइनमेंट में।
दिखावट
- पैरेंट की कलर स्कीम इस्तेमाल करें: डिफ़ॉल्ट रूप से चालू, इसलिए ग्रुप सेक्शन के रंग इस्तेमाल करता है। ग्रुप को उसका अपना बैकग्राउंड और टेक्स्ट रंग देने के लिए इसे बंद करें और एक कलर स्कीम चुनें।
- बॉर्डर: कोई नहीं या सॉलिड। सॉलिड से बॉर्डर की मोटाई (1 से 20 पिक्सेल) और बॉर्डर की पारदर्शिता जुड़ जाते हैं। रंग स्कीम का बॉर्डर रंग होता है।
- कोनों की गोलाई: कोनों को गोल करता है, 0 से 100 पिक्सेल तक।
- बैकग्राउंड ओवरले: बैकग्राउंड के ऊपर रंग की एक परत जोड़ता है। ओवरले का रंग और ओवरले की स्टाइल सेट करें: सॉलिड, या ग्रेडिएंट जो धीरे-धीरे पारदर्शी हो जाता है, और उसकी ग्रेडिएंट की दिशाऊपर या नीचे। हीरो इमेज पर टेक्स्ट को पढ़ने लायक बनाने के लिए उपयोगी है।
स्पेसिंग
गैप ग्रुप के अंदर के ब्लॉक के बीच की जगह है (0 से 100 पिक्सेल)। पैडिंग ग्रुप के किनारे और उसके ब्लॉक के बीच की जगह है, हर तरफ़।
तैयार नुस्खे
- हीरो में साथ-साथ दो बटन: दोनों को एक हॉरिज़ॉन्टल ग्रुप में छोटे गैप के साथ रखें।
- फ़ुटर के तीन कॉलम: एक हॉरिज़ॉन्टल ग्रुप जिसके अंदर तीन "भरें" आइटम हों, और "मोबाइल पर एक के नीचे एक रखें" चालू हो।
- एक कार्ड: एक वर्टिकल ग्रुप जिसकी अपनी कलर स्कीम, सॉलिड बॉर्डर, कोनों की गोलाई और पैडिंग हो।
- टेक्स्ट बाएँ, बटन दाएँ: एक हॉरिज़ॉन्टल ग्रुप जिसमें अलाइनमेंट "बीच में बराबर जगह" पर सेट हो।
ध्यान रखने वाली बातें
- एक कॉलम आपकी उम्मीद से ज़्यादा चौड़ा है: दो "भरें" ग्रुप जगह बराबर बाँटते हैं। एक को कस्टम पर सेट करें और उसे प्रतिशत दें।
- ग्रुप नहीं दिखता: बिना ब्लॉक वाला ग्रुप, या सिर्फ़ छिपे हुए ब्लॉक वाला ग्रुप, आपके स्टोर पर नहीं दिखता।
- ब्लॉक की लिस्ट में ग्रुप नहीं है: वह सेक्शन ग्रुप नहीं लेता, या उसकी ग्रुप की सीमा पूरी हो गई है।
- टेक्स्ट, बटन और डिवाइडर की सेटिंग्स ग्रुप, टेक्स्ट, बटन और डिवाइडर ब्लॉक: लेआउट कंपोनेंट की सेटिंग्स कैसे काम करती हैं? में हैं।