Efter den underlige forvirring i den sidste video om, hvilken header vi faktisk lavede, denne gang vil vi virkelig implementere den brugerdefinerede header til siden Tilbud! Denne blev udført af Meg Hunt.
Som alle overskrifterne brugte vi lidt tid på at se på de originale filer og finde ud af, hvordan det bedst vil sidde på siden. Vi prøver et par muligheder, men i sidste ende beslutter vi at placere det i en begrænset boks er bedst (i modsætning til noget som Demos-headeren, hvor headeren smelter ind i en grænse omkring indholdet.
Når vi eksporterer det, spiller vi med mange forskellige grafiske formater. Denne særlige stil handler interessant nok om det samme i både kvalitet og filstørrelse mellem PNG og JPG.webp. Vi udsender det med 2000 px bredt, hvilket skal se godt ud på enhver skærm. Vi ramte også omkring 150k, hvilket er stort, men for en heltegrafik som denne er det et OK-mål.
Vi begynder at få skabelonen til tilbud i orden, herunder se på, hvordan tilbud er hver enkelt brugerdefinerede felter, der randomiseres, før de udgives. Vi bruger mere tid på denne markering og alt det senere, men da vi i denne skabelon gør tingene klar til overskriften, kan vi lige så godt rydde det op.
Vi ser på flere forskellige muligheder for at sætte den brugerdefinerede headergrafik på siden. Et baggrundsbillede giver mest mening, da vi bruger en semantik
til titel og udskiftning af billede. Ved hjælp af background-sizetjekker vi ud cover, men det kan forårsage afskæringer. Vi tjekker ud indeholder, men det giver plads på ydersiden. 100%gør tricket, men vi bliver nødt til at oprette en boks med formatforhold for at få det til at fungere godt. Det er dog let, vi laver bare højden 0 og bruger en procentdel toppolstring for at få det til at fungere (polstret kasse).
Dette er den syvende brugerdefinerede header, vi har udført, og hver eneste af dem blev gjort forskelligt. Webdesign, ikke? Hvilken tur.