चयन करें

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

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

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

• एलिमेंटर में आपके विजेट के पैनल में एक मानक ड्रॉपडाउन जोड़ता है।
• संपादक को आपके द्वारा परिभाषित सूची में से एक विकल्प चुनने देता है।
• विकल्प को सहेजता है कुंजी (उदाहरण के लिए outlined), वह लेबल नहीं जो संपादक देखता है।
• आप जहां भी उस कुंजी का टोकन रखते हैं, उसे प्रिंट कर लेते हैं, जैसे {{ layout_style }}ू ी है, तो आप इसे एक कक्षा के रूप में उपयोग कर सकते हैं या इसके साथ जांच सकते हैं {% if %}.

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

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

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

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

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

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

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

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

एक नया चयन फ़ील्ड तीन नमूना पंक्तियों के साथ आता है। [+] value-1 को value-3 लेबल विकल्प 1 से विकल्प 3 के साथ। विजेट का उपयोग करने से पहले उन्हें अपनी कुंजियों और लेबलों से बदलें।

चाबियाँ छोटी, छोटी और बिना रिक्त स्थान के रखें, जैसे boxed या most_popularवे वर्ग के नाम और तुलना में समाप्त होते हैं यदि आप डिफ़ॉल्ट मान खाली छोड़ देते हैं, तो विजेट सूची में पहले विकल्प पर शुरू होता है।

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

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

प्लान कार्ड एचटीएमएल दो सबसे सामान्य तरीकों से दोनों चयन फ़ील्ड का उपयोग करता हैः

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

संशोधक वर्ग #

plan--{{ layout_style }} बन जाता है plan--boxed, plan--minimal या plan--outlinedप्रत्येक संस्करण तो सीएसएस पैनल में एक छोटा नियम है, और एचटीएमएल एक ही रहता हैः

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

प्रति विकल्प अलग मार्कअप #

जब किसी विकल्प को भिन्न HTML की आवश्यकता होती है, तो कुंजी की तुलना करें {% if %}. {% elseif %} और {% else %} काम भी। उदाहरण में, none न तो चेक से मेल खाता है, इसलिए कोई बैज मुद्रित नहीं होता है।

हमेशा कुंजी के खिलाफ तुलना करें। {% if badge == 'popular' %} मैच, जबकि {% if badge == 'Most Popular' %} कभी नहीं करता है और कोई त्रुटि नहीं देता है यदि कोई चेक कभी भी आग नहीं लगाता है, तो पहले कुंजी की वर्तनी देखें।

चयनकर्ता और उत्तरदायी नियंत्रण #

• चयनकर्ता हमेशा लिखता है color: {{VALUE}}; इस क्षेत्र के लिए, और संपत्ति को बदलने के लिए कोई बॉक्स नहीं है जैसे कुंजी के साथ boxed नियम कुछ भी नहीं करता है यह केवल तब मदद करता है जब आपकी चाबियाँ रंग हैं: हमारे परीक्षणों में, चाबियाँ जैसे #7c3aed और #0ea5e9 के चयनकर्ता के साथ .plan-price कीमत को रंग दिया कुछ और के लिए, चयनकर्ता को खाली छोड़ दें और कक्षाओं का उपयोग करें।
• उत्तरदायी नियंत्रण संपादकों को प्रति डिवाइस एक अलग विकल्प चुनने देता है प्रति डिवाइस उन पिक्स केवल ऊपर चयनकर्ता नियम के माध्यम से पृष्ठ तक पहुंचते हैं टोकन डेस्कटॉप पसंद को प्रिंट करता है, इसलिए जब आप अपने टेम्पलेट में मूल्य का उपयोग करते हैं तो उत्तरदायी नियंत्रण छोड़ दें।

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

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

यहां लेआउट स्टाइल और बैज के तीन संयोजनों के साथ एक ही प्लान कार्ड हैः

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

• कार्ड, बटन या अनुभाग शैली वेरिएंट।
• बैज या रिबन जैसे बिक्री, नया या सर्वाधिक लोकप्रिय।
• शीर्षक टैग, छवि अनुपात या कॉलम गिनती विकल्प।
• सूची विजेट के लिए क्रम या डेटा स्रोत क्रमबद्ध करें।

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

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

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

लपेटकर #

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