चुनना

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

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

चुनें फ़ील्ड क्या करता है #

• एलिमेंटर में आपके विजेट के पैनल में आइकन बटन की एक पंक्ति जोड़ता है, प्रति विकल्प एक बटन।
• जब कोई संपादक बटन घुमाता है तो प्रत्येक विकल्प का शीर्षक टूलटिप के रूप में दिखाता है।
• को बचाता है कुंजी चुने गए विकल्प का, जैसे centerं, इसका शीर्षक नहीं।
• आप जहां भी उस कुंजी का टोकन रखते हैं, उसे प्रिंट कर लेते हैं, जैसे {{ align }}। सामान्य दृष्टिकोण इसे सीएसएस वर्ग में बदलना है।

बिल्डर के लिए नया? पढ़ें विजेट बिल्डर अवलोकन सबसे पहले, फिर एक विजेट खुला के साथ वापस आओ।

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

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

फ़ील्ड चुनें कैसे जोड़ें #

1. को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
2. पर एक अनुभाग जोड़ें सामग्री टैब, उदाहरण के लिए “Callout”। स्टाइल टैब पर लेआउट विकल्प भी अच्छी तरह फिट बैठते हैं।
3. प्रकार choose बाईं ओर फ़ील्ड खोज बॉक्स में।
4. खींचना चुनना अनुभाग में इसकी सेटिंग्स खोलने के लिए मैदान पर पेंसिल पर क्लिक करें।

एक नया चुनें फ़ील्ड खाली नहीं है यह तीन संरेखण विकल्पों (बाएं, केंद्र और दाएं) और केंद्र के साथ डिफ़ॉल्ट के रूप में आता है, इसलिए एक साधारण संरेखण नियंत्रण के लिए आपको केवल लेबल और नाम बदलने की आवश्यकता है।

समझाए गए फ़ील्ड विकल्प चुनें #

• लेबलः एलिमेंटर में बटन के बगल में पाठ, उदाहरण के लिए “Icon POSITION”।
• नाम: क्षेत्र की विशिष्ट आईडी और इसके टोकन का नाम उदाहरण के लिए, केवल अक्षरों, संख्याओं और अंडरस्कोर का उपयोग करें icon_position.
• विवरण: एलिमेंट में बटन के नीचे दिखाया गया एक संकेत।
• अनसेट: संपादकों को विकल्प को साफ़ करने के लिए फिर से सक्रिय बटन पर क्लिक करने देता है नीचे दिए गए नोट को देखें इससे पहले कि आप इस पर भरोसा करें।
• विकल्प: प्रति बटन एक पंक्ति। कुंजी क्या आपके टेम्पलेट को मूल्य मिलता है, शीर्षक टूलटिप है, और चिह्न आइकन पिकर खोलता है एक पंक्ति को हटाने के लिए लाल क्रॉस का उपयोग करें और एक जोड़ने के लिए प्लस बटन का उपयोग करें।
• डिफ़ॉल्ट मानः विकल्प विजेट की एक नई प्रतिलिपि के साथ शुरू होता है ड्रॉपडाउन शीर्षक दिखाता है, लेकिन फ़ील्ड कुंजी को संग्रहीत करता है।

सामान्य सेटिंग्स के अंतर्गत आप पाएंगे लेबल दिखाएँ, लेबल ब्लॉक, विभाजक और शर्तों, जो अन्य क्षेत्रों की तरह ही काम करते हैं।

एलिमेंटर में दिखाई देने वाले आइकन चुनें #

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

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

कुंजी, शीर्षक और अनसेट #

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

अपने टेम्पलेट में विकल्प का उपयोग करें #

टोकन कुंजी प्रिंट करता है, इसलिए सबसे साफ सेटअप एक संशोधक वर्ग है यह कॉलआउट बॉक्स एचटीएमएल हैः

<div class="callout{% if align %} callout--{{ align }}{% endif %}{% if icon_position %} callout--icon-{{ icon_position }}{% endif %}">
  {% if icon_position %}<span class="callout-icon">!</span>{% endif %}
  <div class="callout-body">
    <p class="callout-title">{{ callout_title }}</p>
    <p class="callout-text">{{ callout_text }}</p>
  </div>
</div>

प्रत्येक {% if %} जब मान खाली होता है तो क्लास छोड़ देता है आइकन स्थिति के लिए, एक खाली मान आइकन को भी छुपाता है, यही कारण है कि उस फ़ील्ड पर अनसेट है सीएसएस पैनल तब प्रत्येक वर्ग को स्टाइल करता हैः

.callout--left { text-align: left; }
.callout--center { text-align: center; }
.callout--right { text-align: right; }
.callout--icon-top .callout-icon { margin-bottom: 14px; }
.callout--icon-left { display: flex; gap: 18px; align-items: flex-start; }

आप सीधे मूल्य की तुलना भी कर सकते हैं, उदाहरण के लिए {% if icon_position == 'left' %}कुंजी के खिलाफ तुलना करें, शीर्षक कभी नहीं।

चयनकर्ता और उत्तरदायी नियंत्रण को बंद छोड़ दें #

• चयनकर्ता: इस क्षेत्र के लिए यह लिखता है color: {{VALUE}};। हमारे परीक्षणों में, का एक चयनकर्ता .callout-title उत्पादित color:center;िकसी ब्राउजर अनदेखा करते हैं कुछ अन्य क्षेत्रों के विपरीत, चुनें में कोई सीएसएस चयनक पंक्तियां नहीं हैं जहां आप अपनी संपत्ति लिख सकते हैं ऊपर दिखाए गए अनुसार कक्षाओं का उपयोग करें।
• उत्तरदायी नियंत्रणः डिवाइस आइकन जोड़ता है ताकि संपादक टैबलेट और मोबाइल पर एक अलग विकल्प चुन सकें, लेकिन टोकन केवल डेस्कटॉप विकल्प प्रिंट करता है प्रति-डिवाइस पिक्स कभी भी आपके टेम्पलेट तक नहीं पहुंचते हैं।

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

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

यहां विभिन्न विकल्पों के साथ एक ही कॉलआउट हैः

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

• शीर्षकों, उद्धरणों और कार्डों के लिए पाठ संरेखण।
• छवि या आइकन स्थिति: ऊपर, बाएँ या दाएँ।
• लेआउट दिशा, जैसे पंक्ति या स्तंभ।
• छोटे दृश्य संस्करण, जैसे हल्की या गहरी शैली, जब प्रत्येक में एक स्पष्ट आइकन होता है।

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

• इसे चार या उससे कम विकल्पों पर रखें। लंबी सूचियों के लिए, का उपयोग करें फ़ील्ड चुनें.
• हमेशा एक खाली मान संभालें। कक्षाएं और मार्कअप लपेटें {% if %}, और आधार वर्ग समझदार डिफ़ॉल्ट शैलियों दे।
• स्पष्ट शीर्षक लिखें। टूलटिप एकमात्र टेक्स्ट संपादक है जो प्रत्येक बटन के लिए देखता है।
• केवल एलिमेंटर आइकन का उपयोग करें, इसलिए प्रत्येक बटन में एक दृश्यमान आइकन होता है।
• संपादकों द्वारा विजेट का उपयोग करने से पहले कुंजियाँ तय करें। शीर्षक और आइकन बाद में बदल सकते हैं, कुंजी नहीं।

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

लपेटकर #

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