A legutóbbi képernyőn elkaptuk azt a képet az iStockPhoto-ból a havas kabinról és erdőről. Leeresztettük a háttérben, a Photoshop dokumentum fő tartalmi területe és oldalsávja mögé, és szépen elfért ott, a webhely más területeinek fejlécének stílusában. A vetítések között felírtam néhány példányt az oldalra is. Legszívesebben ezt vetítettem volna, de a másolat írása egyike azoknak a dolgoknak, amelyek csak sok időbe telnek, és még finomabbak, mint a dizájn-módosítások. Pedig beszélünk róla egy kicsit.
A Photoshop alkalmazásban a fák mögé „elrejtettem” a „The Lodge” szöveget, kissé nagyítva a kép maszkolásával. Nem végeztem el szuper részletes munkát, de nem igazán kell, ha nagyít, és a képet az interneten is kicsinyítik.
Ehhez az oldalhoz egyedi oldalsablont készítünk (page-lodge.php). A PHP megjegyzés konvenciójának használatával /* Template Name: The Lodge */ez a sablon megjelenik az Oldalsablon legördülő oldalon, amikor új oldalt hoz létre a WordPress alkalmazásban. Ez megadja nekünk az összes szükséges ellenőrzést. Szerkeszthetjük a HTML-t ebben a sablonban, és ha egyedi CSS-re van szükségünk ehhez az oldalhoz, használhatunk feltételes logikát és összekapcsolhatjuk a header.php fájlban. Visszatekintve ésszerűbb a functions.php fájlt használni az egyedi CSS összekapcsolására, hogy a „view” (header.php) tisztább maradjon, de ez a következő alkalom.
Ennek a fejlécnek a háttérgrafikáját „Hero Graphic” -nak hívnánk - vagyis egy nagy (szó szerinti és méret szerinti) grafikának, amely fontos az oldal megjelenése / tapintása / tartalma szempontjából. Mivel a teljesítményért próbálunk felelősséget vállalni (azt akarjuk, hogy az oldal gyorsan betöltődjön), valójában nem szabad ezt a gigantikus grafikát apró képernyőkön szolgálnunk. Ez sokkal könnyebb a CSS-ben, mint a HTML-ben. A „reverso” média kérdéseinkkel ( min-widthahelyett, max-widthhogy azt mondanánk), hogy „amikor a képernyő ilyen széles vagy szélesebb, akkor használja ezt a grafikát ... amikor még szélesebb, használja ezt a grafikát” stb. Így alapértelmezés szerint csak a legkisebb képet használják, de ez felülíródik, ha egy szélesebb böngésző kéri az oldalt. Egy kis mobil-első gondolkodás ott.
A végére van egy szép vásznunk (ha úgy tetszik), amin dolgozhatunk a The Lodge összes oldalán.