Wix के साथ शुरुआत करनाWix के साथ अपनी वेबसाइट और बिज़नेस बनाएँअपनी वेबसाइट बनाने, टेम्पलेट कस्टमाइज़ करने, या अपनी ऑनलाइन प्रेज़ेंस बेहतर बनाने के लिए प्रोफ़ेशनल्स को हायर करने के लिए हमारे AIटूल्स देखे
वेबसाइट बनानापढ़ें कि Wix एडिटर का इस्तेमाल कैसे करें और अपनी साइट पर कंटेंट कैसे मैनेज करें। जानें कि अपने विज़िटर्स की प्राइवेसी कैसे सुरक्षित रखें और अपनी साइट को एक्सेसिबल कैसे बनाएं।
अकाउंट और बिलिंगअपनी अकाउंट सेटिंग्स देखें, अपने सब्सक्रिप्शन और प्लान मैनेज करें और अपने इनवॉइस समझें.
Wix मोबाइल ऐप का इस्तेमाल करनाअपने बिज़नेस को चलते-फिरते अच्छे से चलाने के लिए हमारे मोबाइल ऐप्स का इस्तेमाल करें और अपनी साइट के मेंबर्स के टच में रहने के लिए एक खास ऐप सेट अप करें।
डोमेन कनेक्ट करनाअपनी साइट के लिए डोमेन खरीदने, कनेक्ट करने या ट्रांसफर करने का तरीका जानने के लिए हमारे स्टेप-बाय-स्टेप गाइड को फॉलो करें, और जानें कि अपनी साइट का डेटा कैसे सुरक्षित रखें।
अपना बिज़नेस मैनेज़ करनाअपने बिज़नेस और वेब प्रेजेंस को बढ़ाने के लिए टूल्स लें। अपनी खास ज़रूरतों के लिए सही टूल्स ढूंढें, ऑनलाइन पेमेंट सेट अप करें और अपनी साइट के एनालिटिक्स पर नज़र रखें।
अपनी साईट प्रमोट करना सर्च इंजन पर इसे प्रमोट करके, ईमेल भेजकर और पेड ऐड चलाकर अपनी साइट को ज़्यादा विज़िबल बनाना सीखें। प्रैक्टिकल टिप्स से अपनी ऑनलाइन प्रेजेंस को बेहतर बनाएं।
स्टूडियो, पार्टनर और एंटरप्राइअपने स्टूडियो या एंटरप्राइज़ अकाउंट का ज़्यादा से ज़्यादा फ़ायदा उठाएँ, एडवांस्ड फ़ीचर्स के साथ जो आपको ज़्यादा अच्छे से काम करने में मदद करेंगे.
और अधिक मदद की आवश्यकता है?साइट परफॉर्मेंस और टेक्निकल दिक्कतों के लिए सॉल्यूशन ढूंढें, उन दिक्कतों के बारे में जानें जिन्हें हम ठीक करने पर काम कर रहे हैं या मदद के लिए हमसे कॉन्टैक्ट करें।
placeholder-preview-image
Wix Learnहमारे कोर्सेज़ और ट्यूटोरियल के ज़रिए अपने स्किल्स का विकास करें।
Wix ब्लॉगवेब डिज़ाइन, मार्केटिंग आदि के लिए सुझाव पाएं।
SEO लर्निंग हबसर्च इंजन से ऑर्गेनिक साइट ट्रैफिक बढ़ाना सीखें।
वेबसाइट विकासहमारे फ़ुल-स्टैक प्लेटफ़ॉर्म का उपयोग करके एक कस्टम साइट बनाएं।
placeholder-preview-image

Studio एडिटर: लेयर्स के साथ काम करना

Studio एडिटर में किसी पृष्ठ पर काम करते समय उसकी लेयर्स मैनेज करें। यहां आपको सभी अनुभाग और एलिमेंट दिखते हैं, जिससे आप उनकी हायरार्की को बेहतर ढंग से समझ सकते हैं। कैनवस पर किसी एलिमेंट को ढूंढना मुश्किल होने पर, उसे सिलेक्ट करने के लिए लेयर्स पैनल भी मददगार होता है।
लेयर्स पैनल का स्क्रीनशॉट, जिसमें पृष्ठ पर एक खास एलिमेंट सिलेक्ट किया गया है

लेयर्स पैनल का स्ट्रक्चर

लेयर्स पैनल मौजूदा पृष्ठ के सभी अनुभाग को ऊपर से नीचे तक हायरार्की में दिखाता है। उदाहरण के लिए, अगर पृष्ठ के सबसे ऊपर कोई शीर्षलेख है, तो वह लिस्ट में भी सबसे ऊपर दिखाई देता है।
एलिमेंट को दूसरे एलिमेंट के अंदर नेस्ट करने से उनके बीच पैरेंट/चाइल्ड रिलेशनशिप बनती है। उदाहरण के लिए, किसी कंटेनर के अंदर मौजूद टेक्स्ट एलिमेंट उसके चाइल्ड एलिमेंट होते हैं। वहीं, वह कंटेनर उस अनुभाग का चाइल्ड होता है जिसमें वह दिखाई देता है।
लेयर्स पैनल इसी पैरेंटिंग लॉजिक के अनुसार ऑर्गनाइज होता है, इसलिए किसी पैरेंट एलिमेंट के चाइल्ड एलिमेंट देखने के लिए उस पर क्लिक करें। अगर आपके पृष्ठ पर कोई ग्लोबल सेक्शन है, तो वह हरे रंग में हाइलाइट होता है।
अपनी ज़रूरत की लेयर तुरंत ढूंढने के लिए सर्च बार का इस्तेमाल करें। आप एलिमेंट का नाम या ID टाइप कर सकते हैं।

A screenshot of the search bar in the Layers panel in the Studio Editor

लेयर्स सिलेक्ट और मैनेज करना

पृष्ठ पर किसी खास एलिमेंट तक पहुंचने के लिए लेयर्स पैनल एक आसान और तेज़ तरीका है। यह किसी एलिमेंट को ढूंढने में भी बहुत काम आता है। उदाहरण के लिए, अगर एलिमेंट एक-दूसरे को ओवरलैप कर रहे हैं और आप अपनी ज़रूरत का एलिमेंट ढूंढ या सिलेक्ट नहीं कर पा रहे हैं।
किसी लेयर पर होवर करने पर, वह पृष्ठ पर हाइलाइट हो जाती है। लेयर पर क्लिक करने से एडिटर सीधे उस एलिमेंट तक स्क्रॉल करता है। इस समय पैनल बंद करने पर भी आपका सिलेक्शन सेव रहता है।
टिप:
एक से ज़्यादा एलिमेंट सिलेक्ट करने के लिए, उन पर क्लिक करते समय Shift बटन दबाकर रखें।
एक GIF, जिसमें दिखाया गया है कि लेयर्स पैनल में लॉगिन बार एलिमेंट सिलेक्ट करने पर पृष्ठ उस तक कैसे स्क्रॉल करता है
क्या आप जानते हैं?
आप एडिटर में नीचे बाईं ओर मौजूद ब्रेडक्रम्ब्स बार से भी लेयर्स सिलेक्ट कर सकते हैं।
The breadcrumbs bar in the Studio Editor, showing a stack selected with 3 more levels of hierarchy - cell, section, page

लेयर मैनेज करना

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

लेयर सिलेक्शन की प्रेफरेंस सेट करना

Studio एडिटर में आप कैनवस पर लेयर्स चुनने के लिए डिफ़ॉल्ट तरीका सेट कर सकते हैं। तय करें कि चाइल्ड एलिमेंट वाले पैरेंट कंटेनर पर क्लिक करने से कौन-सा एलिमेंट “सिलेक्ट” होगा।
  • पैरेंट कंटेनर फ़र्स्ट: क्लिक करने पर पैरेंट कंटेनर (जैसे कंटेनर बॉक्स, स्टैक वगैरह) सिलेक्ट होता है। इसके बाद, अंदर मौजूद किसी भी एलिमेंट को एडिट करने के लिए उस पर दोबारा क्लिक करें।
  • चाइल्ड एलिमेंट फ़र्स्ट: क्लिक करने पर खास चाइल्ड एलिमेंट सिलेक्ट होता है, उसका पैरेंट कंटेनर नहीं।

लेयर सिलेक्शन की पसंद सेट करने के लिए:

  1. सबसे ऊपर बाईं ओर मौजूद Wix स्टूडियो आइकन पर क्लिक करें।
  2. व्यू पर होवर करें।
  3. लेयर सिलेक्शन पर होवर करें।
  4. सही ऑप्शन चुनें: पैरेंट कंटेनर फ़र्स्ट या चाइल्ड एलिमेंट फ़र्स्ट।
Studio एडिटर में लेयर सिलेक्शन की पसंद सेट करना

लेयर्स के नाम बदलना

किसी पृष्ठ पर कई सेक्शन, कंटेनर और एलिमेंट जोड़ने पर, लेयर्स पैनल में उनके बीच फर्क करना मुश्किल हो सकता है। लेयर्स को आसानी से पहचानने के लिए उनके नाम बदलें—नई नाम देने के लिए संबंधित लेयर पर डबल-क्लिक करें।
पैनल में किसी लेयर पर डबल-क्लिक करके उसका नाम बदलने का तरीका दिखाने वाला GIF
Dev मोड का इस्तेमाल कर रहे हैं?
कोड में एलिमेंट को आसानी से पहचानने के लिए, लेयर्स पैनल में उनके IDs दिखाएं। प्रॉपर्टीज पैनल में तय किए गए IDs देखने के लिए डिस्प्ले IDs टॉगल को इनेबल करें।

लेयर्स का क्रम बदलना

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

The Layers panel, selecting a page and clicking to apply the desktop breakpoint order to all other breakpoints

एलिमेंट को हाइड और अनहाइड करना

मौजूदा ब्रेकपॉइंट से किसी एलिमेंट को तुरंत हाइड करने के लिए, कैनवास पर उस एलिमेंट के मोर ऐक्शंस आइकन पर क्लिक करें और हाइड चुनें।
Studio एडिटर में टैबलेट ब्रेकपॉइंट से बटन हाइड करना
हालांकि, किसी एलिमेंट को अनहाइड करने के लिए आपको लेयर्स पैनल का इस्तेमाल करना होगा। हाइड किया गया एलिमेंट, हिडन आइकन के साथ दिखता है, ताकि आप उसे लिस्ट में आसानी से ढूंढ सकें।
टिप:
किसी छोटे ब्रेकपॉइंट (जैसे मोबाइल) पर एलिमेंट जोड़ने पर, वह बड़े ब्रेकपॉइंट (जैसे डेस्कटॉप) पर हमेशा हाइड रहता है। इन स्टेप्स को फ़ॉलो करने से आप उस एलिमेंट को बड़े ब्रेकपॉइंट पर दिखा सकते हैं।

किसी एलिमेंट को फिर से दिखाने के लिए:

  1. एडिटर के बाईं ओर लेयर्स पर क्लिक करें।
  2. लिस्ट में छिपे हुए एलिमेंट को ढूंढें।
  3. शो आइकन पर क्लिक करें।
लेयर्स पैनल में किसी छिपे हुए एलिमेंट को चुनने पर उसे दिखाने के ऑप्शन का स्क्रीनशॉट