I denne skjermsendingen vil vi grave i Tilbud-delen. Tilbudsseksjonen er egentlig en “vegg av annonser”. Det er et område på nettstedet som folk må navigere til seg selv, så jeg er ikke bekymret for å jamme annonser ned i folks tanker. Også, hver annonse har rabatt på den og er et produkt som jeg personlig anbefaler, så ingen skyggefullhet skjer.
Vi har allerede toppteksten på plass. Vi har allerede innholdet som blir spyttet ut på siden vi trenger for å style. Dette er det perfekte stedet å være å starte rett inn i å skrive litt CSS.
Det som er kult med denne siden er at vi kan dyppe tærne inn i responsiv annonsering. Annonseverdenen har virkelig ikke tatt igjen responsiv design. Annonser er ofte av fast størrelse, og det er vanskelig å endre størrelse på dem eller rett opp. Det er ikke tilfelle på dette nettstedet fordi jeg oppretter annonsene selv.
Hver annonse opprettes fra et bakgrunnsbilde, et logobilde og tekstbiter. Ved hjelp av et background-imagemiddel kan vi ganske enkelt beskjære kantene av det, og det er OK. Vi mister ingen tekst eller viktige deler av logoen.
Oppsettet av denne "veggen" vil være vegglignende =). Vi får det til å være tre kolonner i brede skrivebordsstørrelser, og deretter gå ned til to kolonner, og til slutt en enkelt kolonne i telefonstørrelser. Alt vi gjør er å flyte annonsene og bruke en for min-heightå holde dem i samme høyde. Ved forskjellige mediespørsmål justerer vi ganske enkelt bredden på annonsene og endrer hvilken av dem som har høyre marg og ikke (via :nth-child).
På baksiden er hver annonse et tilpasset felt i WordPress. Når vi sender dem ut på siden, spør vi først etter dem og legger dem i en matrise. Bland deretter matrisen. Så endelig ekko dem ut. Kan like godt gi alle et rettferdig skudd for å være den beste annonsen!