दृश्य विकल्प

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

विज़ुअल चॉइस विकल्प मान सीधे प्लग इन करें शर्तों, अन्य नियंत्रणों को चुने गए लेआउट का अनुसरण करने देना, और में ट्विग-सिंटैक्स टेम्पलेट इंजन, कहाँ {% if style == "grid" %} मैच के लिए मार्कअप स्विच करता है दोनों गाइड विवरण को कवर करते हैं।

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

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

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

यदि आप विजेट बनाने में नए हैं, तो शुरुआत करें विजेट बिल्डर अवलोकन पहले।

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण दो लेआउट वेरिएंट, एक ३-कॉलम ग्रिड और एक स्टैक्ड सूची के साथ एक टीम के सदस्यों का विजेट है, जिसे थंबनेल कार्ड के माध्यम से चुना गया है।

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

ढूंढना दृश्य विकल्प विजेट बिल्डर संपादक के बाईं ओर फ़ील्ड पैनल में, अन्य पसंदीदा फ़ील्ड के साथ समूहीकृत किया गया।

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

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

• लेबलः एलिमेंटर में कार्ड के ऊपर दिखाया गया पाठ, उदाहरण के लिए “LAyout”।
• नाम: उदाहरण के लिए, केवल फ़ील्ड, अक्षरों, संख्याओं और अंडरस्कोर के लिए विशिष्ट पहचानकर्ता team_layout.
• विकल्प: प्रत्येक विकल्प एक कुंजी प्लस एक शीर्षक और एक छवि है छवि क्लिक करने योग्य कार्ड बन जाती है; शीर्षक इसे लेबल करता है कुंजी कम रहती है और सीएसएस-सुरक्षितः grid, list.
• कॉलम: पैनल में प्रति पंक्ति कितने कार्ड बैठते हैं, डिफ़ॉल्ट रूप से ३ दो बड़े कार्ड २ कॉलम के रूप में बेहतर पढ़ते हैं।
• उपसर्ग वर्ग: एक क्लास स्टेम एलिमेंटर चयनित कुंजी को जोड़ता है और विजेट रैपर पर रखता है। साथ team-layout- और कुंजी grid, रैपर वहन करता है team-layout-grid.
• डिफ़ॉल्टः विजेट के पहली बार किसी पृष्ठ पर गिरने पर चुनी गई कुंजी।
• विवरण, लेबल दिखाएँ, विभाजकः मानक प्रदर्शन सेटिंग्स, साथ ही फ़ील्ड दिखाने की शर्तें केवल तभी जब किसी अन्य नियंत्रण का एक निश्चित मान हो।

विज़ुअल चॉइस को अपने विजेट से कनेक्ट करें #

दो तारों की शैली प्रति क्षेत्र एक उठाओ।

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

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

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

{% if team_layout == 'list' %}
  <ul class="team-list"> ... </ul>
{% else %}
  <div class="team-grid"> ... </div>
{% endif %}

शैली बी: उपसर्ग वर्ग। उपसर्ग वर्ग विकल्प भरें, कहते हैं team-layout-ू ी है, और एलिमेंट लिखता है team-layout-grid या team-layout-list विजेट के रैपर पर जैसे ही उपयोगकर्ता कार्ड क्लिक करता है आपका सीएसएस तब संयुक्त वर्ग को लक्षित करता हैः

.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }

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

एक क्षेत्र पर दो शैलियों को मिलाने के लिए बाहर देखो एक टेम्पलेट सशर्त जो मानता है grid जबकि उपसर्ग वर्ग एक साथ सेट होता है team-layout-list सत्य के दो स्रोत हैं, और वे बहाव करेंगे, आमतौर पर महीनों बाद जब कोई एक तरफ संपादित करता है और दूसरे को भूल जाता है मौजूद है तय करें कि यह क्षेत्र टेम्पलेट के माध्यम से बोलता है या रैपर वर्ग के माध्यम से, फिर उस पर चिपकाएं।

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

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

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

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

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

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

• विकल्प छवियों के रूप में वास्तविक स्क्रीनशॉट का उपयोग करें। प्रत्येक संस्करण का एक छोटा सा रेंडर एक अमूर्त आइकन को मात देता है; कार्ड दस्तावेज़ीकरण है।
• प्रति फ़ील्ड एक वायरिंग शैली चुनें। टेम्पलेट पैटर्न या उपसर्ग वर्ग, दोनों नहीं, या दोनों अंततः असहमत होंगे।
• कुंजी कक्षा के नाम में जाती है, इसलिए उन्हें स्लग रखें। grid और list“ग्रिड लेआउट” नहीं।
• उपसर्ग को विभाजक के साथ समाप्त करें। team-layout- प्लस grid के रूप में पढ़ता है team-layout-grid; आपको हाइफ़न के बिना मिलता है team-layoutgrid.
• अपने कार्ड की गिनती के लिए कॉलम का मिलान करें। 3 स्तंभों में दो विकल्प एक अंतर छोड़ते हैं; कॉलम को 2 पर सेट करें और पंक्ति भर जाए।
• इसे दृश्य अंतर के लिए आरक्षित करें। यदि विकल्प उपस्थिति के बजाय व्यवहार में भिन्न हैं, तो स्पष्ट लेबल वाला चयन संपादकों को बेहतर सेवा प्रदान करता है।

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

लपेटकर #

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