Viimeisessä kuvaruudussa otimme kuvan iStockPhoto-ohjelmasta lumisesta mökistä ja metsästä. Pudotimme sen taustalle, Photoshop-dokumenttimme pääsisältöalueen ja sivupalkin taakse, ja se sopi mukavasti sinne, tavallaan sivuston muiden alueiden otsikoiden tyyliin. Kuvaruutujen väliin kirjoitin myös sivulle kopion. Olisin halunnut kuvata sitä, mutta kopion kirjoittaminen on yksi niistä asioista, jotka vievät vain kauan ja ovat jopa hienovaraisempia kuin suunnittelun säätäminen. Puhumme siitä kuitenkin vähän.
Photoshopissa "piilotin" tekstin "Lodge" puiden taakse hiukan zoomattuna kuvan peittämisellä. En tehnyt siitä erittäin yksityiskohtaista työtä, mutta sinun ei todellakaan tarvitse, kun sinua lähennetään ja kuvaa pienennetään myös verkossa.
Teemme ainutlaatuisen sivumallin juuri tälle sivulle (page-lodge.php). PHP-kommenttikäytäntöä käytettäessä /* Template Name: The Lodge */kyseinen malli näkyy avattavassa Sivumalli-sivulla, kun luot uuden sivun WordPressissä. Tämä antaa meille kaiken tarvitsemamme hallinnan. Voimme muokata tämän mallin HTML-koodia ja jos tarvitsemme tälle sivulle ainutlaatuisen CSS: n, voimme käyttää ehdollista logiikkaa ja linkittää sen header.php-tiedostoon. Jälkikäteen on järkevämpää käyttää funktiot.php-tiedostoa linkittämään ainutlaatuinen CSS pitämään “näkymä” (header.php) puhtaampana, mutta se on jotain seuraavaa kertaa varten.
Tämän otsikon taustagrafiikkaa kutsutaan "sankarigrafiikaksi" - eli suureksi (kirjaimellisesti ja koon mukaan) graafiseksi, joka on tärkeä sivun ulkoasulle / tuntemukselle / sisällölle. Koska yritämme olla vastuussa suorituskyvystä (haluamme sivuston latautuvan nopeasti), meidän ei todellakaan pitäisi palvella tätä jättimäistä kuvaa pienille näytöille. Tämä on paljon helpompaa CSS: ssä kuin HTML: ssä. Käytämme "reverso" -kyselykyselymme ( min-widtheikä max-width) sanomaan "kun näyttö on leveä tai leveämpi, käytä tätä kuvaa ... kun se on vielä leveämpi, käytä tätä kuvaa" ja niin edelleen. Tällä tavalla oletuksena käytetään vain pienintä kuvaa, mutta se ohitetaan, kun laajempi selain pyytää sivua. Hieman mobiilia ensin ajattelua siellä.
Loppuun mennessä meillä on mukava kangas (jos haluat) työskennellä kaikilla The Lodge -sivuilla.