दृश्य विकल्प

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

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

विज़ुअल चॉइस फ़ील्ड क्या करता है #

• यह एलिमेंट पैनल में छवि कार्ड के रूप में आपके विकल्प दिखाता है चयनित कार्ड को हाइलाइट मिलता है।
• प्रत्येक विकल्प में एक कुंजी, एक शीर्षक और एक छवि है शीर्षक का उपयोग कार्ड के टूलटिप और ऑल्ट टेक्स्ट के रूप में किया जाता है।
• आपका टेम्पलेट चयनित कुंजी प्राप्त करता है, जैसे grid या list, जिसे आप किसी कक्षा के नाम या ए में उपयोग कर सकते हैं {% if %} चेक।
• कॉलम सेटिंग नियंत्रित करती है कि पैनल की एक पंक्ति में कितने कार्ड बैठते हैं।

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

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

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर और मास्टर एडॉन्स प्रो के लिए मास्टर एडॉन्स, दोनों सक्रिय हैं स्थापना गाइड सेटअप को कवर करता है।
• प्रत्येक विकल्प के लिए एक छोटी छवि सरल रेखा चित्र लगभग २४० से १६० पिक्सेल, एक पारदर्शी पृष्ठभूमि के साथ पीएनजी के रूप में सहेजे गए, एलिमेंट के अंधेरे पैनल पर साफ दिखते हैं।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण तीन लेआउट के साथ एक “टीम शोकेस” विजेट है: ग्रिड, सूची और स्पॉटलाइट।

विज़ुअल चॉइस फ़ील्ड कैसे जोड़ें #

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

दृश्य विकल्प फ़ील्ड विकल्पों की व्याख्या की गई #

• लेबल एलिमेंटर में कार्ड के ऊपर का पाठ है, उदाहरण के लिए “LAyout”।
• नाम क्षेत्र की विशिष्ट आईडी और उसका टेम्पलेट टोकन है, इसलिए team_layout बन जाता है {{team_layout}}। केवल अक्षर, संख्याएँ और अंडरस्कोर।
• विवरण एलिमेंटर में कार्ड के नीचे दिखाई देता है।
• विकल्प प्रति कार्ड एक पंक्ति रखता है। कुंजी क्या आपके टेम्पलेट को मिलने वाला मूल्य है (इसे छोटा और छोटा रखें, जैसे grid). शीर्षक कार्ड के नाम बताएं। क्लिक करें छवि छवि चुनें विंडो खोलने, फ़ाइल अपलोड करने या मीडिया लाइब्रेरी से एक फ़ाइल चुनने के लिए बॉक्स करें, फिर क्लिक करें इस छवि का उपयोग करें। प्लस आइकन एक पंक्ति जोड़ता है और लाल क्रॉस एक को हटा देता है।
• कॉलम सेट करता है कि कितने कार्ड एक पंक्ति में फिट होते हैं, १ से ६ तक संख्या टाइप करें भले ही बॉक्स पहले से ही २ दिखाता है दिखाया गया नंबर तब तक सहेजा नहीं जाता है जब तक आप इसे बदलते हैं, और सहेजे गए मूल्य के बिना एलिमेंट प्रत्येक पंक्ति में एक कार्ड डालता है।
• टॉगल पैनल में सूचीबद्ध है, लेकिन हमारे परीक्षणों में इससे कोई फर्क नहीं पड़ा संपादक इसे साफ़ करने के लिए हमेशा चयनित कार्ड पर दोबारा क्लिक कर सकते हैं।

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

क्लिक करें सेटिंग्स सहेजें आप विकल्पों को जोड़ने के बाद।

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

{{team_layout}} चयनित कार्ड की कुंजी प्रिंट करता है इसका उपयोग करने का सबसे सरल तरीका एक संशोधक वर्ग हैः

<div class="ts-team ts-team--{{team_layout}}">
  ...
</div>

ग्रिड चयनित होने पर, वह प्रस्तुत होता है ts-team--grid। जब किसी लेआउट को अलग मार्कअप की आवश्यकता होती है, तो कुंजी की जांच करें {% if %}उदाहरण केवल सूची लेआउट में एक छोटा जैव दिखाता हैः

{% if team_layout == 'list' %}
  <p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}

फिर प्रति कुंजी सीएसएस नियमों का एक सेट लिखेंः

.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }

जब तक कोई संपादक कार्ड पर क्लिक नहीं करता, टोकन कुछ भी प्रिंट नहीं करता है, और उपरोक्त वर्ग बन जाता है ts-team--. आधार दो .ts-team एक लेआउट को क्लास करें जो अपने आप ठीक दिखता है, इसलिए विजेट कभी भी चुनाव करने से पहले टूटा हुआ नहीं दिखता है।

एलिमेंटर में विज़ुअल चॉइस नियंत्रण का उपयोग करें #

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

सूची पर क्लिक करने से टीम पंक्तियों में बदल जाती है, और {% if %} ब्लॉक बायोस जोड़ता हैः

स्पॉटलाइट पहले सदस्य को बड़ा बनाता हैः

चयन को साफ़ करने के लिए चयनित कार्ड पर फिर से क्लिक करें टेम्पलेट फिर एक खाली कुंजी प्राप्त करता है, जैसा कि ऊपर वर्णित है।

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

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

दृश्य विकल्प क्षेत्र के साथ काम करने के लिए युक्तियाँ #

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

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

लपेटकर #

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