एक चिपचिपा हेडर स्क्रीन के शीर्ष पर पिन रहता है जबकि आगंतुक स्क्रॉल करता है आपका लोगो, मेनू, और कॉल-टू-एक्शन बटन पहुंच योग्य रहता है चाहे कोई कितना भी नीचे जाए, यही कारण है कि लगभग हर सास और एजेंसी साइट एक जहाज करती है।
यह मार्गदर्शिका दिखाती है कि एलिमेंटर में मुफ्त का उपयोग करके चिपचिपा हेडर कैसे बनाया जाए मास्टर एडॉन्स थीम बिल्डरे िलए, तो आपको एलिमेंट प्रो की आवश्यकता नहीं होगी और जब मैं यहां मास्टर एडन का उपयोग कर रहा हूं, तो विधि सार्वभौमिक है: हेडर को टेम्पलेट के रूप में बनाएं, फिर इसकी कंटेनर स्थिति को फिक्स्ड पर सेट करें कोई भी हेडर बिल्डर जो आपको एलिमेंट में हेडर को संपादित करने देता है, उसी तीन क्लिक का अनुसरण करता है।
इस पोस्ट के २०२० संस्करण ने आपको एक अनुभाग पर सीएसएस आईडी छोड़ने और नेविगेशन मेनू विजेट में पेस्ट करने के लिए कहा था वह अनुभाग युग था एलिमेंटर ने ३.६ से अपने डिफ़ॉल्ट लेआउट के रूप में फ्लेक्सबॉक्स कंटेनर का उपयोग किया है, और स्थिति नियंत्रण अब पैनल में सही बैठता है, इसलिए पूरे सीएसएस आईडी नृत्य चला गया है।
वास्तव में एक चिपचिपा हेडर क्या है
दो अलग-अलग व्यवहारों को एक ही नाम से बुलाया जाता है, और उन्हें मिश्रण करना यही कारण है कि लोग एक ऐसी सेटिंग के लिए शिकार करते हैं जो मौजूद नहीं है।
एक स्थिर हेडर उस क्षण से स्क्रीन पर है जब पृष्ठ लोड होता है और कभी नहीं छोड़ता है यही है position: fixed करता है, और यही हम यहां निर्माण कर रहे हैं।
एक स्टिकी-ऑन-स्क्रॉल हेडर सामान्य रूप से शीर्ष पर बैठता है, स्क्रॉल दूर, फिर वापस स्लाइड करता है जब आगंतुक स्क्रॉल करता है आप देखेंगे कि इसे स्मार्ट स्क्रॉल या छिपाने-ऑन-स्क्रॉल कहा जाता है इसे स्क्रॉल प्रभाव की आवश्यकता होती है, और एलिमेंटर प्रो में उन लोगों को रखता है।
अधिकांश साइटों के लिए फिक्स्ड हेडर वह है जिसे आप वास्तव में चाहते हैं, और यह वह है जिसे आप मुफ्त में बना सकते हैं।
समस्या: आपका हेडर स्क्रॉल हो जाता है
यहाँ शुरुआती बिंदु है एक सामान्य एलिमेंटर हेडर किसी भी अन्य कंटेनर की तरह पृष्ठ के शीर्ष पर बैठता है।
थोड़ा नीचे स्क्रॉल करें और यह चला गया है लोगो, मेनू, नि: शुल्क डेमो बटन का अनुरोध करें, यह सब स्क्रीन के शीर्ष से दूर है इसलिए एक आगंतुक जो आपके मूल्य निर्धारण अनुभाग में आता है और क्लिक करना चाहता है संपर्क फिर से मेनू खोजने के लिए वापस ऊपर स्क्रॉल करना होगा।
यह पूरी समस्या है जो एक चिपचिपा हेडर हल करता है।
इससे पहले कि आप शुरू करें
आपको निःशुल्क एलिमेंटर, संस्करण 3.6 या नए की आवश्यकता है, ताकि कंटेनर चालू रहें।
सेटिंग को लागू करने के लिए आपको हेडर टेम्पलेट की भी आवश्यकता है एलिमेंट का अपना थीम बिल्डर प्रो-केवल है, इसलिए एक मुफ्त पकड़ोः मास्टर ऐडऑन एक मुफ्त शामिल है हेडर बिल्डरऔर इसका थीम बिल्डर फुटर्स, ४०४ एस, अभिलेखागार और एकल टेम्पलेट्स को भी संभालता है।
पहले से ही एक और प्लगइन से एक हेडर टेम्पलेट है चरण २ पर जाएं स्थिति सेटिंग मूल एलिमेंट है, इसलिए यह वही व्यवहार करता है जहां से आपका हेडर आया था।
चरण १: एलिमेंट में अपना हेडर टेम्पलेट खोलें
को जा मास्टर ऐडऑन > थीम बिल्डरआपके टेम्प्लेट प्रकार के अनुसार सूचीबद्ध हैं मेरा एक हेडर और एक पाद लेख है, दोनों सक्रिय हैं, दोनों पूरी साइट पर प्रदर्शित करने के लिए सेट हैं।
अभी तक कोई हेडर नहीं? क्लिक करना नया टेम्पलेट जोड़ें, प्रकार को हेडर पर सेट करें, सक्रियण चालू करें, और स्थिति को संपूर्ण साइट पर सेट करें। द हेडर बिल्डर डॉक्स इसे ढक दो, और प्रवाह वही है जिससे मैं अंदर चला था एलिमेंटर में पाद लेख को संपादित करने के लिए गाइड.
हेडर टेम्पलेट को होवर करें और हिट करें एलिमेंट के साथ संपादित करें। हेडर अपने कैनवास पर खुलता है।
चरण २: हेडर कंटेनर का चयन करें
लोग इसे लगातार गलत समझते हैं, इसलिए यहां सटीक रहें: आप चाहते हैं बाहरी कंटेनर हेडर का नहीं लोगो, नव मेनू विजेट नहीं, और इसके अंदर टक किए गए नेस्टेड कंटेनर नहीं।
यह सुनिश्चित करने का विश्वसनीय तरीका है संरचना पैनल, शीर्ष बार में परतें आइकन उस पेड़ में शीर्ष-स्तरीय कंटेनर पर क्लिक करें और पूरे हेडर को हाइलाइट करना चाहिए यदि केवल लोगो या मेनू रोशनी करता है, तो आपने एक बच्चे तत्व को पकड़ लिया है, और उस पर स्थिति सेट करना आपके हेडर के बजाय स्क्रीन पर उस विजेट को विचित्र लगता है, और यह जांचने के लिए पहली बात है कि क्या आपका परिणाम अजीब है।
चरण ३: कंटेनर की स्थिति को ठीक करने के लिए सेट करें
हेडर कंटेनर चयनित होने पर, खोलें उन्नत टैब करें और इसका विस्तार करें लेआउट अनुभाग। द स्थिति ड्रॉपडाउन के तीन विकल्प हैं।
डिफ़ॉल्ट वह है जो अब आपके पास है: हेडर पृष्ठ के साथ स्क्रॉल करता है स्क्रीन के बजाय पृष्ठ पर हेडर को पूर्ण पिन करता है, इसलिए यह अभी भी स्क्रॉल करता है, जो ओवरले हेडर के लिए है, चिपचिपा नहीं है इसे व्यूपोर्ट पर पिन किया गया है, और यह वही है जो आप चाहते हैं।
चुनना तयऔर पैनल ओरिएंटेशन नियंत्रण के साथ फैलता है।
की ऑफसेट के साथ क्षैतिज अभिविन्यास को बाईं ओर सेट करें 0और ऑफसेट के साथ शीर्ष पर लंबवत अभिविन्यास 0दोनों पर शून्य हेडर को व्यूपोर्ट के बहुत ऊपर-बाएं पर चिपका देता है यदि आप चाहते हैं कि हेडर शीर्ष किनारे से थोड़ा नीचे तैरता है तो ऊर्ध्वाधर ऑफसेट उठाएं।
एलिमेंट भी आप पर एक चेतावनी फेंक देगाः “कस्टम पोजिशनिंग को रिस्पॉन्सिव वेब डिज़ाइन के लिए सर्वोत्तम अभ्यास नहीं माना जाता है और इसका उपयोग बहुत बार नहीं किया जाना चाहिए।” इसे अनदेखा करें यह एक लेआउट के माध्यम से निश्चित और निरपेक्ष तत्वों को बिखेरने के खिलाफ एक सामान्य सावधानी है, और एक निश्चित हेडर पाठ्यपुस्तक का मामला है जहां यह सही कॉल है जब आप कर रहे हैं तो बस मोबाइल दृश्य की जांच करें, जो मैं वापस आ जाऊंगा।
चरण ४: जेड-इंडेक्स बढ़ाएं
अभी भी लेआउट अनुभाग में, खोजें जेड-इंडेक्स क्षेत्र और इसे कुछ आराम से उच्च पर सेट करें मैं ९९ का उपयोग करता हूं।
जेड-इंडेक्स यह तय करता है कि दो ओवरलैप होने पर कौन सा तत्व शीर्ष पर बैठता है एक निश्चित हेडर को आपके पृष्ठ सामग्री को ओवरलैप करने की गारंटी दी जाती है क्योंकि आगंतुक स्क्रॉल करता है, और यदि इसका जेड-इंडेक्स बहुत कम है, तो सामग्री सीधे इसके शीर्ष पर क्लासिक बग है जहां हेडर तकनीकी रूप से चिपचिपा है लेकिन स्लाइडर्स, पॉपअप और छवियां इसके माध्यम से सही हल करती हैं।
यदि कुछ अभी भी हेडर को कवर करता है, तो संख्या को ऊपर उठाएं यह केवल जो कुछ भी खो रहा है उसे हरा देना है, और बहुत सारे स्लाइडर और पॉपअप प्लगइन्स हजारों में अपना खुद का जेड-इंडेक्स सेट करते हैं।
चरण ५: प्रकाशित करें
हिट प्रकाशित करें.
लाइव साइट खोलें और स्क्रॉल करें हेडर स्क्रीन के शीर्ष पर पूरे रास्ते नीचे लॉक रहता है।
यदि यह अभी भी सामने के छोर पर स्क्रॉल करता है लेकिन संपादक में सही दिखता है, तो डिबगिंग शुरू करने से पहले अपने कैश को साफ़ करें कैशिंग प्लगइन खुशी से कुछ समय के लिए पुराने हेडर सीएसएस की सेवा करेगा।
तीन चीजें जो एक निश्चित हेडर को तोड़ती हैं, और फिक्स
ऊपर दिए गए चरणों में हेडर पिन हो जाता है इसके बाद जो कुछ भी होता है वह एक चिपचिपा हेडर को अलग करता है जो एक वास्तविक साइट के साथ संपर्क से बच जाता है जिसे आप एक सप्ताह बाद वापस चीर देते हैं।
1। हेडर पारदर्शी हो जाता है और सामग्री दिखाई देती है
एक निश्चित तत्व सामान्य पृष्ठ प्रवाह से बाहर उठाया जाता है, इसलिए यह किसी भी चीज़ से पृष्ठभूमि विरासत में बंद हो जाता है यदि आपने हेडर पर कभी पृष्ठभूमि रंग सेट नहीं किया है, तो आपकी पृष्ठ सामग्री स्क्रॉल होती है नीचे यह और सीधे दिखाता है, और जैसे ही कोई छवि इसके पीछे से गुजरती है, आपका मेनू टेक्स्ट अपठनीय सूप में बदल जाता है।
हेडर कंटेनर का चयन करें, पर जाएं शैली > पृष्ठभूमिऔर इसे एक ठोस रंग दें यदि आप वास्तव में एक पारदर्शी हेडर चाहते हैं, तो यह एक वैध रूप है, लेकिन फिर इसके पीछे काम करने के लिए पहले खंड को डिज़ाइन करें।
2। पहला खंड हेडर के पीछे छिपा है
एक ही मूल कारण एक निश्चित हेडर अब लेआउट में जगह नहीं लेता है, इसलिए पहला खंड ऊपर की ओर स्लाइड करता है ताकि वह छोड़े गए अंतराल को भर सके और इसका हिस्सा हेडर के पीछे फंस जाए।
अपने पहले खंड में शीर्ष पैडिंग जोड़ें, मोटे तौर पर हेडर की ऊंचाई से मेल खाता है यदि हेडर ८० पीएक्स लंबा है, तो नायक को शीर्ष पैडिंग का ८० पीएक्स दें यदि आप सुनिश्चित नहीं हैं कि यह कितना लंबा है, तो सामने के छोर पर हेडर पर राइट-क्लिक करें और इसका निरीक्षण करें ब्राउज़र टूल में ऊंचाई वहीं है।
३ यह मोबाइल पर स्क्रीन को खा जाता है
फोन स्क्रीन कम हैं एक हेडर जो डेस्कटॉप मॉनिटर पर ठीक लगता है, फोन के व्यूपोर्ट के एक गंभीर हिस्से को निगल सकता है और फिर हर पृष्ठ के नीचे आगंतुक का पालन कर सकता है।
एलिमेंटर के उत्तरदायी मोड में मोबाइल दृश्य पर स्विच करें और हेडर के ऊर्ध्वाधर पैडिंग को काटें स्थिति नियंत्रण प्रति-डिवाइस भी हैं, इसलिए आप स्थिति को वापस सेट कर सकते हैं चूक केवल मोबाइल पर और हेडर को वहां स्क्रॉल करने दें एक लंबे लेख पृष्ठ पर जो आमतौर पर बेहतर कॉल है यदि आप कस्टम ब्रेकप्वाइंट चलाते हैं, तो कस्टम ब्रेकप्वाइंट एक्सटेंशन आपको इसे अपनी वास्तविक डिवाइस चौड़ाई में ट्यून करने देता है।
क्या यह अन्य हेडर प्लगइन्स के साथ काम करता है?
हाँ, और यह समझने योग्य हिस्सा है। स्थिति: फिक्स्ड एक देशी एलिमेंट कंट्रोल हैं, मास्टर एडॉन्स फीचर नहीं मास्टर एडॉन्स यहां बिल्कुल एक काम कर रहा है: आपको एक मुफ्त हेडर टेम्पलेट दे रहा है जो एलिमेंटर में खुलता है एक बार जब आप संपादक में होते हैं, तो चिपचिपा हिस्सा सादा एलिमेंटर होता है।
इसलिए यदि आप एक अलग थीम बिल्डर के साथ हेडर बनाते हैं, या आपकी थीम अपने स्वयं के एलिमेंटर-संपादन योग्य हेडर को शिप करती है, तो वही उन्नत > लेआउट > स्थिति > निश्चित पथ लागू होता है केवल एक चीज जो बदलती है वह है जहां आप संपादन के लिए हेडर खोलने के लिए जाते हैं।
नो-जंप विकल्प: मुफ़्त कस्टम सीएसएस के साथ चिपचिपी स्थिति
फिक्स्ड पोजिशनिंग पेज फ्लो से हेडर को बाहर निकालती है, यही कारण है कि आपको पहले सेक्शन को पैड करना पड़ता है ताकि इसके पीछे कुछ भी न छिपा हो यदि आप उस चरण को छोड़ना चाहते हैं, तो सीएसएस position: sticky विकल्प है यह हेडर को प्रवाह में रखता है और केवल इसे पिन करता है जब यह शीर्ष पर पहुंच जाता है, इसलिए ठीक करने के लिए कोई सामग्री कूद नहीं है।
पकड़ वह जगह है जहां आप सीएसएस जोड़ते हैं एलिमेंट का प्रति-तत्व कस्टम सीएसएस बॉक्स एक प्रो सुविधा है, लेकिन मुफ्त मास्टर एडॉन्स कस्टम सीएसएस एक्सटेंशन आपको बिना किसी कीमत के एक ही बॉक्स देता है हेडर कंटेनर का चयन करें, इसके कस्टम सीएसएस फ़ील्ड खोलें, और इसे पेस्ट करेंः
selector {
position: sticky;
top: 0;
z-index: 99;
}selector तत्व के लिए एलिमेंटर शॉर्टहैंड है जिसे आप संपादित कर रहे हैं, इसलिए आपको आईडी या क्लास की आवश्यकता नहीं है एक गोचा: यदि किसी भी माता-पिता कंटेनर के पास है overflow: hidden, स्टिकी चुपचाप काम करना बंद कर देता है, इतना स्पष्ट कि यदि हेडर पिन करने से इनकार करता है तो पूर्वज से। पूर्ण व्यवहार प्रलेखित है सीएसएस स्थिति पर एमडीएन संदर्भ.
तुलना में मुफ्त चिपचिपा हेडर तरीके
इनमें से तीन मार्ग मुफ्त हैं, और प्रत्येक एक अलग आवश्यकता फिट बैठता है यदि आप कच्चे उन्नत टैब पर एक निर्देशित पैनल पसंद करते हैं, तो मास्टर एडॉन्स पोजिशनिंग एक्सटेंशन एक ही स्थान पर समान निश्चित नियंत्रण को उजागर करता है।
| विधि | कोड की जरूरत है | लागत | सामग्री कूद | लिए सर्वश्रेष्ठ |
|---|---|---|---|---|
| स्थिति निश्चित (देशी या स्थिति निर्धारण) | नहीं | मुक्त | पैडिंग फिक्स की जरूरत है | हमेशा-दृश्यमान शीर्षलेख |
| स्थिति: चिपचिपा (कस्टम सीएसएस) | एक स्निपेट | मुक्त | कोई नहीं | साफ लेआउट, कोई कूद |
| एलिमेंटर प्रो चिपचिपा स्क्रॉल प्रभाव | नहीं | भुगतान किया | संभाला | स्क्रॉल पर छिपाएँ और सिकोड़ें |
| समर्पित चिपचिपा-हेडर प्लगइन | नहीं | मुक्त | संभाला | पूर्वनिर्मित स्क्रॉल प्रभाव |
स्क्रॉल पर सिकुड़न या रंग परिवर्तन जोड़ना
एक बार आगंतुक स्क्रॉल करने के बाद हेडर को रंग को सिकोड़ना या स्वैप करना चाहते हैं वह स्क्रॉल दूरी पढ़ता है, जो सीएसएस अपने आप नहीं कर सकता है मुफ्त मास्टर एडॉन्स के माध्यम से जावास्क्रिप्ट की कुछ लाइनें कस्टम जेएस एक्सटेंशन स्क्रॉल थ्रेशोल्ड के पीछे हेडर पर एक वर्ग को टॉगल कर सकते हैं, फिर आप कस्टम सीएसएस में उस वर्ग को स्टाइल करते हैं यह एक प्लगइन की तुलना में अधिक काम है जो प्रभाव को जहाज करता है, इसलिए हाथ से इसे बनाने से पहले प्रयास को तौलें।
हेडर को चिपकाने लायक बनाना
एक बार जब यह स्क्रीन से चिपक जाता है, तो हेडर १००% समय दिखाई देता है, इसलिए यह एक दूसरे पास के लायक है।
पहले ऊंचाई ट्रिम करें एक लंबा हेडर जो कभी दूर नहीं जाता है वह तेजी से परेशान हो जाता है, और आपके द्वारा सहेजा जाने वाला प्रत्येक पिक्सेल सामग्री का एक पिक्सेल है जिसे आगंतुक देख सकता है फिर देखें कि इसमें क्या है: स्क्रीन पर एक स्थायी स्लॉट आपके सर्वोत्तम लिंक के लिए एक अच्छा घर है, चाहे वह डेमो, मूल्य निर्धारण, या संपर्क बटन हो।
बड़ी साइट? मास्टर ऐडऑन नेविगेशन मेनू विजेट मेगा मेनू बनाता है, इसलिए आप हेडर के बढ़ने के बिना पूरी संरचना को एक क्लिक दूर रख सकते हैं और वजन पर नजर रख सकते हैं, क्योंकि हेडर अब हर पृष्ठ पर लोड होता है और कभी भी अनलोड नहीं होता है एलिमेंटर स्पीड गाइड यदि आपका लोड समय पहले से ही तंग है तो यह पढ़ने लायक है।
यदि आप स्क्रैच से हेडर नहीं बनाना चाहते हैं, तो मास्टर एडॉन्स टेम्पलेट लाइब्रेरी तैयार हेडर हैं जिन्हें आप आयात कर सकते हैं और फिर समान चरणों के साथ चिपचिपा बना सकते हैं, और टेम्पलेट किट पूरी साइट के लिए हेडर और पादलेखों का मिलान भेजें।
अक्सर पूछे जाने वाले प्रश्न
क्या मैं एलिमेंटर फ्री में एक चिपचिपा हेडर बना सकता हूं?
हाँ स्थिति: निश्चित नियंत्रण मुक्त एलिमेंट का हिस्सा है आपको इसे लागू करने के लिए केवल हेडर टेम्पलेट की आवश्यकता है, और मास्टर एडॉन्स थीम बिल्डर आपको मुफ्त में एक देता है एलिमेंट के अपने थीम बिल्डर और इसके चिपचिपा स्क्रॉल प्रभाव केवल प्रो-भाग हैं।
एक निश्चित और एक चिपचिपा हेडर के बीच क्या अंतर है?
एक निश्चित हेडर हमेशा पृष्ठ लोड से दिखाई देता है और कभी भी दूर स्क्रॉल नहीं करता है एक चिपचिपा-ऑन-स्क्रॉल हेडर स्क्रॉल बंद हो जाता है, फिर विज़िटर स्क्रॉल होने पर वापस स्लाइड करता है स्थिति: फिक्स्ड आपको पहले एक दूसरे को एलिमेंटर प्रो के स्क्रॉल प्रभाव की आवश्यकता होती है।
मेरी सामग्री चिपचिपा हेडर के पीछे क्यों छिपी हुई है?
एक निश्चित हेडर सामान्य पृष्ठ प्रवाह से हटा दिया जाता है, इसलिए नीचे अनुभाग इसके नीचे ऊपर स्लाइड करता है अपने पहले खंड में शीर्ष पैडिंग जोड़ें, मोटे तौर पर हेडर की ऊंचाई से मेल खाते हुए, और हेडर कंटेनर पर एक ठोस पृष्ठभूमि रंग सेट करें।
मेरे पृष्ठ की सामग्री मेरे हेडर के शीर्ष पर क्यों स्क्रॉल करती है?
जेड-इंडेक्स बहुत कम है लेआउट के तहत उन्नत टैब में, हेडर कंटेनर पर जेड-इंडेक्स को ९९ (या उच्चतर) पर सेट करें ताकि यह पृष्ठ पर बाकी सब कुछ के ऊपर ढेर हो जाए।
क्या मुझे मोबाइल पर स्टिकी हेडर का उपयोग करना चाहिए?
अक्सर नहीं एक निश्चित हेडर एक फोन पर दुर्लभ ऊर्ध्वाधर स्थान खाता है एलिमेंट के स्थिति नियंत्रण प्रति-डिवाइस हैं, इसलिए मोबाइल दृश्य पर स्विच करें और स्थिति को डिफ़ॉल्ट पर वापस सेट करें, या कम से कम हेडर के पैडिंग को काट दें।
लपेटकर
एलिमेंटर में एक चिपचिपा हेडर बनाना एक तत्व पर तीन सेटिंग्स है हेडर कंटेनर का चयन करें, शून्य ऑफसेट के साथ तय करने के लिए स्थिति सेट करें, जेड-इंडेक्स उठाएं उसके बाद सब कुछ सफाई है: हेडर को एक ठोस पृष्ठभूमि दें, पहले खंड को पैड करें ताकि कुछ भी इसके पीछे छिप न जाए, और जांच लें कि फोन पर ऐसा महसूस होता है इससे पहले कि आप इसे कॉल करें।
यह सब मुफ्त एलिमेंट पर चलता है केवल एक चीज जिसे आपको संपादित करने के लिए हेडर टेम्पलेट की आवश्यकता होती है, जो कि मुफ्त है मास्टर एडॉन्स में थीम बिल्डर पाद लेख, ४०४, संग्रह, और एकल टेम्पलेट्स के साथ प्रदान करता है यदि आप बाद में टूलकिट के बाकी चाहते हैं, तो यह वही है प्रो योजनाएं कवर, लेकिन इस ट्यूटोरियल में कुछ भी इसकी जरूरत नहीं है।
संबंधित पढ़नाः एलिमेंट के साथ वर्डप्रेस में पाद लेख को कैसे संपादित करें, एलिमेंटर में एक विषम पृष्ठभूमि कैसे बनाएं, और एलिमेंट के साथ एक पेज की वेबसाइट कैसे बनाएं.
