एलिमेंटर हेडर टेम्प्लेट: 43 तैयार डिज़ाइन

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

यह पोस्ट मास्टर एडॉन्स लाइब्रेरी में ४३ एलिमेंटर हेडर टेम्पलेट्स एकत्र करता है, जिस तरह की साइट वे सूट करते हैं, उसके द्वारा समूहीकृत प्रत्येक में एक स्क्रीनशॉट और एक लाइव डेमो होता है जो एक नए टैब में खुलता है वे हेडर टैब से स्थापित करते हैं मास्टर ऐडऑन टेम्पलेट लाइब्रेरी और इसके माध्यम से साइट-व्यापी जाएं मास्टर एडॉन्स थीम बिल्डर, इसलिए आपको उनका उपयोग करने के लिए एलिमेंटर प्रो की आवश्यकता नहीं है।

आप जिस चीज के लिए आए थे, उस पर जाएंः

• एलिमेंटर हेडर टेम्पलेट कैसे जोड़ें: थीम बिल्डर के साथ पांच कदम
• साइट प्रकार के अनुसार 43 हेडर टेम्पलेट: सास, स्थानीय व्यवसाय, दुकान, बहु-पंक्ति और न्यूनतम
• कौन सा हेडर लेआउट आपकी साइट पर फिट बैठता है: इसे कम करने के लिए एक त्वरित तालिका
• अक्सर पूछे जाने वाले प्रश्न

अपनी साइट पर एलिमेंटर हेडर टेम्पलेट कैसे जोड़ें

एक हेडर एक थीम बिल्डर टेम्पलेट है: यह हर पृष्ठ पर दिखाई देता है, और आप इसे एक ही स्थान पर संपादित करते हैं मास्टर एडॉन्स थीम बिल्डर में हेडर बनाना मुफ़्त है, और नीचे दिए गए चरण मुफ्त प्लगइन और कोर एलिमेंट के साथ काम करते हैं।

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

1. अपने डैशबोर्ड में, पर जाएं मास्टर ऐडऑन → थीम बिल्डर, क्लिक करें नया टेम्पलेट जोड़ें, प्रकार को सेट करें हेडर और क्लिक करें एलिमेंट के साथ संपादित करें.
2. संपादक में, पर क्लिक करें मास्टर ऐडऑन टेम्पलेट्स बटन, खोलो हेडर टैब, एक डिज़ाइन चुनें और क्लिक करें सम्मिलित करें.
3. लोगो बदलें, इंगित करें नव मेनू विजेट अपने स्वयं के वर्डप्रेस मेनू पर और बटन टेक्स्ट और लिंक बदलें।
4. को खोलें शर्तों टैब, सेट शामिल करें → पूरी साइट और बचाओ।
5. यदि आपकी थीम अभी भी नए के ऊपर अपना स्वयं का हेडर प्रिंट करती है, तो थीम हेडर को उसकी सेटिंग्स में बंद कर दें।

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

साइट प्रकार के अनुसार 43 एलिमेंटर हेडर टेम्पलेट

४३ डिजाइन पांच समूहों में विभाजित हैं अपनी साइट के निकटतम एक पर कूदें और चुनने से पहले दो या तीन डेमो को एक साथ खोलें।

सास और टेक एलिमेंटर हेडर टेम्पलेट्स

इनमें से अधिकांश सास और टेक किट से आते हैं और एक पैटर्न साझा करते हैं: बाईं ओर लोगो, चार या पांच लिंक, और दाईं ओर एक परीक्षण या डेमो बटन फिनिक्स, क्लाउडिफाई और टेकबाइट अंधेरे सलाखों का उपयोग करते हैं, और लीड लिफ्ट एक क्रीम पर बैठता है।

१ शिफ्टफ्लो: एलिमेंटर जॉब बोर्ड हेडर टेम्पलेट

जॉब बोर्ड के लिए निर्मित: होम, जॉब्स और पोस्ट ए जॉब एक सफेद बार के दाईं ओर बैठते हैं, इसके बाद एक रेखांकित पोस्ट ए जॉब फॉर फ्री बटन होता है।

2। टेकबाइट: एलिमेंटर डार्क टेक हेडर टेम्पलेट

डार्क नेवी, बाईं ओर ब्रांड नाम और दाईं ओर तीन लिंक के साथ कोई बटन नहीं है, इसलिए यह एक पोर्टफोलियो या प्रोजेक्ट साइट को बिक्री पृष्ठ से बेहतर सूट करता है।

3। टेकपार्ट: एलिमेंटर आईटी कंपनी हेडर टेम्पलेट

एक आईटी सेवा हेडर जिसका सभी पृष्ठ ड्रॉपडाउन नौ आंतरिक पृष्ठ रखता है, इसलिए शीर्ष स्तर को केवल तीन और लिंक की आवश्यकता होती है स्क्रीनशॉट ड्रॉपडाउन को खुला दिखाता है।

4। क्लाउडिफाई: एलिमेंटर सास पिल हेडर टेम्पलेट

पूरे हेडर एक गोल काली गोली है जिसके चारों ओर जगह है विशेषताएं, मूल्य निर्धारण, एकीकरण और ग्राहक लॉगिन एक के बगल में बैठते हैं अब शुरू करें बटन।

5। क्राफ्टोवा: एलिमेंटर सास हेडर टेम्पलेट

छह लिंक, उनमें से केस स्टडी, और एक रेखांकित स्टार्ट फ्री ट्रायल बटन यह सामान्य तीन-लिंक सास मेनू की तुलना में अधिक पृष्ठों के साथ एक उत्पाद फिट बैठता है।

6। फिनिक्स: एलिमेंटर डार्क सास हेडर टेम्पलेट

एक हरे लोगो के निशान के साथ काले, बीच में तीन लिंक और एक रेखांकित मुक्त परीक्षण बटन शुरू करें केवल तीन लिंक के साथ, आंख सीधे परीक्षण के लिए जाती है।

७ पकड़: एलिमेंट एजेंसी हेडर टेम्पलेट

एक बड़े वर्डमार्क, अबाउट, केस स्टडीज और संपर्क के साथ एक एजेंसी हेडर, और हमारे साथ काम करें बटन जहां एक SaaS साइट अपना परीक्षण करेगी।

८ क्लाइरो: एलिमेंटर सॉफ्टवेयर डेमो हेडर टेम्पलेट

डेमो कॉल के माध्यम से बिकने वाले सॉफ़्टवेयर के लिए हल्के भूरे रंग की पट्टी पर पांच लिंक और एक निःशुल्क डेमो अनुरोध बटन।

९ लीड लिफ्ट: एलिमेंट स्टार्टअप हेडर टेम्पलेट

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

10। नेक्सिस: एलिमेंटर सास हेडर टेम्पलेट

बीच में पांच लिंक, एक गहरा हरा लोगो और एक हल्के बॉर्डर के साथ अभी आरंभ करें बटन।

11। ऑप्टिव्यू: एलिमेंटर सास हेडर टेम्पलेट

एक सफेद पट्टी में केंद्रित तीन लिंक और दाईं ओर एक गोल स्टार्ट फ्री ट्रायल बटन पढ़ने के लिए बहुत कम है, इसलिए बटन काम करता है।

12। सब्रियन: एलिमेंटर सास लॉगिन हेडर टेम्पलेट

मूल्य निर्धारण, लोगो के बारे में और संपर्क करें, फिर एक लॉगिन लिंक और एक स्टार्ट १४ दिन नि: शुल्क परीक्षण बटन लॉगिन सादा पाठ रहता है ताकि यह परीक्षण के साथ प्रतिस्पर्धा न करे।

13। सेमप्ला: एलिमेंटर सास हेडर टेम्पलेट

विशेषताएं, हमारे बारे में, लोगो के बगल में मूल्य निर्धारण और प्रशंसापत्र, लॉगिन के साथ और अभी आरंभ करें दाईं ओर समूहीकृत।

14। जैप्लिटे: एलिमेंटर ऐप हेडर टेम्पलेट

लिंक बीच में के बजाय लोगो के ठीक बाद बैठते हैं, जो अभी आरंभ करें बटन से पहले खुली जगह छोड़ता है।

व्यापार और स्थानीय सेवा हेडर टेम्पलेट्स

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

१५ होमएक्सिस: एलिमेंटर रियल एस्टेट हेडर टेम्पलेट

सामाजिक प्रतीक, एक ईमेल पता और एक फोन नंबर एक चूने शीर्ष बार में सवारी मुख्य पंक्ति में छह लिंक और एक मिलान है एक तीर के साथ एक उद्धरण बटन प्राप्त करें।

16। बालानसिक: एलिमेंटर थेरेपी क्लिनिक हेडर टेम्पलेट

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

१७ क्लीनर: एलिमेंटर सफाई सेवा हेडर टेम्पलेट

सामाजिक चिह्न, एक सड़क का पता और एक फोन नंबर एक पतली शीर्ष पट्टी साझा करते हैं मुख्य पंक्ति में पांच लिंक और एक हरे रंग की पुस्तक एक नियुक्ति बटन है।

१८ सफाई: एलिमेंट सफाई कंपनी हेडर टेम्पलेट

एक नीली शीर्ष पट्टी पूछती है “त्वा शीघ्र सफाई सहायता की आवश्यकता है?कॉल-यूएस नंबर के बगल में P” इसके नीचे पांच लिंक और एक ही नीले रंग में एक अपॉइंटमेंट बनाएं बटन है।

19। पाककला: एलिमेंटर रेस्तरां हेडर टेम्पलेट

एक क्रीम मुख्य पंक्ति के ऊपर फोन, ईमेल और सामाजिक आइकन के साथ एक जैतून शीर्ष बार बुक ए टेबल एक कार्रवाई है जो यह पूछता है।

२० दंत चिकित्सा: एलिमेंटर डेंटल क्लिनिक हेडर टेम्पलेट

फ़ोन नंबर बुक एन अपॉइंटमेंट बटन के ठीक बगल में स्थित है, ताकि मरीज़ उसी स्थान से कॉल या बुक कर सके।

21। प्लंबिक: एलिमेंटर प्लंबिंग सर्विस हेडर टेम्पलेट

हमें कॉल करें और सोशल आइकन शीर्ष बार को भरते हैं, नीचे पांच लिंक और एक नीला रिक्वेस्ट ए फ्री कॉल बटन होता है।

ईकॉमर्स और शॉप हेडर टेम्प्लेट

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

२२ खोज के साथ ब्लू स्टोर हेडर: एलिमेंट स्टोर हेडर टेम्पलेट

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

23। केंद्रित लोगो शॉप: एलिमेंटर शॉप हेडर टेम्पलेट

एक नीले पते और फोन बार के तहत, मेनू बाईं ओर बैठता है, लोगो बीच में, और खोज और गाड़ी दाईं ओर।

२४ डार्क टॉप बार शॉप: एलिमेंटर शॉप हेडर टेम्पलेट

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

२५ प्रोमो बैनर स्टोर: एलिमेंट स्टोर प्रोमो हेडर टेम्पलेट

तीन पंक्तियाँ: खाता और सामाजिक आइकन के साथ एक संदेश पंक्ति, एक विस्तृत ऑफ़र बैनर के बगल में लोगो, और खोज, कार्ट और इच्छा सूची के साथ एक नीला मेनू बार।

२६ बार स्टोर खोजें: एलिमेंटर ईकॉमर्स सर्च हेडर टेम्पलेट

खोज लोगो पंक्ति के मध्य में होती है, दाईं ओर इच्छा सूची और कार्ट और मेनू बार में इलेक्ट्रॉनिक्स लिंक पर 70% की छूट होती है।

27। सार्टिवो: एलिमेंटर फैशन स्टोर हेडर टेम्पलेट

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

शीर्ष बार और बहु-पंक्ति हेडर टेम्पलेट्स

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

२८ पता पट्टी: एलिमेंट शीर्ष बार हेडर टेम्पलेट

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

२९ कोण मेनू: एलिमेंट अपॉइंटमेंट हेडर टेम्पलेट

खुलने का समय और तीन छोटे उपयोगिता लिंक एक कोणीय नीले मेनू बार के ऊपर स्थित हैं जो एक सफेद अपॉइंटमेंट बनाएं बटन पर समाप्त होता है।

30। खोज के साथ संपर्क जानकारी हेडर: एलिमेंटर संपर्क जानकारी हेडर टेम्पलेट

पते, लॉगिन और सामाजिक आइकन के साथ एक नीली बार, कॉल अस और खुलने के समय के साथ एक लोगो पंक्ति, और एक खोज बॉक्स के साथ एक बॉक्सिंग नीली मेनू बार।

३१ क्रिएटिव एजेंसी: एलिमेंट क्रिएटिव एजेंसी हेडर टेम्पलेट

लोगो को बाईं ओर अपना बड़ा नीला ब्लॉक मिलता है एक फोन नंबर और सामाजिक आइकन शीर्ष पर चलते हैं, जिसके नीचे मेनू होता है।

32। फ्लोटिंग मेनू: एलिमेंटर फ्लोटिंग मेनू हेडर टेम्पलेट

एक नीली पट्टी फोन, ईमेल और खुलने का समय रखती है नीचे सफेद मेनू बॉक्स पृष्ठ के शीर्ष को ओवरलैप करता है, जो एक नायक छवि पर अच्छी तरह से काम करता है।

३३ शुरू संपर्क बार: एलिमेंट संपर्क बार हेडर टेम्पलेट

दाईं ओर एक ठोस गेट स्टार्टेड ब्लॉक के साथ एक लाइट टॉप बार में फोन और ईमेल करें, फिर लोगो, मेनू और एक कार्ट आइकन।

३४ मेडिकल क्लिनिक: एलिमेंटर मेडिकल क्लिनिक हेडर टेम्पलेट

लोगो एक विकर्ण नीले पैनल पर बैठता है फोन और ईमेल शीर्ष बार में जाते हैं, और खोज और कार्ट आइकन मेनू को समाप्त करते हैं।

35। तीन-पंक्ति केंद्रित: एलिमेंटर तीन-पंक्ति हेडर टेम्पलेट

शीर्ष बार में ईमेल, फोन और लॉगिन, दोनों तरफ एक कार्ट और सोशल आइकन के साथ एक केंद्रित लोगो और नीचे एक पूर्ण-चौड़ाई वाला नीला मेनू बार।

३६ पर जाएँ, कॉल और मेल: एलिमेंट संपर्क विवरण हेडर टेम्पलेट

हमसे मिलें, हमें कॉल करें और हमें ईमेल करें ब्लॉक लोगो के बगल में पंक्तिबद्ध हैं, नीचे एक नीला मेनू बार है जिसमें लॉगिन और रजिस्टर है।

न्यूनतम और केंद्रित हेडर टेम्प्लेट

सिंगल-लाइन और असामान्य लेआउट: एक केंद्रित लोगो के चारों ओर विभाजित एक मेनू, एक मेनू बटन वाला एक बार, एक स्टैक्ड केंद्रित लोगो और कुछ सादे लोगो-और-लिंक बार।

37। केंद्रित लोगो स्टैक्ड: एलिमेंटर केंद्रित लोगो हेडर टेम्पलेट

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

३८ आग दूर विभाजन: एलिमेंट स्प्लिट मेनू हेडर टेम्पलेट

मेनू को दो भागों में विभाजित किया गया है, जिसमें एक केन्द्रित लोगो के प्रत्येक तरफ तीन लिंक हैं।

३९ मेनू बटन: एलिमेंट मेनू बटन हेडर टेम्पलेट

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

४० सामाजिक प्रतीक के साथ न्यूनतम हेडर: एलिमेंट न्यूनतम हेडर टेम्पलेट

लोगो के साथ एक सफेद पट्टी, छह लिंक, एक खोज बटन और तीन सामाजिक चिह्न।

४१ बैंगनी कोण सीटीए: कार्रवाई हेडर टेम्पलेट के लिए एलिमेंट कॉल

सफेद रंग पर लोगो और मेनू, एक कोणीय बैंगनी पैनल में समाप्त होता है जिसमें एक डाउनलोड बटन होता है।

४२ में साइन इन करें: एलिमेंट सरल हेडर टेम्पलेट

लोगो, छह लिंक और एक चिह्न के साथ लिंक में एक साइन इन करें इसमें इतना कम होने के साथ, यह लगभग किसी भी साइट में गिरता है।

४३ सरल ड्रॉपडाउन: एलिमेंटर ड्रॉपडाउन मेनू हेडर टेम्पलेट

बस लोगो, ड्रॉपडाउन तीरों वाला एक मेनू और दाईं ओर एक सादे सफेद पट्टी पर एक करीबी आइकन।

कौन सा हेडर लेआउट आपकी साइट पर फिट बैठता है?

वेबसाइट हेडर उदाहरण: अच्छे लोग क्या साझा करते हैं

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

हेडर को चिपचिपा बनाएं

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

हेडर, अनुभाग, पृष्ठ या किट: आपको किस टेम्पलेट की आवश्यकता है?

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

लाइब्रेरी में प्रो चिह्नित हेडर को एक की आवश्यकता है मास्टर एडॉन्स प्रो लाइसेंस, जो उन पूर्ण किटों को भी अनलॉक करता है जिनसे इनमें से कई हेडर आते हैं।

अक्सर पूछे जाने वाले प्रश्न

एक हेडर उठाओ, इसे एक बार सेट करें

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

संबंधित पढ़नाः एलिमेंट टेम्पलेट कैसे आयात करें, एलिमेंटर अनुभाग टेम्पलेट, एलिमेंटर पादलेख टेम्पलेट्स और कंटेनर के साथ एक हेडर बनाने के लिए एलिमेंट की अपनी मार्गदर्शिका.