Ultimele antete rămase au intrat! Acum le putem termina și avem toate anteturile personalizate finalizate. În acest ecran, vom lucra la anteturile personalizate pentru secțiunea Demo realizată de John Neiner.
Interesant este că John a fost singurul ilustrator care a furnizat opera de artă în Illustrator. Este frumos pentru noi, în acest caz, pentru că îl putem ridica la orice dimensiune de care avem nevoie la o calitate maximă. Retrospectiv, probabil că ar fi trebuit să-l lăsăm vectorial (ca SVG) și probabil să folosim o rezervă raster. Dar în acest screencast explorăm diferitele opțiuni de salvare a rasterului și ajungem să mergem cu JPG.webp.
A existat o anumită confuzie salvatoare în care nu am putut găsi fișierul salvat, deoarece căutam un nume greșit. Situația DUH din lumea reală.
Apoi, sărim în WordPress și repetăm procesul nostru pentru a pregăti șabloanele de stil. Ne asigurăm că paginile demonstrațiilor încarcă un fișier CSS special doar pentru ele. Aceasta înseamnă adăugarea de logică la fișierul nostru header.php ( is_page_template()). Găsim șablonul corect pentru zona demonstrativă (folosind un test clasic în care facem o modificare evidentă a șablonului și îl vedem reflectat pe site-ul real.
Scoatem toate vechile gunoaie din acel șablon și le aducem la noul nostru stil. Scriem un pic de marcaj necesar pentru ca pagina să fie într-o grilă și să avem o zonă de antet doar pentru acest nou antet personalizat și toate astea.
În cele din urmă, aplicăm grafica noastră personalizată a antetului ca imagine de fundal la un element de înfășurare cu suficientă căptușeală în partea de sus (bazată pe procente) pentru a se potrivi graficului în partea de sus (dimensionată pentru a se potrivi). Am pus chiar și un gradient în spatele imaginii care se estompează de la verde intens la negru, așa că arată cam ca și cum ai fi adâncit în ocean în timp ce derulezi în jos.
Mai avem de lucru pe această pagină, dar am finalizat antetul și șablonul într-o formă bună!