सेटिंग्स पैनल परिचय

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

यहां वर्णित हर चीज के नीचे दो सिस्टम चलते हैंः शर्तों किसी भी नियंत्रण को किसी अन्य फ़ील्ड के मूल्य के आधार पर दिखाने या छिपाने दें, और ट्विग-सिंटैक्स टेम्पलेट इंजन आपके फ़ील्ड नामों को टोकन में बदल देता है, {% if %} जाँच करता है, और {% for %} एचटीएमएल, सीएसएस, और जेएस टैब में लूप दोनों गाइड सेटअप और सीमाओं को कवर करते हैं।

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

विजेट बिल्डर क्या करता है #

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

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

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

• वर्डप्रेस के साथ तत्व पेज बिल्डर स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया है का पालन करें स्थापना गाइड पहले।
• बुनियादी एचटीएमएल और सीएसएस जावास्क्रिप्ट वैकल्पिक है और केवल इंटरैक्टिव विजेट के लिए आवश्यक है।

विजेट बिल्डर खोलें और एक नया विजेट जोड़ें #

वर्डप्रेस डैशबोर्ड से, पर जाएं मास्टर ऐडऑन → विजेट बिल्डर. यह खुलता है मास्टर ऐडऑन विजेट स्क्रीन, जो आपके द्वारा बनाए गए प्रत्येक कस्टम विजेट को उसकी श्रेणी, लेखक और जेनरेट किए गए शॉर्टकोड के साथ सूचीबद्ध करता है शीर्ष पर आपको तीन बटन दिखाई देंगेः नया विजेट जोड़ें, विजेट आयात करें, और वीडियो ट्यूटोरियल.

क्लिक करें नया विजेट जोड़ें. ए नया विजेट बनाएं संवाद दो क्षेत्रों के साथ प्रकट होता हैः

• विजेट शीर्षक (आवश्यक): आपके विजेट के लिए एक वर्णनात्मक नाम, उदाहरण के लिए “हीरो सेक्शन” यह वही है जिसे आप बाद में एलिमेंटर पैनल में खोजेंगे, इसलिए इसे कुछ ऐसा बनाएं जिसे आप पहचान लेंगे।
• विजेट श्रेणीः एलिमेंटर श्रेणी विजेट के अंतर्गत समूहीकृत है (डिफ़ॉल्ट रूप से पसंदीदा) श्रेणियाँ आपके कस्टम विजेट को संपादक में व्यवस्थित रखती हैं।

एक शीर्षक दर्ज करें, एक श्रेणी चुनें और क्लिक करें परिवर्तन सहेजें। मास्टर ऐडऑन आपके नए विजेट के लिए विजेट बिल्डर संपादक खोलता है।

विजेट बिल्डर इंटरफ़ेस के अंदर #

बिल्डर को तीन कार्य क्षेत्रों में विभाजित किया गया है, बाएं से दाएंः

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

शीर्ष बार विजेट नाम को उसके बगल में एक सेटिंग्स गियर आइकन के साथ रखता है, साथ ही पूर्वावलोकन और सेटिंग्स सहेजें बटन।

विकल्प पैनल बनाएं: सामग्री, शैली और उन्नत टैब #

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

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

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

गतिशील शॉर्टकोड: फ़ील्ड को अपने कोड से कनेक्ट करें #

यह वह हिस्सा है जो सब कुछ एक साथ जोड़ता है आपके द्वारा जोड़े गए प्रत्येक क्षेत्र एक उत्पन्न करता है शॉर्टकोड टोकन, और वे टोकन इसमें दिखाई देते हैं प्रलेखन कोड संपादक के बगल में साइडबार एक रंग फ़ील्ड जोड़ें और आपको मिलता है {{color}}एक आयाम क्षेत्र जोड़ें और आप प्राप्त करते हैं {{dimensions}}.

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

अपना HTML, CSS और JS जोड़ें #

पैनल और शॉर्टकोड तैयार होने के साथ, दाईं ओर कोड टैब पर स्विच करें और अपना मार्कअप, स्टाइल और स्क्रिप्ट पेस्ट करें।

एचटीएमएल टैबः विजेट संरचना लिखें और शॉर्टकोड टोकन रखें जहां गतिशील मान हैं।

सीएसएस टैबः मार्कअप को स्टाइल करें पैनल में चुने गए रंगों और आयामों को खींचने के लिए एक ही शॉर्टकोड टोकन का संदर्भ लें।

जेएस टैब: किसी भी इंटरैक्टिव व्यवहार के लिए जावास्क्रिप्ट जोड़ें, जैसे होवर प्रभाव या स्लाइडर सादा वेनिला जेएस काम करता है, और एक बार जब आप इसे लोड करते हैं तो जेक्वेरी भी ऐसा ही करता है, जिसमें शामिल हैं।

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

इसमें शामिल हैं: सीडीएन सीएसएस और जेएस लाइब्रेरी लोड करें #

को खोलें शामिल बाहरी पुस्तकालयों को संलग्न करने के लिए टैब आपका विजेट निर्भर करता है दो सूचियां हैंः सीएसएस पुस्तकालय और जेएस पुस्तकालयप्रत्येक के लिए आप एक जोड़ें हैंडल (एक अनोखा नाम) और ए स्रोत यूआरएल या पंजीकृत हैंडलू ी, फिर क्लिक करें सीएसएस जोड़ें या जेएस जोड़ें.

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

विजेट के अंदर आइकन चाहिए? मास्टर ऐडऑन आठ बंडल भी भेजते हैं आइकन पुस्तकालय आप बाहरी सीडीएन कॉल के बिना उपयोग कर सकते हैं।

विजेट सेटिंग्स: शीर्षक, आइकन, श्रेणी और निर्यात #

क्लिक करें गियर आइकन खोलने के लिए शीर्ष पट्टी में विजेट नाम के बगल में विजेट सेटिंग्स बाएं पैनल में यहां से आप नियंत्रित करते हैं कि विजेट एलिमेंटर के अंदर खुद को कैसे प्रस्तुत करता हैः

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

आइकन पिकर हजारों आइकन को श्रेणियों में समूहित करता है जैसे कि सभी आइकन, एलिमेंटर आइकन, सरल रेखा आइकन, प्रतिष्ठित फ़ॉन्ट आइकन, रैखिक आइकन और सामग्री आइकन नाम से फ़िल्टर करें, एक का चयन करें, और क्लिक करें सम्मिलित करें.

JSON फ़ाइल से विजेट आयात करें #

साझा करना दोनों तरह से काम करता है। पर वापस मास्टर ऐडऑन विजेट स्क्रीन, पर क्लिक करें विजेट आयात करें बटन। संवाद आपको खींचने और छोड़ने देता है .json फ़ाइल, या इसके लिए ब्राउज़ करें। केवल .json विजेट बिल्डर से निर्यात की गई फ़ाइलें समर्थित हैं।

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

विश्वसनीय कस्टम विजेट बनाने के लिए युक्तियाँ #

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

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

लपेटकर #

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