स्लाइड-आउट पैनल और मेनू के लिए एलिमेंटर ऑफ-कैनवास विजेट (प्रो)

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

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

खुले मूल्य निर्धारण पैनल के बगल में चौड़ाई, प्रवेश एनीमेशन, प्रवेश प्रकार और बटन विकल्पों के लिए ऑफ-कैनवास सामग्री सेटिंग्स

एलिमेंटर में ऑफ-कैनवास पैनल कैसे जोड़ें

आपको एलिमेंटर और एक सक्रिय की आवश्यकता है मास्टर एडॉन्स प्रो लाइसेंस।

  1. को जा टेम्प्लेट, सहेजे गए टेम्प्लेट, एक टेम्पलेट बनाएं, पैनल सामग्री बनाएं और इसे प्रकाशित करें।
  2. पृष्ठ संपादित करें, खोजें ऑफ-कैनवास सामग्री और इसे वहां खींचें जहां बटन दिखाई देना चाहिए।
  3. में टेम्पलेट चुनें, आपके द्वारा सहेजा गया टेम्पलेट चुनें।
  4. चुनना स्थिति और चौड़ाई या ऊंचाई सेट करें।
  5. एक प्रवेश एनीमेशन और अवधि चुनें।
  6. बटन शीर्षक या आइकन सेट करें, फिर स्टाइल टैब में बटन, हेडर और कंटेनर को स्टाइल करें।

देखें ऑफ-कैनवास सामग्री सेटिंग्स हर विकल्प के लिए गाइड।

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

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

पैनल की स्थिति, आकार और एनीमेशन

स्थिति दाएं, बाएं, ऊपर, नीचे, मध्य और सापेक्ष प्रदान करता है बाएं, दाएं और मध्य पैनल को पीएक्स,% या वीडब्ल्यू में चौड़ाई मिलती है, और शीर्ष, नीचे और मध्य पैनल को पीएक्स,% या वीएच में ऊंचाई मिलती है, प्रत्येक डिवाइस प्रति समायोज्य। प्रवेश एनीमेशन फीका है, स्लाइड या बढ़ता है, और केवल फीका सापेक्ष के साथ काम करता है बाएं, दाएं और शीर्ष पैनल में भी एक है प्रवेश प्रकार कवर या पुश का। सेट करें एनीमेशन अवधि सेकंड में, और चालू करें डिफ़ॉल्ट रूप से खोलें यदि पैनल खुलना शुरू हो जाए।

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

  • छोटी स्क्रीन के लिए आपकी साइट मेनू के साथ एक बाएँ या दाएँ पैनल।
  • संक्षिप्त घोषणा या खोज फ़ॉर्म के लिए एक शीर्ष पैनल।
  • साइनअप फॉर्म के लिए एक सरल मोडल के रूप में एक मध्य पैनल।

ट्रिगर बटन, हैडर और कंटेनर स्टाइलिंग

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

  • हेडर में एक आइकन-केवल हैमबर्गर बटन।
  • एक “हमसे संपर्क करें” टेक्स्ट बटन जो एक फॉर्म खोलता है।
  • एक ब्रांडेड ओवरले रंग जो पैनल के पीछे पृष्ठ को मंद करता है।
ऑफ-कैनवास सामग्री बटन स्टाइल पैनल और मूल्य निर्धारण पैनल खोलने वाले क्लिक हियर बटन के बगल में टेम्पलेट सेटिंग का चयन करें

एलिमेंटर प्रो ऑफ-कैनवास बनाम मास्टर एडॉन्स ऑफ-कैनवास सामग्री

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

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

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

एलिमेंटर में ऑफ-कैनवास मेनू कैसे बनाएं

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

  1. एक सहेजा गया टेम्पलेट बनाएं और एक मेनू विजेट जोड़ें, जैसे कि निःशुल्क मास्टर ऐडऑन नव मेनू एक ऊर्ध्वाधर लेआउट पर सेट करें।
  2. टेम्पलेट प्रकाशित करें।
  3. अपने हेडर में, ऑफ-कैनवास सामग्री जोड़ें और उस टेम्पलेट का चयन करें।
  4. स्थिति को बाएँ या दाएँ, चौड़ाई को लगभग 320px और प्रवेश एनीमेशन को स्लाइड पर सेट करें।
  5. शो टाइटल बंद करें, शो आइकन चालू करें और बार आइकन चुनें ताकि बटन हैमबर्गर जैसा दिखे।
  6. यदि डेस्कटॉप हेडर अपना सामान्य मेनू रखता है तो इस बटन को केवल टैबलेट और मोबाइल पर दिखाने के लिए एलिमेंटर की प्रतिक्रियाशील दृश्यता का उपयोग करें।

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

एलिमेंटर में फुल-स्क्रीन मेनू

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

स्टाइलशीट से एक विवरण: पैनल ९०% व्यूपोर्ट पर छाया हुआ है, इसलिए १०० वीडब्ल्यू द्वारा १०० वीएच पैनल सभी दौर में मार्जिन छोड़ देता है कैप को हटाने के लिए पेज के कस्टम सीएसएस में इस नियम को जोड़ेंः

.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }

स्क्रीनशॉट के साथ चरण-दर-चरण अंदर है एलिमेंटर में फुल-स्क्रीन मेनू कैसे बनाएं.

स्लाइड-आउट साइड मेनू (साइडबार नेविगेशन)

एक साइड मेनू के लिए, स्थिति को बाएं या दाएं और चौड़ाई को पीएक्स में सेट करें, एक मेनू के लिए लगभग ३२० पीएक्स और संपर्क विवरण के साथ एक पैनल के लिए ४०० पीएक्स चुनें पुश जब पृष्ठ को एक तरफ ले जाना चाहिए और पठनीय रहना चाहिए, या कवर जब पैनल शीर्ष पर बैठना चाहिए टेम्पलेट पकड़ सकता है नव मेनू इसके ऊर्ध्वाधर लेआउट में विजेट, एक लोगो, कुछ संपर्क लाइनें और एक बटन।

एक साइडबार जो हर समय दिखाई देता रहता है वह एक अलग काम है दो-कॉलम कंटेनर लेआउट के साथ इसे बनाएं और इस विजेट को पैनल के लिए रखें जो अनुरोध पर स्लाइड करता है एलिमेंटर साइड मेनू गाइड दोनों को कवर करता है।

ऑफ-कैनवास पैनल उदाहरण

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

टेम्पलेट व्यूअर
फेसबुक
ट्विटर
व्हाट्सएप
कॉपी लिंक
अभी खरीदें
सापेक्ष ड्रॉपडाउन पैनल
सापेक्ष ड्रॉपडाउन पैनल
दायाँ संपर्क पैनल
दायाँ संपर्क पैनल
बायाँ पुश मेनू
बायाँ पुश मेनू
शीर्ष घोषणा बार
शीर्ष घोषणा बार
नीचे नोटिस शीट
नीचे नोटिस शीट
पूर्ण-स्क्रीन मेनू
पूर्ण-स्क्रीन मेनू

ऑफ-कैनवास सामग्री के लिए अक्सर पूछे जाने वाले प्रश्न

ऑफ-कैनवास सामग्री के बारे में उपयोगकर्ताओं द्वारा पूछे जाने वाले सबसे अधिक पूछे जाने वाले प्रश्नों को जानें और एक ही स्थान पर उत्तर खोजें।
क्या ऑफ-कैनवास सामग्री विजेट मुफ़्त है?

नहीं, ऑफ-कैनवास सामग्री का हिस्सा है मास्टर एडॉन्स प्रो। मुफ़्त प्लगइन में यह शामिल नहीं है।

सामग्री को पहले सहेजे गए एलिमेंटर टेम्पलेट के रूप में बनाएं, जैसे मेनू, फॉर्म या प्रोमो फिर विजेट के चुनिंदा टेम्पलेट ड्रॉपडाउन में उस टेम्पलेट को चुनें आप कई पैनलों में एक टेम्पलेट का पुन: उपयोग कर सकते हैं।

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

सामग्री टैब में एनीमेशन अवधि सेट करें मान सेकंड में है, ०.६ डिफ़ॉल्ट के रूप में और ० से १५ तक की सीमा के साथ कम मान पैनल को तेजी से खोलते हैं सेटिंग हर प्रवेश एनीमेशन और दोनों को कवर और पुश करने के लिए लागू होती है।

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

क्या मैं इसके साथ एक ऑफ-कैनवास मेनू बना सकता हूं?

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

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

नहीं, पैनल केवल बटन विजेट रेंडर से खुलता है, इसलिए एक मौजूदा आइकन या मेनू लिंक इसे ट्रिगर नहीं कर सकता है हैम्बर्गर आइकन से खुलने वाले हेडर मेनू के लिए, इसके बजाय ऑफकैनवास प्रकार के साथ नव मेनू विजेट के हैमबर्गर लेआउट का उपयोग करें।

एलिमेंट के मुफ्त प्लगइन में कोई नहीं है एलिमेंट प्रो में संस्करण ३.२२ से एक ऑफ-कैनवास विजेट शामिल है जब फ्लेक्सबॉक्स कंटेनर और नेस्टेड तत्व चालू होते हैं ऑफ-कैनवास सामग्री मास्टर एडॉन्स प्रो का हिस्सा है और किसी भी सहेजे गए टेम्पलेट को खोलता है, जो प्रो विजेट नहीं करता है।

ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन

कम समय में परिष्कृत वेबसाइट बनाएं।

एलिमेंटर के लिए मास्टर एडॉन्स ग्लासमोर्फिज्म एक्सटेंशन: ब्लर वैल्यू कंट्रोल के साथ फ्रॉस्टेड ग्लास कार्ड 20px पर सेट

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

होम फ्री एलिमेंटर ग्लासमोर्फिज्म एक्सटेंशन: एक टॉगल में फ्रॉस्टेड ग्लास प्रभाव ग्लासमोर्फिज्म फ्रॉस्टेड है।।।
विवरण देखें
एलिमेंटर के लिए मास्टर एडॉन्स कंटेनर एक्स्ट्रा एक्सटेंशन: कंटेनर को अधिकतम चौड़ाई, अधिकतम ऊंचाई, न्यूनतम चौड़ाई और न्यूनतम ऊंचाई नियंत्रण के साथ 1400px अधिकतम चौड़ाई पर कैप किया गया है

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

होम एलिमेंटर कंटेनर अधिकतम चौड़ाई और अधिकतम ऊंचाई नियंत्रण कंटेनर एक्स्ट्रा एक निःशुल्क मास्टर है।।।
विवरण देखें
एलिमेंटर के लिए मास्टर एडॉन्स पैटर्न एक्सटेंशन: पर्पल ग्रेडिएंट ग्रिड लेफ्ट स्टाइल के साथ हीरो, तीन और पैटर्न स्टाइल और इनेबल पैटर्न पैनल

पैटर्न

होम 70+ फ्री एलिमेंटर बैकग्राउंड पैटर्न पैटर्न एक मुफ्त मास्टर ऐडऑन एक्सटेंशन है जो जोड़ता है।।।
विवरण देखें
एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट

पोस्ट/पेज डुप्लीकेटर

होम डुप्लिकेट एलिमेंटर पेज और पोस्ट एक क्लिक में पोस्ट/पेज डुप्लिकेटर एक निःशुल्क मास्टर है।।।
विवरण देखें
एलिमेंट के लिए मास्टर ऐडऑन रीडिंग प्रोग्रेस बार एक्सटेंशन: गोपनीयता नीति पृष्ठ के शीर्ष पर नीली बार 42% भरी हुई है, सक्षम, स्थिति, ऊंचाई और रंग सेटिंग्स भरने के साथ

प्रगति बार पढ़ना

होम वर्डप्रेस में रीडिंग प्रोग्रेस बार जोड़ें (एलिमेंटर) रीडिंग प्रोग्रेस बार मुफ़्त है।।।
विवरण देखें