आखिरी पेंचकस में हमने बर्फीले केबिन और जंगल के iStockPhoto से वह तस्वीर खींची। हमने इसे अपने फ़ोटोशॉप दस्तावेज़ के मुख्य सामग्री क्षेत्र और साइडबार के पीछे की पृष्ठभूमि में गिरा दिया, और यह साइट के अन्य क्षेत्रों के हेडर की शैली की तरह, वहाँ अच्छी तरह से फिट होता है। पेंचकस के बीच, मैंने पेज के लिए कुछ कॉपी भी लिखी। मुझे लगता है कि ऐसा करना बहुत अच्छा लगता है, लेकिन कॉपी लिखना उन चीजों में से एक है, जिसमें बस एक लंबा समय लगता है और डिजाइन ट्विकिंग की तुलना में यह अधिक बारीक भी है। हम इसके बारे में थोड़ी बात करते हैं।
फ़ोटोशॉप में, मैंने "द लॉज" टेक्स्ट को पेड़ों के पीछे छिपाया है, जिसमें इमेज मास्किंग में थोड़ा ज़ूम किया गया है। मैंने इसके बारे में एक सुपर विस्तृत काम नहीं किया, लेकिन आपको वास्तव में नहीं है जब आप ज़ूम इन होते हैं और छवि वेब पर भी नीचे स्केल की जाएगी।
हम इस पृष्ठ (पृष्ठ- lodge.php) के लिए एक अद्वितीय पृष्ठ टेम्पलेट बनाते हैं। /* Template Name: The Lodge */WordPress में एक नया पेज बनाते समय PHP कमेंट कन्वेंशन का उपयोग करना तब वह टेम्पलेट हमारे पेज टेम्पलेट ड्रॉपडाउन पेज में दिखाई देता है। इससे हमें वह सारा नियंत्रण मिल जाता है, जिसकी हमें जरूरत है हम इस टेम्पलेट में HTML को संपादित कर सकते हैं, और अगर हमें इस पृष्ठ के लिए विशिष्ट CSS की आवश्यकता है, तो हम सशर्त तर्क का उपयोग कर सकते हैं और इसे शीर्ष लेख में जोड़ सकते हैं। php फ़ाइल। रेट्रोस्पेक्ट में, "व्यू" (हैडर.php) क्लीनर को रखने के लिए यूनिक CSS को लिंक करने के लिए functions.php फाइल का उपयोग करना अधिक समझ में आता है, लेकिन यह अगली बार के लिए कुछ है।
इस हेडर के लिए बैकग्राउंड ग्राफिक को एक "हीरो ग्राफिक" कहा जाएगा - यानी, एक बड़ा (शाब्दिक और आकार-वार) ग्राफिक, जो पेज के लुक / फील / कंटेंट के लिए महत्वपूर्ण है। चूंकि हम प्रदर्शन के साथ ज़िम्मेदार होने की कोशिश कर रहे हैं (हम चाहते हैं कि साइट तेज़ी से लोड हो), हम वास्तव में इस विशाल ग्राफिक को छोटे स्क्रीन पर नहीं दे रहे हैं। यह HTML में सीएसएस की तुलना में बहुत आसान है। हम अपने "रिवर्सलो" मीडिया क्वेश्चन ( min-widthइसके बजाय max-width) का उपयोग करते हैं, ताकि यह कहा जा सके कि "स्क्रीन के इस व्यापक या व्यापक होने पर, इस ग्राफ़िक का उपयोग करें ... जब यह व्यापक हो, तो इस ग्राफ़िक का उपयोग करें" और इसी तरह। इस तरह डिफ़ॉल्ट रूप से केवल सबसे छोटी छवि का उपयोग किया जाता है, लेकिन जब एक व्यापक ब्राउज़र पृष्ठ का अनुरोध करता है, तो यह ओवरराइड होता है। थोड़ा मोबाइल-पहले वहाँ की सोच।
अंत तक हमारे पास सभी लॉज पृष्ठों के लिए काम करने के लिए एक अच्छा कैनवास (यदि आप होगा) है।