वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

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

वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

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

नेविगेशन बार कैसे जोड़ें

सीमित क्षैतिज स्थान के साथ काम करते समय हैमबर्गर मेनू एक महत्वपूर्ण डिज़ाइन तत्व है। यह एक भारी स्थिर नेविगेशन बार की आवश्यकता को समाप्त करता है जो मूल्यवान स्थान लेता है।

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

  1. "जोड़ें" पैनल खोलने के लिए बाएं पैनल के शीर्ष पर "+" आइकन टैप करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  2. "घटक" अनुभाग तक नीचे स्क्रॉल करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  3. "NavBar" तत्व को क्लिक करके रखें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  4. तत्व को पेज के हेडर पर खींचें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

मोबाइल मेनू को कैसे संपादित करें

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

मेनू में और लिंक कैसे जोड़ें

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

अधिक नेविगेशन लिंक जोड़ने के लिए इन चरणों का पालन करें:

  1. NavBar के अंदर किसी भी तत्व पर क्लिक करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  2. दाईं ओर "तत्व सेटिंग" पैनल पर जाएं।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  3. "सेटिंग" खोलने के लिए गियर आइकन दबाएं।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  4. "NavBar सेटिंग्स" अनुभाग तक स्क्रॉल करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  5. "लिंक जोड़ें" बटन पर टैप करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

अब जब आपके पास अपने सभी प्रासंगिक वेबसाइट पृष्ठों के लिए पर्याप्त संख्या में लिंक हैं, तो वास्तविक लिंकिंग करने का समय आ गया है।

  1. एक नेविगेशन लिंक का चयन करें।
  2. "तत्व सेटिंग" पैनल पर जाएं।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  3. "लिंक सेटिंग्स" अनुभाग का पता लगाएँ।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  4. निर्दिष्ट वेबपेज URL को "URL" फ़ील्ड में दर्ज करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

मेनू एनिमेशन कैसे बदलें

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

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

अपना वांछित प्रकट एनीमेशन सेट करने के लिए, निम्न कार्य करें:

  1. NavBar के अंदर किसी भी तत्व का चयन करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  2. अपनी स्क्रीन के दाईं ओर "तत्व सेटिंग" पैनल पर जाएं।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  3. "सेटिंग्स" लॉन्च करने के लिए गियर आइकन टैप करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  4. "NavBar सेटिंग्स" अनुभाग पर नेविगेट करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  5. "प्रकार" विकल्प पर क्लिक करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  6. ड्रॉप-डाउन मेनू से पसंदीदा शैली का चयन करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

"NavBar सेटिंग" अनुभाग में, आप निम्न को भी नियंत्रित कर सकते हैं:

  • ईज़िंग ओपन: ओपन ट्रांज़िशन को एनिमेट करने के लिए उपयोग किया जाने वाला वक्र प्रकार।
  • ईज़िंग क्लोज: कर्व टाइप का इस्तेमाल क्लोज ट्रांजिशन को एनिमेट करने के लिए किया जाता है।
  • अवधि: मेनू को प्रदर्शित होने में कितना समय लगता है।

ध्यान दें कि संक्रमण अवधि को मिलीसेकंड में मापा जाता है।

मेनू स्टाइलिंग कैसे बदलें

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

मेनू बटन को शैलीबद्ध करने के लिए, निम्न कार्य करें:

  1. मेनू बटन का चयन करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  2. दाईं ओर (ब्रश आइकन) "स्टाइल" पैनल पर जाएं।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

स्टाइल पैनल आपको मेनू बटन के हर पहलू को बदलने की अनुमति देता है। आमतौर पर, डिजाइनर बटन की पृष्ठभूमि का रंग और आकार बदलते हैं।

पृष्ठभूमि का रंग बदलने के लिए, निम्न कार्य करें:

  1. "पृष्ठभूमि" अनुभाग पर जाएं।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  2. "कलर पिकर" खोलने के लिए कलर ड्रॉप आइकन पर टैप करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  3. वांछित रंग का चयन करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

यदि आप हैमबर्गर आइकन का आकार बदलना चाहते हैं, तो इन चरणों का पालन करें:

  1. "टाइपोग्राफी" अनुभाग पर नेविगेट करें।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें
  2. "आ" फ़ील्ड में आइकन का आकार बढ़ाएँ या घटाएँ।
    वेबफ्लो में मोबाइल मेनू को कैसे संपादित करें

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

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

मोबाइल नेविगेशन आसान हो गया

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

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

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

Sign up and earn $1000 a day ⋙

Leave a Comment

Google पत्रक में अनुस्मारक कैसे सेट करें

Google पत्रक में अनुस्मारक कैसे सेट करें

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

MacOS में कोई कैमरा उपलब्ध नहीं त्रुटि को कैसे ठीक करें

MacOS में कोई कैमरा उपलब्ध नहीं त्रुटि को कैसे ठीक करें

शुक्र है कि उपयोगकर्ता द्वारा इसके कारण कुछ किए बिना macOS में गंभीर त्रुटि प्राप्त करना दुर्लभ है। macOS को ज़्यादातर समय ऐसी तुच्छताओं को पीछे छोड़ने के लिए पॉलिश और परिष्कृत किया गया है। यह इसके बिना नहीं है

YouTube वीडियो कैसे डाउनलोड करें: YouTube वीडियो को अपने iPhone, iPad, लैपटॉप या Android डिवाइस में सेव करें

YouTube वीडियो कैसे डाउनलोड करें: YouTube वीडियो को अपने iPhone, iPad, लैपटॉप या Android डिवाइस में सेव करें

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

कैसे एक एनिमेटेड GIF अपने मैक वॉलपेपर बनाने के लिए

कैसे एक एनिमेटेड GIF अपने मैक वॉलपेपर बनाने के लिए

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

क्रोम ऑफ़लाइन इंस्टॉलर का उपयोग कैसे करें

क्रोम ऑफ़लाइन इंस्टॉलर का उपयोग कैसे करें

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

स्नैपचैट में ध्वनि काम नहीं कर रही है - क्या करें

स्नैपचैट में ध्वनि काम नहीं कर रही है - क्या करें

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

वीएस कोड से ब्राउजर में कैसे ओपन करें

वीएस कोड से ब्राउजर में कैसे ओपन करें

यदि आप HTML, PHP, या JS फ़ाइलों का उपयोग कर रहे हैं, तो हो सकता है कि आप उन्हें अपने ब्राउज़र में Visual Studio कोड से खोलना चाहें। हालाँकि, ऐसा करने के लिए कोई एकीकृत विकल्प नहीं है। यह निराशाजनक हो सकता है, खासकर यदि आप चाहें

जिंप में चयन कैसे करें

जिंप में चयन कैसे करें

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

स्नैपचैट में ग्रुप चैट कैसे बनाएं

स्नैपचैट में ग्रुप चैट कैसे बनाएं

क्या आप स्नैपचैट पर दोस्तों के समूह के बीच फोटो साझा करने का तरीका ढूंढ रहे हैं? स्नैपचैट का एक शानदार कार्य है जो इसके उपयोगकर्ताओं को कई मित्रों और परिवार को सहजता से सामग्री भेजने की सुविधा देता है। बनाकर ऐसा कर सकते हैं

कंप्यूटर पर स्नैपचैट का उपयोग कैसे करें

कंप्यूटर पर स्नैपचैट का उपयोग कैसे करें

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

विंडोज पीसी या मैक पर माउस लैगिंग को कैसे ठीक करें

विंडोज पीसी या मैक पर माउस लैगिंग को कैसे ठीक करें

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

गूगल मैप्स में टोल कैसे बंद करें

गूगल मैप्स में टोल कैसे बंद करें

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

कैसे एक पीसी या मोबाइल डिवाइस पर ज़ूम ऑडियो म्यूट करें

कैसे एक पीसी या मोबाइल डिवाइस पर ज़ूम ऑडियो म्यूट करें

हाल के दिनों में ज़ोम्स की लोकप्रियता में वृद्धि के साथ, वीडियो में भी वृद्धि हुई है, जो ऐप के अनम्यूट रहने पर अक्सर प्रफुल्लित करने वाले परिणाम दिखाते हैं। हालाँकि, जिन लोगों ने कुछ परिहास का अनुभव किया है, वे हो सकते हैं

एक्सेल में सर्कुलर रेफरेंस कैसे खोजें

एक्सेल में सर्कुलर रेफरेंस कैसे खोजें

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

विफल नेटवर्क त्रुटि को कैसे ठीक करें

विफल नेटवर्क त्रुटि को कैसे ठीक करें

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