टैब्स क्षेत्र समूह एलिमेंट पैनल में एक टैब स्ट्रिप में नियंत्रित करता है, जैसे एलिमेंट के स्वयं के बटन शैलियों पर सामान्य और होवर टैब आप इसे मास्टर एडॉन्स में बनाते हैं विजेट बिल्डर: टैब जोड़ें, प्रत्येक के अंदर फ़ील्ड डालें, और अपने HTML या CSS में प्रत्येक मान को तीन-भाग वाले टोकन के साथ पढ़ें {{ button_states.hover.bg }}.
टैब एक प्रो फ़ील्ड है मुफ्त प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट आता है मास्टर एडॉन्स प्रो.
टैब्स फ़ील्ड क्या करता है #
- यह आपके विजेट के पैनल के एक अनुभाग में क्लिक करने योग्य टैब की एक पंक्ति जोड़ता है एक टैब पर क्लिक करने से उसके अंदर के फ़ील्ड दिखाई देते हैं।
- प्रत्येक टैब का एक नाम, एक लेबल और फ़ील्ड की अपनी सूची होती है।
- टैब फ़ील्ड स्वयं कोई मान संग्रहीत नहीं करता है मान टैब के अंदर फ़ील्ड से संबंधित हैं।
- टेम्प्लेट उन मानों को पढ़ते हैं
{{ tabs_name.tab_name.field_name }}। दो टैब समान फ़ील्ड नामों का उपयोग कर सकते हैं, जिससे सामान्य और होवर नियमों की तुलना करना आसान रहता है।
यदि आपने अभी तक विजेट नहीं बनाया है, तो पढ़ें विजेट बिल्डर अवलोकन पहले।
इससे पहले कि आप शुरू करें #
- एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
- एलिमेंटर और मास्टर एडॉन्स प्रो के लिए मास्टर एडॉन्स, दोनों सक्रिय हैं स्थापना गाइड सेटअप को कवर करता है।
- विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक “होवर बटन” विजेट है: बटन लेबल के लिए एक टेक्स्ट फ़ील्ड, प्लस एक टैब्स फ़ील्ड नामित
button_statesएक सामान्य और एक होवर टैब के साथ प्रत्येक टैब में दो रंग फ़ील्ड होते हैं। [+]bgऔरtext.
टैब फ़ील्ड कैसे जोड़ें #
- को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
- क्लिक करें शैली टैब करें और एक अनुभाग जोड़ें, उदाहरण के लिए “बटन स्टाइल”।
- प्रकार
tabsबाईं ओर फ़ील्ड खोज बॉक्स में। - खींचना टैब अनुभाग में इसकी सेटिंग्स बाएं साइडबार में खुलती हैं, और अनुभाग पूर्वावलोकन टैब पट्टी दिखाता है।
एक नए टैब्स फ़ील्ड का नाम दिया गया है tabs और दो खाली टैब के साथ आता है, tab_1 और tab_2। कोई भी टोकन लिखने से पहले उनका नाम बदलें, क्योंकि नाम हर पथ का हिस्सा बन जाते हैं।
टैब फ़ील्ड विकल्प समझाया गया #
- लेबल बिल्डर के अंदर फ़ील्ड का नाम देता है एलिमेंटर में, संपादक अनुभाग शीर्षक और टैब लेबल देखते हैं, यह लेबल नहीं।
- नाम प्रत्येक टोकन का पहला भाग है, इसलिए
button_statesदेता है{{ button_states.normal.bg }}। केवल अक्षर, संख्याएँ और अंडरस्कोर। - विवरण बिल्डर के अंदर आपके लिए एक नोट है।
- टैब टैब की सूची है प्रत्येक पंक्ति में एक है नाम (टोकन में प्रयुक्त, जैसे
hover) और ए लेबल (टैब पर दिखाया गया है, जैसे होवर)। क्लिक करना टैब जोड़ें किसी अन्य पंक्ति के लिए, या किसी को हटाने के लिए लाल क्रॉस।
टैब सूची के अंतर्गत, साइडबार एक दिखाता है टैब फील्ड टैब प्रति टैब तालिका, टैब के लेबल के साथ शीर्षक यह वह जगह है जहां फ़ील्ड जाते हैं।
- नाम टोकन का अंतिम भाग है आप प्रत्येक टैब में एक ही नाम का पुन: उपयोग कर सकते हैं, जैसा कि
bgऔरtextयहाँ हैं। - लेबल एलिमेंटर में नियंत्रण के बगल में पाठ है।
- प्रकार नियंत्रण सेट करता है: टेक्स्ट, नंबर, टेक्स्टएरिया, WYSIWYG, कोड, हिडन, स्विचर, चुनें, रंग, फ़ॉन्ट, टाइपोग्राफी, दिनांक समय, यूआरएल, मीडिया, गैलरी, आइकन, स्लाइडर, आयाम या पृष्ठभूमि।
- क्लिक करें फ़ील्ड जोड़ें उस टैब में एक पंक्ति जोड़ने के लिए।
सामान्य सेटिंग्स आगे नीचे (लेबल, सेपरेटर, शर्तें और बाकी दिखाएं) यह नहीं बदलती हैं कि एलिमेंट में टैब फ़ील्ड कैसे दिखाई देता है, इसलिए आप उन्हें अकेला छोड़ सकते हैं।
अपने टेम्पलेट में टैब मान पढ़ें #
टैब के अंदर प्रत्येक मान को बिंदुओं से जुड़े तीन नामों के साथ पढ़ा जाता है: टैब फ़ील्ड, टैब, फिर फ़ील्ड।
{{ tabs_name.tab_name.field_name }}आपको इन्हें टाइप करने की ज़रूरत नहीं है आपके सहेजने के बाद, एचटीएमएल संपादक के बगल में दस्तावेज़ीकरण पैनल टैब्स फ़ील्ड के लेबल के तहत हर पथ को सूचीबद्ध करता है, और कॉपी आइकन एक की प्रतिलिपि बनाता है।
टोकन सीएसएस टैब के साथ-साथ एचटीएमएल टैब में भी काम करते हैं उदाहरण बटन एक नियम में अपना आधार दिखता रहता है और अगले दो में टैब रंग पढ़ता हैः
.ma-btn {
background: #652dd9;
color: #ffffff;
}
.ma-btn {
background: {{ button_states.normal.bg }};
color: {{ button_states.normal.text }};
}
.ma-btn:hover {
background: {{ button_states.hover.bg }};
color: {{ button_states.hover.text }};
}
पहला नियम एक फ़ॉलबैक है जब तक कोई संपादक एक रंग नहीं चुनता, तब तक एक टोकन कुछ भी प्रिंट नहीं करता है और लाइन बन जाती है background: ;। ब्राउज़र उस अमान्य पंक्ति को छोड़ देते हैं, इसलिए पहले नियम के रंग यथावत बने रहते हैं।
पूरा रास्ता ही चलता है इम्तिहान में, जो {{ bg }}, {{ hover.bg }} और {{ button_states.hover }} सभी ने कुछ भी नहीं छापा, जबकि {{ button_states.hover.bg }} रंग मुद्रित यदि कोई मूल्य खाली निकलता है, तो पहले तीन भागों और सटीक वर्तनी की जांच करें।
क्लिक करें सेटिंग्स सहेजें जब आपका काम पूरा हो जाए।
एलिमेंटर में टैब नियंत्रण का उपयोग करें #
विजेट को किसी पृष्ठ में जोड़ें, या यदि पृष्ठ पहले से खुला था तो संपादक को पुनः लोड करें विजेट का चयन करें और खोलें शैली टैब। आपका अनुभाग सामान्य टैब खुले के साथ टैब स्ट्रिप दिखाता है।
सामान्य टैब पर रंग सेट करें, फिर क्लिक करें होवर और दूसरी जोड़ी सेट करें होवर रंगों की जांच करने के लिए पूर्वावलोकन में बटन पर माउस ले जाएं।
सामान्य उपयोग के मामले #
- बटन, कार्ड और लिंक के लिए सामान्य और होवर रंग।
- फ़िल्टर, टॉगल और मेनू आइटम के लिए सक्रिय और निष्क्रिय शैलियाँ।
- एक घटक के हल्के और गहरे संस्करण, एक अनुभाग से संपादित।
- सामग्री को समूहों में विभाजित किया गया है, जैसे फ्लिप कार्ड पर फ्रंट और बैक टैब, प्रत्येक में टेक्स्ट और मीडिया फ़ील्ड के साथ।
टैब्स क्षेत्र के साथ काम करने के लिए युक्तियाँ #
- टैब फ़ील्ड नाम और टैब नाम पहले चुनें बाद में या तो नाम बदलने का मतलब है कि उनका उपयोग करने वाले प्रत्येक टोकन को अपडेट करना।
- टैब में फ़ील्ड नामों का पुन: उपयोग करें।
normal.bgऔरhover.bgदो असंबंधित नामों की तुलना में पढ़ना आसान है। - विजेट लाइव पृष्ठों पर होने के बाद फ़ील्ड के लेबल को बदलने से बचें एलिमेंटर सहेजे गए मानों को लेबल से निर्मित कुंजी के तहत संग्रहीत करता है, इसलिए एक नया लेबल उन पृष्ठों से मौजूदा मानों को गायब कर सकता है।
- टोकन नियम से पहले एक नियम में डिफ़ॉल्ट शैलियों को रखें, इसलिए एक खाली मान कभी भी डिज़ाइन को नहीं तोड़ता है।
- अपनी कक्षाओं को एक उपसर्ग दें (जैसे कि)
ma-btn)। विजेट के सीएसएस टैब से सीएसएस पूरे पृष्ठ पर लागू होता है, इसलिए सामान्य नाम जैसे.buttonअन्य शैलियों के साथ टकराव कर सकते हैं। - टैब के बजाय सेटिंग्स के एकल चालू/बंद समूह के लिए, देखें पॉपओवर टॉगल फ़ील्ड। किसी सूची के लिए संपादक पंक्तियाँ जोड़ सकता है, इसका उपयोग करें पुनरावर्तक क्षेत्र.
अक्सर पूछे जाने वाले प्रश्न #
क्या टैब्स फ़ील्ड मुफ़्त है?
नंबर टैब्स विजेट बिल्डर में प्रो फ़ील्ड में से एक है, इसलिए मास्टर एडॉन्स प्रो को विजेट में जोड़ने से पहले सक्रिय होना होगा।
मैं किसी विशिष्ट टैब से मान कैसे पढ़ूं?
डॉट्स से जुड़े तीन नामों का उपयोग करें: टैब फ़ील्ड नाम, टैब नाम, फिर फ़ील्ड नाम उदाहरण के लिए, {{ button_states.hover.bg }} पढ़ता है bg से मैदान hover टैब।
क्या दो टैब में एक ही नाम के फ़ील्ड हो सकते हैं?
हाँ। टैब नाम पथ का हिस्सा है, इसलिए {{ button_states.normal.bg }} और {{ button_states.hover.bg }} अलग-अलग मूल्य रहें।
मेरा टैब टोकन कुछ भी प्रिंट क्यों नहीं करता है?
या तो पथ अधूरा है या संपादक ने अभी तक कोई मान निर्धारित नहीं किया है जांचें कि टोकन में सभी तीन भाग हैं और बिल्डर में नामों से मेल खाते हैं खाली मूल्यों के लिए, अपने सीएसएस में टोकन नियम से पहले एक फ़ॉलबैक नियम रखें।
क्या टोकन सीएसएस टैब में काम करते हैं?
हाँ। वही {{ tabs_name.tab_name.field_name }} टोकन HTML और CSS दोनों टैब में काम करते हैं।
लपेटकर #
टैब फ़ील्ड और उसके टैब का नाम बताएं, प्रत्येक टैब में फ़ील्ड जोड़ें और उन्हें इसके साथ पढ़ें {{ tabs_name.tab_name.field_name }} अपने एचटीएमएल या सीएसएस में खाली मूल्यों के लिए एक फ़ॉलबैक नियम रखें और विजेट के लाइव होने से पहले नामों पर व्यवस्थित करें रंग क्षेत्र डॉक इस उदाहरण में प्रयुक्त रंग नियंत्रण को कवर करता है, और मूल्य निर्धारण दिखाता है कि प्रत्येक योजना में क्या शामिल है।
