Efter den konstiga förvirringen i den senaste videon om vilken rubrik vi faktiskt gjorde, den här gången kommer vi verkligen att implementera den anpassade rubriken för Deals-sidan! Den här gjordes av Meg Hunt.
Liksom alla rubriker spenderade vi lite tid på att titta på originalfilerna och ta reda på hur det bäst kommer att sitta på sidan. Vi försöker några alternativ, men i slutändan bestämmer vi oss för att placera det i en begränsad ruta (i motsats till något som Demos-rubriken där rubriken smälter till en gräns runt innehållet.
När vi exporterar det spelar vi med många olika grafiska format. Denna speciella stil handlar intressant om lika i både kvalitet och filstorlek mellan PNG och JPG.webp. Vi matar ut den med 2000 px bred, vilket ska se bra ut på vilken skärm som helst. Vi träffade också cirka 150k, vilket är stort men för en hjältegrafik som denna är det ett OK-mål.
Vi börjar ordna mallen för erbjudanden, inklusive att titta på hur erbjudanden är varje enskild anpassad fält som slumpmässigt innan de skickas ut. Vi kommer att spendera mer tid på den här markeringen och allt det senare, men eftersom vi i den här mallen gör saker redo för rubriken kan vi lika gärna rensa upp det.
Vi tittar på flera olika möjligheter för att sätta den anpassade rubrikgrafiken på sidan. En bakgrundsbild är mest meningsfull, eftersom vi använder en semantik
för titel och bildbyte. Med hjälp av background-sizecheckar vi ut cover, men det kan orsaka cut-offs. Vi checkar ut innehåller, men det tillåter utrymme på utsidan. 100%gör tricket, men vi måste skapa en stilförhållande för att ha det bra. Det är dock enkelt, vi gör bara höjden 0 och använder en procentuell toppfyllning för att få det att fungera (vadderad ruta).
Detta är den sjunde anpassade rubriken vi har gjort och var och en av dem gjordes annorlunda. Webbdesign, va? Vilken resa.