In questo screencast approfondiremo la sezione Offerte. La sezione Offerte è essenzialmente un "muro di annunci". È un'area del sito in cui le persone dovrebbero navigare da sole, quindi non sono preoccupato di bloccare gli annunci nei pensieri delle persone. Inoltre, ogni annuncio ha uno sconto su di esso ed è un prodotto che raccomando personalmente, quindi nessuna ombreggiatura in corso.
Abbiamo già l'intestazione a posto. Abbiamo anche già il contenuto che viene sputato sulla pagina che dobbiamo modellare. Questo è il posto perfetto per iniziare subito a scrivere un po 'di CSS.
La cosa bella di questa pagina è che possiamo immergerci nel mondo della pubblicità reattiva. Il mondo della pubblicità non ha davvero raggiunto il design reattivo. Gli annunci sono spesso di dimensioni fisse e ridimensionarli è difficile o è vietato. Questo non è il caso di questo sito perché creo io stesso gli annunci.
Ogni annuncio viene creato da un'immagine di sfondo, un'immagine del logo e frammenti di testo. Usando un background-imagemezzo possiamo ritagliarne i bordi e va bene. Non perdiamo testo o parti importanti del logo.
Il layout di questo "muro" sarà simile a un muro =). Avremo tre colonne con dimensioni desktop larghe e poi scendiamo a due colonne e infine una singola colonna con dimensioni simili a quelle del telefono. Tutto quello che facciamo è far fluttuare gli annunci e applicare a min-heightper mantenerli tutti alla stessa altezza. A diverse media query, regoliamo semplicemente le larghezze degli annunci e cambiamo quale di essi ha il margine destro e quale no (tramite :nth-child).
Sul back-end, ogni annuncio è un campo personalizzato in WordPress. Quando li inviamo in output sulla pagina, prima li interroghiamo e li inseriamo in un array. Quindi mescola quell'array. Poi finalmente riecheggiarli. Tanto vale dare a tutti la possibilità di essere l'annuncio migliore!