Le ultime intestazioni rimanenti sono arrivate! Ora possiamo finire quelli e fare tutte le nostre intestazioni personalizzate. In questo screencast lavoreremo sulle intestazioni personalizzate per la sezione Demo realizzata da John Neiner.
È interessante notare che John è stato l'unico illustratore che ha fornito l'artwork in Illustrator. È bello per noi in questo caso perché possiamo ridimensionarlo a qualsiasi dimensione di cui abbiamo bisogno con la massima qualità. In retrospettiva, probabilmente avremmo dovuto lasciarlo vettoriale (come SVG) e forse usare un raster fallback. Ma in questo screencast esploriamo le diverse opzioni di salvataggio raster e finiamo per utilizzare JPG.webp.
C'era una certa confusione di salvataggio in cui non sono riuscito a trovare il file salvato perché stavo cercando il nome sbagliato. Situazione DUH nel mondo reale.
Passiamo quindi a WordPress e ripetiamo il nostro processo per preparare i modelli allo stile. Ci assicuriamo che le pagine demo caricino un file CSS speciale solo su di esse. Ciò significa aggiungere logica al nostro file header.php ( is_page_template()). Troviamo il template corretto per l'area demo (utilizzando un test classico in cui apportiamo un'ovvia modifica al template e lo vediamo riflesso sul sito reale.
Spogliamo tutta la vecchia spazzatura da quel modello e lo portiamo al nostro nuovo stile. Scriviamo un po 'di markup necessario per avere la pagina in una griglia e avere un'area di intestazione solo per questa nuova intestazione personalizzata e tutto il resto.
Alla fine applichiamo la nostra grafica di intestazione personalizzata come immagine di sfondo a un elemento wrapper con una spaziatura sufficiente nella parte superiore (basata sulla percentuale) per adattare la grafica in alto (dimensionata per adattarsi). Abbiamo persino inserito una sfumatura dietro l'immagine che sfuma dal verde intenso al nero, quindi sembra che ti stia addentrando nell'oceano mentre scorri verso il basso.
Altro lavoro da fare su questa pagina, ma abbiamo completato l'intestazione e il modello in buone condizioni!