बॉक्स छाया

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

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

बॉक्स शैडो फ़ील्ड क्या करता है #

• यह आपके विजेट के स्टाइल टैब में एक नियंत्रण जोड़ता है: आपका लेबल और एक पेंसिल आइकन जो छाया सेटिंग्स खोलता है।
• सेटिंग्स रंग, क्षैतिज, ऊर्ध्वाधर, धुंधला, फैला हुआ और स्थिति (आउटलाइन या इनसेट) हैं।
• एलिमेंटर लिखता है box-shadow चयनकर्ता में तत्व के लिए सीएसएस, इसलिए आपको अपने एचटीएमएल या सीएसएस में टोकन की आवश्यकता नहीं है।

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

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

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

बॉक्स छाया फ़ील्ड कैसे जोड़ें #

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

बॉक्स छाया फ़ील्ड विकल्पों की व्याख्या की गई #

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

चयनकर्ता सेट करें #

साइडबार के नीचे स्क्रॉल करें और तत्व के वर्ग को टाइप करें चयनकर्ता नियंत्रण वर्गों के तहत बॉक्स प्रशंसापत्र कार्ड के लिएः

.quote-card

आपको टाइप नहीं करना है {{WRAPPER}}। बिल्डर इसे आपके चयनकर्ता के सामने जोड़ता है, इसलिए नियम बन जाता है {{WRAPPER}} .quote-card और केवल इस विजेट को प्रभावित करता है अल्पविराम के साथ कई चयनकर्ताओं को अलग करें यदि एक छाया को एक से अधिक तत्वों पर लागू करना चाहिए यदि चयनकर्ता खाली है, तो छाया विजेट के बाहरी आवरण पर जाती है।

आपके सहेजने के बाद, साइडबार के शीर्ष के पास चयनकर्ता बॉक्स समान मान दिखाता है।

एक फ़ॉलबैक छाया जोड़ें #

सीएसएस टैब में शुरुआती छाया डालें यह तब तक दिखाता है जब तक कि एक संपादक नियंत्रण चालू नहीं करता है, और नियंत्रण की छाया उसके बाद इसे बदल देती हैः

.quote-card {
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}

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

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

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

पॉपओवर खोलने के लिए पेंसिल पर क्लिक करें वह एलिमेंट के शुरुआती मूल्यों के साथ छाया को चालू करता है: क्षैतिज ०, लंबवत ०, धुंधला १०, स्प्रेड ० और ५०% अपारदर्शिता पर काला उन्हें समायोजित करें और कार्ड अपडेट जैसे ही आप खींचेंः

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

करने के लिए स्थिति सेट करें इनसेट दबाए गए लुक के लिए, इनपुट फ़ील्ड और शांत पैनल के लिए उपयोगीः

पेंसिल के बगल में गोलाकार तीर नियंत्रण को रीसेट करता है और छाया को हटा देता है।

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

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

बॉक्स शैडो फ़ील्ड के साथ काम करने के लिए युक्तियाँ #

• साइडबार के नीचे चयनकर्ता का उपयोग करें, और केवल क्लास टाइप करें। {{WRAPPER}} आपके लिए जोड़ा गया है।
• फ़ॉलबैक रखें box-shadow सीएसएस टैब में इसलिए नए विजेट फ्लैट नहीं दिखते हैं।
• सॉफ्ट कार्ड छाया के लिए, एक बड़ा ब्लर, लगभग आधे ब्लर का वर्टिकल ऑफसेट और एक छोटा नकारात्मक स्प्रेड आज़माएँ।
• तत्व को एक सीमा त्रिज्या दें छाया कोनों का पालन करती है, इसलिए गोल कार्ड गोल छाया प्राप्त करते हैं।
• पाठ पर छाया के लिए, का उपयोग करें पाठ छाया फ़ील्ड बजाय।

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

लपेटकर #

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