रंग क्षेत्र

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

प्रत्येक विजेट बिल्डर फ़ील्ड की तरह, रंग फ़ील्ड समर्थन करता है शर्तों पैनल दृश्यता के लिए। इसका टोकन किसके द्वारा प्रस्तुत किया गया है ट्विग-सिंटैक्स टेम्पलेट इंजन, जो आपको अपने सीएसएस में कहीं भी चुने हुए रंग को प्रिंट करने देता है दोनों गाइड सेटअप और सीमाओं को कवर करते हैं।

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

रंग फ़ील्ड क्या करता है #

रंग क्षेत्र आपके विजेट के विकल्प पैनल में एलिमेंट के मूल रंग पिकर को प्रस्तुत करता है संपादक स्वैच पर क्लिक करते हैं, एक रंग चुनते हैं (या थीम से एक वैश्विक रंग), और आपका विजेट आउटपुट जो कि आप जहां भी मिलान शॉर्टकोड रखते हैं, वहां मूल्य का अधिकांश समय मतलब है कि सीएसएस संपत्ति की तरह color, background, या border-color.

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

इससे पहले कि आप शुरू करें #

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• विजेट बिल्डर संपादक में एक कस्टम विजेट खुला है पहला वाला? से शुरू करें विजेट बिल्डर अवलोकन.

रंग फ़ील्ड कैसे जोड़ें #

विजेट बिल्डर संपादक में, बाईं ओर फ़ील्ड पैनल ढूंढें और खींचें रंग एक अनुभाग में फ़ील्ड करें चूंकि रंग एक स्टाइलिंग विकल्प है, इसलिए शैली टैब प्राकृतिक घर है, लेकिन सामग्री और उन्नत टैब इसे वैसे ही स्वीकार करते हैं एक बार फ़ील्ड स्थापित हो जाने के बाद, इसके विकल्प बाईं ओर खुल जाते हैं और इसका शॉर्टकोड दिखाई देता है प्रलेखन कोड संपादक के बगल में साइडबार।

रंग क्षेत्र विकल्पों को समझाया गया #

अपनी सेटिंग्स खोलने के लिए रंग फ़ील्ड का चयन करें अधिकांश विकल्प अन्य फ़ील्ड से मेल खाते हैं, साथ ही एक जो रंग के लिए विशिष्ट है।

• लेबलः एलिमेंट में पिकर के ऊपर दिखाया गया पाठ, उदाहरण के लिए “Text Color”।
• नाम: क्षेत्र के लिए विशिष्ट पहचानकर्ता पत्र, संख्याएं, और केवल अंडरस्कोर यह आपका शॉर्टकोड बन जाता है, इसलिए एक क्षेत्र का नाम दिया गया color तुम्हें देता है {{color}}.
• विवरण: नियंत्रण के नीचे वैकल्पिक सहायक पाठ दिखाया गया है।
• अल्फ़ा: पिकर में पारदर्शिता की अनुमति देने के लिए इसे चालू करें इसे बंद करने के साथ, संपादक केवल ठोस रंग चुन सकते हैं इसे सक्षम करें जब आपको आरजीबीए मूल्यों की आवश्यकता होती है, जैसे अर्ध-पारदर्शी ओवरले।
• डिफ़ॉल्ट मानः हेक्स मान के रूप में प्रारंभिक रंग, जैसे #FFFFFF। इसे इस प्रकार सेट करें कि किसी के छूने से पहले विजेट समाप्त हो जाए।

सामान्य सेटिंग्स: उत्तरदायी, गतिशील, और अधिक #

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

फ़ील्ड को अपने कोड से कनेक्ट करें #

एक रंग क्षेत्र नामित color टोकन का उत्पादन करता है {{color}} प्रलेखन साइडबार में इसे किसी भी रंग संपत्ति के मूल्य के रूप में अपने सीएसएस में छोड़ दें उदाहरण के लिए, नायक पाठ को रंगने के लिएः

सीएसएस संपादक में आप कुछ इस तरह लिखेंगे .hero-content { color: {{color}}; }। जब संपादक एलिमेंटर में एक रंग चुनता है, तो मास्टर एडॉन्स उस मान के लिए टोकन को स्वैप करता है और टेक्स्ट रिकॉल लाइव होता है। वही टोकन काम करता है background, border-colorया कुछ भी जो एक रंग लेता है, और आप इसे कई नियमों में पुन: उपयोग कर सकते हैं जैसा कि आपको चाहिए एक बात देखने के लिए: टोकन को पूरे मूल्य के रूप में रखें, इसलिए color: {{color}};, उद्धरणों में लपेटा नहीं गया है, अन्यथा सीएसएस लागू नहीं होगा।

एलिमेंटर में रंग नियंत्रण का उपयोग करें #

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

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

सामान्य उपयोग के मामले #

• पाठ रंग शीर्षकों और अनुच्छेदों के लिए।
• पृष्ठभूमि रंग अनुभागों, कार्डों और बटनों के लिए।
• सीमा और उच्चारण रंग एक ब्रांड पैलेट से बंधा हुआ।
• ओवरले टिंट्स पारदर्शिता के लिए अल्फा चैनल का उपयोग करना।
• होवर राज्यों जब दूसरे रंग फ़ील्ड के साथ जोड़ा जाता है।

रंग क्षेत्र के साथ काम करने के लिए युक्तियाँ #

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

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

विजेट बिल्डर रंग फ़ील्ड आपके स्वयं के कस्टम विजेट के अंदर एक संपादन योग्य पिकर में एक हार्ड-कोडित रंग को बदल देता है इसे नाम दें, चुनें कि अल्फा की अनुमति है या नहीं, एक डिफ़ॉल्ट सेट करें, और तार {{color}} अपने सीएसएस में उसके बाद, कोई भी एलिमेंटर से विजेट को फिर से रंग सकता है, वैश्विक रंगों और टैप पर पारदर्शिता के साथ बाकी पर एक नज़र है मास्टर ऐडऑन विजेट और एक्सटेंशन, और जाँच करें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।