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