आयाम

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

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

आयाम फ़ील्ड क्या करता है #

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

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

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

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

आयाम फ़ील्ड कैसे जोड़ें #

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

आयाम फ़ील्ड विकल्पों की व्याख्या की गई #

यहाँ कार्ड पैडिंग फ़ील्ड हैः

• लेबल एलिमेंटर में बक्से के ऊपर का पाठ है, उदाहरण के लिए “कार्ड पैडिंग”।
• नाम क्षेत्र की विशिष्ट आईडी है केवल अक्षर, संख्या और अंडरस्कोर।
• विवरण एलिमेंटर में नियंत्रण में दिखाई देता है।
• अनुमत आयाम ऊपर, दाएं, नीचे और बाएं के लिए चार तीर बटन हैं उस तरफ को बंद करने के लिए एक तीर पर क्लिक करें एलिमेंटर में, एक पक्ष जो बंद है वह एक ग्रे बॉक्स के रूप में दिखाता है जिसे संपादित नहीं किया जा सकता है।
• संपत्ति प्रकार कस्टम, मार्जिन, पैडिंग, बॉर्डर चौड़ाई और बॉर्डर त्रिज्या प्रदान करता है एक चुनें और बिल्डर उस संपत्ति के लिए सीएसएस चयनकर्ता पंक्ति में भरता है (इस पर नीचे अधिक) बॉर्डर चौड़ाई भी जोड़ता है border-style: solid.
• आकार इकाइयों इकाइयों संपादकों चुन सकते हैं सूचीबद्ध करता है एक नया क्षेत्र पीएक्स,%, ईएम, रेम, वीएच और वीडब्ल्यू की अनुमति देता है जो आपके डिजाइन के लिए समझ में नहीं आता है उन्हें हटा दें।
• डिफ़ॉल्ट मान शुरुआती शीर्ष, दाएं, नीचे और बाएं मानों के लिए चार बॉक्स हैं।

बटन पैडिंग फ़ील्ड को केवल बाएँ और दाएँ की आवश्यकता होती है, इसलिए ऊपर और नीचे के तीर बंद कर दिए जाते हैंः

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

सीएसएस चयनकर्ताओं के साथ फ़ील्ड कनेक्ट करें #

प्रत्येक सीएसएस चयनकर्ताओं पंक्ति में एक है सीएसएस चयनकर्ता (शैली के लिए कौन सा तत्व) और सीएसएस गुण (लिखने का नियम) जब आप पैडिंग को प्रॉपर्टी टाइप के रूप में चुनते हैं, तो पंक्ति इस तरह शुरू होती हैः

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} अपने आप पर पूरे विजेट का मतलब है इसे उस तत्व में बदलें जिसे आप चाहते हैं, जैसे .price-card. आप छोड़ सकते हैं {{WRAPPER}} बाहर, क्योंकि बिल्डर इसे आपके चयनकर्ता के सामने जोड़ता है इसलिए नियम इस विजेट के अंदर रहता है।

सीएसएस गुणों में, {{TOP}}, {{RIGHT}}, {{BOTTOM}} और {{LEFT}} चार बक्सों के नंबरों से बदल दिया जाता है, और {{UNIT}} चुनी गई इकाई के साथ संपत्ति प्रकार कस्टम पर सेट होने के साथ, आप नियम को स्वयं लिखते हैं बटन पैडिंग फ़ील्ड केवल दो पक्षों का उपयोग करता हैः

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

क्लिक करें आइटम जोड़ें दूसरी पंक्ति के साथ किसी अन्य तत्व पर समान मान लागू करने के लिए।

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

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

आप मूल्यों को सीधे एचटीएमएल या सीएसएस टैब में भी प्रिंट कर सकते हैं फ़ील्ड रखती है top, right, bottom, left और unit, इसलिए इकाई के बाद प्रत्येक पक्ष लिखेंः

.price-card {
  padding: {{ card_padding.top }}{{ card_padding.unit }} {{ card_padding.right }}{{ card_padding.unit }} {{ card_padding.bottom }}{{ card_padding.unit }} {{ card_padding.left }}{{ card_padding.unit }};
}

एक नंगे {{ card_padding }} कुछ भी प्रिंट नहीं करता है अधिकांश विजेट के लिए सीएसएस चयनकर्ता पंक्तियाँ बेहतर विकल्प हैं, क्योंकि उत्तरदायी नियंत्रण चालू होने पर एलिमेंटर प्रत्येक डिवाइस के लिए एक अलग नियम लिखता है।

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

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

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

एक नंबर टाइप करें और कार्ड सीधे अपडेट हो जाता है पक्षों को अनलिंक करने के लिए लिंक आइकन पर क्लिक करें और प्रत्येक को अपना मूल्य दें, जैसा कि कार्ड पैडिंग यहां ऊपर और नीचे ६४ और पक्षों पर ५६ के साथ करता है, आपके द्वारा अनुमत इकाइयों के बीच स्विच करने के लिए यूनिट मेनू का उपयोग करें।

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

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

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

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

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

लपेटकर #

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