द पृष्ठभूमि क्षेत्र हाथों अपने कस्टम विजेट एक ही पृष्ठभूमि पैनल एलिमेंट के वर्गों का उपयोग करें: ठोस रंग और छवियों के लिए एक क्लासिक टैब, दो रंग बंद हो जाता है के साथ एक ढाल टैब, और गति पृष्ठभूमि के लिए एक वीडियो टैब मास्टर एडॉन्स के अंदर विजेट बिल्डर, आप फ़ील्ड को एक बार जोड़ते हैं, इसे सीएसएस चयनकर्ता पर इंगित करते हैं, और प्रत्येक पृष्ठभूमि निर्णय एलिमेंटर पैनल में चला जाता है।
प्रत्येक विजेट बिल्डर नियंत्रण की तरह, पृष्ठभूमि समर्थन करती है शर्तों पैनल दृश्यता के लिए, और बिल्डर भर में टोकन आउटपुट चलता है ट्विग-सिंटैक्स टेम्पलेट इंजन। दोनों गाइड सेटअप और सीमाओं की व्याख्या करते हैं।
पृष्ठभूमि एक समूह नियंत्रण है, टाइपोग्राफी और सीमा के रूप में एक ही परिवार इसका मतलब है कि कनेक्शन मॉडल पाठ या रंग क्षेत्रों से अलग है: आपके सीएसएस में पेस्ट करने के लिए कोई टोकन नहीं है आप चयनकर्ता विकल्प भरते हैं और एलिमेंटर उस चयनकर्ता को पृष्ठभूमि शैलियों को स्वयं लिखता है।
पृष्ठभूमि फ़ील्ड क्या करता है #
- रेंडर्स एलिमेंट का पृष्ठभूमि समूह नियंत्रण आपके विजेट के पैनल में, आपके द्वारा अनुमत प्रत्येक पृष्ठभूमि प्रकार के लिए टैब के साथ।
- क्लासिक टैबः एक ठोस रंग, या सामान्य स्थिति, आकार और दोहराव सेटिंग्स वाली एक छवि।
- ग्रेडिएंट टैब: स्थान, कोण और प्रकार नियंत्रण के साथ दो रंग बंद हो जाते हैं।
- वीडियो टैबः चयनित तत्व के पीछे एक गति पृष्ठभूमि।
- सीएसएस खुद लिखता है आपके द्वारा प्रदान किए गए चयनकर्ता को, कोई टेम्पलेट टोकन शामिल नहीं है।
पहला विजेट? से शुरू करें विजेट बिल्डर अवलोकन वायरिंग समूह नियंत्रण से पहले।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक हीरो विजेट है जिसका
<div class="hero-box">कंटेनर को संपादक द्वारा चुनी गई पृष्ठभूमि लेनी चाहिए।
पृष्ठभूमि फ़ील्ड कैसे जोड़ें #
विजेट बिल्डर संपादक में, बाईं ओर फ़ील्ड पैनल को तब तक स्क्रॉल करें जब तक आपको यह न मिल जाए पृष्ठभूमि फ़ील्ड, टाइपोग्राफी और बॉक्स शैडो जैसे अन्य शैली समूह फ़ील्ड के साथ सूचीबद्ध है।
इसे नीचे एक अनुभाग में खींचें शैली टैब, इसका प्राकृतिक घर एक बार जब यह भूमि, बाईं ओर क्षेत्र के विकल्प खुले।
पृष्ठभूमि फ़ील्ड विकल्पों की व्याख्या की गई #
- लेबलः एलिमेंटर में नियंत्रण के ऊपर दिखाया गया पाठ, उदाहरण के लिए “हीरो बैकग्राउंड”।
- नाम: केवल फ़ील्ड, अक्षरों, संख्याओं और अंडरस्कोर के लिए विशिष्ट पहचानकर्ता।
- चयनकर्ता: सीएसएस चयनकर्ता पृष्ठभूमि पर लागू होता है यह कनेक्शन ही है, अगले भाग में शामिल है।
- प्रकार: जो नियंत्रण शो को क्लासिक, ग्रेडिएंट और वीडियो से टैब करता है। सूची को ट्रिम करने से पैनल केंद्रित रहता है; कार्ड विजेट को शायद ही कभी वीडियो टैब की आवश्यकता होती है।
- बहिष्कृत करें: जब आप पैनल का छोटा संस्करण चाहते हैं तो समूह से व्यक्तिगत उप-नियंत्रण हटा देता है।
- विवरण, शो लेबल, सेपरेटर और शर्तें हर क्षेत्र में वैसा ही व्यवहार करती हैं जैसा वे करते हैं।
अपने चयनकर्ता पर फ़ील्ड इंगित करें #
यहां वह हिस्सा है जो लोगों को ऊपर ले जाता है यदि वे टोकन फ़ील्ड के लिए उपयोग किए जाते हैंः पृष्ठभूमि फ़ील्ड में कोई नहीं है {{shortcode}} अपने सीएसएस के लिए। पृष्ठभूमि गुणों का एक बंडल है, इसलिए यह एक टोकन के माध्यम से मुद्रित नहीं हो सकता है; एक {{ token }} इस फ़ील्ड के लिए कुछ भी उपयोगी आउटपुट नहीं है। इसके बजाय, आप भरें चयनकर्ता विकल्प और एलिमेंटर शैलियाँ उत्पन्न करता है।
हीरो कंटेनर के लिए, चयनकर्ता हैः
{{WRAPPER}} .hero-box
{{WRAPPER}}विजेट के अपने कंटेनर के लिए खड़ा है, अकेले इस विजेट की पृष्ठभूमि को स्कोप करना समूह नियंत्रण चयनकर्ता का उपयोग बिल्कुल लिखित रूप में करते हैं, इसलिए आप टाइप करते हैं{{WRAPPER}}अपने आप; आपके लिए कुछ भी जुड़ा हुआ नहीं है।.hero-boxआपके विजेट HTML के अंदर वह तत्व है जो पृष्ठभूमि प्राप्त करता है।
सावधान: छोड़ो {{WRAPPER}} ऑफ और चयनकर्ता हर मैच .hero-box पृष्ठ पर, इसलिए एक विजेट की पृष्ठभूमि उन सभी पर भूमि समूह नियंत्रण चयनकर्ता कच्चे लेते हैं, जिससे यह जहाज करने के लिए सबसे आसान गलती हो जाती है।
विजेट के सीएसएस टैब में एक फ़ॉलबैक पृष्ठभूमि रखें यह वही है जो विजेट एक ताजा ड्रॉप पर दिखाता है, और एक संपादक द्वारा कुछ चुनने के बाद नियंत्रण के मान इसे ओवरराइड करते हैं एक ठोस फ़ॉलबैक रंग दो बार अपने रख को अर्जित करता है, क्योंकि यह एक भारी पृष्ठभूमि छवि लोड होने से पहले के क्षण को भी कवर करता है, जो अन्यथा धीमी कनेक्शन पर सफेद चमकता है।
एलिमेंटर में पृष्ठभूमि नियंत्रण का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर विजेट जोड़ें, संपादक को फिर से लोड करना यदि पृष्ठ पहले से ही खुला था नियंत्रण आपके लेबल के तहत प्रति अनुमत प्रकार के टैब के साथ दिखाई देता है।
क्लासिक टैब पर, एक रंग चुनें या स्थिति, आकार और दोहराने सेटिंग्स के साथ मीडिया लाइब्रेरी से एक छवि चुनें कोण और स्थान के साथ दो रंग स्टॉप के लिए ढाल टैब पर स्विच करें, या एक गति पृष्ठभूमि के लिए वीडियो टैब पर जाएं पूर्वावलोकन अपडेट।
सामान्य उपयोग के मामले #
- हीरो और बैनर विजेट जहां प्रत्येक साइट हेडलाइन के पीछे अपनी छवि या ग्रेडिएंट चाहती है।
- कार्ड पृष्ठभूमि मूल्य निर्धारण तालिकाओं, टीम ग्रिड और फीचर सूचियों में।
- कॉल-टू-एक्शन स्ट्रिप्स वह प्रति अभियान ब्रांड रंग और फोटो के बीच स्विच करता है।
- वीडियो हेडर, वीडियो टैब केवल इसके लिए बनाए गए विजेट पर सक्षम है।
- ओवरले पैनल, चयनकर्ता को मीडिया के ऊपर एक आंतरिक परत पर इंगित करना।
पृष्ठभूमि क्षेत्र के साथ काम करने के लिए युक्तियाँ #
- चयनकर्ता विकल्प संपूर्ण कनेक्शन है। सीएसएस टैब में पृष्ठभूमि टोकन की तलाश न करें; कोई नहीं है।
- चयनकर्ता को हमेशा इसके साथ प्रारंभ करें
{{WRAPPER}}. समूह नियंत्रण इसे कच्चे उपयोग करते हैं, इसलिए एक नंगे वर्ग चयनकर्ता पृष्ठ पर प्रत्येक मैच के लिए लीक होता है। - प्रकार सूची ट्रिम करें। केवल क्लासिक और ग्रेडिएंट की पेशकश कार्ड विजेट को सरल रखती है और संपादकों को उन वीडियो को छोड़ने से रोकती है जहां वे नहीं हैं।
- विजेट सीएसएस में फ़ॉलबैक स्टाइल रखें। आपकी स्टाइलशीट में एक डिफ़ॉल्ट पृष्ठभूमि रंग विजेट को किसी के भी नियंत्रण खोलने से पहले प्रस्तुत करने योग्य बनाता है।
- मन पाठ विपरीत। जब संपादक पृष्ठभूमि को नियंत्रित करते हैं, तो विजेट को उसके ऊपर बैठे पाठ के लिए रंग नियंत्रण के साथ जोड़ें।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर एडॉन्स विजेट बिल्डर में पृष्ठभूमि फ़ील्ड क्या है?
यह क्लासिक रंग और छवि, ढाल, और वीडियो टैब के साथ, एक कस्टम विजेट के लिए एलिमेंट के पृष्ठभूमि समूह नियंत्रण को जोड़ता है आप इसे सीएसएस चयनकर्ता जैसे {{WRAPPER}} .hero-box, और एलिमेंटर उस चयनकर्ता को चुनी गई पृष्ठभूमि शैलियाँ लिखता है।
सीएसएस टैब के लिए पृष्ठभूमि शोर्ट कहां है?
कोई नहीं है पृष्ठभूमि एक समूह नियंत्रण है जो एक बार में कई सीएसएस गुणों को कवर करता है, इसलिए यह एक टोकन के माध्यम से प्रिंट नहीं कर सकता है; एक {{ token }} इसके लिए कुछ भी उपयोगी आउटपुट नहीं है चयनकर्ता विकल्प शॉर्टकोड को प्रतिस्थापित करता है: इसे सेट करें और एलिमेंटर आपके लिए सीएसएस उत्पन्न करता है।
मुझे स्वयं {{WRAPPER}} क्यों टाइप करना होगा?
समूह नियंत्रण चयनकर्ता का उपयोग बिल्कुल लिखित रूप में करते हैं, मूल्य फ़ील्ड के विपरीत जहां रैपर स्वचालित रूप से जुड़ा हुआ है। के साथ शुरू {{WRAPPER}} शैलियों को इस विजेट उदाहरण तक सीमित करता है; इसके बिना, पृष्ठ पर प्रत्येक मिलान तत्व को स्टाइल किया जाता है।
क्या मैं नियंत्रण को केवल क्लासिक और ग्रेडिएंट तक सीमित कर सकता हूँ?
हाँ प्रकार विकल्प तय करता है कि कौन से टैब दिखाई देते हैं, इसलिए क्लासिक और ग्रेडिएंट को सूचीबद्ध करने से वीडियो टैब छिप जाता है बहिष्कृत विकल्प आगे बढ़ता है और समूह से व्यक्तिगत उप-नियंत्रण हटा देता है।
विजेट सीएसएस में मैंने जो पृष्ठभूमि लिखी है उसका क्या होता है?
यह विजेट के डिफ़ॉल्ट रूप के रूप में रहता है एक संपादक द्वारा चुनाव करने के बाद नियंत्रण का आउटपुट इसे ओवरराइड करता है, इसलिए आपकी स्टाइलशीट में एक समझदार फ़ॉलबैक पृष्ठभूमि एक संघर्ष के बजाय अच्छा अभ्यास है।
क्या एक पृष्ठभूमि फ़ील्ड कई तत्वों को स्टाइल कर सकता है?
हाँ। चयनकर्ताओं को अल्पविराम से अलग करें और प्रत्येक से शुरुआत करें {{WRAPPER}}उदाहरण के लिए {{WRAPPER}} .hero-box, {{WRAPPER}} .hero-footer। फिर दोनों तत्व एक ही नियंत्रण का पालन करते हैं।
लपेटकर #
विजेट बिल्डर बैकग्राउंड फ़ील्ड कस्टम विजेट के किसी भी तत्व में सेक्शन-ग्रेड बैकग्राउंड संपादन लाता है: फ़ील्ड का नाम बताएं, चयनकर्ता को सेट करें {{WRAPPER}} प्लस आपकी कक्षा, और चुनें कि संपादक किस प्रकार को देखता है यह उसी चयनकर्ता मॉडल का अनुसरण करता है टाइपोग्राफी क्षेत्रू, तो एक बार एक समूह नियंत्रण क्लिक करता है, बाकी भी करते हैं बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
