În ultima captură de ecran am capturat fotografia din iStockPhoto a cabinei și a pădurii înzăpezite. L-am scăpat în fundal, în spatele zonei principale de conținut și a barei laterale a documentului nostru Photoshop și se potrivea frumos acolo sus, în felul stilului antetelor celorlalte zone ale site-ului. Între emisiuni de ecran, am scris și o copie pentru pagină. Mi-ar fi plăcut să scream asta, dar scrierea copiei este unul dintre acele lucruri care durează mult și este chiar mai șubredă decât este modificarea designului. Totuși, vorbim puțin despre asta.
În Photoshop, am „ascuns” textul „Loja” în spatele copacilor, cu o mascare a imaginii puțin mărită. Nu am făcut o treabă foarte detaliată, dar nu trebuie să faceți acest lucru atunci când sunteți mărit și imaginea va fi redusă și pe web.
Realizăm un șablon de pagină unic doar pentru această pagină (page-lodge.php). Folosind convenția de comentarii PHP, /* Template Name: The Lodge */atunci șablonul apare în pagina noastră derulantă Șablon de pagină atunci când creați o pagină nouă în WordPress. Acest lucru ne oferă tot controlul de care avem nevoie. Putem edita codul HTML din acest șablon și, dacă avem nevoie de CSS unic pentru această pagină, putem folosi logica condițională și o putem lega în fișierul header.php. Retrospectiv, este mai logic să folosiți fișierul functions.php pentru a conecta CSS unic pentru a menține „vizualizarea” (header.php) mai curată, dar asta este ceva pentru data viitoare.
Graficul de fundal pentru acest antet ar fi numit „Hero Graphic” - adică un grafic mare (literal și în funcție de dimensiune), care este important pentru aspectul / senzația / conținutul paginii. Întrucât încercăm să fim responsabili cu performanța (vrem ca site-ul să se încarce rapid), nu ar trebui să difuzăm această grafică gigantică pe ecrane mici. Acest lucru este mult mai ușor în CSS decât în HTML. Folosim interogările noastre „reverso” media ( min-widthîn loc de max-width) pentru a spune „când ecranul este atât de larg sau mai larg, folosiți această grafică ... când este și mai largă, folosiți această grafică” și așa mai departe. În acest mod, în mod implicit, este utilizată doar cea mai mică imagine, dar aceasta este suprascrisă atunci când un browser mai larg solicită pagina. Un pic de gândire mobilă mai întâi acolo.
Până la final, avem o pânză frumoasă (dacă vreți) pe care să lucrați pentru toate paginile The Lodge.