पृष्ठभूमि फ़ील्ड मास्टर ऐडऑन के साथ निर्मित कस्टम विजेट में एलिमेंटर के पृष्ठभूमि नियंत्रण को जोड़ता है विजेट बिल्डरसंपादकों एक ठोस रंग, एक छवि या एलिमेंट पैनल में एक ढाल लेने के लिए, और शैलियों तत्व अपने सीएसएस चयनकर्ता अंक पर जाना यह बैनर, कार्ड और किसी भी बॉक्स जिसका पृष्ठभूमि पृष्ठ से पृष्ठ में बदलना चाहिए सूट।
पृष्ठभूमि एक प्रो क्षेत्र है मुफ्त प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट आता है मास्टर एडॉन्स प्रो.
पृष्ठभूमि फ़ील्ड क्या करता है #
- यह आपके विजेट के स्टाइल टैब में एलिमेंट के बैकग्राउंड टाइप कंट्रोल को जोड़ता है, जिसमें आपके द्वारा अनुमति दिए गए बैकग्राउंड टाइप के अनुसार एक आइकन होता है।
- क्लासिक एक रंग और एक छवि देता है, एक बार छवि चुने जाने के बाद स्थिति, अनुलग्नक, दोहराव और आकार सेटिंग्स के साथ।
- ग्रेडिएंट अपने स्थान के साथ दो रंग देता है, एक रैखिक या रेडियल प्रकार, और एक कोण या स्थिति।
- एलिमेंटर सीएसएस को स्वयं चयनकर्ता विकल्प में तत्व को लिखता है आपको अपने एचटीएमएल या सीएसएस में टोकन की आवश्यकता नहीं है।
यदि आपने अभी तक विजेट नहीं बनाया है, तो पढ़ें विजेट बिल्डर अवलोकन पहले।
इससे पहले कि आप शुरू करें #
- एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
- एलिमेंटर और मास्टर एडॉन्स प्रो के लिए मास्टर एडॉन्स, दोनों सक्रिय हैं स्थापना गाइड सेटअप को कवर करता है।
- विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक “प्रोमो बैनर” विजेट है जिसका बाहरी बॉक्स वर्ग है
promo-banner.
पृष्ठभूमि फ़ील्ड कैसे जोड़ें #
- को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
- क्लिक करें शैली टैब करें और एक अनुभाग जोड़ें, उदाहरण के लिए “बैनर बैकग्राउंड”।
- प्रकार
backgroundबाईं ओर फ़ील्ड खोज बॉक्स में। - खींचना पृष्ठभूमि अनुभाग में इसकी सेटिंग्स बाएं साइडबार में खुलती हैं, और अनुभाग पूर्वावलोकन प्रकार के आइकन दिखाता है।
पृष्ठभूमि फ़ील्ड विकल्पों की व्याख्या की गई #
- लेबल बिल्डर में फ़ील्ड का नाम देता है, उदाहरण के लिए “बैनर पृष्ठभूमि” एलिमेंटर में, संपादक अनुभाग शीर्षक और पृष्ठभूमि प्रकार नामक एक नियंत्रण देखते हैं।
- नाम क्षेत्र की विशिष्ट आईडी है केवल अक्षर, संख्या और अंडरस्कोर।
- विवरण बिल्डर के अंदर आपके लिए एक नोट है।
- प्रकार सेट करता है जो पृष्ठभूमि प्रकार संपादकों उठा सकते हैं: क्लासिक, ढाल, वीडियो और स्लाइड शो एक नया क्षेत्र क्लासिक और ढाल दिखाता है।
- शामिल और बहिष्कृत नियंत्रण के अंदर एकल सेटिंग्स को जोड़ने या छिपाने के लिए हैं हमारे परीक्षणों में न तो एलिमेंट पैनल को बदल दिया डिफ़ॉल्ट रूप से छवि दिखाता है, फिर भी छवि सेटिंग अभी भी दिखाई देती है, इसलिए दोनों को छोड़ दें क्योंकि वे हैं।
क्लासिक और ग्रेडियेंट के लिए प्रकार रखें वीडियो और स्लाइड शो पैनल में अपनी सेटिंग्स जोड़ते हैं, लेकिन जब हमने उन्हें एक कस्टम विजेट पर परीक्षण किया, तो एक वीडियो लिंक और एक स्लाइड शो गैलरी ने बैनर के पीछे कुछ भी नहीं खींचा एलिमेंटर केवल अतिरिक्त मार्कअप बनाता है जो दो प्रकार के अपने स्वयं के वर्गों और कंटेनरों की आवश्यकता होती है।
चयनकर्ता के लिए साइडबार के नीचे स्क्रॉल करें इसके ऊपर सामान्य सेटिंग्स (लेबल, सेपरेटर दिखाएं,) शर्तों और बाकी) वैसे ही काम करते हैं जैसे वे अन्य क्षेत्रों में करते हैं।
चयनकर्ता सेट करें #
चयनकर्ता एलिमेंट को बताता है कि किस तत्व को पृष्ठभूमि मिलती है बैनर के लिए यह बाहरी बॉक्स पर वर्ग हैः
.promo-bannerआपको टाइप नहीं करना है {{WRAPPER}} इस क्षेत्र के लिए बिल्डर इसे आपके चयनकर्ता के सामने जोड़ता है, इसलिए .promo-banner बन जाता है {{WRAPPER}} .promo-banner और केवल इस विजेट को प्रभावित करता है अल्पविराम से अलग सूची के साथ, प्रत्येक भाग को अपना स्वयं का मिलता है {{WRAPPER}}। यदि चयनकर्ता खाली है, तो पृष्ठभूमि आपके तत्व के बजाय विजेट के बाहरी आवरण पर जाती है।
सीएसएस टैब में तत्व को फ़ॉलबैक पृष्ठभूमि दें यह तब तक दिखाता है जब तक कि एक संपादक कुछ नहीं चुनता है, और नियंत्रण की शैली उसके बाद इसे बदल देती हैः
.promo-banner {
background-color: #1f1147;
color: #ffffff;
}
क्लिक करें सेटिंग्स सहेजें जब आपका काम पूरा हो जाए।
एलिमेंटर में पृष्ठभूमि नियंत्रण का उपयोग करें #
विजेट को किसी पृष्ठ में जोड़ें, या यदि पृष्ठ पहले से खुला था तो संपादक को पुनः लोड करें विजेट का चयन करें और खोलें शैली टैब आपका अनुभाग आपके द्वारा अनुमत प्रत्येक प्रकार के लिए एक आइकन के साथ पृष्ठभूमि प्रकार दिखाता है बैनर अपना फ़ॉलबैक रंग तब तक रखता है जब तक आप एक नहीं चुनते।
के लिए ब्रश आइकन पर क्लिक करें क्लासिक और चुनें एक रंग. बैनर तुरंत अपडेट हो जाता है।
रंग के अंतर्गत, पर क्लिक करें छवि मीडिया लाइब्रेरी से एक छवि चुनने के लिए बॉक्स एक छवि सेट होने के बाद अधिक सेटिंग्स दिखाई देती हैं: छवि संकल्प, स्थिति, अनुलग्नक, दोहराएँ और प्रदर्शन आकार केंद्र केंद्र, नहीं-दोहराएं और कवर अधिकांश बैनर के लिए अच्छी तरह से काम करते हैं।
के लिए दूसरा आइकन क्लिक करें ढाल. पहला सेट करें रंग और इसके स्थान, द दूसरा रंग और उसका स्थान, फिर चुनें रैखिक साथ ए कोण या रेडियल एक पद के साथ।
सामान्य उपयोग के मामले #
- हीरो और प्रोमो बैनर जो प्रत्येक अभियान के लिए एक नई छवि या ढाल प्राप्त करते हैं।
- मूल्य निर्धारण तालिकाओं, टीम ग्रिड और फीचर सूचियों में कार्ड।
- कॉल-टू-एक्शन स्ट्रिप्स जो ब्रांड रंग और फोटो के बीच स्विच करती हैं।
- बाहरी बॉक्स के बजाय चयनकर्ता को उस तत्व पर इंगित करके एक आंतरिक पैनल या ओवरले परत।
पृष्ठभूमि क्षेत्र के साथ काम करने के लिए युक्तियाँ #
- हमेशा फ़ॉलबैक रखें
background-colorसीएसएस टैब में यह नए विजेट और एक छवि लोड होने से पहले के क्षण को कवर करता है। - तस्वीरों पर पाठ पठनीय रखें उदाहरण बैनर के साथ एक अंधेरे परत जोड़ता है
.promo-banner::beforeऔरisolation: isolateबॉक्स पर, इसलिए सफेद पाठ उज्ज्वल छवियों पर सुपाठ्य रहता है। - चयनकर्ता को एक तत्व पर इंगित करें विभिन्न चयनकर्ताओं पर कई पृष्ठभूमि फ़ील्ड संपादकों के लिए कई भागों द्वारा साझा किए गए एक फ़ील्ड की तुलना में आसान हैं।
- कस्टम विजेट के लिए क्लासिक और ग्रेडिएंट इन टाइप्स पर टिके रहें।
- बिना किसी छवि या ढाल वाले एकल सपाट रंग के लिए रंग क्षेत्र संपादकों के लिए सरल है।
अक्सर पूछे जाने वाले प्रश्न #
क्या पृष्ठभूमि फ़ील्ड मुफ़्त है?
नहीं पृष्ठभूमि विजेट बिल्डर में प्रो फ़ील्ड में से एक है, इसलिए मास्टर एडॉन्स प्रो को विजेट में जोड़ने से पहले सक्रिय होना होगा।
क्या मुझे पृष्ठभूमि चयनकर्ता में {{WRAPPER}} जोड़ने की आवश्यकता है?
नहीं, बिल्डर जोड़ता है {{WRAPPER}} आपके लिए पृष्ठभूमि फ़ील्ड के चयनकर्ता के सामने, इसलिए .promo-banner काफी है इसे खुद टाइप करना भी काम करता है।
मेरे सीएसएस के लिए पृष्ठभूमि टोकन कहां है?
उपयोग करने के लिए एक नहीं है पृष्ठभूमि एक बार में कई सीएसएस गुणों को कवर करती है, इसलिए एलिमेंटर आपके लिए चयनकर्ता को नियम लिखता है।
वीडियो या स्लाइड शो पृष्ठभूमि क्यों नहीं दिखाती है?
उन प्रकारों को अतिरिक्त मार्कअप की आवश्यकता होती है जो एलिमेंटर केवल अपने स्वयं के अनुभागों और कंटेनरों में जोड़ता है एक कस्टम विजेट पर उनकी सेटिंग्स दिखाई देती हैं, लेकिन कुछ भी नहीं खींचा जाता है क्लासिक या ग्रेडिएंट का उपयोग करें।
ग्रेडिएंट चुनने के बाद मेरा फ़ॉलबैक रंग क्यों ख़त्म हो गया है?
एक ढाल पृष्ठभूमि रंग को पारदर्शी में सेट करता है और शीर्ष पर ढाल पेंट करता है यदि संपादक पृष्ठभूमि प्रकार को बंद कर देता है तो आपका फ़ॉलबैक वापस आ जाता है।
लपेटकर #
एक शैली अनुभाग में पृष्ठभूमि फ़ील्ड जोड़ें, क्लासिक और ग्रेडियेंट के लिए प्रकार रखें, और चयनकर्ता को उस तत्व पर सेट करें जिसे बदलना चाहिए सीएसएस टैब में एक फ़ॉलबैक रंग डालें और संपादक इसे वहां से ले सकते हैं तत्व की बाकी स्टाइलिंग के लिए, देखें सीमा और बॉक्स छाया फ़ील्ड, और जांचें मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।
