Studio Editor: अपने एलिमेंट्स का साइज सेट करना
साइट डिजाइन करते समय, आप यह पक्का करना चाहेंगे कि वह हर स्क्रीन साइज पर शानदार दिखे। Studio Editor में, आप साइजिंग को px* में सेट करते हैं और रिस्पॉन्सिव बिहेवियर बाकी काम संभाल लेता है।
ज्यादातर एलिमेंट्स में एक डिफॉल्ट बिहेवियर होता है, जैसे आनुपातिक रूप से स्केल होना। यह तय करता है कि दूसरी स्क्रीन पर एलिमेंट कैसे रीसाइज होगा। आप अपनी जरूरत के हिसाब से डिफॉल्ट बिहेवियर कभी भी बदल सकते हैं।
px* एक फ्लूइड साइज यूनिट है, जो पेज के
एडिटिंग साइज के हिसाब से काम करती है।
टिप:
आप हर
ब्रेकपॉइंट के लिए एलिमेंट का साइज और रिस्पॉन्सिव बिहेवियर सेट कर सकते हैं।
एलिमेंट को रीसाइज करना
कैनवास पर कोई एलिमेंट चुनें और उसे छोटा या बड़ा करने के लिए साइड हैंडल्स को ड्रैग करें। इससे मौजूदा ब्रेकपॉइंट पर एलिमेंट का लुक सेट होता है।
Inspector पैनल में, आप एलिमेंट की सटीक चौड़ाई और ऊंचाई देख सकते हैं। जरूरत होने पर, आप चौड़ाई/ऊंचाई की अपनी वैल्यू डाल सकते हैं।
Inspector को आपके लिए कैलकुलेट करने दें:
साइज वैल्यू टाइप करते समय, आप आसानी से जोड़ (+), घटाव (-), गुणा (*) और भाग (/) का इस्तेमाल कर सकते हैं। उदाहरण के लिए, किसी एलिमेंट को 3 गुना चौड़ा करने के लिए उसकी मौजूदा चौड़ाई के आगे *3 जोड़ें।
रीसाइज करने में समस्या आ रही है?
रीसाइज न होने वाले सेक्शन और कंटेनर से जुड़ी समस्याओं को हल करने का तरीका जानने के लिए
यह ट्रबलशूटिंग वीडियो देखें।
मीडिया एलिमेंट्स को रीसाइज करना
इमेज या वीडियो जैसे मीडिया एलिमेंट को रीसाइज करते समय, आप आस्पेक्ट रेशियो लॉक कर सकते हैं, ताकि चौड़ाई और ऊंचाई हमेशा एक-दूसरे के अनुपात में रहें।
इसका मतलब है कि चौड़ाई बदलने पर ऊंचाई अपने-आप एडजस्ट हो जाती है और ऊंचाई बदलने पर चौड़ाई, ताकि एलिमेंट का ओरिजिनल शेप बना रहे।
किन मीडिया एलिमेंट्स में यह ऑप्शन मिलता है?
आस्पेक्ट रेशियो लॉक करने के लिए:
- संबंधित मीडिया एलिमेंट चुनें।
- ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर ऐरो
पर क्लिक करें।
- साइज़ के नीचे लॉक आस्पेक्ट रेशियो आइकन
पर क्लिक करें। - एलिमेंट को इनमें से किसी एक तरीके से रिसाइज़ करें:
- इंस्पेक्टर में चौड़ाई/ऊंचाई की वैल्यू डालें (दूसरी वैल्यू अपने-आप एडजस्ट हो जाएगी)।
- कैनवास पर एलिमेंट के चारों ओर मौजूद हैंडल्स को ड्रैग करें।
ध्यान दें:
यह ऑप्शन एडवांस्ड सेटिंग्स मोड में उपलब्ध नहीं है।
साइज़ को px* में सेट करना
px
*, Studio Editor में मापने की एक फ्लूइड यूनिट है। इसकी मदद से आप जानी-पहचानी माप यूनिट (पिक्सेल) का इस्तेमाल करके साइज़ एडिट कर सकते हैं, जबकि बैकग्राउंड में वास्तविक माप रिस्पॉन्सिव रहता है।
दूसरे शब्दों में, आप कैनवास पर दिखने वाले साइज़ को दर्शाने वाले पिक्सेल्स में डिजाइन करते हैं और एलिमेंट रिस्पॉन्सिव बना रहता है। खास वैल्यू और साइज़ यूनिट आपके चुने गए रिस्पॉन्सिव बिहेवियर पर निर्भर करती हैं। कैलकुलेशन और इस्तेमाल की जा रही रिस्पॉन्सिव साइज़ यूनिट देखने के लिए
px* पर होवर करें।
नीचे दिए गए उदाहरण में, मौजूदा कैनवास पर कंटेनर की चौड़ाई 330 px* है। इसकी वास्तविक यूनिट प्रतिशत है, इसलिए चौड़ाई रिलेटिव है (हर स्क्रीन का 25.8%)।
px* और px में क्या अंतर है?
दोनों से आप पिक्सेल्स में एडिट कर सकते हैं, लेकिन:
- px* का मतलब है कि आपको दिखने वाला साइज़ उस ब्रेकपॉइंट के हिसाब से है जिस पर आप अभी काम कर रहे हैं।
- px का मतलब है कि साइज़ सभी ब्रेकपॉइंट्स पर फिक्स्ड रहता है।
किसी एलिमेंट का रिस्पॉन्सिव बिहेवियर चुनना
जब आप पेज पर कोई एलिमेंट जोड़ते हैं, तो उसमें पहले से बिल्ट-इन रिस्पॉन्सिव बिहेवियर होता है। इसका मतलब है कि आपको यह चिंता करने की जरूरत नहीं है कि एलिमेंट अलग-अलग स्क्रीन पर कैसा दिखेगा—रिस्पॉन्सिव बिहेवियर यह पक्का करता है कि उसका साइज़ अपने-आप एडजस्ट हो जाए।
हालांकि, अगर आपको अपने डिजाइन के लिए कोई दूसरा रिस्पॉन्सिव बिहेवियर ज्यादा सही लगे, तो आप उस पर स्विच कर सकते हैं।
उपलब्ध बिहेवियर्स के बीच क्या अंतर है?
ध्यान दें:
आपके चुने गए रिस्पॉन्सिव बिहेवियर से इस्तेमाल होने वाली साइज यूनिट्स बदलती हैं। उदाहरण के लिए, फिक्स्ड रिस्पॉन्सिव बिहेवियर चुनने पर मेजरमेंट px* से बदलकर px हो जाता है।
कोई दूसरा रिस्पॉन्सिव बिहेवियर चुनने के लिए:
- संबंधित ब्रेकपॉइंट चुनें।
- एलिमेंट चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- रिस्पॉन्सिव बिहेवियर ड्रॉप-डाउन से कोई विकल्प चुनें।
क्या लाइव साइट पर अनचाहे गैप दिख रहे हैं?
रिस्पॉन्सिव बिहेवियर इस समस्या पर कैसे असर डाल सकता है और इसे कैसे ठीक किया जा सकता है, इसका तरीका जानने के लिए
यह ट्रबलशूटिंग वीडियो देखें।
एडवांस्ड साइज मेजरमेंट का इस्तेमाल करना
इंस्पेक्टर की एडवांस्ड सेटिंग्स से आप हर ब्रेकपॉइंट के लिए एलिमेंट के साइज को ज्यादा बारीकी से कस्टमाइज कर सकते हैं। px* में काम करने और रिस्पॉन्सिव बिहेवियर चुनने के बजाय, इस मोड में आप वे मेजरमेंट देख सकते हैं जिनका इस्तेमाल बैकग्राउंड में होता है, जैसे px, %, और vh, और उन्हें अपनी जरूरत के हिसाब से एडजस्ट कर सकते हैं।
कौन-कौन से मेजरमेंट उपलब्ध हैं?
एडवांस्ड सेटिंग्स चालू करने से वे आपके चुने गए एलिमेंट पर सभी ब्रेकपॉइंट के लिए लागू होती हैं। आसान एक्सेस के लिए उस एलिमेंट का एडवांस्ड सेटिंग्स मोड चालू रहता है, लेकिन आप इसे कभी भी बंद कर सकते हैं।
एडवांस्ड साइज सेटिंग्स को एक्सेस और एडिट करने के लिए:
- अपने एडिटर पर जाएं।
- संबंधित एलिमेंट चुनें।
- एडिटर के ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- साइज के आगे मौजूद मोर एक्शंस आइकन
पर क्लिक करें। - एडवांस्ड सेटिंग्स टॉगल चालू करें।
- जरूरत के हिसाब से साइजिंग एडिट करें: चौड़ाई, ऊंचाई, और मिनिमम और मैक्सिमम वैल्यू।
टिप: किसी दूसरी यूनिट पर स्विच करने के लिए, जैसे px से %, इंस्पेक्टर में उस यूनिट पर क्लिक करें। ऐसा करने से एलिमेंट के लिए उपलब्ध मेजरमेंट की लिस्ट खुलती है।
सेक्शन की ऊंचाई सेट करना:
हम ऊंचाई को पिक्सेल में सेट करने की सलाह नहीं देते, क्योंकि इससे एलिमेंट उम्मीद के मुताबिक दिखाई नहीं दे सकते। उदाहरण के लिए, वे बाहर ओवरफ्लो हो सकते हैं या कटे हुए दिखाई दे सकते हैं।
साइज़िंग प्रेफरेंस सेट करना
आप जिस साइट को डिज़ाइन कर रहे हैं, उसके लिए अपनी साइज़िंग प्रेफरेंस चुनें। अगर आप एडवांस्ड CSS मेज़रमेंट के साथ काम करना पसंद करते हैं, तो पूरे एडिटर में एडवांस्ड सेटिंग्स चालू कर सकते हैं। इसके बजाय, अगर आप हर एलिमेंट के लिए अलग साइज़िंग मोड चुनना चाहते हैं, तो मौजूदा सेटिंग बनाए रख सकते हैं।
किसी साइट के लिए साइज़िंग प्रेफरेंस सेट करने के लिए:
- सबसे ऊपर बाईं ओर Wix Studio आइकन
पर क्लिक करें। - व्यू पर होवर करें।
- साइज़िंग प्रेफरेंस पर होवर करें।
- अपनी प्रेफरेंस चुनें:
- ऑलवेज़ शो एडवांस्ड: इंस्पेक्टर में साइज़िंग हमेशा एडवांस्ड पर सेट रहती है।
ध्यान दें: इस मोड में चुनिंदा एलिमेंट्स को एडवांस्ड सेटिंग्स से वापस स्विच करने का ऑप्शन बंद हो जाता है। - सेट पर एलिमेंट: आप हर एलिमेंट के लिए साइज़िंग प्रेफरेंस सेट करते हैं।
- ऑलवेज़ शो एडवांस्ड: इंस्पेक्टर में साइज़िंग हमेशा एडवांस्ड पर सेट रहती है।
अक्सर पूछे जाने वाले सवाल
साइज़िंग के बारे में अधिक जानकारी पाने के लिए, नीचे दिए गए किसी सवाल पर क्लिक करें।
मुझे एडवांस्ड सेटिंग्स कब इस्तेमाल करनी चाहिए?
क्या Wix ऐप्स से जुड़े एलिमेंट्स के लिए सभी रिस्पॉन्सिव बिहेवियर उपलब्ध हैं?
मैंने एक सेक्शन को स्केल प्रपोर्शनली पर सेट किया है, लेकिन एलिमेंट्स स्केल नहीं हो रहे। ऐसा क्यों?
इंस्पेक्टर पैनल से कुछ एलिमेंट्स का साइज़ एडजस्ट क्यों नहीं होता?
अलग-अलग स्क्रीन साइज़ पर इमेज या वीडियो सही तरीके से स्केल क्यों नहीं होते?
मोबाइल पर ओवरलैप होने वाले एलिमेंट्स को कैसे ठीक करें?