जब आप
ड्रॉपडाउन जोड़कर उसे सेट अप कर लेते हैं, तो उसका डिजाइन अपनी पसंद के मुताबिक कस्टमाइज कर सकते हैं। कंटेनर और मेन्यू का लुक और एलाइनमेंट बदलने से आप क्लाइंट के लिए कस्टम लुक बना सकते हैं और उनके ब्रांड को बेहतर तरीके से दिखा सकते हैं।
ड्रॉपडाउन का लेआउट एडजस्ट करना
आपके मेन्यू टाइप (नेविगेशन बार, हैमबर्गर वगैरह) के आधार पर, लेआउट पैनल में अलग-अलग सेटिंग्स दिखाई देती हैं। मुख्य मेन्यू के लुक से मैच कराने के लिए, आप स्पेसिंग और एलाइनमेंट भी कस्टमाइज कर सकते हैं।
ड्रॉपडाउन का लेआउट एडजस्ट करने के लिए:
- अपने एडिटर पर जाएं।
- मेन्यू बार/हैमबर्गर मेन्यू आइकन पर क्लिक करें।
- (हैमबर्गर मेन्यू) हैमबर्गर एडिटिंग मोड खोलने के लिए एडिट मेन्यू पर क्लिक करें और मेन्यू चुनें।
- लेआउट आइकन
पर क्लिक करें। - ड्रॉपडाउन टैब चुनें।
- लेआउट एडजस्ट करने के लिए इन ऑप्शन का इस्तेमाल करें:
ड्रॉपडाउन कंटेनर की चौड़ाई चुनें और उसे अपनी पसंद के मुताबिक एडजस्ट करें:
- स्ट्रेच: ड्रॉपडाउन कंटेनर स्क्रीन की पूरी चौड़ाई जितना होता है। मार्जिन (px में) सेट करने से आप इसकी चौड़ाई एडजस्ट कर सकते हैं।
- फिट टू मेन्यू: ड्रॉपडाउन की चौड़ाई मुख्य पैरेंट मेन्यू जितनी होती है।
- हग कंटेंट: कंटेनर ड्रॉपडाउन आइटम के मुताबिक अपनी चौड़ाई एडजस्ट करता है। आप इसे मुख्य मेन्यू के बाईं ओर, बीच में या दाईं ओर एलाइन कर सकते हैं।
आइटम डिस्प्ले और कॉलम की संख्या
- आइटम डिस्प्ले: चुनें कि ड्रॉपडाउन मेन्यू आइटम कोलैप्स रहें या हमेशा दिखाई दें।
- कॉलम की संख्या: चुनें कि ड्रॉपडाउन मेन्यू में कितने कॉलम दिखाई दें।
- कंटेनर के ऊपर स्पेस: ड्रॉपडाउन और मुख्य मेन्यू के बीच का गैप कम या ज्यादा करें।
- स्पेसिंग: ड्रॉपडाउन मेन्यू में आइटम की स्पेसिंग एडजस्ट करें। अगर आपने सब-आइटम जोड़े हैं, तो उनके बीच और ऊपर की स्पेसिंग भी बदल सकते हैं।
- आइटम के बीच स्पेस: ड्रॉपडाउन आइटम के बीच हॉरिजॉन्टल और वर्टिकल स्पेसिंग डालें।
- सब-आइटम के बीच स्पेस: सब-आइटम के बीच का स्पेस कम या ज्यादा करें।
- सब-आइटम के ऊपर स्पेस: मेन्यू में सब-आइटम के ऊपर की स्पेसिंग चुनें।
पैडिंग, दिशा और एलाइनमेंट
- पैडिंग: अपनी जरूरत के हिसाब से ड्रॉपडाउन के हर हिस्से के आसपास का स्पेस सेट करें:
- आइटम पैडिंग: ड्रॉपडाउन मेन्यू आइटम के आसपास का स्पेस कम या ज्यादा करें।
- सब-आइटम पैडिंग: ड्रॉपडाउन मेन्यू में सब-आइटम के आसपास का स्पेस एडजस्ट करें।
- कंटेनर पैडिंग: अपनी जरूरत के हिसाब से ड्रॉपडाउन कंटेनर के आसपास का स्पेस कम या ज्यादा करें।
- दिशा: चुनें कि आइटम बाएं से दाएं पढ़े जाएं या दाएं से बाएं।
- एलाइनमेंट: ड्रॉपडाउन आइटम और सब-आइटम को कंटेनर में बाईं ओर, दाईं ओर या बीच में एलाइन करें।
ड्रॉपडाउन का डिजाइन कस्टमाइज करना
आप ड्रॉपडाउन के हर हिस्से—कंटेनर से लेकर आइटम और सब-आइटम तक—को मुख्य मेन्यू के लुक और फील के अनुसार डिजाइन कर सकते हैं। अपने क्लाइंट की ब्रांडिंग को बेहतर दिखाने के लिए बैकग्राउंड फिल और टेक्स्ट चुनें। ड्रॉपडाउन को पृष्ठ पर अलग दिखाने के लिए बॉर्डर भी जोड़ें।
आप आइटम और सब-आइटम का डिजाइन अलग-अलग स्टेट के लिए भी कस्टमाइज कर सकते हैं (जैसे, होवर या मौजूदा पृष्ठ)।
ड्रॉपडाउन का डिजाइन कस्टमाइज करने के लिए:
- अपने एडिटर पर जाएं।
- मेन्यू बार/हैमबर्गर मेन्यू आइकन पर क्लिक करें।
- (हैमबर्गर मेन्यू) हैमबर्गर एडिटिंग मोड खोलने के लिए एडिट मेन्यू पर क्लिक करें और मेन्यू चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन
पर क्लिक करें।
- वह एलिमेंट चुनें जिसे आप डिजाइन करना चाहते हैं:
- ड्रॉपडाउन कंटेनर
- ड्रॉपडाउन मेन्यू कंटेनर
- ड्रॉपडाउन आइटम
- ड्रॉपडाउन सब-आइटम
- (ड्रॉपडाउन आइटम/ड्रॉपडाउन सब-आइटम) संबंधित स्टेट चुनें: रेगुलर, होवर या करंट पेज।
- उपलब्ध ऑप्शन का इस्तेमाल करके ड्रॉपडाउन डिजाइन करें:
- बैकग्राउंड फिल्स: ड्रॉपडाउन का बैकग्राउंड कलर बदलें या आकर्षक ग्रेडिएंट जोड़ें। अपनी डिजाइन की जरूरतों के हिसाब से ओपेसिटी एडजस्ट करें और कई लेयर जोड़ें।
- बॉर्डर: ड्रॉपडाउन कंटेनर के बॉर्डर की चौड़ाई और कलर एडजस्ट करें।
- कॉर्नर: रेडियस एडजस्ट करके ड्रॉपडाउन के कॉर्नर को ज्यादा गोल या आयताकार बनाएं।
- टेक्स्ट: ड्रॉपडाउन आइटम और सब-आइटम की स्टाइल और फॉर्मेटिंग एडजस्ट करें।
- शैडो: ड्रॉपडाउन में शैडो जोड़ें और उसका एंगल, कलर, डिस्टेंस वगैरह कस्टमाइज करें।
किसी ड्रॉपडाउन में किए गए बदलाव उस मेन्यू के सभी ड्रॉपडाउन पर लागू होते हैं। कुछ ज्यादा यूनीक बनाना चाहते हैं? डिजाइन पर पूरा कंट्रोल पाने के लिए, हॉरिजॉन्टल नेविगेशन मेन्यू में जोड़े गए ड्रॉपडाउन को 'डिटैच' करें।
हॉरिजॉन्टल मेन्यू में अलग-अलग ड्रॉपडाउन को डिटैच और कस्टमाइज करने के लिए:
- अपने एडिटर में हॉरिजॉन्टल मेन्यू पर क्लिक करें।
- मैनेज मेन्यू पर क्लिक करें।
- संबंधित ड्रॉपडाउन पर होवर करें और एडिट पर क्लिक करें।
- चुनें कि आप ड्रॉपडाउन को किस तरह डिजाइन करना चाहते हैं:
कंटेनर का लेआउट एडजस्ट करें
ड्रॉपडाउन में जोड़े गए आइटम और एलिमेंट दिखाने वाले कंटेनर की चौड़ाई एडजस्ट करें। आप कंटेनर और मुख्य मेन्यू के बीच का स्पेस भी सेट कर सकते हैं।
- ड्रॉपडाउन कंटेनर चुनें।
- लेआउट आइकन पर क्लिक करें।
- इसे इनेबल करने के लिए, एडिट दिस ड्रॉपडाउन ओनली टॉगल पर क्लिक करें।
- अपने हिसाब से ये बदलाव करें:
- कंटेनर विड्थ: लिस्ट से कोई विकल्प चुनें और उसे अपने हिसाब से एडजस्ट करें:
- स्ट्रेच: ड्रॉपडाउन कंटेनर स्क्रीन की पूरी चौड़ाई में दिखता है। मार्जिन (px में) सेट करके इसकी चौड़ाई घटा सकते हैं।
- फिट टू मेन्यू: ड्रॉपडाउन कंटेनर की चौड़ाई उसके पैरेंट मेन्यू के बराबर होती है।
- हग कंटेंट: कंटेनर ड्रॉपडाउन आइटम के अनुसार अपना साइज़ एडजस्ट करता है। आप इसे मुख्य मेन्यू के बाईं ओर, बीच में या दाईं ओर संरेखित कर सकते हैं।
- कस्टम: दोनों ओर के ड्रैग हैंडल मूव करके कंटेनर की चौड़ाई सेट करें। आप इसे मुख्य मेन्यू के बाईं ओर, बीच में या दाईं ओर संरेखित कर सकते हैं।
- स्पेस अबव कंटेनर: ड्रॉपडाउन कंटेनर और मुख्य मेन्यू के बीच का गैप बढ़ाएं या घटाएं।
ड्रॉपडाउन मेन्यू का लेआउट एडजस्ट करें
इस मेन्यू में वे आइटम दिखते हैं जिन्हें आपने ड्रॉपडाउन में जोड़ा है। आप दिखने वाले कॉलम की संख्या सेट कर सकते हैं, मेन्यू के आइटम के बीच और चारों ओर की स्पेसिंग एडजस्ट कर सकते हैं, और डायरेक्शन व एलाइनमेंट चुन सकते हैं।
- कंटेनर में ड्रॉपडाउन मेन्यू चुनें।
- लेआउट आइकन पर क्लिक करें।
- इसे इनेबल करने के लिए, एडिट दिस ड्रॉपडाउन ओनली टॉगल पर क्लिक करें।
- अपने हिसाब से ये बदलाव करें:
- नंबर ऑफ कॉलम्स: चुनें कि ड्रॉपडाउन मेन्यू में कितने कॉलम दिखें।
- स्पेसिंग: ड्रॉपडाउन मेन्यू में आइटम की स्पेसिंग एडजस्ट करें। अगर आपने सब-आइटम जोड़े हैं, तो आप उनके बीच और ऊपर की स्पेसिंग भी बदल सकते हैं।
- स्पेस बिटवीन आइटम्स: ड्रॉपडाउन आइटम के बीच हॉरिजॉन्टल और वर्टिकल स्पेसिंग दर्ज करें।
- स्पेस बिटवीन सब-आइटम्स: सब-आइटम के बीच का स्पेस घटाएं या बढ़ाएं।
- स्पेस अबव सब-आइटम्स: मेन्यू में सब-आइटम के ऊपर की स्पेसिंग चुनें।
- पैडिंग: अपनी जरूरत के अनुसार ड्रॉपडाउन के हर हिस्से के चारों ओर का स्पेस एडजस्ट करें:
- आइटम पैडिंग: ड्रॉपडाउन मेन्यू आइटम के चारों ओर का स्पेस घटाएं या बढ़ाएं।
- सब-आइटम पैडिंग: ड्रॉपडाउन मेन्यू में सब-आइटम के चारों ओर का स्पेस एडजस्ट करें।
- कंटेनर पैडिंग: ड्रॉपडाउन कंटेनर के चारों ओर का स्पेस अपनी जरूरत के अनुसार घटाएं या बढ़ाएं।
- डायरेक्शन: आइटम टेक्स्ट का डायरेक्शन बदलें (बाएं से दाएं या दाएं से बाएं)।
- एलाइनमेंट: ड्रॉपडाउन आइटम और सब-आइटम को कंटेनर के बाईं ओर, दाईं ओर या बीच में संरेखित करें।
कंटेनर की डिजाइन कस्टमाइज करें
ड्रॉपडाउन में जोड़े गए आइटम और एलिमेंट दिखाने वाले कंटेनर का बैकग्राउंड फिल और रेडियस कस्टमाइज करें। इसे पेज पर अलग से उभारने के लिए, आप बॉर्डर और शैडो भी जोड़ और एडजस्ट कर सकते हैं।
- ड्रॉपडाउन कंटेनर चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टया आइकन पर क्लिक करें।
- नीचे स्क्रॉल करके डिजाइन पर जाएं।
- इसे इनेबल करने के लिए, एडिट दिस ड्रॉपडाउन ओनली टॉगल पर क्लिक करें।
- अपने मनचाहे बदलाव करें:
- बैकग्राउंड फिल: ड्रॉपडाउन कंटेनर का कलर बदलें या आकर्षक ग्रेडिएंट जोड़ें। अपनी डिजाइन की जरूरतों के हिसाब से अपारदर्शिता एडजस्ट करें और कई लेयर जोड़ें।
- बॉर्डर: ड्रॉपडाउन कंटेनर के बॉर्डर की चौड़ाई और कलर एडजस्ट करें।
- कॉर्नर: रेडियस एडजस्ट करके ड्रॉपडाउन कंटेनर के कॉर्नर को ज्यादा गोल या आयताकार बनाएं।
- शैडो: ड्रॉपडाउन कंटेनर में शैडो जोड़ें और उसका एंगल, कलर, दूरी वगैरह कस्टमाइज करें।
मेन्यू का डिज़ाइन कस्टमाइज़ करें
ड्रॉपडाउन आइटम दिखाने वाले मेन्यू को कस्टमाइज करें। पूरी तरह कस्टम लुक बनाने के लिए, आप कंटेनर की डिजाइन और हर स्टेट के आइटम व सब-आइटम एडजस्ट कर सकते हैं।
- कंटेनर में ड्रॉपडाउन मेन्यू चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- नीचे स्क्रॉल करके डिजाइन पर जाएं।
- इसे इनेबल करने के लिए, एडिट दिस ड्रॉपडाउन ओनली टॉगल पर क्लिक करें।
- वह एलिमेंट चुनें जिसे आप डिजाइन करना चाहते हैं:
- ड्रॉपडाउन आइटम
- ड्रॉपडाउन मेन्यू कंटेनर
- ड्रॉपडाउन सब-आइटम
- (ड्रॉपडाउन आइटम/ड्रॉपडाउन सब-आइटम) संबंधित स्टेट चुनें: रेगुलर, होवर, या करंट पेज।
- अपने मनचाहे बदलाव करें:
- बैकग्राउंड फिल: बैकग्राउंड कलर बदलें या आकर्षक ग्रेडिएंट जोड़ें। अपनी डिजाइन की जरूरतों के हिसाब से अपारदर्शिता एडजस्ट करें और कई लेयर जोड़ें।
- टेक्स्ट: ड्रॉपडाउन मेन्यू के आइटम और सब-आइटम की स्टाइल व फॉर्मेटिंग एडजस्ट करें।
- बॉर्डर: मेन्यू कंटेनर के चारों ओर बॉर्डर जोड़ें और एडजस्ट करें।
- कॉर्नर: रेडियस एडजस्ट करके मेन्यू कंटेनर के कॉर्नर को ज्यादा गोल या आयताकार बनाएं।
- शैडो: मेन्यू कंटेनर में शैडो जोड़ें और उसका एंगल, कलर, दूरी वगैरह कस्टमाइज करें।
