Nakon čudne zabune u posljednjem videozapisu o tome koje smo zaglavlje zapravo radili, ovaj put zaista ćemo implementirati prilagođeno zaglavlje za stranicu Deals! Ovu je napravila Meg Hunt.
Kao i sva zaglavlja, proveli smo neko vrijeme gledajući izvorne datoteke i smišljajući kako će najbolje sjesti na stranicu. Pokušavamo s nekoliko opcija, ali u konačnici odlučujemo da je najbolje staviti u ograničeni okvir (za razliku od nečega poput Demosovog zaglavlja gdje se zaglavlje topi u obrub oko sadržaja.
Izvozeći ga, igramo se s puno različitih grafičkih formata. Zanimljivo je da je ovaj stil približno jednak i po kvaliteti i po veličini datoteke između PNG i JPG.webp. Izlazimo na 2000px širine, što bi trebalo izgledati dobro na bilo kojem zaslonu. Pogodili smo i oko 150.000, što je veliko, ali za ovakve grafičke junake u redu je.
Počinjemo slagati predložak za ponude, uključujući gledanje kako su ponude pojedinačna prilagođena polja koja su randomizirana prije izlaza. Provest ćemo više vremena na ovom označavanju i svemu tome kasnije, ali budući da smo u ovom predlošku i pripremamo stvari za zaglavlje, mogli bismo ga i očistiti.
Razmatramo nekoliko različitih mogućnosti postavljanja grafike prilagođenog zaglavlja na stranicu. Pozadinska slika ima najviše smisla jer koristimo semantiku
za zamjenu naslova i slike. Koristimo background-size, provjeravamo cover, ali to može dovesti do presjeka. Provjeravamo sadržaje, ali to omogućuje vanjski prostor. 100%čini trik, ali trebat ćemo napraviti okvir sa stilom omjera da bi to lijepo funkcioniralo. To je lako, ali mi samo napravimo visinu 0 i koristimo postotni gornji uložak da bi to funkcioniralo (podstavljeni okvir).
Ovo je sedmo prilagođeno zaglavlje koje smo napravili i svako od njih je napravljeno drugačije. Web dizajn, zar ne? Kakvo putovanje.