एक वेबसाइट के शीर्षलेख और पादलेख आवश्यक तत्व हैं। ज्यादातर मामलों में, हैडर नेविगेशन लिंक प्रदान करता है जो वेबसाइट के विभिन्न भागों में नेविगेट करना आसान बनाता है। दूसरी ओर, पाद लेख महत्वपूर्ण जानकारी है कि वेबसाइट आगंतुकों इस तरह के एक व्यावसायिक पता या संपर्क जानकारी के रूप में, आवश्यकता हो सकती है, कुछ पूर्व का उल्लेख होता है amp लेस।
शीर्षलेख और पाद लेख वर्डप्रेस पर उपयोगकर्ता की वर्तमान थीम द्वारा प्रदान किए जाते हैं। ये आमतौर पर अच्छी तरह से डिज़ाइन किए गए हैं और उनके अधिकांश उपयोगों के लिए पर्याप्त हैं। हालांकि, अगर आप अपनी थीम को कस्टमाइज़ करना चाहते हैं, तो आपको कोड बदलना होगा; यह तब होता है जब पेज बिल्डर plugin काम आता है। आप उनका उपयोग बिना किसी कोड को जाने वेबपेज घटकों को बनाने और बदलने के लिए कर सकते हैं।
यह ट्यूटोरियल हमें सिखाएगा कि वेबसाइट हेडर और फुटर कैसे बनाया जाता है। एलिमेंट प्रो का उपयोग किया जाएगा (चूंकि एलीमेंटर के मूल संस्करण में इन घटकों को बनाने के लिए सबसे महत्वपूर्ण विशेषताएं शामिल नहीं हैं)। इसलिए एलिमेंट प्रो डाउनलोड करें और सुनिश्चित करें कि यह चालू है।
- आपको एलिमेंटर को अपने पेज बिल्डर के रूप में क्यों चुनना चाहिए?
- एलिमेंटर आपको अपने कस्टम हेडर और फुटर का मुख्य लेआउट चुनने की अनुमति देता है।
- एक हैडर क्या है और यह क्या करता है?
- एक पाद क्या है, बिल्कुल?
- हैडर कैसे बनाये
- हैडर टेम्प्लेट विकसित करना
- हैडर मेनू में परिवर्तन करना
- हैडर प्रकाशन
- पाद लेख कैसे बनाएं
- फुटर टेम्प्लेट विकसित करना
- पाद संशोधन
- तैयार उत्पाद
- प्रतिक्रिया के लिए अपने शीर्षलेख और पाद लेख अनुभागों की जांच करें।
- चीजों को करीब लाना
आपको एलिमेंटर को अपने पेज बिल्डर के रूप में क्यों चुनना चाहिए?
एलिमेंटर सबसे उन्नत पेज बिल्डर है, जो उपयोगकर्ताओं को भव्य डिजाइन और लेआउट बनाने के लिए प्रीमियम तत्वों को नियोजित करने की अनुमति देता है। यह उन नौसिखियों के लिए बहुत फायदेमंद है जिन्हें कोडिंग का कोई पूर्व ज्ञान नहीं है। एलिमेंट में ड्रैग 'एन' ड्रॉप एडिटर यूजर्स को विजेट्स और आइटम्स को इधर-उधर करने की अनुमति देता है।
एलिमेंटर एक विज़ुअल पेज बिल्डर है जो उपयोगकर्ताओं को यह देखने की अनुमति देता है कि उनके पेज बिना मोड स्विच किए कैसे दिखाई देते हैं।
एलिमेंटर का उपयोग करने के लिए एक और सम्मोहक तर्क यह है कि अधिकांश काम बिना लागत के पूरा किया जा सकता है। उनका मुफ्त संस्करण पर्याप्त साइट संपादन क्षमताएं प्रदान करने में सक्षम से अधिक है। हालाँकि, हम मुफ़्त और सशुल्क दोनों संस्करणों पर विचार करेंगे ताकि आप अपनी ज़रूरतों के अनुसार सबसे अच्छा सूट चुन सकें।
एलिमेंटर के कुछ महत्वपूर्ण पहलू निम्नलिखित हैं जो इसे सार्थक बनाते हैं:
- खींचें और छोड़ें कार्यक्षमता समर्थित है।
- इसमें बड़ी संख्या में टेम्पलेट हैं।
- कुल मिलाकर 90 से अधिक विजेट हैं।
- उत्तरदायी समर्थन के लिए किसी कोडिंग की आवश्यकता नहीं है।
- फिर से करें और पूर्ववत करें विकल्प उपलब्ध हैं।
- स्वतः सहेजना उपलब्ध है।
एलिमेंटर आपको अपने कस्टम हेडर और फुटर का मुख्य लेआउट चुनने की अनुमति देता है।
यह मदद करेगा यदि आप एक अद्वितीय शीर्षलेख विकसित करने से पहले अपने वांछित शीर्षलेख और पाद लेख अनुभागों की सामान्य व्यवस्था पर निर्णय लेते हैं। पूर्व-निर्मित हेडर सेक्शन लेआउट को देखने से आपको कई विकल्प मिल सकते हैं।
आप विभिन्न शीर्षलेख अनुभागों में से चुन सकते हैं; सबसे आम और आधुनिक दिखने वाले हैडर में सबसे बाएं कोने में एक साइट लोगो, बीच में एक नेविगेशन बार और दाईं ओर एक खोज बार अनुभाग है।
अनंत संभावनाएं हैं, और आप अपनी इच्छानुसार कोई भी लेआउट बना सकते हैं।
मैंने नंबर 7 पूर्व-निर्मित हेडर टेम्प्लेट चुना; वर्डप्रेस वेबसाइट पर हेडर का उपयोग करने का यह सबसे आम और सरल तरीका है। हैडर टेम्प्लेट नाम को टेम्प्लेट > हैडर > सर्च टेम्प्लेट > कॉपी किए गए हेडर नाम पेस्ट में कॉपी और पेस्ट करें ।
जब आपको अपना इच्छित हेडर टेम्प्लेट मिल जाए, तो "एलिमेंट के साथ संपादित करें" चुनें, और आपको एलीमेंटर प्रो हेडर बिल्डर सेक्शन में ले जाया जाएगा।
आइये यह पार्टी शुरू करते हैं।
एक हैडर क्या है और यह क्या करता है?
आपके वेबपेज के शीर्ष भाग को "वेबसाइट हेडर" कहा जाता है। हेडर आमतौर पर आपकी पूरी वेबसाइट पर समान होता है। हालांकि, कुछ वेबसाइटें साइट के अलग-अलग हिस्सों के लिए अलग-अलग हेडर का इस्तेमाल करती हैं।
आपका हेडर डिज़ाइन आपके उपयोगकर्ताओं को आपकी वेबसाइट की पहली छाप देगा, चाहे वे आपके होमपेज पर, पेज के बारे में, या अन्य व्यक्तिगत सामग्री पर आए हों। और, यदि यह अच्छी तरह से डिज़ाइन किया गया है, तो यह उपयोगकर्ता का ध्यान खींचेगा और उन्हें स्क्रॉल करने और पढ़ने के लिए लुभाएगा।
हैडर आपकी कंपनी की ब्रांड पहचान के प्रचार में भी मदद कर सकता है।
मैं कंपनी के लोगो, फ़ॉन्ट, रंग, और समग्र ब्रांड भाषा जैसी सुविधाओं का उपयोग कर रहा हूं।
साइट नेविगेशन, साइट खोज, एक शॉपिंग कार्ट (बिक्री साइटों के लिए), कॉल टू एक्शन (सीटीए) बटन, और अन्य सुविधाएं जो उपयोगकर्ता अनुभव को बेहतर बनाती हैं और रूपांतरण दर बढ़ाती हैं, सभी हेडर में पाए जाते हैं।
एक पाद क्या है, बिल्कुल?
पाद लेख वेबपृष्ठ का वह भाग होता है जो पृष्ठ के निचले भाग में दिखाई देता है। वे आम तौर पर पूरी वेबसाइट पर, हेडर के समान सभी पेजों और पोस्ट पर लगातार प्रदर्शित होते हैं।
पादलेखों को अक्सर अनदेखा कर दिया जाता है, जो कि क्षमता की बर्बादी है, यह देखते हुए कि वे साइट के प्रत्येक पृष्ठ पर दिखाई देते हैं। वे हेडर के लिए समान रूप से महत्वपूर्ण हैं।
आपका फ़ुटर डिज़ाइन उपयोगी और महत्वपूर्ण जानकारी प्रदर्शित कर सकता है जैसे न्यूज़लेटर पंजीकरण, कॉपीराइट जानकारी, उपयोग की शर्तें और गोपनीयता, एक साइटमैप, संपर्क जानकारी, मानचित्र, वेबसाइट नेविगेशन, और बहुत कुछ, जो आपके द्वारा चुनी गई सेटिंग्स पर निर्भर करता है।
हैडर कैसे बनाये
हम इस खंड में एक अनुकूलित शीर्षलेख बनाने जा रहे हैं। अगर यह डराने वाला लगता है तो चिंता न करें; हम खरोंच से शुरू नहीं करेंगे। इसके बजाय, हम Elementór Pro के टेम्प्लेट का उपयोग करेंगे, जिसे Elementor की डिज़ाइन टीम द्वारा डिज़ाइन किया गया है।
हैडर टेम्प्लेट विकसित करना
WordPress admin पैनल पर, Templates पर होवर करें और हमारा Header बनाने के लिए Add New पर क्लिक करें ।
आपके द्वारा रूट किए जाने के बाद एक मोडल विंडो पॉप अप होगी। ड्रॉपडाउन मेनू से हैडर का चयन करें टेम्पलेट बनाएं :
यह एलिमेंट एडिटर लॉन्च करेगा। उसके बाद, आपको टेम्प्लेट की एक सूची प्रस्तुत की जाएगी जिसमें से चुनना है। तो वह चुनें जो आपको पसंद आए:
एक बार टेम्प्लेट चुनने के बाद इसे एलिमेंट एडिटिंग सेक्शन के शीर्ष पर दिखाना चाहिए:
लोगो बनाना: पहला कदम लोगो बनाना है। साइट के लाइव एडिटर में लोगो को हेडर में लगाने के लिए सेट करें। साइट पहचान पर क्लिक करके लोगो चुनें।
एक बार जब आप लोगो पर निर्णय ले लेते हैं, तो प्रकाशित करें ।
यदि आप एलीमेंटर इंटरफ़ेस को रीफ़्रेश करते हैं तो आपकी साइट का लोगो अब हेडर में होना चाहिए:
उसके बाद, आप अपनी इच्छानुसार कोई भी परिवर्तन कर सकते हैं।
हैडर मेनू में परिवर्तन करना
अगला काम जो हमें करना चाहिए वह है मेन्यू में बदलाव। यदि आपने एक मेनू तैयार किया है, तो टेम्प्लेट स्वतः ही इसे शामिल कर लेगा:
यहां हमारी मेनू संरचना है, जिसे आप हेडर टेम्प्लेट में देख सकते हैं:
यदि आपके पास एक से अधिक मेनू हैं, तो यदि आवश्यक हो तो आप सामग्री को अपडेट कर सकते हैं।
आप किसी भी अन्य विजेट की तरह ही इसके गुणों को संपादित कर सकते हैं।
यदि हमें और आइटम जोड़ने की आवश्यकता है, तो हम अपने शीर्षलेख में और अनुभाग जोड़ सकते हैं:
आइए एक हेडर और कुछ सोशल मीडिया आइकन जोड़कर शुरू करें:
उसके बाद, आप अपनी पसंद का कोई भी बदलाव कर सकते हैं। यहां बताया गया है कि हमारा संपादन कैसा रहा:
हैडर प्रकाशन
एक बार जब आप हेडर को बदलना समाप्त कर लेते हैं तो अब आप उसे प्रकाशित कर सकते हैं। amp उदाहरण में अपनी पूरी साइट पर हैडर का उपयोग करेंगे शर्त जोड़ें का चयन करने के बाद उस विकल्प का चयन करेंगे
और यहाँ एक पूर्व है amp हमारे लाइव साइट से एक पृष्ठ की le:
पाद लेख कैसे बनाएं
फुटर टेम्प्लेट विकसित करना
फ़ुटर बनाने की प्रक्रिया हेडर बनाने की प्रक्रिया के समान ही है। एक बनाने के लिए, इस तरह एक नया पादलेख टेम्पलेट बनाएं:
फिर एक टेम्पलेट पर निर्णय लें। फुटर कई प्रकार के आकार और आकार में आते हैं। कुछ में पक्की जानकारी शामिल है, जबकि अन्य के पास संपर्क फ़ॉर्म हैं। एक टेम्प्लेट चुनें जो आपकी आवश्यकताओं के लिए उपयुक्त हो।
हमने अपनी वेबसाइट के लिए जो टेम्प्लेट चुना है वह इस प्रकार है:
पाद संशोधन
जैसे ही आप संपादन शुरू करेंगे, आपको शीर्षलेख दिखाई देगा (यदि आप यह शर्त सेट करते हैं कि यह सभी पृष्ठों पर दिखाई दे)।
पाद लेख को आवश्यकतानुसार बदलें; हमारा संशोधन इस तरह दिखता है:
समाप्त होने के बाद पाद लेख प्रकाशित करें:
तैयार उत्पाद
यहां बताया गया है कि तैयार परिणाम कैसा दिखता है। हैडर और फुटर दोनों अब हमारी वेबसाइट पर उपयोग किए जाते हैं:
प्रतिक्रिया के लिए अपने शीर्षलेख और पाद लेख अनुभागों की जांच करें।
यह सबसे महत्वपूर्ण चरण है, और आपको यह सुनिश्चित करना चाहिए कि आपके शीर्षलेख और पाद लेख अनुभाग उत्तरदायी हैं। चूंकि पूर्ण-चौड़ाई वाला मेनू आमतौर पर मोबाइल दृश्य के अनुकूल नहीं होता है, इसलिए आपको पता होना चाहिए कि मोबाइल स्क्रीन पर आपका डिज़ाइन कैसा दिखाई देगा। एलीमेंटर साइडबार सेक्शन के निचले भाग में स्थित रिस्पॉन्सिव स्विच मोबाइल और टैब वर्जन को बदल सकते हैं।
आप अपने शीर्षलेख और पादलेख की प्रतिक्रिया का विभिन्न तरीकों से परीक्षण कर सकते हैं। पूर्व के लिए amp ले, तो आप Browserstack, CrossBrowser परीक्षण, और गूगल Resizer जैसे टूल का उपयोग सुनिश्चित करना है कि अपने वेबपेजों संभव के रूप में उत्तरदायी के रूप में कर रहे हैं कर सकते हैं। आप इसे विभिन्न उपकरणों के साथ प्रयोग करके मैन्युअल रूप से भी कर सकते हैं।
चीजों को करीब लाना
मुझे उम्मीद है कि इस गाइड ने एलीमेंटर प्रो का उपयोग करके अपने अद्वितीय शीर्षलेख और पाद लेख अनुभागों को तेज़ी से विकसित करने में आपकी सहायता की है। वर्डप्रेस में कई विशेषताएं हैं, लेकिन यह केवल हेडर और फुटर सेक्शन में कुछ संशोधनों की अनुमति देता है, अंत में एलिमेंटर प्रो पेज बिल्डर के साथ तय किया गया है। अपने साइट तत्वों पर कहीं अधिक बेहतर नियंत्रण के साथ, अब आप अपनी साइट के दृष्टिकोण को बेहतर ढंग से प्रदर्शित कर सकते हैं। इसके अलावा, एलिमेंटर की कार्यक्षमता में मुफ्त ऐडऑन का उपयोग करके सुधार किया गया है, जिससे उपयोगकर्ता अपनी वेबसाइटों को अधिक उन्नत क्षमताओं के साथ अनुकूलित कर सकते हैं।
