Studio एडिटर: रिपीटर्स जोड़ना और कस्टमाइज़ करना
9 मिनट
रिपीटर उन आइटम्स की लिस्ट है जिनका डिज़ाइन और लेआउट एक जैसा होता है, लेकिन हर आइटम का कंटेंट अलग होता है। यह आपके कंटेंट को दिखाने का तेज़ और आसान तरीका है। इसमें साइट के
CMS (कंटेंट मैनेजमेंट सिस्टम) का कंटेंट भी शामिल है।
Studio एडिटर में रिपीटर्स को रिस्पॉन्सिव फ्लेक्स लेआउट में अरेंज किया जाता है, जिससे हर आइटम सभी स्क्रीन साइज़ पर शानदार दिखता है।
Wix Studio के और वेबिनार, ट्यूटोरियल और कोर्स देखने के लिए हमारी
Wix Studio Academy पर जाएं।
रिपीटर जोड़ना
आप अपनी ज़रूरत के अनुसार कई प्री-डिज़ाइन्ड रिपीटर्स जोड़ और कस्टमाइज़ कर सकते हैं। कुछ रिपीटर्स में इमेज होती हैं, जबकि कुछ टेक्स्ट पर ज़्यादा ज़ोर देने वाली "लिस्ट" स्टाइल में होते हैं।
अपनी पसंद का रिपीटर जोड़ने के बाद, उसके कंटेंट पर काम करना शुरू करें। किसी रिपीटर आइटम में एलिमेंट जोड़ने पर, डिज़ाइन को एक जैसा बनाए रखने के लिए वह अपने-आप बाकी आइटम्स में भी जुड़ जाता है। हालांकि, आप हर आइटम के अलग-अलग एलिमेंट्स (जैसे टेक्स्ट और इमेज) को कस्टमाइज़ कर सकते हैं।
रिपीटर जोड़ने के लिए:
- एडिटर के बाईं ओर ऐड एलिमेंट्स
पर क्लिक करें। - लेआउट टूल्स पर क्लिक करें।
- रिपीटर्स पर क्लिक करें।
- रिपीटर को ड्रैग करके पृष्ठ पर लाएं।
टिप:
किसी एक रिपीटर आइटम से एलिमेंट हटाने पर, वह बाकी सभी आइटम्स से भी डिलीट हो जाता है।
रिपीटर आइटम्स मैनेज करना
इंस्पेक्टर पैनल से आप रिपीटर आइटम्स को आसानी से डुप्लीकेट, रीनेम, रीऑर्डर और डिलीट कर सकते हैं।
रिपीटर आइटम्स मैनेज करने के लिए:
- संबंधित रिपीटर चुनें।
- एडिटर में ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन
पर क्लिक करें।
- (इंस्पेक्टर में) आइटम्स की संख्या के आगे मैनेज पर क्लिक करें।
- चुनें कि आप अपने रिपीटर आइटम कैसे मैनेज करना चाहते हैं:
- किसी आइटम को डुप्लीकेट करें: कोई आइटम चुनें, फिर नीचे डुप्लीकेट आइटम पर क्लिक करें।
- किसी आइटम को डिलीट करें: आइटम के पास मौजूद मोर एक्शंस आइकन
पर क्लिक करें, फिर डिलीट पर क्लिक करें। - किसी आइटम का नाम बदलें: आइटम के पास मौजूद मोर एक्शंस आइकन पर क्लिक करें, फिर रीनेम पर क्लिक करें।
टिप: किसी एक आइटम का नाम बदलने से इस रिपीटर के अन्य आइटम के नाम भी अपने-आप बदल जाते हैं। - आइटम रीऑर्डर करें: किसी आइटम के पास मौजूद रीऑर्डर आइकन
को दबाकर रखें और उसे नई जगह पर ड्रैग करें।
रिपीटर डिजाइन करना
रिपीटर के डिजाइन को कस्टमाइज करें, ताकि यह आपके क्लाइंट की साइट से मैच हो। आप आइटम का बैकग्राउंड कलर बदल सकते हैं, बॉर्डर या शैडो जोड़ सकते हैं या ऐसा दिलचस्प कर्सर लगा सकते हैं जो विजिटर के रिपीटर पर होवर करने पर दिखाई दे।
टिप:
अपने रिपीटर को आकर्षक और आसानी से नजर आने वाला बनाने के लिए उसमें
एनिमेशन जोड़ें। आप अपने
रिपीटर आइटम को स्क्रीन के ऊपर और/या नीचे स्टिक भी कर सकते हैं।
रिपीटर डिजाइन करने के लिए:
- कोई रिपीटर आइटम चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- अपने रिपीटर को कस्टमाइज करने के लिए डिजाइन में उपलब्ध ऑप्शन इस्तेमाल करें:
- सभी आइटम का फिल कलर और अपारदर्शिता बदलें।
- आइटम को उभारने के लिए बॉर्डर और शैडो जोड़ें।
- आइटम के कॉर्नर आयताकार या गोल बनाएं।
- ऐसा शानदार कर्सर जोड़ें जो विजिटर के रिपीटर पर होवर करने पर दिखाई दे।
रिपीटर आइटम के लिए AB डिजाइन पैटर्न सेट करना
ज्यादा डीटेल वाला डिजाइन बनाने के लिए अपने रिपीटर आइटम को 2 ग्रुप में बांटें। AB पैटर्न से आप एक ही डिजाइन के 2 वर्जन बना सकते हैं, जिनकी शैलियां और एनिमेशन अलग-अलग हों।
AB पैटर्न इनेबल करने पर आपके रिपीटर आइटम A और B ग्रुप में बंट जाते हैं। एडिटर में आप देख सकते हैं कि कौन-से आइटम किस ग्रुप में हैं। A या B ग्रुप के किसी आइटम को डिजाइन करने पर, उस ग्रुप के दूसरे आइटम भी उससे मैच करने के लिए अपने-आप बदल जाते हैं।
रिपीटर आइटम के लिए AB डिजाइन पैटर्न सेट करने के लिए:
- संबंधित रिपीटर चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- लेआउट तक नीचे स्क्रॉल करें।
- सेट AB डिज़ाइन पैटर्न टॉगल ऑन करें।
- आइटम A और B को डिज़ाइन करें:
- अपने रिपीटर में आइटम A या B पर क्लिक करें।
टिप: यह संबंधित ग्रुप का कोई भी आइटम हो सकता है। - (इंस्पेक्टर में) चुनें कि आप आइटम के इस ग्रुप को कैसे कस्टमाइज़ करना चाहते हैं:
- डिज़ाइन सेक्शन से कोई डिज़ाइन प्रीसेट चुनें।
- आइटम का फिल कलर और ओपेसिटी बदलें।
- इंटरैक्शंस टैब
से कोई एनिमेशन जोड़ें (ध्यान दें: AB पैटर्न वाले रिपीटर आइटम के लिए सिर्फ होवर और क्लिक इंटरैक्शन उपलब्ध हैं)। - कर्सर सेक्शन से कस्टम कर्सर अप्लाई करें।
- आइटम के दूसरे ग्रुप के लिए स्टेप a-b दोहराएं।
- अपने रिपीटर में आइटम A या B पर क्लिक करें।
रिपीटर का लेआउट बदलना
सेट करें कि स्क्रीन साइज़ बदलने पर रिपीटर आइटम कैसे फिर से अरेंज हों। चुने गए डिस्प्ले टाइप (जैसे कार्ड्स, लिस्ट, स्लाइडर, ग्रिड सेल्स) के आधार पर, आप मार्जिन, एलाइनमेंट, डायरेक्शन और दूसरी सेटिंग्स को कस्टमाइज़ कर सकते हैं।
ब्रेकपॉइंट के साथ काम करना:
- आप हर ब्रेकपॉइंट के लिए अपने रिपीटर का अलग लेआउट रख सकते हैं।
- टैबलेट और मोबाइल डिवाइस जैसी छोटी स्क्रीन के लिए आम तौर पर लिस्ट और स्लाइडर का इस्तेमाल किया जाता है।
रिपीटर के लेआउट को और कस्टमाइज़ करने के लिए:
- संबंधित रिपीटर चुनें।
- एडिटर में ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- लेआउट तक नीचे स्क्रॉल करें।
- चुने गए डिस्प्ले टाइप के आधार पर रिपीटर का लेआउट कस्टमाइज़ करें:
कार्ड्स: लेआउट विकल्प
लिस्ट: लेआउट विकल्प
स्लाइडर: लेआउट विकल्प
ग्रिड सेल्स: लेआउट विकल्प
गैप्स के बारे में ध्यान दें:
कुछ पुराने ब्राउजर CSS गैप्स को सपोर्ट नहीं करते हैं (जैसे Chrome 76-83, Safari 12-14 और Edge 79-83)। इसका मतलब है कि इन ब्राउजर से साइट खोलने वाले विजिटर्स को रिपीटर आइटम के बीच सेट किए गए गैप्स नहीं दिखेंगे।
अक्सर पूछे जाने वाले सवाल
अधिक जानकारी के लिए, नीचे दिए गए किसी सवाल पर क्लिक करें।
रिपीटर्स के लिए कौन-कौन से रिस्पॉन्सिव बिहेवियर उपलब्ध हैं?
रिपीटर में कौन-से एलिमेंट्स नहीं जोड़े जा सकते?
मेरा रिपीटर मोबाइल पर सही तरीके से क्यों नहीं दिखाई देता?