कैसे एक आश्चर्यजनक एस्ट्रा थीम हैडर बनाने के लिए?

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

विषयसूची:

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

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

यहाँ आपको अपने पाठ में हेडर शामिल करना सुनिश्चित करना है

1. विषय पहचान

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

2. अभिगम्यता

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

3. सर्च इंजन ऑप्टिमाइजेशन

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

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

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

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

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

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

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

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

एस्ट्रा थीम के साथ एक आश्चर्यजनक हेडर कैसे बनाएं?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आपके पास अपने निपटान में विभिन्न विकल्पों पर एक त्वरित नज़र है:

प्राथमिक हैडर

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

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

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

ख़ाका

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

वाम लोगो

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

राइट लोगो

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

केंद्र का लोगो

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

चौड़ाई

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

पूर्ण चौड़ाई

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

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

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

ग्लोबल> कंटेनर> चौड़ाई

बॉर्डर

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

मोबाइल हैडर

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

ढेर

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

पंक्ति में

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

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

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

टाइपोग्राफी

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

रूप> कस्टमाइज़> ग्लोबल> टाइपोग्राफी

पारदर्शी हैडर

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

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

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

चरण 1

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

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

चरण 2

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

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

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

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

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

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

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

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

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

पृष्ठों पर अक्षम करें

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

पदों पर अक्षम

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

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

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

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

हेडर के लिए एस्ट्रा थीम का उपयोग करने के पेशेवरों और विपक्ष

पेशेवरों

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

विपक्ष

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

अंतिम शब्द

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

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