De sista kvarvarande rubrikerna har kommit in! Vi kan nu avsluta dem och få alla våra anpassade rubriker gjort. I den här screencasten kommer vi att arbeta med de anpassade rubrikerna för Demo-avsnittet gjort av John Neiner.
Intressant nog var John den enda illustratören som tillhandahöll konstverket i Illustrator. Det är trevligt för oss i det här fallet eftersom vi kan skala upp det till vilken storlek vi behöver i full kvalitet. I efterhand borde vi förmodligen ha lämnat den vektor (som SVG) och kanske använt en raster-reserv. Men i denna screencast undersöker vi de olika alternativen för rasterbesparingar och slutar med JPG.webp.
Det fanns en viss sparförvirring där jag inte kunde hitta den sparade filen eftersom jag letade efter fel namn. Verklig värld DUH situation.
Vi hoppar sedan in i WordPress och upprepar vår process för att göra mallar redo att utforma. Vi ser till att demosidorna laddar en speciell CSS-fil bara för dem. Det innebär att du lägger till logik i vår header.php-fil ( is_page_template()). Vi hittar rätt mall för demosområdet (med ett klassiskt test där vi gör en uppenbar förändring av mallen och ser den reflekteras på den verkliga webbplatsen.
Vi tar bort allt gammalt sopor från den mallen och tar upp det till vår nya stil. Vi skriver lite markering som behövs för att sidan ska vara i ett rutnät och ha ett rubrikområde bara för den här nya anpassade rubriken och allt det där.
I slutändan tillämpar vi vår anpassade rubrikgrafik som bakgrundsbild på ett omslagselement med tillräckligt vaddering på toppen (procentbaserad) för att passa grafiken uppåt (storlek för att passa). Vi lägger till och med en lutning bakom bilden som bleknar från den djupt gröna till svarta, så det ser ut som att du blir djupare i havet när du rullar ner.
Mer arbete att göra på den här sidan, men vi har gjort rubriken och mallen i god form!