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

एलिमेंटर में ऑफ-कैनवास पैनल कैसे जोड़ें
आपको एलिमेंटर और एक सक्रिय की आवश्यकता है मास्टर एडॉन्स प्रो लाइसेंस।
- को जा टेम्प्लेट, सहेजे गए टेम्प्लेट, एक टेम्पलेट बनाएं, पैनल सामग्री बनाएं और इसे प्रकाशित करें।
- पृष्ठ संपादित करें, खोजें ऑफ-कैनवास सामग्री और इसे वहां खींचें जहां बटन दिखाई देना चाहिए।
- में टेम्पलेट चुनें, आपके द्वारा सहेजा गया टेम्पलेट चुनें।
- चुनना स्थिति और चौड़ाई या ऊंचाई सेट करें।
- एक प्रवेश एनीमेशन और अवधि चुनें।
- बटन शीर्षक या आइकन सेट करें, फिर स्टाइल टैब में बटन, हेडर और कंटेनर को स्टाइल करें।
देखें ऑफ-कैनवास सामग्री सेटिंग्स हर विकल्प के लिए गाइड।
एक नज़र में ऑफ-कैनवास सामग्री
| सेटिंग | यह क्या करता है |
|---|---|
| सामग्री स्रोत | एक सहेजा गया एलिमेंटर टेम्पलेट: पृष्ठ, अनुभाग या कंटेनर (ड्रॉपडाउन किट को छोड़कर प्रत्येक लाइब्रेरी आइटम को सूचीबद्ध करता है) |
| पदों | दाएं, बाएं, ऊपर, नीचे, मध्य, सापेक्ष (बटन के नीचे एक ड्रॉपडाउन) |
| प्रवेश एनीमेशन | फीका, स्लाइड या बढ़ो; सापेक्ष समर्थन केवल फीका |
| प्रवेश प्रकार | कवर पृष्ठ पर पैनल स्लाइड; पुश पृष्ठ को पार ले जाता है पुश शीर्ष, बाएं और दाएं के लिए पेश किया जाता है |
| आकार | बाएँ, दाएँ, मध्य और सापेक्ष के लिए px, % या vw में चौड़ाई; ऊपर, नीचे, मध्य और सापेक्ष के लिए पीएक्स, % या वीएच में ऊंचाई; दोनों प्रति डिवाइस |
| के साथ बंद हो जाता है | बंद करें आइकन, ओवरले पर एक क्लिक, या Esc कुंजी; फ़ोकस किए गए क्लोज़ आइकन पर एंटर या स्पेस भी काम करता है |
| अतिरिक्त | डिफ़ॉल्ट रूप से खोलें, एनीमेशन अवधि सेकंड में, रिवर्स हेडर के साथ हेडर शीर्षक, खुले में पेज स्क्रॉल लॉक, टेक्स्ट, आइकन या दोनों के साथ एक स्टाइल करने योग्य ट्रिगर बटन |
| से खुलता है | विजेट का अपना बटन केवल (कोई सीएसएस चयनकर्ता या बाहरी ट्रिगर नहीं) |
| जरूरतें | एलिमेंटर (मुफ़्त या प्रो) प्लस मास्टर एडॉन्स प्रो |

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

एलिमेंटर प्रो ऑफ-कैनवास बनाम मास्टर एडॉन्स ऑफ-कैनवास सामग्री
एक ऑफ-कैनवास मेनू सबसे आम उपयोग है यह विजेट मेनू का निर्माण नहीं करता है, इसलिए आप पहले एक टेम्पलेट में एक मेनू विजेट रखते हैं यदि आपको केवल मेनू की आवश्यकता है, तो मास्टर एडॉन्स नव मेनू विजेट में प्रो में ऑफ-कैनवास प्रकार के साथ एक हैमबर्गर लेआउट भी है, जो टेम्पलेट चरण को छोड़ देता है ऑफ-कैनवास सामग्री का उपयोग करें जब पैनल को मेनू से अधिक पकड़ना चाहिए, जैसे लोगो, संपर्क विवरण और सामाजिक लिंक।
| फ़ीचर | एलिमेंटर प्रो ऑफ-कैनवास | मास्टर ऐडऑन ऑफ-कैनवास सामग्री |
|---|---|---|
| कीमत | एलिमेंट प्रो की जरूरत है | मास्टर एडॉन्स प्रो की आवश्यकता है |
| पैनल सामग्री | संपादन मोड में विजेट के अंदर निर्मित | एक सहेजा गया एलिमेंटर टेम्पलेट जिसका आप पुन: उपयोग कर सकते हैं |
| कैसे खुलता है | ऑफ-कैनवास क्रिया का उपयोग करने वाला कोई भी बटन या लिंक | विजेट का अपना ट्रिगर बटन |
| स्थिति | क्षैतिज और ऊर्ध्वाधर प्रारंभ, केंद्र या अंत | दाएं, बाएं, ऊपर, नीचे, मध्य या सापेक्ष |
| एनीमेशन | प्रवेश और निकास एनिमेशन | कवर या पुश के साथ फीका, स्लाइड या ग्रो |
| समापन | ओवरले और ईएससी, प्रत्येक को बंद किया जा सकता है; पेज स्क्रॉल लॉक कर सकते हैं | बंद करें आइकन, ओवरले क्लिक करें या Esc |
| अंतर्निहित हेडर | नहीं | शीर्षलेख शीर्षक और बंद आइकन |
| डिफ़ॉल्ट रूप से खोलें | विजेट सेटिंग नहीं | हाँ |
एलिमेंटर प्रो जीतता है जब पृष्ठ पर किसी भी लिंक को पैनल खोलना चाहिए या जब आप बाहर निकलने वाले एनिमेशन चाहते हैं मास्टर एडॉन्स फिट बैठता है जब एक टेम्पलेट को कई पृष्ठों पर तैयार बटन के पीछे दिखाई देना चाहिए एक खोज पैनल के लिए, यह भी देखें खोजें विजेट।
एलिमेंटर में ऑफ-कैनवास मेनू कैसे बनाएं
एक ऑफ-कैनवास मेनू सबसे आम उपयोग है विजेट मेनू का निर्माण नहीं करता है, इसलिए आप पहले एक टेम्पलेट में एक मेनू विजेट रखें।
- एक सहेजा गया टेम्पलेट बनाएं और एक मेनू विजेट जोड़ें, जैसे कि निःशुल्क मास्टर ऐडऑन नव मेनू एक ऊर्ध्वाधर लेआउट पर सेट करें।
- टेम्पलेट प्रकाशित करें।
- अपने हेडर में, ऑफ-कैनवास सामग्री जोड़ें और उस टेम्पलेट का चयन करें।
- स्थिति को बाएँ या दाएँ, चौड़ाई को लगभग 320px और प्रवेश एनीमेशन को स्लाइड पर सेट करें।
- शो टाइटल बंद करें, शो आइकन चालू करें और बार आइकन चुनें ताकि बटन हैमबर्गर जैसा दिखे।
- यदि डेस्कटॉप हेडर अपना सामान्य मेनू रखता है तो इस बटन को केवल टैबलेट और मोबाइल पर दिखाने के लिए एलिमेंटर की प्रतिक्रियाशील दृश्यता का उपयोग करें।
संबंधित विजेटः नव मेनू पैनल के अंदर मेनू के लिए, मेगा मेनू बड़े हेडर मेनू के लिए एक्सटेंशन, पॉपअप बिल्डर समयबद्ध या निकास-इरादे परतों के लिए, टैब सामग्री को जगह पर स्विच करने के लिए, और प्रदर्शन की शर्तें केवल चुने हुए पृष्ठों पर ट्रिगर दिखाने के लिए।
एलिमेंटर में फुल-स्क्रीन मेनू
एक पूर्ण स्क्रीन मेनू १००VW पर चौड़ाई सेट और १००Vh तक ऊंचाई के साथ मध्य स्थिति है इसके अंदर एक बड़े ऊर्ध्वाधर मेनू के साथ एक टेम्पलेट डालें, फीका प्रवेश द्वार चुनें ताकि परत जगह में दिखाई दे, और कंटेनर को एक ठोस पृष्ठभूमि दें ताकि कुछ भी दिखाई न दे बंद आइकन पैनल हेडर में बैठता है, और ईएससी कुंजी परत को भी बंद कर देती है।
स्टाइलशीट से एक विवरण: पैनल ९०% व्यूपोर्ट पर छाया हुआ है, इसलिए १०० वीडब्ल्यू द्वारा १०० वीएच पैनल सभी दौर में मार्जिन छोड़ देता है कैप को हटाने के लिए पेज के कस्टम सीएसएस में इस नियम को जोड़ेंः
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
स्क्रीनशॉट के साथ चरण-दर-चरण अंदर है एलिमेंटर में फुल-स्क्रीन मेनू कैसे बनाएं.
स्लाइड-आउट साइड मेनू (साइडबार नेविगेशन)
एक साइड मेनू के लिए, स्थिति को बाएं या दाएं और चौड़ाई को पीएक्स में सेट करें, एक मेनू के लिए लगभग ३२० पीएक्स और संपर्क विवरण के साथ एक पैनल के लिए ४०० पीएक्स चुनें पुश जब पृष्ठ को एक तरफ ले जाना चाहिए और पठनीय रहना चाहिए, या कवर जब पैनल शीर्ष पर बैठना चाहिए टेम्पलेट पकड़ सकता है नव मेनू इसके ऊर्ध्वाधर लेआउट में विजेट, एक लोगो, कुछ संपर्क लाइनें और एक बटन।
एक साइडबार जो हर समय दिखाई देता रहता है वह एक अलग काम है दो-कॉलम कंटेनर लेआउट के साथ इसे बनाएं और इस विजेट को पैनल के लिए रखें जो अनुरोध पर स्लाइड करता है एलिमेंटर साइड मेनू गाइड दोनों को कवर करता है।
ऑफ-कैनवास पैनल उदाहरण
पैनल की चाल देखने के लिए नीचे प्रत्येक डेमो खोलें: एक दाएं हाथ का संपर्क पैनल, एक बाएं हाथ का मेनू जो पृष्ठ को पार धकेलता है, एक ड्रॉपडाउन पैनल जो सापेक्ष स्थिति का उपयोग करता है, शीर्ष किनारे से एक घोषणा बार, खुलने के साथ एक निचली शीट घंटे, और मध्य स्थिति से निर्मित एक पूर्ण-स्क्रीन मेनू।






ऑफ-कैनवास सामग्री के लिए अक्सर पूछे जाने वाले प्रश्न
क्या ऑफ-कैनवास सामग्री विजेट मुफ़्त है?
नहीं, ऑफ-कैनवास सामग्री का हिस्सा है मास्टर एडॉन्स प्रो। मुफ़्त प्लगइन में यह शामिल नहीं है।
मैं ऑफ-कैनवास पैनल में सामग्री कैसे जोड़ूं?
सामग्री को पहले सहेजे गए एलिमेंटर टेम्पलेट के रूप में बनाएं, जैसे मेनू, फॉर्म या प्रोमो फिर विजेट के चुनिंदा टेम्पलेट ड्रॉपडाउन में उस टेम्पलेट को चुनें आप कई पैनलों में एक टेम्पलेट का पुन: उपयोग कर सकते हैं।
क्या मुझे ऑफ-कैनवास पैनल या पॉपअप का उपयोग करना चाहिए?
नेविगेशन के लिए ऑफ-कैनवास पैनल का उपयोग करें और सामग्री के लिए एक आगंतुक क्लिक करके पूछता है, जैसे मेनू, फ़िल्टर या संपर्क विवरण समयबद्ध या निकास-इरादे संदेशों के लिए एक पॉपअप का उपयोग करें और उन रूपों के लिए जो बीच में बंद होने पर दोनों लॉक पेज स्क्रॉल करते हैं।
मैं एनीमेशन गति कैसे बदलूं?
सामग्री टैब में एनीमेशन अवधि सेट करें मान सेकंड में है, ०.६ डिफ़ॉल्ट के रूप में और ० से १५ तक की सीमा के साथ कम मान पैनल को तेजी से खोलते हैं सेटिंग हर प्रवेश एनीमेशन और दोनों को कवर और पुश करने के लिए लागू होती है।
मेरा ऑफ-कैनवास पैनल क्यों नहीं खुलता है?
तीन चीजों की जांच करें टेम्पलेट का चयन करें एक प्रकाशित टेम्पलेट पर इंगित करना चाहिए, अन्यथा पैनल सामग्री के बजाय एक नोटिस प्रिंट करता है ट्रिगर विजेट का अपना बटन होना चाहिए, क्योंकि कोई अन्य तत्व इसे खोल नहीं सकता है और डिफ़ॉल्ट रूप से खोलें बंद होना चाहिए जब तक कि आप इसे लोड पर खोलना नहीं चाहते।
क्या मैं इसके साथ एक ऑफ-कैनवास मेनू बना सकता हूं?
हाँ। मास्टर ऐडऑन जैसा मेनू विजेट लगाएं नव मेनू सहेजे गए टेम्पलेट में, इसे ऑफ-कैनवास सामग्री में चुनें, बाएं या दाएं स्थिति सेट करें और बटन के लिए बार आइकन का उपयोग करें अकेले मेनू के लिए, प्रो में नव मेनू हैमबर्गर लेआउट का अपना ऑफ-कैनवास प्रकार है।
क्या पैनल सामग्री मेरे पृष्ठ को धीमा कर देती है?
टेम्पलेट को लोड होने पर पृष्ठ में प्रस्तुत किया जाता है, फिर बटन पर क्लिक होने तक छिपा दिया जाता है कुछ विजेट के साथ एक पैनल थोड़ा वजन जोड़ता है, लेकिन इसके अंदर भारी स्लाइडर या वीडियो पृष्ठ के साथ लोड होते हैं, इसलिए पैनल टेम्पलेट्स को हल्का रखें।
क्या मैं अपने हेडर आइकन से पैनल खोल सकता हूं?
नहीं, पैनल केवल बटन विजेट रेंडर से खुलता है, इसलिए एक मौजूदा आइकन या मेनू लिंक इसे ट्रिगर नहीं कर सकता है हैम्बर्गर आइकन से खुलने वाले हेडर मेनू के लिए, इसके बजाय ऑफकैनवास प्रकार के साथ नव मेनू विजेट के हैमबर्गर लेआउट का उपयोग करें।
क्या एलिमेंट के लिए एक मुफ्त ऑफ-कैनवास विजेट है?
एलिमेंट के मुफ्त प्लगइन में कोई नहीं है एलिमेंट प्रो में संस्करण ३.२२ से एक ऑफ-कैनवास विजेट शामिल है जब फ्लेक्सबॉक्स कंटेनर और नेस्टेड तत्व चालू होते हैं ऑफ-कैनवास सामग्री मास्टर एडॉन्स प्रो का हिस्सा है और किसी भी सहेजे गए टेम्पलेट को खोलता है, जो प्रो विजेट नहीं करता है।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।

ग्लासमोर्फिज्म

कंटेनर अतिरिक्त

पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर

