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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एडिट " कॉलम के तहत पहले कॉलम की चौड़ाई को 20% पर सेट

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

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

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

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

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

ऐसा करने के लिए, संपादन अनुभाग (संपूर्ण शीर्षलेख अनुभाग) पर जाएं। ड्रॉप -डाउन मेनू से उन्नत > मोशन प्रभाव

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

हेडर.स्टिकी-हेडर {--हेडर-ऊंचाई: 90px; --अस्पष्टता: 0.90; - सिकोड़ें-मी: 0.80; --स्टिकी-बैकग्राउंड-रंग: #0e41e5; --संक्रमण: .3s आसानी से बाहर; संक्रमण: पृष्ठभूमि-रंग var (-- संक्रमण), पृष्ठभूमि-छवि var (-- संक्रमण), पृष्ठभूमि-फ़िल्टर var (-- संक्रमण), अस्पष्टता var (-- संक्रमण); } हैडर.स्टिकी-हेडर.एलिमेंटर-स्टिकी--इफेक्ट्स { बैकग्राउंड-कलर: वर(--स्टिकी-बैकग्राउंड-कलर) !महत्वपूर्ण; पृष्ठभूमि-छवि: कोई नहीं! महत्वपूर्ण; अस्पष्टता: वर(--अस्पष्टता) !महत्वपूर्ण; -वेबकिट-बैकड्रॉप-फ़िल्टर: ब्लर (10px); बैकड्रॉप-फ़िल्टर: ब्लर (10px); } हैडर.स्टिकी-हेडर > .elementor-container {संक्रमण: न्यूनतम-ऊंचाई var(--transition); } हैडर.स्टिकी-हेडर.एलिमेंटर-स्टिकी--इफेक्ट्स > .elementor-कंटेनर {न्यूनतम-ऊंचाई: कैल्क (वर(-हेडर-ऊंचाई) * var(--shrink-me))!महत्वपूर्ण; ऊंचाई: कैल्क (वर (--हेडर-ऊंचाई) * वर (--हटना-मुझे)); } हैडर.स्टिकी-हेडर .elementor-nav-menu .elementor-item {संक्रमण: पैडिंग var(--transition); } हैडर.स्टिकी-हेडर.तत्व-चिपचिपा--प्रभाव पैडिंग-टॉप: 10px!महत्वपूर्ण; } हैडर.स्टिकी-हेडर > .elementor-container .logo img {संक्रमण: अधिकतम-चौड़ाई var(--transition); } Header.sticky-header.elementor-sticky-- Effects .logo img {अधिकतम-चौड़ाई: कैल्क(100% * var(--shrink-me)); } 

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

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

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

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

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

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

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

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

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

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

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

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

यहां कुछ पूर्व कर रहे हैं amp कई हैडर डिजाइन Elementor उपयोगकर्ताओं के लिए उपलब्ध विकल्पों में से लेस।

निष्कर्ष

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

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