स्टूडियो एडिटर: अलग-अलग ब्रेकपॉइंट्स के लिए डिजाइन करना
स्टूडियो एडिटर में आप हर ब्रेकपॉइंट के हिसाब से साइट को कस्टमाइज कर सकते हैं, ताकि वह हमेशा शानदार दिखे। ब्रेकपॉइंट्स स्क्रीन साइज की रेंज होते हैं, जो उन स्क्रीन और डिवाइस को दिखाते हैं जिनका इस्तेमाल विजिटर आम तौर पर करते हैं, जैसे टैबलेट और मोबाइल।
डेस्कटॉप पर बनाया गया डिजाइन टैबलेट और मोबाइल पर अपने आप लागू हो जाता है। हालांकि, डिजाइन को छोटी स्क्रीन के हिसाब से ढालने के लिए आप ओवरराइड बना सकते हैं। शुरू करने के लिए, सबसे ऊपर मौजूद ब्रेकपॉइंट आइकन पर क्लिक करें।
टिप:
आप अपने क्लाइंट की साइट के हर पेज पर, हर ब्रेकपॉइंट के लिए डिफॉल्ट
एडिटिंग साइज (स्क्रीन की चौड़ाई) सेट कर सकते हैं।
Wix Studio के अतिरिक्त वेबिनार, ट्यूटोरियल और कोर्स देखने के लिए, हमारी
Wix Studio Academy पर जाएं।
ब्रेकपॉइंट्स तय करना
स्टूडियो एडिटर में 3 बिल्ट-इन ब्रेकपॉइंट्स मिलते हैं। आप इन्हें किसी भी समय कस्टमाइज करके फिर से तय कर सकते हैं:
- डेस्कटॉप: 1001px और उससे अधिक
- टैबलेट: 751px - 1000px
- मोबाइल: 320px - 750px
कुछ खास स्क्रीन साइज के लिए डिजाइन को और सटीक बनाने के लिए, आप 3 अतिरिक्त ब्रेकपॉइंट्स तक जोड़ सकते हैं।
आपको साइट के हर पेज और हर
ग्लोबल सेक्शन के लिए ब्रेकपॉइंट्स अलग-अलग तय करने होते हैं। इसका मतलब है कि किसी ग्लोबल सेक्शन और उसके पेज के ब्रेकपॉइंट्स पूरी तरह अलग हो सकते हैं।
उदाहरण के लिए, नीचे दिए गए पेज के लिए 5 ब्रेकपॉइंट्स तय किए गए हैं:
...जबकि उस पेज के ग्लोबल हेडर के लिए 3 ब्रेकपॉइंट्स तय किए गए हैं:
टिप:
साइट विजिटर को कौन-सा ब्रेकपॉइंट दिखेगा, यह उनके व्यूपोर्ट की चौड़ाई पर निर्भर करता है। उदाहरण के लिए, iPad Pro यूजर को 1024px चौड़ाई पर डेस्कटॉप ब्रेकपॉइंट (1001px और उससे अधिक) दिखेगा। यह पोर्ट्रेट या लैंडस्केप मोड के हिसाब से भी बदलता है, क्योंकि हर मोड में स्क्रीन की चौड़ाई अलग होती है और वह किसी दूसरी ब्रेकपॉइंट रेंज में आ सकती है।
कैस्केडिंग डिजाइन
अलग-अलग ब्रेकपॉइंट्स के लिए डिजाइन बनाते समय, स्टूडियो एडिटर कैस्केडिंग कॉन्सेप्ट का इस्तेमाल करता है। बड़े ब्रेकपॉइंट्स पर किए गए बदलाव छोटे ब्रेकपॉइंट्स पर अपने आप लागू हो जाते हैं, लेकिन छोटे ब्रेकपॉइंट्स पर किए गए बदलाव बड़े ब्रेकपॉइंट्स को प्रभावित नहीं करते।
उदाहरण के लिए, डेस्कटॉप पर पर्पल डिजाइन किया गया बटन टैबलेट और मोबाइल पर भी अपने आप पर्पल दिखाई देता है। अगर आप मोबाइल पर उसका रंग बदलते हैं, तो टैबलेट और डेस्कटॉप पर वह बटन पर्पल ही रहता है।
नोट:
कुछ बदलाव सभी ब्रेकपॉइंट्स पर लागू होते हैं, जैसे एलिमेंट्स को रिप्लेस या डिलीट करना। इन बदलावों के बारे में अधिक जानने के लिए, नीचे दिया गया सेक्शन देखें।
क्या आपने अतिरिक्त डेस्कटॉप ब्रेकपॉइंट बनाए हैं?
अगर आप दूसरे सबसे बड़े ब्रेकपॉइंट को डिलीट करते हैं, तो सबसे बड़े ब्रेकपॉइंट की सेटिंग्स छोटे ब्रेकपॉइंट्स पर अपने आप लागू हो जाती हैं—भले ही आपने पहले से
ओवरराइड बनाए हों। उदाहरण के लिए, जो एलिमेंट्स सिर्फ सबसे बड़े ब्रेकपॉइंट पर छिपाए गए थे, वे छोटे ब्रेकपॉइंट्स पर भी छिप जाएंगे। इसे ठीक करने के लिए, ओवरराइड फिर से बनाएं।
सभी ब्रेकपॉइंट पर लागू होने वाले बदलाव
कुछ प्रकार के ऐक्शन सभी ब्रेकपॉइंट पर अपने-आप लागू होते हैं और उन्हें किसी खास व्यूपोर्ट के लिए कस्टमाइज़ नहीं किया जा सकता।
डेटा में बदलाव
किसी एलिमेंट का कॉन्टेंट एडिट करने पर, आप असल में उसका डेटा बदल रहे होते हैं। उदाहरण के लिए, किसी एलिमेंट का लिंक या इमेज सोर्स बदलने से वह बदलाव सभी ब्रेकपॉइंट पर लागू होता है।
पेज पर एलिमेंट को रिप्लेस या डिलीट करना इसका एक और उदाहरण है—एलिमेंट सभी ब्रेकपॉइंट पर अपने-आप रिप्लेस/डिलीट हो जाता है।
क्या आप जानते हैं?
आप खास ब्रेकपॉइंट से एलिमेंट हाइड कर सकते हैं। संबंधित ब्रेकपॉइंट पर जाएं, एलिमेंट पर राइट-क्लिक करें और
हाइड चुनें।
स्ट्रक्चर में बदलाव
पेज की हायरार्की में किसी एलिमेंट की जगह बदलना। उदाहरण के लिए, एलिमेंट को एक साथ स्टैक करने या किसी एलिमेंट को दूसरे
सेल में मूव करने पर, आप पेज का स्ट्रक्चर बदलते हैं और यह बदलाव सभी ब्रेकपॉइंट पर दिखाई देता है।
ब्रेकपॉइंट से ओवरराइड बनाना
किसी खास ब्रेकपॉइंट पर एलिमेंट के डिज़ाइन में बदलाव करने पर ओवरराइड बनता है। इसका मतलब है कि वह अब अपने ऊपर वाले बड़े ब्रेकपॉइंट से डिज़ाइन वैल्यू नहीं लेता। हालांकि, ये ओवरराइड छोटे ब्रेकपॉइंट पर भी लागू होते हैं।
आप 2 तरह के ओवरराइड बना सकते हैं:
- डिज़ाइन: किसी एलिमेंट की प्रॉपर्टी में बदलाव, जैसे कलर, बॉर्डर और फ़ॉन्ट।
- लेआउट: किसी एलिमेंट की पोज़िशन और साइज़ में बदलाव, जब तक कि उसे किसी दूसरे पैरेंट एलिमेंट में मूव न किया जाए।
सुझाव:
Studio Editor के एलिमेंट और सेक्शन में पहले से
रिस्पॉन्सिव बिहेवियर शामिल होता है। यह तय करता है कि छोटे ब्रेकपॉइंट पर उनका साइज़ कैसे बदलेगा, इसलिए आपको सब कुछ मैन्युअली सेट करने की जरूरत नहीं होती।
सभी ब्रेकपॉइंट पर ओवरराइड का इस्तेमाल करना
अगर आपको अपना बनाया हुआ ओवरराइड पसंद है, तो आप उसे सभी ब्रेकपॉइंट पर इस्तेमाल कर सकते हैं। ऐसा करने से बदलाव बड़े और छोटे, दोनों ब्रेकपॉइंट पर लागू होते हैं और हर स्क्रीन साइज़ पर साइट का लुक एक जैसा बना रहता है।
सभी ब्रेकपॉइंट पर ओवरराइड इस्तेमाल करने के लिए:
- अपने एडिटर में संबंधित ब्रेकपॉइंट खोलें।
- संबंधित एलिमेंट चुनें।
- मोर ऐक्शंस आइकन
पर क्लिक करें। - यूज ऑन ऑल ब्रेकपॉइंट्स चुनें।
किसी खास ब्रेकपॉइंट से डिजाइन ओवरराइड हटाना
आप किसी एलिमेंट के डिजाइन और लेआउट को कभी भी रीसेट करके सबसे बड़े ब्रेकपॉइंट वाली प्रॉपर्टीज पर वापस ला सकते हैं।
छोटे ब्रेकपॉइंट्स पर एलिमेंट की प्रॉपर्टीज पर कोई असर नहीं पड़ता। इसका असर सिर्फ उस ब्रेकपॉइंट पर पड़ता है जिसमें आप एलिमेंट को पहले वाली स्थिति में ला रहे हैं। उदाहरण के लिए, अगर आप टैबलेट से ओवरराइड हटा रहे हैं, तो इससे मोबाइल पर कोई असर नहीं पड़ेगा।
किसी ब्रेकपॉइंट से डिजाइन ओवरराइड हटाने के लिए:
- अपने एडिटर में संबंधित ब्रेकपॉइंट खोलें।
- संबंधित एलिमेंट चुनें।
टिप: आप इसे सीधे कैनवास पर या लेयर्स पैनल में चुन सकते हैं। - मोर ऐक्शंस आइकन पर क्लिक करें।
- रिमूव ओवरराइड्स पर क्लिक करें।
क्या आप जानते हैं?
सभी ब्रेकपॉइंट्स पर सेक्शन का लेआउट तुरंत ऑप्टिमाइज करने के लिए, आप
रिस्पॉन्सिव AI टूल का इस्तेमाल कर सकते हैं।
अक्सर पूछे जाने वाले सवाल
ज़्यादा जानकारी के लिए नीचे दिए गए किसी सवाल पर क्लिक करें।
मैं कैसे पक्का करूं कि मेरी साइट का लेआउट मोबाइल और डेस्कटॉप, दोनों पर सही दिखे?
मैं अपनी साइट के मोबाइल वर्जन को डेस्कटॉप वर्जन पर असर डालने से कैसे रोकूं?
मोबाइल पर ओवरलैप हो रहे एलिमेंट कैसे ठीक करें?
खास तौर पर मोबाइल पर बड़े गैप या अनचाही व्हाइट स्पेस को कैसे ठीक करें?
मोबाइल पर मेरी गैलरी बहुत बड़ी क्यों दिखती है और मैं इसे कैसे ठीक कर सकता हूं?