एक शानदार एस्ट्रा थीम हेडर कैसे बनाएं?

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

विषयसूची:

• हेडर आपके वेब पेजों के लिए क्यों महत्वपूर्ण हैं?
• 1. विषय की पहचान
• 2. अभिगम्यता
• 3. खोज इंजन अनुकूलन
• 4. पेजों को स्कैन करने योग्य बनाता है
• 5. मोबाइल डिवाइस उपयोगिता
• एस्ट्रा थीम के साथ एक शानदार हेडर कैसे बनाएं?
• हेडर के लिए एस्ट्रा थीम का उपयोग करने के फायदे और नुकसान
• अंतिम शब्द

हेडर आपके वेब पेजों के लिए क्यों महत्वपूर्ण हैं?

यही कारण है कि आपको अपने टेक्स्ट में हेडर शामिल करना सुनिश्चित करना होगा

1. विषय की पहचान

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

2. अभिगम्यता

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

3. खोज इंजन अनुकूलन

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

यहां आपके पृष्ठों के लिए शानदार हेडर बनाने के लिए निःशुल्क एस्ट्रा थीम सुविधाओं का उपयोग करने के बारे में एक मार्गदर्शिका दी गई है। अपनी पसंद का हेडर बनाने के लिए प्रक्रिया का पालन करें।

4. पेजों को स्कैन करने योग्य बनाता है

हेडर का उपयोग करके, आप पृष्ठों को यथासंभव स्कैन योग्य बना रहे हैं। यह सामान्य ज्ञान है कि कोई भी पूरा लेख नहीं पढ़ता - विशेषकर पंक्ति दर पंक्ति। इसलिए पेजों के लिए हेडर होना ज़रूरी है। सभी हेडर में से, सबसे महत्वपूर्ण हेडर पहला हेडर है क्योंकि यह पूरे पोस्ट या पेज के लिए टोन सेट करता है।

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

5. मोबाइल डिवाइस उपयोगिता

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

संक्षेप में, हेडर न केवल पाठकों के लिए बल्कि खोज इंजनों के लिए भी वेबपेज को अनुकूलित करते हैं।

एस्ट्रा थीम के साथ एक शानदार हेडर कैसे बनाएं?

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

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

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

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

यहां से, आप हेडर ऊंचाई, बॉर्डर आकार, पृष्ठभूमि, पैडिंग और मार्जिन को कस्टमाइज़ कर सकते हैं।

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

• साइट का शीर्षक और लोगो
• मुख्य मेनू
• बटन 1
• बटन 2 (प्रो)
• खोज
• खाता
• एचटीएमएल 1
• HTML2
• द्वितीयक मेनू
• सामाजिक
• विजेट 1
• विजेट 2
• विजेट 3 (प्रो)
• विजेट 4 (प्रो)
• कार्ट

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

इसी तरह, हेडर तत्व को हटाने के लिए बस हेडर तत्व के बगल में "x" बटन पर क्लिक करें।

आप केवल खींचकर और छोड़ कर हेडर अनुभागों के बीच हेडर तत्वों के चारों ओर घूम सकते हैं।

आपके द्वारा उपयोग किए गए सभी हेडर तत्व बाईं ओर के मेनू में, सामान्य टैब के ठीक नीचे दिखाई देंगे, आपको हेडर प्रकार को बदलने का विकल्प भी मिलेगा। मुफ़्त उपयोगकर्ताओं को केवल "पारदर्शी शीर्षलेख" का विकल्प मिलता है। हालाँकि, यदि आप एस्ट्रा प्रो का उपयोग कर रहे हैं, तो आप "स्टिकी हेडर" सक्षम कर सकते हैं।

यहां से, आप हेडर तत्व की विशिष्ट सेटिंग्स तक पहुंच सकते हैं।

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

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

जैसा कि आप देख सकते हैं, छोटी स्क्रीन पर, आपको "ऑफ कैनवस" नामक एक अतिरिक्त क्षेत्र मिलता है। यह आपको हेडर पर जगह बचाने और कुछ सामान को ऑफ-स्क्रीन स्थानांतरित करने की अनुमति देता है जिसे आगंतुक आवश्यकता पड़ने पर टॉगल कर सकते हैं।

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

आपका नव निर्मित एस्ट्रा हेडर अब आपकी वर्डप्रेस वेबसाइट पर चल रहा है।

एस्ट्रा हैडर बिल्डर: उपलब्ध विकल्पों का एक त्वरित अवलोकन

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

यहां आपके पास मौजूद विभिन्न विकल्पों पर एक त्वरित नज़र डाली गई है:

प्राथमिक शीर्षलेख

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

बस एस्ट्रा स्थापित करें और प्राथमिक हेडर विकल्प चुनने के लिए हेडर अनुभाग पर जाएं और अनुकूलन पर जाएं। शीर्षलेख > प्राथमिक शीर्षलेख

आप निम्नलिखित अनुकूलन सेटिंग्स का उपयोग कर सकते हैं

लेआउट

लेआउट सेटिंग्स आपके पृष्ठ के लिए लोगो की स्थिति का प्रबंधन करेगी। एस्ट्रा में लोगो के लिए तीन अलग-अलग पद उपलब्ध हैं

बायां लोगो

इस सेटिंग में लोगो नेविगेटिंग मेनू के बाईं ओर चला जाता है। यह लोगो को स्थापित करने की एक विशिष्ट शैली है।

सही लोगो

इस सेटिंग में लोगो नेविगेटिंग मेनू के दाईं ओर चला जाता है।

केंद्र लोगो

इस सेटिंग में लोगो नेविगेटिंग मेनू के ऊपर केंद्र में चलता है। लंबे मेनू के मामले में यह एक अच्छा विकल्प है।

चौड़ाई

चौड़ाई सेटिंग्स टेक्स्ट के लिए हेडर की चौड़ाई प्रबंधित करती हैं। आप अपनी हेडर चौड़ाई को इस प्रकार अनुकूलित कर सकते हैं

पूरी चौड़ाई

पूर्ण-चौड़ाई सेटिंग्स में, आपका हेडर दोनों सिरों से फैला होगा और आपके ब्राउज़र पृष्ठ के आकार में फिट होगा।

सामग्री की चौड़ाई

सामग्री चौड़ाई सेटिंग्स में, हेडर कंटेनर चौड़ाई सेट के अनुसार समायोजित होता है, और आप इसे निम्नलिखित का चयन करके सेट कर सकते हैं

वैश्विक > कंटेनर > चौड़ाई

सीमा

बॉर्डर का चयन करके, आप अपने हेडर के नीचे एक बॉर्डर जोड़ सकते हैं और उसके रंग और चौड़ाई को अनुकूलित कर सकते हैं।

मोबाइल हेडर

रिस्पॉन्सिव डिवाइस पर नेविगेट करने वाला मेनू हैमबर्गर में बदल जाता है। इसलिए, इन उपकरणों पर प्राथमिक हेडर केवल हैमबर्गर मेनू और लोगो प्रदर्शित करेगा। आप रिस्पॉन्सिव विजेट्स में मेनू से संबंधित लोगो के लेआउट को कस्टमाइज़ कर सकते हैं।

ढेर

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

इन - लाइन

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

रंग विषय-वस्तु

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

टाइपोग्राफी

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

प्रकटन > अनुकूलित करें > वैश्विक > टाइपोग्राफी

पारदर्शी शीर्षलेख

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

पारदर्शी हेडर कैसे जोड़ें?

आपके पेज को आकर्षक बनाने के लिए पारदर्शी हेडर दो त्वरित चरणों में तैयार किया जाता है 

स्टेप 1

आप कस्टमाइज़र के नीचे पारदर्शी हेडर का विकल्प पा सकते हैं और फिर इसे संपादित कर सकते हैं

प्रकटन > कस्टमाइज़ > हेडर > पारदर्शी हेडर

चरण दो

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

संपूर्ण वेबसाइट पर सक्षम करना

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

पुरालेख, खोज और 404 पर अक्षम करें

चेकबॉक्स पर टिक करके इन विशेष पृष्ठों पर पारदर्शी हेडर सेटिंग को अक्षम किया जा सकता है।

ब्लॉग इंडेक्स पेज पर अक्षम करें

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

आपका मुखपृष्ठ प्रदर्शन > आपकी नवीनतम पोस्ट

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

पेजों पर अक्षम करें

यदि आप सभी पृष्ठों पर पारदर्शी हेडर के विकल्प को अक्षम करना चाहते हैं, तो चेकबॉक्स पर टिक करें।

पोस्ट पर अक्षम करें

यदि आप सभी पोस्ट पर पारदर्शी हेडर के विकल्प को अक्षम करना चाहते हैं, तो चेकबॉक्स पर टिक करें।

रंग और पृष्ठभूमि

आप निम्नलिखित उपलब्ध विकल्पों के साथ अपने पारदर्शी हेडर की पृष्ठभूमि और रंग सेटिंग्स को अनुकूलित कर सकते हैं

• पृष्ठभूमि
• घटनास्थल शीर्षक
• मेन्यू
• सबमेनू
• सामग्री

हेडर के लिए एस्ट्रा थीम का उपयोग करने के फायदे और नुकसान

पेशेवरों

• पारदर्शी हेडर का अवसर उपलब्ध है
• पूर्ण चौड़ाई और सामग्री चौड़ाई दोनों के हेडर उपलब्ध हैं 
• रंग और टाइपोग्राफी अनुकूलन उपलब्ध है

दोष

• स्टिकी हेडर विकल्प उपलब्ध नहीं है
• उन्नत रंग सुविधाएँ उपलब्ध नहीं हैं

अंतिम शब्द

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

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