पिछले वीडियो में अजीब भ्रम के बाद कि हम कौन से हेडर वास्तव में कर रहे थे, इस बार हम वास्तव में डील पेज के लिए कस्टम हेडर को लागू करने जा रहे हैं! यह एक मेग हंट द्वारा किया गया था।
सभी हेडर की तरह, हमने कुछ समय मूल फाइलों को देखने और यह पता लगाने में बिताया कि यह पृष्ठ पर सबसे अच्छा कैसे बैठेगा। हम कुछ विकल्पों का प्रयास करते हैं, लेकिन अंततः इसे एक सीमित बॉक्स में डालने का निर्णय लेते हैं, जो कि डेमोस हेडर जैसी चीज़ के विपरीत है, जहां हेडर सामग्री के चारों ओर एक सीमा में पिघल जाता है।
इसे निर्यात करने पर, हम कई अलग-अलग ग्राफिक प्रारूपों के साथ खेलते हैं। यह विशेष शैली, दिलचस्प रूप से, पीएनजी और जेपीजी के बीच गुणवत्ता और फ़ाइल आकार दोनों में समान है। हम इसे 2000px चौड़े पर आउटपुट करते हैं, जो किसी भी स्क्रीन पर अच्छा दिखना चाहिए। हमने लगभग 150k भी मारा, जो बड़ा है लेकिन इस तरह एक हीरो ग्राफिक के लिए, एक ठीक लक्ष्य है।
हम सौदों के लिए टेम्पलेट प्राप्त करना शुरू करते हैं, जिसमें यह देखना भी शामिल है कि कैसे प्रत्येक व्यक्तिगत कस्टम फ़ील्ड हैं जो आउटपुट होने से पहले यादृच्छिक होते हैं। हम इस मार्कअप और उसके बाद के सभी समय पर अधिक समय बिताएंगे, लेकिन जब से हम इस टेम्पलेट में हैं, हेडर के लिए तैयार चीजें हम इसे साफ कर सकते हैं।
हम पृष्ठ पर कस्टम हेडर ग्राफिक डालने के लिए कई अलग-अलग संभावनाओं को देखते हैं। एक पृष्ठभूमि-छवि सबसे अधिक समझ में आती है, क्योंकि हम एक शब्दार्थ का उपयोग कर रहे हैं
शीर्षक और छवि प्रतिस्थापन के लिए। का उपयोग करते हुए background-size, हम जांच करते हैं cover, लेकिन यह कट-ऑफ का कारण बन सकता है। हम बाहर की जाँच करते हैं, लेकिन यह बाहर की जगह की अनुमति देता है। 100%चाल है, लेकिन हम अच्छी तरह से काम करने के लिए एक पहलू अनुपात शैली बॉक्स बनाने की आवश्यकता होगी। यह आसान है, हालांकि, हम सिर्फ ऊंचाई बनाते हैं और उस काम (गद्देदार बॉक्स) को बनाने के लिए प्रतिशत शीर्ष पैडिंग का उपयोग करते हैं।
यह सातवां कस्टम हेडर है जो हमने किया है और उनमें से हर एक को अलग तरीके से किया गया था। वेब डिजाइन, एह? क्या ट्रिप था।