I den siste skjermsendingen fanget vi det bildet fra iStockPhoto av den snødekte hytta og skogen. Vi droppet det i bakgrunnen, bak hovedinnholdsområdet og sidefeltet i Photoshop-dokumentet vårt, og det passet fint der oppe, i stil med stilen til overskriftene på de andre områdene på nettstedet. Mellom skjermsendinger skrev jeg også opp noen eksemplarer til siden. Jeg hadde ønsket å screencast det, men å skrive kopi er en av de tingene som bare tar lang tid og er enda mer finicky enn design tweaking er. Vi snakker imidlertid litt om det.
I Photoshop "skjulte" jeg teksten "The Lodge" bak trærne med litt zoomet inn bildemaskering. Jeg gjorde ikke en veldig detaljert jobb med det, men det trenger du ikke egentlig når du er zoomet inn, og bildet blir også nedskalert på nettet.
Vi lager en unik sidemal bare for denne siden (page-lodge.php). Ved å bruke PHP-kommentarkonvensjonen /* Template Name: The Lodge */vises den malen på rullegardinlisten Sidemal når du oppretter en ny side i WordPress. Dette gir oss all kontrollen vi trenger. Vi kan redigere HTML i denne malen, og hvis vi trenger unik CSS for denne siden, kan vi bruke betinget logikk og koble den opp i header.php-filen. I ettertid er det mer fornuftig å bruke functions.php-filen til å koble opp unik CSS for å holde “view” (header.php) renere, men det er noe for neste gang.
Bakgrunnsgrafikken for denne overskriften vil bli kalt en “Hero Graphic” - det vil si en stor (bokstavelig og størrelsesmessig) grafikk som er viktig for utseendet / innholdet på siden. Siden vi prøver å være ansvarlige for ytelsen (vi vil at nettstedet skal lastes raskt), bør vi virkelig ikke servere denne gigantiske grafikken til små skjermer. Dette er mye lettere i CSS enn i HTML. Vi bruker våre "reverso" mediespørsmål (i min-widthstedet for max-width) for å si "når skjermen er så bred eller bredere, bruk denne grafikken ... når den er enda bredere, bruk denne grafikken" og så videre. På den måten brukes bare det minste bildet, men det blir tilsidesatt når en større nettleser ber om siden. Litt mobil-først tenking der.
Til slutt har vi et fint lerret (hvis du vil) å jobbe med for alle The Lodge-sidene.