CMS: Color फ़ील्ड्स जोड़ना और कनेक्ट करना
14 मिनट
अपने CMS (कंटेंट मैनेजमेंट सिस्टम) कलेक्शंस में 'Color' फील्ड्स जोड़कर और कनेक्ट करके अपनी साइट के डिजाइन को बेहतर बनाएं। 'Color' फील्ड्स आपकी साइट के हर आइटम के कलर्स को डायनेमिक रूप से मैनेज करना मुमकिन बनाते हैं। आप हर कलेक्शन आइटम के लिए स्पेसिफिक कलर्स सेट कर सकते हैं, फिर उन कलर्स को कनेक्टेड टेक्स्ट एलिमेंट्स, बटन्स और सेक्शन बैकग्राउंड्स में इस्तेमाल कर सकते हैं। इसके नतीजे में, आप हर एलिमेंट को मैन्युअली एडिट किए बिना, अपने कलेक्शंस के अंदर से ही इन एलिमेंट्स के कलर्स अपडेट कर सकते हैं।
मान लीजिए कि आप एक ऑनलाइन स्टोर चला रहे हैं। 'Color' फील्ड का इस्तेमाल करके, आप प्रोडक्ट सेक्शन्स के बैकग्राउंड कलर या प्रोडक्ट के नामों के टेक्स्ट कलर को हर आइटम के असाइन किए गए कलर से ऑटोमैटिकली मैच कर सकते हैं।
यह फीचर उन पार्टनर्स के लिए खास तौर पर उपयोगी है जो साइट कोलैबोरेटर्स को एडिटर के एक्सेस के बिना एलिमेंट कलर्स मैनेज करने की परमिशन देना चाहते हैं।
अपने कलेक्शन में 'Color' फील्ड टाइप जोड़ना
एक 'Color' फील्ड जोड़ने के लिए अपने CMS कलेक्शन पर जाएं और फिर हर आइटम के लिए कलर सेट करें। अगर आप हर आइटम के लिए कई कलर्स का इस्तेमाल करना चाहते हैं, तो आप ऐसे कुछ और फील्ड्स बना सकते हैं। उदाहरण के लिए, आप एक 'Color' फील्ड सेक्शन के बैकग्राउंड कलर के रूप में इस्तेमाल करने के लिए बना सकते हैं, और दूसरा 'Color' फील्ड अपने टेक्स्ट कलर के रूप में इस्तेमाल करने के लिए बना सकते हैं।
अपने कलेक्शन में 'color' फील्ड टाइप जोड़ने के लिए:
- अपनी साइट के डैशबोर्ड में CMS पर जाएं। इसके अलावा, आप अपने एडिटर में CMS
पर क्लिक कर सकते हैं, फिर Your Collections पर क्लिक करें। - संबंधित कलेक्शन पर क्लिक करें।
- Manage Fields पर क्लिक करें।
- + Add Field पर क्लिक करें।
- Color चुनें और Choose Field Type पर क्लिक करें।
- Field name फील्ड में एक नाम दर्ज करें।
- (केवल कोडिंग) साइट के कोड में उपयोग किए जाने वाले Field ID को अपडेट करें। आप इस ID को बाद में अपडेट नहीं कर सकते।
- (वैकल्पिक) यदि आप चाहते हैं कि आपके कलेक्शन में फील्ड टाइटल के बगल में एक टूलटिप दिखाई दे, तो Help text दर्ज करें।
- Save पर क्लिक करें।
- संबंधित आइटम के 'Color' फील्ड पर होवर करें और Choose color आइकन
पर क्लिक करें।
टिप: अगर आप कलर चुनने के बजाय HEX नंबर पेस्ट करना चाहते हैं, तो फील्ड पर क्लिक करें और HEX नंबर पेस्ट करें।
- अपनी साइट के थीम कलर्स या अपने सेव किए गए कलर्स में से एक कलर चुनें।
टिप: नया कस्टम कलर जोड़ने के लिए My Colors के बगल में + Add पर क्लिक करें। - अपने कलेक्शन के हर आइटम के लिए स्टेप्स 10-11 दोहराएं।
टिप:
कलेक्शन के हर आइटम के 'Color' फील्ड के लिए डिफॉल्ट कलर सेट करने का तरीका जानें।
टेक्स्ट एलिमेंट्स को 'Color' फील्ड टाइप से कनेक्ट करना
एक बार जब आप अपने कलेक्शन में 'Color' फील्ड जोड़ लेते हैं, तो आप टेक्स्ट एलिमेंट्स को इससे कनेक्ट कर सकते हैं। इससे दिखाए गए आइटम के 'Color' फील्ड के आधार पर टेक्स्ट का कलर बदला जा सकता है।
नोट:
फिलहाल इन टेक्स्ट एलिमेंट्स को 'Color' फील्ड टाइप से कनेक्ट करना संभव नहीं है: Collapsible text, text marquee, या text mask।
Wix एडिटर
स्टूडियो एडिटर
- अपने एडिटर में संबंधित पेज पर जाएं।
- अपने पेज पर एक टेक्स्ट एलिमेंट जोड़ें:
- एडिटर के बाईं ओर Add Elements
पर क्लिक करें।
- Text पर क्लिक करें।
- आप जिस प्रकार का टेक्स्ट जोड़ना चाहते हैं, उस पर क्लिक करें: Themed Text, Titles, या Paragraphs।
- पेज पर जोड़ने के लिए अपने चुने हुए टेक्स्ट को क्लिक करके ड्रैग करें।
- एडिटर के बाईं ओर Add Elements
- टेक्स्ट एलिमेंट पर Connect to CMS आइकन
पर क्लिक करें। - Choose a dataset ड्रॉप-डाउन पर क्लिक करें और एक मौजूदा डेटासेट चुनें जो आपके कलेक्शन से कनेक्ट हो। इसके अलावा, आप Add a New Dataset पर क्लिक करके वह कलेक्शन चुन सकते हैं जिसे आप कनेक्ट करना चाहते हैं।
- Text connects to ड्रॉप-डाउन पर क्लिक करें और वह फील्ड चुनें जिसे आप कनेक्ट करना चाहते हैं।
टिप्स:
- आप टेक्स्ट एलिमेंट्स को इन प्रकार के कलेक्शन फील्ड्स से कनेक्ट कर सकते हैं: Text, number, URL, Boolean, date, date and time, rich text, address, tags, और time।
- अगर आप चाहते हैं कि टेक्स्ट डेटासेट द्वारा प्राप्त आइटम्स की कुल संख्या दिखाए, तो Item Count चुनें।
- Text color connects to ड्रॉप-डाउन पर क्लिक करें और वह 'Color' फील्ड चुनें जिसे आप टेक्स्ट से कनेक्ट करना चाहते हैं।
- अपने कनेक्शन टेस्ट करने के लिए Preview पर क्लिक करें।
- अगर आप बदलावों को लाइव करने के लिए तैयार हैं, तो Publish पर क्लिक करें।
बटन एलिमेंट्स को 'Color' फील्ड टाइप से कनेक्ट करना
बटन कलर्स को सीधे अपने CMS कलेक्शन से मैनेज करने के लिए बटन्स को 'Color' फील्ड्स से कनेक्ट करें। आप खास बटन स्टेट्स (regular, hover, और disabled) को अलग-अलग 'Color' फील्ड्स से कनेक्ट कर सकते हैं। हर बटन स्टेट में, आप चुन सकते हैं कि बटन टेक्स्ट, आइकन, बॉर्डर और बैकग्राउंड के लिए किन 'Color' फील्ड्स का इस्तेमाल करना है।
Wix एडिटर
स्टूडियो एडिटर
- अपने एडिटर के संबंधित पेज पर जाएं।
- उस बटन पर क्लिक करें जिसे आप CMS से कनेक्ट करना चाहते हैं। बटन जोड़ने का तरीका जानें।
- Connect to CMS आइकन पर क्लिक करें।
- Choose a dataset ड्रॉप-डाउन पर क्लिक करें और एक मौजूदा डेटासेट चुनें जो आपके कलेक्शन से कनेक्ट हो। इसके अलावा, Add a Dataset पर क्लिक करें, फिर वह कलेक्शन चुनें जिसे आप कनेक्ट करना चाहते हैं, डेटासेट को एक नाम दें और Create पर क्लिक करें।
- Click action connects to ड्रॉप-डाउन पर क्लिक करें और संबंधित विकल्प चुनें। बटन क्लिक एक्शन को कनेक्ट करने के बारे में और जानें।
- दाईं ओर Connect Button पैनल में Colors तक स्क्रॉल करें।
- यह चुनने के लिए संबंधित टैब पर क्लिक करें कि आप किस बटन स्टेट को कनेक्ट करना चाहते हैं: Regular, Hover, या Disabled
- उन 'Color' फील्ड को चुनने के लिए संबंधित ड्रॉप-डाउन मेनू पर क्लिक करें जिन्हें आप कनेक्ट करना चाहते हैं:
- Text color connects to: टेक्स्ट कैरेक्टर्स के रंग के लिए 'Color' फील्ड कनेक्ट करें।
- Icon color connects to: बटन आइकन के लिए 'Color' फील्ड कनेक्ट करें (यदि आपके बटन में आइकन है)।
- Border color connects to: बॉर्डर के रंग के लिए 'Color' फील्ड कनेक्ट करें।
- Background color connects to: बटन के बैकग्राउंड रंग के लिए 'Color' फील्ड कनेक्ट करें।
- हर उस बटन स्टेट के लिए स्टेप 7-8 दोहराएं जिसे आप 'Color' कलेक्शन फील्ड से कनेक्ट करना चाहते हैं।
- अपने कनेक्शन टेस्ट करने के लिए Preview पर क्लिक करें।
- अगर आप बदलावों को लाइव करने के लिए तैयार हैं, तो Publish पर क्लिक करें।
सेक्शन बैकग्राउंड्स को 'Color' फील्ड टाइप से कनेक्ट करना
किसी सेक्शन के बैकग्राउंड कलर को अपने CMS कलेक्शन के 'Color' फील्ड से कनेक्ट करें। इससे दिखाए गए आइटम और उसके कनेक्टेड 'Color' फील्ड के आधार पर सेक्शन के बैकग्राउंड कलर में डायनेमिक बदलाव किए जा सकते हैं।
Wix एडिटर
स्टूडियो एडिटर
- अपने एडिटर के संबंधित पेज पर जाएं।
- उस सेक्शन को चुनें जिसे आप 'Color' कलेक्शन फील्ड से कनेक्ट करना चाहते हैं।
- Connect to CMS आइकन पर क्लिक करें।
- Choose a dataset ड्रॉप-डाउन पर क्लिक करें और एक मौजूदा डेटासेट चुनें जो आपके कलेक्शन से कनेक्ट हो। इसके अलावा, Add a Dataset पर क्लिक करें, फिर वह कलेक्शन चुनें जिसे आप कनेक्ट करना चाहते हैं, डेटासेट को एक नाम दें और Create पर क्लिक करें।
- Connections के तहत, Section background connects to ड्रॉप-डाउन को Not connected पर सेट रहने दें।
टिप: इसके बजाय, आप ऐसे 'Image' फील्ड टाइप से कनेक्ट कर सकते हैं जिसमें ट्रांसपेरेंट बैकग्राउंड वाली इमेज हों। इससे बैकग्राउंड का रंग इमेज के ट्रांसपेरेंट हिस्सों से दिखाई देगा। - Colors के तहत, Section background color connects to ड्रॉप-डाउन पर क्लिक करें और वह 'Color' फील्ड चुनें जिसे आप कनेक्ट करना चाहते हैं।
- अपने कनेक्शन टेस्ट करने के लिए Preview पर क्लिक करें।
- अगर आप बदलावों को लाइव करने के लिए तैयार हैं, तो Publish पर क्लिक करें।
अक्सर पूछे जाने वाले सवाल (FAQs)
'Color' फील्ड टाइप का उपयोग करने के बारे में सामान्य सवालों के जवाब के लिए नीचे क्लिक करें।
अगर मैं Studio Editor में कलर्स के लिए ब्रेकपॉइंट रूल्स सेट करता हूँ तो क्या होगा?
Studio Editor में रिपीटर पर लागू AB पैटर्न को 'Color' फील्ड कनेक्ट करने से क्या फर्क पड़ता है?
अगर मैंने Studio Editor में CSS कलर रूल्स लागू किए हैं तो क्या होगा?
अगर मैं CMS कलेक्शन में 'Color' फील्ड का रंग बदलता हूँ तो क्या होगा?
अगर मैं किसी एलिमेंट को 'Color' फ़ील्ड से डिस्कनेक्ट करना चाहूँ तो क्या होगा?
क्या मैं यह अनिवार्य कर सकता हूँ कि मेरे कलेक्शन के हर आइटम के लिए 'Color' फील्ड सेट किया जाए?
क्या मैं अपने 'Color' फील्ड टाइप में कोई डिफॉल्ट कलर जोड़ सकता हूँ?
क्या मैं Studio Editor में एलिमेंट्स की CSS स्टाइलिंग को CMS कलेक्शन्स से कनेक्ट कर सकता हूँ?