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