एक मानक ड्रॉपडाउन लिंक की एक पतली सूची दिखाता है एक मेगा मेनू एक विस्तृत पैनल खोलता है जो आपकी साइट के एक पूरे खंड को एक बार में प्रस्तुत करता है: समूहीकृत लिंक कॉलम, चित्र, आइकन, यहां तक कि कार्रवाई के लिए एक कॉल भी मेगा मेनू में विस्तार एलिमेंट के लिए मास्टर ऐडऑन किसी भी वर्डप्रेस मेनू आइटम के लिए इन पैनलों में से एक संलग्न करता है, और आप पैनल को सामान्य एलिमेंट संपादक में ही डिज़ाइन करते हैं, इसलिए आप किसी पृष्ठ पर जो कुछ भी बना सकते हैं वह आपके नेविगेशन के अंदर रह सकता है एक त्वरित अवलोकन और डेमो के लिए, देखें मुफ्त एलिमेंट मेगा मेनू बिल्डर पेज।
यहां डेमो से तैयार परिणाम है: होवरिंग प्रोडक्ट्स समूहीकृत लिंक और एक विशेष छवि के साथ एक तीन-कॉलम पैनल खोलता है।
मेगा मेनू एक्सटेंशन क्या करता है #
एक बार सक्षम होने के बाद, आपके वर्डप्रेस मेनू में प्रत्येक आइटम को मेगा मेनू कॉन्फ़िगरेशन पॉपअप मिलता है उपस्थिति → मेनूएक आइटम के लिए इसे चालू करें और उस आइटम का ड्रॉपडाउन एक एलिमेंट टेम्पलेट बन जाता है एक्सटेंशन संभालता हैः
- प्रति-आइटम पैनल: मेगा पैनल को केवल उन वस्तुओं पर सक्षम करें जिन्हें इसकी आवश्यकता है; बाकी सामान्य लिंक बने रहें।
- दृश्य पैनल डिजाइनः ड्रॉपडाउन सामग्री आपके द्वारा पसंद किए गए किसी भी विजेट का उपयोग करके एलिमेंटर संपादक के साथ बनाई गई है।
- मेगा मेनू चौड़ाईः सटीक पिक्सेल मान के साथ डिफ़ॉल्ट, पूर्ण चौड़ाई, या कस्टम चौड़ाई।
- ट्रिगर प्रभावः होवर पर या क्लिक पर पैनल खोलें।
- संक्रमण: चुनें कि पैनल कैसे एनिमेट होता है, डेमो में फीका करें।
- मोबाइल मेनूः तय करें कि टॉगल मेनू के अंदर बिल्डर सामग्री दिखाने सहित फोन को क्या मिलता है।
- बैज और आइकनः मेनू आइटम लेबल (मुक्त) पर एक हाइलाइट बैज संलग्न करें, या अपने स्वयं के रंग (प्रो) के साथ एक आइकन संलग्न करें।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय; मुफ़्त संस्करण पर्याप्त है।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया है का पालन करें स्थापना गाइड पहले।
- के तहत पहले से ही बनाया गया एक वर्डप्रेस मेनू उपस्थिति → मेनू, यहां तक कि एक मोटा भी; आप इसे बाद में परिष्कृत कर सकते हैं।
नोट: आप पृष्ठ शैली विकल्प से अपने मेगा मेनू की पृष्ठभूमि को नियंत्रित कर सकते हैं पृष्ठ शैली विकल्प में पृष्ठभूमि रंग, छवि या जो भी आप पसंद करते हैं उसे रखना सुनिश्चित करें डिफ़ॉल्ट रूप से यह एक सफेद पृष्ठभूमि सेट किया जाएगा लेकिन आप इस सेटिंग से अपनी पृष्ठभूमि के अनुकूलन पर एक नज़र डालें [+]
चरण १: मेगा मेनू एक्सटेंशन सक्षम करें #
अपने वर्डप्रेस डैशबोर्ड से, पर जाएं मास्टर ऐडऑन और खोलो एक्सटेंशन टैब। मेगा मेनू बैठता है विजेट प्रदर्शित करें समूह इसके टॉगल पर क्लिक करें ताकि यह बैंगनी हो जाए, फिर हिट करें परिवर्तन सहेजें और हरे रंग की प्रतीक्षा करें “सेटिंग्स सफलतापूर्वक सहेजी गईसंक्षेप नोटिस मास्टर एडॉन्स डिफ़ॉल्ट रूप से सब कुछ बंद कर देता है इसलिए आपकी साइट केवल वही लोड करती है जो आप वास्तव में उपयोग करते हैं यदि नया विकल्प व्यवस्थापक में तुरंत दिखाई नहीं देता है, तो पृष्ठ को हार्ड-रिफ्रेश करें (सीएमडी/सीटीआरएल + शिफ्ट + आर); कैशिंग प्लगइन्स एक मिनट के लिए पुराने व्यवस्थापक मेनू को बनाए रखते हैं।
चरण २: अपने मेनू के लिए मेगा मेनू चालू करें #
खुला उपस्थिति → मेनू. एक नया मास्टर एडॉन्स मेगा मेनू बॉक्स मेनू आइटम सूची के ऊपर दिखाई देता है स्विच मेगा मेनू सक्षम करें पर और हरे रंग की प्रतीक्षा करें“मेगा मेनू सहेजा गया” पुष्टि मेनू संरचना में प्रत्येक आइटम अब एक बैंगनी ले जाता है मास्टर मेगा बैज, जिसका अर्थ है कि यह एक पैनल की मेजबानी कर सकता है।
चरण ३: मेनू आइटम पर पैनल सक्षम करें #
एक शीर्ष-स्तरीय आइटम होवर करें, आम तौर पर उत्पादों या सेवाओं की तरह कुछ व्यापक, और इसकी मेगा मेनू सेटिंग्स खोलें पॉपअप में सामग्री टैब, फ्लिप मेगामेनू सक्षम को हाँ. द मेगामेनू सामग्री संपादित करें बटन प्रकट होता है; यह इस आइटम के पैनल के लिए एलिमेंटर संपादक खोलता है। मारना सहेजें पॉपअप में जब आप कर रहे हैं।
केवल उन वस्तुओं पर पैनल सक्षम करें जिन्हें वास्तव में अंतरिक्ष की आवश्यकता है एक एकल संपर्क लिंक पर एक मेगा मेनू आगंतुकों को एक गंतव्य के लिए कठिन काम करता है।
चरण ४: एलिमेंट में पैनल डिजाइन करें #
क्लिक करें मेगामेनू सामग्री संपादित करें और परिचित एलिमेंट संपादक पैनल के साथ कैनवास के रूप में खुलता है डेमो तीन कॉलम बनाता है: रिकॉर्ड और विश्लेषण शीर्षकों के तहत लिंक के दो समूह, साथ ही एक छवि कॉलम ताकि पैनल पाठ की दीवार न हो, जब लेआउट तैयार हो जाए तो टेम्पलेट प्रकाशित करें; एक ड्राफ्ट टेम्पलेट लाइव मेनू पर प्रस्तुत नहीं करेगा, जो लोगों को किसी भी अन्य चीज़ से अधिक यात्रा करता है।
समूह लिंक कैसे ग्राहकों को अपने संगठन चार्ट के बजाय लगता है, और प्रत्येक कॉलम को पांच से सात लिंक पर कैप करें, अतीत कि, स्कैनिंग ढह जाती है एक कॉलम को लिंक से परे एक नौकरी दें, जैसे कि एक विशेष उत्पाद या एक कार्रवाई के लिए कॉल करेंऔर छवियों को संपीड़ित रखें, क्योंकि पैनल साइट के हर पृष्ठ पर लोड होता है, न कि केवल एक।
चरण ५: चौड़ाई, ट्रिगर और संक्रमण सेट करें #
आइटम पॉपअप में वापस, सेटिंग्स टैब नियंत्रित करता है कि पैनल कैसे व्यवहार करता हैः
- मेगा मेनू चौड़ाईः डिफ़ॉल्ट मेनू से मेल खाता है, पूर्ण चौड़ाई किनारे से किनारे तक फैली हुई है, कस्टम चौड़ाई 800px जैसे सटीक पिक्सेल मान लेती है।
- मोबाइल मेनूः फोन क्या प्राप्त करते हैं; बिल्डर सामग्री मोबाइल टॉगल मेनू के अंदर एक ही डिज़ाइन पैनल दिखाती है।
- ट्रिगर प्रभावः होवर माउस-ओवर पर पैनल खोलता है; यदि आप जानबूझकर खोलना पसंद करते हैं तो क्लिक पर स्विच करें।
- संक्रमण: प्रवेश एनीमेशन, डेमो में फीका।
- मेनू लेबल दिखाएँ/विवरण दिखाएँ (प्रो): आइटम पर वैकल्पिक लेबल और विवरण पाठ।
द बैज उसी पॉपअप में टैब एक हाइलाइट बैज संलग्न करता है, जो नई या बिक्री प्रविष्टि को चिह्नित करने के लिए उपयोगी है। द चिह्न टैब, एक आइकन और आइकन रंग के लिए, मास्टर एडॉन्स प्रो की आवश्यकता है।
चरण ६: मेनू को अपने हेडर में रखें #
यदि आपकी थीम पहले से ही वर्डप्रेस मेनू प्रस्तुत करती है, तो मेगा मेनू तुरंत काम करता है पूर्ण हेडर नियंत्रण के लिए, मुफ्त के साथ एक का निर्माण करें मास्टर एडॉन्स थीम बिल्डर: एक हेडर टेम्पलेट बनाएं, ड्रॉप करें नव मेनू विजेटऔर उस मेनू का चयन करें जो आपके मेगा पैनल को ले जाता है विजेट का सामान्य अनुभाग लेआउट, संरेखण और ब्रेकपॉइंट को कवर करता है जहां मेनू ढह जाता है।
मोबाइल दृश्य की जाँच करें #
प्रकाशित करने से पहले मोबाइल पूर्वावलोकन के लिए एलिमेंट संपादक स्विच करें मेनू हैमबर्गर टॉगल के पीछे ढह जाता है और लिंक लंबवत रूप से ढेर हो जाते हैं पैनल की वास्तविक ऊंचाई यहां जांचें; एक चार-स्तंभ पैनल जो १४४० पीएक्स पर तेज दिखता है, फोन पर एक अंतहीन स्क्रॉल में बदल सकता है यदि यह लंबा चलता है, तो एलिमेंट के उत्तरदायी दृश्यता नियंत्रण के साथ सजावटी छवियों को छिपाएं और लिंक रखें फिर एक वास्तविक फोन पर परीक्षण करें, क्योंकि पूर्वावलोकन स्पर्श व्यवहार का अनुमान लगाता है लेकिन इसे पुन: पेश नहीं करता है।
पेज पर रिजल्ट #
पूर्ण चौड़ाई चयनित होने के साथ, प्रकाशित पैनल पूरे व्यूपोर्ट किनारे को किनारे तक फैलाता है; इस पृष्ठ के शीर्ष पर बॉक्सिंग संस्करण तुलना के लिए डिफ़ॉल्ट चौड़ाई दिखाता है किसी भी तरह से, आइटम को मँडराने से आपके द्वारा चुने गए संक्रमण के साथ डिज़ाइन किया गया टेम्पलेट खुल जाता है।
जहां एक मेगा मेनू अच्छी तरह से काम करता है #
- भंडार। शॉप के अंतर्गत एक पैनल में उत्पाद श्रेणियां, बेस्टसेलर और एक प्रोमो छवि।
- एजेंसियां और सेवा व्यवसाय। विशेष केस अध्ययन के साथ परिणाम के आधार पर सेवाओं को समूहीकृत किया गया।
- प्रकाशक और ब्लॉग। नवीनतम पोस्ट के साथ विषय हब पैनल में खींच लिया।
- सास साइटें। नेस्टेड ड्रॉपडाउन के बजाय सुविधाओं, समाधानों और संसाधनों को एक साथ व्यवस्थित किया गया।
- विश्वविद्यालय और संगठन। विभाग और त्वरित लिंक जो अन्यथा तीन स्तरों को गहराई तक दबा देंगे।
समस्या निवारण #
- मेगा मेनू दिखाई नहीं देता है। पुष्टि करें कि एक्सटेंशन टॉगल चालू है, मेनू आइटम में मेगामेनु सक्षम है जिसे हाँ पर सेट किया गया है, और पैनल टेम्पलेट ड्राफ्ट के रूप में सहेजे जाने के बजाय प्रकाशित किया गया है। फिर अपना कैश साफ़ करें।
- पैनल दिखाई देता है लेकिन बिना स्टाइल वाला है। आमतौर पर एक कैश स्टाइलशीट अपने पेज कैश और किसी भी सीडीएन को शुद्ध करें, फिर हार्ड-रीलोड करें।
- पैनल काट दिया जाता है या छिपा दिया जाता है। एक पैरेंट कंटेनर में ओवरफ्लो छिपा हुआ या कम जेड-इंडेक्स है हेडर के जेड-इंडेक्स को उठाएं और हेडर कंटेनर की ओवरफ्लो सेटिंग की जांच करें।
- डेस्कटॉप पर काम करता है, मोबाइल पर टूट गया। लगभग हमेशा टॉगल क्षेत्र नव मेनू विजेट की मोबाइल सेटिंग्स सत्यापित करें और पुष्टि करें कि टैप लक्ष्य को ओवरले कुछ भी नहीं है।
अक्सर पूछे जाने वाले प्रश्न #
मैं प्रो के बिना एलिमेंटर में मेगा मेनू कैसे जोड़ सकता हूं?
मास्टर ऐडऑन एक्सटेंशन टैब में मेगा मेनू एक्सटेंशन सक्षम करें, उपस्थिति → मेनू के तहत मेगा मेनू सक्षम करें स्विच करें, मेगामेनू सक्षम को हाँ में सेट करें जो आइटम आप चाहते हैं, और मेगामेनू सामग्री संपादित करें के साथ पैनल को डिज़ाइन करने के लिए एलिमेंट प्रो की आवश्यकता नहीं है।
मेगा मेनू एक्सटेंशन मुक्त है?
हाँ। मेगा मेनू एक्सटेंशन टैब के डिस्प्ले विजेट समूह में एलिमेंटर के लिए मास्टर ऐडऑन के मुफ्त संस्करण के साथ आता है। द मूल्य निर्धारण पृष्ठ इसमें शामिल है कि प्रो योजनाएं क्या जोड़ती हैं।
पैनल पूरी चौड़ाई हो सकता है?
हाँ। आइटम पॉपअप का सेटिंग्स टैब डिफ़ॉल्ट, पूर्ण चौड़ाई और कस्टम चौड़ाई प्रदान करता है। जब आप पैनल को पृष्ठ से संकरा चाहते हैं तो कस्टम चौड़ाई 800px जैसे सटीक पिक्सेल मान लेती है।
मैं ड्रॉपडाउन पैनल के अंदर क्या डाल सकता हूं?
कुछ भी एलिमेंट बना सकता है: हेडिंग विजेट, आइकन सूचियां, चित्र, बटन, फॉर्म पैनल एक नियमित एलिमेंट टेम्पलेट है, इसलिए एक पृष्ठ पर उपलब्ध प्रत्येक विजेट मेनू में उपलब्ध है।
मोबाइल पर मेगा मेनू कैसे व्यवहार करता है?
मेनू एक हैमबर्गर टॉगल के पीछे ढह जाता है और लिंक लंबवत ढेर मोबाइल मेनू सेटिंग नियंत्रित करती है कि फोन टॉगल के अंदर डिज़ाइन किए गए बिल्डर सामग्री को प्राप्त करते हैं या नहीं, और एलिमेंट के उत्तरदायी नियंत्रण आपको छोटे स्क्रीन पर भारी पैनल तत्वों को छिपाने देते हैं।
लपेटकर #
द मेगा मेनू एक्सटेंशन एक सादे वर्डप्रेस मेनू को तीन चालों के साथ डिज़ाइन किए गए नेविगेशन में बदल देता है: एक्सटेंशन को चालू करें, एक आइटम पर पैनल को सक्षम करें, और एलिमेंटर में ड्रॉपडाउन का निर्माण करें चौड़ाई, ट्रिगर, संक्रमण, बैज, और (प्रो के साथ) आइकन सभी आइटम पॉपअप से सेट हैं, और इसे मुफ्त के साथ जोड़ना थीम बिल्डर और नव मेनू विजेट आपको एलिमेंटर प्रो के बिना एक पूर्ण कस्टम हेडर देता है। का पूरा सेट मास्टर ऐडऑन विजेट और एक्सटेंशन एक पेज दूर है।
