ऑफ-कैनवास सामग्री विजेट सेटिंग्स

कुछ सामग्री पृष्ठ पर एक जगह कमाती है बाकी, एक मेनू, एक अक्सर पूछे जाने वाले प्रश्न सूची, एक संपर्क फ़ॉर्म, बेहतर टक दूर काम करता है जब तक कि कोई इसके लिए नहीं पूछता ऑफ-कैनवास सामग्री विजेट में मास्टर एडॉन्स प्रो किसी भी एलिमेंटर टेम्पलेट को एक बटन के पीछे छुपाता है और विज़िटर के क्लिक करने पर इसे स्क्रीन के किनारे, ऊपर या नीचे से स्लाइड करता है।

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

ऑफ-कैनवास सामग्री विजेट क्या करता है #

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

सब कुछ एक विजेट में होता है: ट्रिगर, पैनल, एनीमेशन और स्टाइल कोई अलग पॉपअप प्लगइन नहीं, कोई टेम्पलेट शॉर्टकोड नहीं।

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• मास्टर एडॉन्स प्रो एक सक्रिय लाइसेंस के साथ स्थापित, चूंकि ऑफ-कैनवास सामग्री एक प्रो विजेट है प्लगइन के लिए नया? द स्थापना गाइड.
• पैनल के अंदर दिखाने के लिए एक सहेजा गया एलिमेंटर टेम्पलेट पहले अपने डैशबोर्ड में टेम्पलेट्स के तहत एक बनाएं; यहां डेमो एक तैयार FAQ अनुभाग का उपयोग करता है।

ऑफ-कैनवास सामग्री विजेट कैसे जोड़ें #

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

टेम्पलेट उठाओ और पैनल सेट करें #

द सामग्री अनुभाग पैनल के लिए मुख्य सेटिंग्स रखता है।

• टेम्पलेट चुनेंः पैनल दिखाता है एलिमेंट टेम्पलेट कोई भी सहेजा गया अनुभाग या पृष्ठ टेम्पलेट इस ड्रॉपडाउन में दिखाई देता है।
• शीर्षलेख शीर्षक और शीर्षकः पैनल हेडर पर स्विच करें और इसके लेबल टाइप करें, जैसे कि “एक्सप्लोर एफएक्यू” बंद आइकन एक ही हेडर में रहता है।
• पद: पैनल किस किनारे से आता है नीचे इस पर अधिक।
• चौड़ाई: पैनल पीएक्स, % या वीडब्ल्यू में कितना चौड़ा है, डिफ़ॉल्ट रूप से 300पीएक्स। ऊपर या नीचे के पैनल a का उपयोग करते हैं ऊंचाई इसके बजाय px, % या vh में नियंत्रण करें।
• प्रवेश एनीमेशन और प्रवेश प्रकारः पैनल कैसे आता है एनीमेशन के लिए फीका, स्लाइड या ग्रो, प्रकार के लिए कवर या पुश कवर पैनल को पृष्ठ पर रखता है; पुश कमरे बनाने के लिए पृष्ठ को एक तरफ धकेलता है।
• एनिमेशन अवधिः प्रवेश गति सेकंड में, डिफ़ॉल्ट रूप से 0.6।
• डिफ़ॉल्ट रूप से खोलेंः पैनल के साथ पृष्ठ शुरू करें पहले से ही खुला डिजाइन करते समय आसान है, क्योंकि आप हर बदलाव के बाद ट्रिगर पर क्लिक किए बिना पैनल को स्टाइल कर सकते हैं।

ट्रिगर बटन कॉन्फ़िगर करें #

द बटन एक ही टैब में समूह ट्रिगर को नियंत्रित करता है। शीर्षक दिखाएँ और शीर्षक लेबल सेट करें; डेमो ने इसका नाम यहां क्लिक करें से बदलकर अक्सर पूछे जाने वाले प्रश्न कर दिया है। संरेखित बटन को अपने कॉलम में बाएँ, मध्य या दाएँ रखता है।

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

चुनें कि पैनल कहाँ से स्लाइड करता है #

द स्थिति ड्रॉपडाउन छह विकल्प प्रदान करता हैः दाएं, बाएं, ऊपर, नीचे, मध्य और सापेक्ष.

दाएं और बाएं क्लासिक दराज पैनल हैं एक उठाओ और संपादक तुरंत इसका पूर्वावलोकन करता है: पैनल अंदर आपके टेम्पलेट के साथ स्लाइड करता है, शीर्ष पर हेडर, बंद आइकन तैयार।

ऊपर और नीचे चौड़ाई नियंत्रण को a से बदलें ऊंचाई व्यूपोर्ट ऊंचाई में मापा गया स्लाइडर ३० वीएच पर एक शीर्ष बार एक पतली घोषणा दराज की तरह काम करता है।

मध्य केंद्र पैनल को एक मोडल की तरह करता है सापेक्ष एंकर पैनल को ट्रिगर बटन से ही, एक के साथ दूरी अंतराल के लिए नियंत्रण, जो विजेट को ड्रॉपडाउन-शैली प्रकट में बदल देता है पैनल से ही एक नोट: केवल फीका एनीमेशन सापेक्ष स्थिति के साथ काम करता है।

चौड़ाई और प्रवेश एनीमेशन सेट करें #

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

पैनल को स्टाइल करें #

द शैली टैब में तीन खंड हैंः बटन, हेडर, और कंटेनर.

बटन #

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

हेडर #

खुले पैनल के शीर्ष पर पट्टी को स्टाइल करता है।

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

कंटेनर #

पैनल बॉडी को स्टाइल करता है और इसके चारों ओर क्या है।

• पृष्ठभूमि रंग, सीमा रंग, बॉक्स छाया, सीमा प्रकार, सीमा त्रिज्या, पैडिंगः पैनल की सतह ही।
• ओवरले पृष्ठभूमि रंगः पैनल खुला होने पर पृष्ठ के बाकी हिस्सों पर टिंट एक अंधेरे ओवरले पैनल पर ध्यान खींचता है।
• स्क्रॉलबार: स्क्रीन से लम्बे पैनलों के लिए स्क्रॉलबार का रंग और चौड़ाई।

पेज पर रिजल्ट #

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

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

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

एक बेहतर ऑफ-कैनवास पैनल के लिए टिप्स #

• पहले टेम्पलेट बनाएं। विजेट केवल सहेजे गए टेम्पलेट्स को सूचीबद्ध करता है, इसलिए विजेट को अंदर खींचने से पहले टेम्पलेट्स के अंतर्गत पैनल सामग्री को डिज़ाइन करें।
• सामग्री के लिए चौड़ाई का मिलान करें। 300 पिक्सेल एक मेनू के लिए उपयुक्त हैं; फॉर्म और अक्सर पूछे जाने वाले प्रश्न सूचियाँ 450 से 500 के आसपास बेहतर सांस लेती हैं।
• पुश का प्रयोग संयम से करें। यह हड़ताली लग रहा है, लेकिन पूरे पृष्ठ को स्थानांतरित करना लंबी सामग्री पर कूद महसूस कर सकता है एक अंधेरे ओवरले के साथ कवर शांत डिफ़ॉल्ट है।
• सापेक्ष नियम याद रखें। केवल फीका एनीमेशन तब काम करता है जब स्थिति सापेक्ष पर सेट होती है।
• मोबाइल पर पैनल की जाँच करें। 500 पिक्सेल पैनल कई फ़ोनों से अधिक चौड़ा है; प्रतिक्रियाशील नियंत्रण के साथ मोबाइल ब्रेकप्वाइंट के लिए छोटी चौड़ाई निर्धारित करें।

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

लपेटकर #

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