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

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

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

सामग्री की तालिका:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. नेविगेशन मेनू आइटम चुनें और कस्टमाइज़ करें

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

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

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

नोट सबसे हालिया , सभी देखें और खोजें के बीच स्विच करने का विकल्प होता है । यदि बहुत सारी वस्तुएं हों तो इन विकल्पों का उपयोग करना याद रखें।

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

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

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

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

बढ़िया है ना?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पॉइंटर अनुभाग : ड्रॉपडाउन मेनू से पॉइंटर का प्रकार चुनें।

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

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

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

मेनू रिक्ति कई विकल्प प्रदान करती है जिनमें शामिल हैं:

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

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

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

मोबाइल प्रतिक्रियाशील मेनू

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

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

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

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

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

ऊपर लपेटकर

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

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