Na de rare verwarring in de laatste video over welke header we eigenlijk aan het doen waren, gaan we deze keer echt de aangepaste header voor de Deals-pagina implementeren! Deze is gemaakt door Meg Hunt.
Zoals alle kopteksten hebben we wat tijd besteed aan het bekijken van de originele bestanden en uitzoeken hoe deze het beste op de pagina kunnen worden weergegeven. We proberen een paar opties, maar besluiten uiteindelijk om het in een afgesloten doos te plaatsen het beste is (in tegenstelling tot zoiets als de Demos-header waar de header smelt in een rand rond de inhoud.
Bij het exporteren spelen we met veel van de verschillende grafische formaten. Deze specifieke stijl is, interessant genoeg, ongeveer gelijk in kwaliteit en bestandsgrootte tussen PNG en JPG.webp. We voeren het uit met een breedte van 2000 px, wat er op elk scherm goed uit zou moeten zien. We hebben ook ongeveer 150k geraakt, wat groot is, maar voor een hero-graphic als deze is dit een OK doelwit.
We beginnen de sjabloon voor deals op orde te krijgen, inclusief het bekijken van hoe deals elk zijn individuele aangepaste velden die worden gerandomiseerd voordat ze worden uitgevoerd. We zullen meer tijd besteden aan deze opmaak en dat alles later, maar aangezien we ons in deze sjabloon bevinden om dingen klaar te maken voor de koptekst, kunnen we het net zo goed opschonen.
We bekijken verschillende mogelijkheden om de aangepaste koptekstafbeelding op de pagina te plaatsen. Een achtergrondafbeelding is het meest logisch, aangezien we een semantiek gebruiken
voor de titel en afbeeldingvervanging. Met behulp van background-size, checken we uit cover, maar dat kan leiden tot cut-offs. We checken bevatten, maar dat laat ruimte aan de buitenkant toe. 100%doet de truc, maar we zullen een stijlvak met aspectverhouding moeten maken om dat goed te laten werken. Dat is echter eenvoudig, we maken gewoon de hoogte 0 en gebruiken een percentage opvulling aan de bovenkant om dat te laten werken (opgevulde doos).
Dit is de zevende aangepaste koptekst die we hebben gemaakt en ze zijn allemaal anders gedaan. Webdesign, toch? Wat een reis.