Studio Two एडिटर: इंस्पेक्टर पैनल के साथ काम करना

इंस्पेक्टर पैनल से किसी भी एलिमेंट, सेक्शन या पृष्ठ की प्रॉपर्टीज़ एडिट करें। एक ही जगह से सेट करें कि एलिमेंट अलग-अलग ब्रेकपॉइंट पर कैसे रिसाइज़ हों, डिज़ाइन एडजस्ट करें, मोशन जोड़ें और कॉन्टेंट को डेटा सोर्स से कनेक्ट करें।

अलग-अलग ब्रेकपॉइंट पर कोई एलिमेंट कैसा दिखे और काम करे, इसे डिज़ाइन टैब से कंट्रोल करें। इंस्पेक्टर में सबसे पहले यही टैब दिखता है। इसमें साइज़ और स्पेसिंग से लेकर कलर, टाइपोग्राफी और कस्टम CSS तक के सभी ऑप्शन मौजूद हैं।

चुने गए एलिमेंट को उसके पैरेंट के अंदर अलाइन करने के लिए, टैब में सबसे ऊपर मौजूद आइकन पर क्लिक करें। इन आइकन के नीचे दिखने वाले सेक्शन आपके चुने गए एलिमेंट के हिसाब से बदलते हैं:

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

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

अपनी पसंद का मोशन टाइप चुनें:

• एंट्रेंस: एलिमेंट के पहली बार लोड होने पर उसे एनिमेट करें। उदाहरण के लिए, उसे एक्सपैंड, फ़ेड इन या किसी एंगल पर टिल्ट कराएं।

• लूप: किसी खास एक्शन से ट्रिगर किए बिना, एलिमेंट को लगातार लूप में एनिमेट करें।

• स्क्रॉल: विज़िटर के पृष्ठ पर ऊपर-नीचे स्क्रॉल करने पर एलिमेंट को एनिमेट करें।

• माउस इफ़ेक्ट: एनिमेशन की मदद से एलिमेंट को कर्सर की मूवमेंट पर रिएक्ट कराएं।

• क्लिक: विज़िटर के एलिमेंट पर क्लिक करने पर उसे एनिमेट करें।

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

अपने चुने गए एलिमेंट के लिए एडवांस्ड बिहेवियर सेट करने के लिए, सेटिंग्स टैब का इस्तेमाल करें।

• डेटा सोर्स: किसी पृष्ठ, सेक्शन या कंटेनर को डेटा सोर्स से कनेक्ट करें। इसके अंदर मौजूद एलिमेंट फिर उस सोर्स के डाटा, एक्शन और फ़ंक्शनैलिटी का इस्तेमाल कर सकते हैं। शुरू करने के लिए कनेक्ट सोर्स पर क्लिक करें।

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

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

• एडवांस्ड:

  • विज़िबिलिटी कंडीशन: डेटा सोर्स की कोई कंडीशन ट्रू/फ़ॉल्स होने पर एलिमेंट को छिपाएं।

  • इवेंट हैंडलर्स: एलिमेंट पर क्लिक या माउस होवर जैसा कुछ होने पर कोई फ़ंक्शन रन करें। इवेंट हैंडलर्स बटन जैसे कुछ खास एलिमेंट के लिए उपलब्ध होते हैं।

ज़्यादा जानकारी पाने के लिए, नीचे दिए गए किसी सवाल पर क्लिक करें।