एलिमेंटर नेविगेशन मेनू – अपनी वर्डप्रेस वेबसाइट के लिए एक अद्भुत मेनू बनाएं

क्या आप अपनी वेबसाइट के UI/UX को बेहतर बनाने में मदद करने के लिए एक अद्भुत मेनू बनाने का तरीका ढूंढ रहे हैं? अगर ऐसा है, तो आप सही जगह पर हैं। यहां हमने आपकी मदद करने के लिए एक विस्तृत मार्गदर्शिका तैयार की है।

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

विषयसूची:

• आपको कस्टम नेविगेशन मेनू की आवश्यकता क्यों है?
• एलिमेंट का उपयोग करके एक बेसिक वर्डप्रेस मेनू बनाएं
• 1. अपनी वर्डप्रेस वेबसाइट के लिए एक सरल मेनू बनाएं
• 2. चुनें और नेविगेशन मेनू आइटम अनुकूलित करें
• 3. सबमेनस बनाएं - माता-पिता और बाल मेनू आइटम (वैकल्पिक)
• 4. अपना मेनू स्थान प्रबंधित करें और प्रकाशित करें
• एलिमेंट प्रो नेवी के विजेट का उपयोग करके नेविगेशन मेनू कैसे बनाएं
• तत्व नव-मेनू विजेट मुख्य विशेषताएं
• नेव-मेनू प्रो विजेट के साथ एक मेनू बनाएँ
• मोबाइल उत्तरदायी मेनू
• ऊपर लपेटकर

आपको कस्टम नेविगेशन मेनू की आवश्यकता क्यों है?

यह जानना महत्वपूर्ण है कि नेविगेशन मेनू न केवल आपकी साइट पर ट्रैफ़िक लाने के लिए बल्कि बेहतर एसईओ रैंकिंग के लिए भी महत्वपूर्ण है।

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

दूसरा सबसे महत्वपूर्ण कारक "वेबक्रॉलर" या बॉट्स की भूमिका को ध्यान में रखना है जो वेबसाइटों को क्रॉल करने के लिए डिज़ाइन किए गए हैं और सामग्री को प्रासंगिक स्तर पर सूचीबद्ध करते हैं और सामग्री को सही स्थान पर रखने के लिए खोज इंजन पर वापस रिपोर्ट करते हैं।

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

संक्षेप में, "नेविगेशन में आसानी" बेहतर उपयोगकर्ता अनुभव को बढ़ाने के साथ-साथ हमारी साइट रैंकिंग को बढ़ाने और ट्रैफ़िक को बढ़ाने में एक महत्वपूर्ण भूमिका निभाता है।

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

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

इस ट्यूटोरियल में, हम आपको दिखाएंगे कि अनुकूलित, उन्नत वर्डप्रेस मेनू प्राप्त करने के लिए एलिमेंट नेविगेशन मेनू विजेट

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

एलिमेंट का उपयोग करके एक बेसिक वर्डप्रेस मेनू बनाएं

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

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

1. अपनी वर्डप्रेस वेबसाइट के लिए एक सरल मेनू बनाएं

सबसे पहले चीज़ें, आपको अपने वर्डप्रेस बैकएंड डैशबोर्ड में लॉग इन करना होगा।

अब, लेफ्टहैंड साइडबार से Appearance > Menus । यहां आपको बाईं ओर "मेनू आइटम जोड़ें" और दाईं ओर "मेनू संरचना" वाला दो-स्तंभ लेआउट मिलेगा।

मेनू संरचना के अंतर्गत, आपको "मेनू नाम" के लिए एक फ़ील्ड मिलेगा। यह उस मेनू का नाम होगा जिसे हम अभी बना रहे हैं। आइए इसे मेनू 1 कहते हैं।

नोट : चिंता न करें। आपके पाठक मेनू नाम नहीं देख पाएंगे। यह आपके सभी अलग-अलग मेनू को व्यवस्थित रखने में आपकी सहायता करने के लिए एक विशेषता है।

अपने मेनू को एक नाम देने के बाद, इसे उपलब्ध कराने के लिए "मेनू बनाएं" बटन पर क्लिक करें। अब, आपको विभिन्न मेनू आइटम जोड़ने की आवश्यकता है।

2. चुनें और नेविगेशन मेनू आइटम अनुकूलित करें

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

डिफ़ॉल्ट रूप से, इसमें आपका कोई भी पृष्ठ, पोस्ट, लैंडिंग पृष्ठ, कस्टम लिंक और श्रेणियां शामिल होती हैं।

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

नोट : ध्यान दें कि "मेनू आइटम जोड़ें" के अंतर्गत प्रत्येक अनुभाग में - सबसे हाल का , सभी देखें , और खोज । यदि बहुत सारी चीज़ें हों तो इन विकल्पों का उपयोग करना याद रखें।

एक बार जब आप सभी मेनू आइटम जोड़ लेते हैं, तो "मेनू सहेजें" बटन दबाएं, और अगले चरण पर जाएं।

3. सबमेनस बनाएं - माता-पिता और बाल मेनू आइटम (वैकल्पिक)

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

जब कोई उपयोगकर्ता पैरेंट मेनू आइटम पर होवर करता है, तो यह उसके नीचे छिपे सभी चाइल्ड मेनू आइटम को प्रकट करेगा।

बिल्कुल सटीक?

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

4. अपना मेनू स्थान प्रबंधित करें और प्रकाशित करें

अब जब आपने अपना नया मेनू बना लिया है और सबमेनू जोड़ दिया है, तो इसके स्थान को प्रबंधित करने का समय आ गया है।

अपने मेनू संपादक के शीर्ष पर, आपको "स्थान प्रबंधित करें" नामक एक विकल्प दिखाई देना चाहिए। उस पर क्लिक करें और निम्न स्क्रीन के समान कुछ दिखना चाहिए:

अब, उपलब्ध मेनू स्थान आपके द्वारा इंस्टॉल की गई थीम पर निर्भर करेगा। इस पूर्व में amp ले, हम उस का समर्थन करता है 3 मेनू एक विषय है।

उपलब्ध मेनू स्थानों में से प्रत्येक के लिए एक मेनू निर्दिष्ट करने के बाद "परिवर्तन सहेजें" पर क्लिक करें और बस हो गया।

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

एलिमेंट प्रो नेवी के विजेट का उपयोग करके नेविगेशन मेनू कैसे बनाएं

यदि आप अपनी वर्डप्रेस साइट पर एक अनुकूलित नेविगेशन मेनू जोड़ना चाहते हैं, तो आपको एलिमेंटर प्रो संस्करण की आवश्यकता होगी। एलिमेंटर प्रो संस्करण एलिमेंटर नेवी विजेट के साथ कई अन्य विशेष सुविधाओं जैसे कि 300+ टेम्प्लेट, एक थीम बिल्डर, एक पॉपअप विजेट, WooCommerce विजेट और कई अन्य दिलचस्प विशेषताओं के साथ आता है।

स्वयं नव मेन्यू विजेट की विशिष्ट मुख्य विशेषताएं क्या हैं? यहाँ एक संक्षिप्त परिचय है।

तत्व नव-मेनू विजेट मुख्य विशेषताएं

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

नेव-मेनू प्रो विजेट के साथ एक मेनू बनाएँ

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

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

सेटिंग अनुभाग के सबसे ऊपरी कोने पर, तीन विकल्प उपलब्ध हैं; सामग्री, शैली और उन्नत।

लेआउट अनुभाग : आपके पास तीन विकल्प हैं क्षैतिज, ऊर्ध्वाधर या एक छिपी ड्रॉपडाउन समझौते।

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

संरेखित करें अनुभाग : यह अनुभाग आपको मेनू टेक्स्ट आइटम्स को संरेखित करने में मदद करता है; केंद्र, दाएं या बाएं।

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

रेखांकन एनिमेशन इस प्रकार हैं:

• फीका: फीका एनीमेशन मेनू आइटम के नीचे फीका एनीमेशन प्रदान करता है।
• स्लाइड: स्लाइड एनीमेशन मेनू आइटम के नीचे बार स्लाइड करता है।
• बढ़ो : बढ़ता एनीमेशन बीच से बाहर की ओर बढ़ता है और विकास की अनुभूति देता है।
• ड्रॉप इन : एनीमेशन में गिरावट नीचे से ऊपर की ओर बहती है।
• ड्रॉप आउट: ड्रॉप आउट एनीमेशन ऊपर से नीचे की ओर बहता है।

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

सूचक खंड : ड्रॉपडाउन मेनू से सूचक के प्रकार का चयन करें।

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

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

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

मेनू रिक्ति सहित कई विकल्प प्रदान करता है:

• मेनू आइटम के बीच की जगह
• मेनू और सबमेनू तत्वों के लिए क्षैतिज और ऊर्ध्वाधर पैडिंग
• केंद्र, बाएँ, दाएँ और औचित्य संरेखण।

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

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

मोबाइल उत्तरदायी मेनू

मोबाइल वेब का एक महत्वपूर्ण हिस्सा है, और इसीलिए एलिमेंट डेवलपर्स भी टूल प्रदान करते हैं ताकि आप मोबाइल के लिए भी नेवबार बना सकें।

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

संक्षेप में, एलिमेंटर के मोबाइल मेनू की विशेषताएं इस प्रकार हैं:

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

उत्तरदायी नेविगेशन: मेनू की उत्तरदायी स्थिति प्रदान करता है।

ऊपर लपेटकर

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

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