एलीमेंटर के साथ स्टिकी हेडर और स्क्रॉलिंग प्रभावों का उपयोग कैसे करें

जब कोई व्यक्ति आपकी वेबसाइट पर जाता है तो आम तौर पर वह पहली चीज़ हेडर देखता है, और यह इस बात के लिए आधार के रूप में कार्य करता है कि वे इसे कैसे खोजते हैं।

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

बेहतर उपयोगकर्ता नेविगेशन के लिए वेबसाइट को व्यवस्थित और संरचित करने के लिए स्टिकी हेडर वेब डिजाइनरों के बीच तेजी से लोकप्रिय हो रहे हैं।

इस ट्यूटोरियल में हम आपको दिखाएंगे कि एलिमेंटर का उपयोग करके अपना स्टिकी हेडर कैसे बनाएं।

स्टिकी हेडर उपयोगकर्ताओं को पृष्ठ के हेडर और मेनू अनुभाग को देखने की अनुमति देते हैं, भले ही वे कितनी भी नीचे स्क्रॉल करें।

• चरण 1: एक मेनू बनाने के लिए
• चरण 2: एलीमेंटर में अपना हेडर बनाना
• चरण 3: हेडर टेम्प्लेट बनाने के लिए एलीमेंटर का उपयोग करना
• चरण 4: अपने एलिमेंटर हेडर को चिपचिपा कैसे बनाएं
• चरण 5: हमारे सीएसएस को अनुकूलित करें
• निष्कर्ष

चरण 1: एक मेनू बनाने के लिए

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

चरण 2: एलीमेंटर में अपना हेडर बनाना

जब आप मुख्य मेनू का निर्माण पूरा कर लें तो एलीमेंटर टेम्प्लेट > थीम बिल्डर पर जाएँ थीम बिल्डर पेज पर हेडर क्षेत्र का चयन करें और " नया हेडर जोड़ें " पर क्लिक करें।

हेडर टेम्प्लेट को एक नाम दें और पॉप-अप स्क्रीन पर टेम्पलेट बनाएं

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

हम इस ट्यूटोरियल में अपने एलीमेंटर स्टिकी हेडर के साथ शुरुआत से शुरुआत करेंगे।

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

चरण 3: हेडर टेम्प्लेट बनाने के लिए एलीमेंटर का उपयोग करना

दो कॉलम वाला लेआउट बनाएं. सुनिश्चित करें कि अनुभाग की सामग्री की चौड़ाई " बॉक्स्ड " पर सेट है।

एलीमेंटर एडिट सेक्शन में कंटेंट चौड़ाई सेटिंग्स में, " एडिट " कॉलम के तहत पहले कॉलम की चौड़ाई को 20% पर सेट करें।

अपनी वेबसाइट के साइट लोगो को पहले कॉलम में रखें और इसे बाईं ओर संरेखित करें।

दूसरे कॉलम में एक नेविगेशन मेनू जोड़ें और चरण 1 में आपके द्वारा बनाए गए मुख्य मेनू का चयन करें। नेविगेशन मेनू को दाईं ओर संरेखित करें।

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

चरण 4: अपने एलिमेंटर हेडर को चिपचिपा कैसे बनाएं

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

संपादन अनुभाग (संपूर्ण हेडर अनुभाग) पर जाएँ ड्रॉप-डाउन मेनू से उन्नत > मोशन प्रभाव चुनें

मोशन इफ़ेक्ट के अंतर्गत " स्टिकी टू द टॉप डिवाइस " चुनें जहाँ आप स्टिकी हेडर दिखाना चाहते हैं।

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

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

एलिमेंटर आपके हेडर को प्रकाशित करने के बाद आपको उसके लिए एक शर्त जोड़ने का संकेत देता है। आप शर्तों को जोड़कर साइट पर जहां चाहें वहां हेडर दिखा सकते हैं।

हम चाहते थे कि यह हेडर 404 पेज को छोड़कर पूरी साइट पर दिखाई दे। परिणामस्वरूप, हमने 404 पेज को छोड़कर पूरी साइट को विकल्प में शामिल कर लिया।

जैसा कि आप देख सकते हैं, अपना वैयक्तिकृत स्टिकी हेडर बनाने के लिए एलीमेंटर का उपयोग करना सरल और दर्द रहित है!

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

आप यहां स्टिकी हेडर की ऊंचाई, पृष्ठभूमि रंग, संक्रमण और स्टिकी प्रभावों को अनुकूलित कर सकते हैं।

अपने स्टिकी हेडर को और अधिक स्टाइलिश (संपूर्ण हेडर अनुभाग) बनाने के लिए संपादन क्षेत्र पर वापस लौटें। ड्रॉप-डाउन मेनू से उन्नत > मोशन प्रभाव चुनें

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

मोशन ऑफसेट को 100 पर सेट करें

कृपया ध्यान रखें कि ऑफसेट प्रभाव विकल्प केवल तभी काम करेंगे जब कस्टम सीएसएस का उपयोग किया जाएगा। नतीजतन, यदि आप अपना स्वयं का कोई कस्टम सीएसएस नहीं जोड़ रहे हैं, तो आप अंतिम विकल्प को छोड़ सकते हैं।

अंतिम स्टिकी हेडर प्रकाशित करने से पहले, आप वैकल्पिक रूप से अंतिम स्टिकी हेडर में शर्तें जोड़ सकते हैं। amp एक उदाहरण वह है जहां आप स्टिकी हेडर दिखाना चाहते हैं। उदाहरण के तौर पर amp संपूर्ण साइट " मानदंड चुन सकते हैं

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

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

कस्टम सीएसएस को शामिल करने के लिए नीचे दी गई प्रक्रियाओं का पालन करें:

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

उसके बाद नीचे CSS कोड पेस्ट करें।

हेडर.स्टिकी-हेडर { --हेडर-ऊंचाई: 90px; --अस्पष्टता: 0.90; --श्रिंक-मी: 0.80; --चिपचिपा-पृष्ठभूमि-रंग: #0e41e5; --संक्रमण: .3s आसानी से अंदर-बाहर; संक्रमण: पृष्ठभूमि-रंग var(--संक्रमण), पृष्ठभूमि-छवि var(--संक्रमण), पृष्ठभूमि-फ़िल्टर var(--संक्रमण), अपारदर्शिता var(--संक्रमण); } हेडर.स्टिकी-हेडर.एलिमेंट-स्टिकी--इफेक्ट्स { बैकग्राउंड-कलर: var(--स्टिकी-बैकग्राउंड-कलर) !महत्वपूर्ण; पृष्ठभूमि-छवि: कोई नहीं !महत्वपूर्ण; अपारदर्शिता: var(--अस्पष्टता) !महत्वपूर्ण; -वेबकिट-बैकड्रॉप-फ़िल्टर: ब्लर(10px); पृष्ठभूमि फ़िल्टर: धुंधला(10px); } हेडर.स्टिकी-हेडर > .एलिमेंट-कंटेनर { ट्रांज़िशन: न्यूनतम-ऊंचाई var(--ट्रांज़िशन); } हेडर.स्टिकी-हेडर.एलिमेंटर-स्टिकी--इफेक्ट्स > .एलिमेंटर-कंटेनर {न्यूनतम-ऊंचाई: कैल्क(var(--हेडर-ऊंचाई) * var(--श्रिंक-मी))!महत्वपूर्ण; ऊंचाई: कैल्क(var(--हेडर-ऊंचाई) * var(--श्रिंक-मी)); } हेडर.स्टिकी-हेडर .एलिमेंटर-एनएवी-मेनू .एलिमेंटर-आइटम {ट्रांज़िशन: पैडिंग var(--ट्रांज़िशन); } हेडर.स्टिकी-हेडर.एलिमेंटर-स्टिकी--इफेक्ट्स .एलिमेंटर-नेव-मेनू .एलिमेंटर-आइटम { पैडिंग-बॉटम: 10px!महत्वपूर्ण; पैडिंग-टॉप: 10px!महत्वपूर्ण; } हेडर.स्टिकी-हेडर > .एलिमेंटर-कंटेनर .लोगो आईएमजी {ट्रांज़िशन: अधिकतम-चौड़ाई var(--ट्रांज़िशन); } हेडर.स्टिकी-हेडर.एलिमेंटर-स्टिकी--इफेक्ट्स .लोगो आईएमजी { अधिकतम-चौड़ाई: कैल्क(100% * वर(--श्रिंक-मी)); } 

चरण 5: हमारे सीएसएस को अनुकूलित करें

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

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

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

यहां पांच सीएसएस वेरिएबल हैं, प्रत्येक वेरिएबल के लिए डिफ़ॉल्ट मान लाल रंग में दिखाए गए हैं।

चिपचिपा पृष्ठभूमि रंग #0e41e5 है और हेडर ऊंचाई 90px है। अन्य स्टाइलिंग विकल्पों में शामिल हैं: 0.90 की अपारदर्शिता, 0.80 की श्रिंक-मी, 0.90 की अपारदर्शिता, और 300ms का ईज-इन/ईज-आउट ट्रांज़िशन।

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

amp के लिए, यदि आप हेडर की ऊंचाई को 100px तक बढ़ाना चाहते हैं, तो यहां बताया गया है कि ऊंचाई बदलने से पहले और बाद में यह कैसा दिखेगा:

पहले, हेडर की ऊँचाई 90 पिक्सेल थी; इसके बाद, हेडर की ऊंचाई 100 पिक्सेल थी।

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

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

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

यहां एलिमेंटर उपयोगकर्ताओं के लिए उपलब्ध असंख्य हेडर डिज़ाइन विकल्पों के कुछ amp दिए गए हैं।

निष्कर्ष

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

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