In deze screencast gaan we in op het gedeelte Deals. Het gedeelte Deals is in wezen een 'muur met advertenties'. Het is een gedeelte van de site waar mensen naar toe moeten navigeren, dus ik maak me geen zorgen over het blokkeren van advertenties in de gedachten van mensen. Elke advertentie heeft ook een korting en is een product dat ik persoonlijk aanbeveel, dus er is geen schaduw.
We hebben de header al op zijn plaats. We hebben ook al de inhoud die op de pagina wordt uitgespuugd die we moeten stylen. Dit is de perfecte plek om meteen wat CSS te schrijven.
Het leuke aan deze pagina is dat we onze tenen kunnen onderdompelen in de wereld van responsive advertising. De reclamewereld heeft responsive design echt niet ingehaald. Advertenties hebben vaak een vast formaat en het is moeilijk om de grootte ervan te wijzigen of het is zelfs verboden. Dat is op deze site niet het geval omdat ik de advertenties zelf maak.
Elke advertentie is gemaakt op basis van een achtergrondafbeelding, een logo-afbeelding en stukjes tekst. Met behulp van een background-imagemiddel kunnen we de randen ervan een beetje bijsnijden en dat is OK. We verliezen geen tekst of belangrijke delen van het logo.
De indeling van deze “muur” zal muurachtig zijn =). We hebben het uit drie kolommen bij brede desktopformaten en gaan dan omlaag naar twee kolommen en ten slotte een enkele kolom op telefoonachtige formaten. Het enige wat we doen is de advertenties laten zweven en een toepassen min-heightom ze allemaal op dezelfde hoogte te houden. Bij verschillende mediaquery's passen we eenvoudig de breedte van de advertenties aan en wijzigen welke van hen de juiste marge hebben en welke niet (via :nth-child).
Aan de achterkant is elke advertentie een aangepast veld in WordPress. Wanneer we ze op de pagina uitvoeren, zoeken we er eerst naar en plaatsen we ze in een array. Schud die array vervolgens. Laat ze dan eindelijk weerklinken. Ik kan iedereen net zo goed een kans geven om de beste advertentie te worden!