स्लाइडर

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

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

स्लाइडर फ़ील्ड क्या करता है #

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

यदि आपने अभी तक विजेट नहीं बनाया है, तो पढ़ें विजेट बिल्डर अवलोकन पहले।

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

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

स्लाइडर फ़ील्ड कैसे जोड़ें #

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

स्लाइडर फ़ील्ड विकल्पों की व्याख्या की गई #

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

न्यूनतम, अधिकतम और चरण मान टाइप करें भले ही बॉक्स पहले से ही ०, १०० और १ दिखाते हों जिन बॉक्स को आप कभी नहीं छूते हैं, वे सहेजे नहीं जाते हैं, और उनमें से कोई भी सहेजा गया स्लाइडर एलिमेंटर की सीमाओं पर वापस आता है: ० से १००० पीएक्स के लिए, ० से १००% के लिए, और ० से १० ईएम और रेम के लिए जब आप उन्हें सेट करते हैं, तो प्रत्येक इकाई के लिए एक ही सीमा का उपयोग किया जाता है, इसलिए ० से ८० ईएम के साथ-साथ पीएक्स पर भी लागू होता है।

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

स्लाइडर को सीएसएस चयनकर्ताओं से कनेक्ट करें #

को स्क्रॉल सीएसएस चयनकर्ताओं और क्लिक करें आइटम जोड़ें। नई पंक्ति एक उदाहरण से भरी हुई आती है (.text-1, .text-2 और color: {{VALUE}};), इसलिए दोनों बक्सों को बदलें:

CSS Selector:   .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};

{{SIZE}} संख्या से बदल दिया जाता है और {{UNIT}} चुनी गई इकाई के साथ, तो 24 px बन जाता है gap: 24px;. आपको जरूरत नहीं है {{WRAPPER}} चयनकर्ता में क्योंकि बिल्डर आपके लिए इसे जोड़ता है अन्य तत्वों पर समान मान का उपयोग करने के लिए अधिक पंक्तियां जोड़ें।

एकल के बजाय इन पंक्तियों का उपयोग करें चयनकर्ता साइडबार के नीचे बॉक्स उस बॉक्स में सीएसएस संपत्ति के लिए कोई जगह नहीं है, इसलिए यह स्लाइडर के लिए एक कामकाजी नियम नहीं लिख सकता है।

इसके बजाय अपने टेम्पलेट में मान का उपयोग करें #

आप एचटीएमएल या सीएसएस टैब में मूल्य भी प्रिंट कर सकते हैं आकार और इकाई को एक दूसरे के बगल में दो टोकन के रूप में लिखें अवतार आकार स्लाइडर अवतार चौड़ाई और ऊंचाई इस तरह सेट करता हैः

.team-avatar {
  width: {{ avatar_size.size }}{{ avatar_size.unit }};
  height: {{ avatar_size.size }}{{ avatar_size.unit }};
}

एक नंगे {{ avatar_size }} कुछ भी प्रिंट नहीं करता है आप एक स्थिति में संख्या की तुलना भी कर सकते हैं, उदाहरण के लिए {% if card_gap.size >= 40 %}। जब रिस्पॉन्सिव कंट्रोल चालू हो, तो सीएसएस चयनकर्ता पंक्ति का उपयोग करें, क्योंकि एलिमेंटर तब प्रत्येक डिवाइस के लिए एक अलग नियम लिखता है।

क्लिक करें सेटिंग्स सहेजें जब आपका काम पूरा हो जाए।

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

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

संभाल खींचें या एक संख्या टाइप करें, और विजेट सीधे अपडेट करता है पीएक्स,%, ईएम और रेम के बीच स्विच करने के लिए यूनिट लेबल पर क्लिक करें।

यहां अंतर को ४८ पीएक्स और अवतारों को ९६ पीएक्स तक बढ़ाया गया हैः

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

• कार्ड, कॉलम और सूची आइटम के बीच अंतराल।
• किसी छवि, कार्ड या अनुभाग की चौड़ाई, अधिकतम-चौड़ाई या ऊंचाई।
• चिह्न, अवतार और बैज आकार।
• एक तत्व के लिए फ़ॉन्ट आकार या लाइन ऊंचाई।
• सीमा त्रिज्या या सीमा चौड़ाई जब सभी पक्ष एक मान साझा करते हैं।

स्लाइडर फ़ील्ड के साथ काम करने के लिए युक्तियाँ #

• हमेशा मिन, मैक्स और स्टेप टाइप करें ताकि स्लाइडर की एक समझदार रेंज हो।
• एक ऐसी श्रेणी चुनें जो प्रत्येक इकाई संपादकों के लिए उपयुक्त हो। पीएक्स के लिए 0 से 80 ठीक है लेकिन ईएम के लिए बहुत बड़ा है।
• सीएसएस टैब में संपत्ति के लिए एक आधार मूल्य रखें, जैसे gap: 24px;, इसलिए किसी के स्लाइडर को छूने से ठीक पहले विजेट दिखता है।
• एक नए सीएसएस चयनकर्ताओं पंक्ति में उदाहरण पाठ बदलें जैसा कि यह है, पंक्ति लक्ष्य वर्गों आपके विजेट नहीं है।
• पैडिंग या मार्जिन जैसे चार पक्षों वाले मानों के लिए, इसका उपयोग करें आयाम क्षेत्र.

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

लपेटकर #

स्लाइडर फ़ील्ड जोड़ें, न्यूनतम, अधिकतम और चरण टाइप करें, एक डिफ़ॉल्ट सेट करें, और इसे सीएसएस चयनकर्ता पंक्ति से कनेक्ट करें जैसे gap: {{SIZE}}{{UNIT}};. का प्रयोग करें .size और .unit जब मान आपके HTML या CSS टैब में हो तो टोकन। अन्य आकार नियंत्रण के लिए, देखें आयाम और टाइपोग्राफी फ़ील्ड, और जांचें मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।