În acest screencast vom căuta în secțiunea Oferte. Secțiunea Oferte este în esență un „perete de reclame”. Este o zonă a site-ului pe care oamenii ar trebui să o navigheze către ei înșiși, așa că nu sunt îngrijorat de blocarea anunțurilor în gândurile oamenilor. De asemenea, fiecare anunț are o reducere și este un produs pe care îl recomand personal, deci nu se întâmplă nicio umbră.
Avem deja antetul la locul său. De asemenea, avem deja conținutul scuipat pe pagină pe care trebuie să-l stilizăm. Acesta este locul perfect pentru a vă lansa direct în scrierea unor CSS.
Ce este interesant în această pagină este că ne putem înfunda în lumea publicității receptive. Lumea publicitară nu a ajuns din urmă la designul receptiv. Anunțurile sunt adesea de dimensiuni fixe, iar redimensionarea acestora este dificilă sau direct interzisă. Nu este cazul pe acest site, deoarece eu creez eu însumi reclamele.
Fiecare anunț este creat dintr-o imagine de fundal, o imagine de siglă și fragmente de text. Folosind un background-imagemijloc putem tăia cam marginile acestuia și este în regulă. Nu pierdem niciun text sau părți importante ale siglei.
Aspectul acestui „perete” va fi asemănător peretelui =). Vom avea trei coloane la dimensiuni largi de desktop, apoi coborâm la două coloane și, în cele din urmă, o singură coloană la dimensiunile telefonului. Tot ce facem este să flotăm anunțurile și să aplicăm o min-heightpentru a le menține pe toate la aceeași înălțime. La diferite interogări media, pur și simplu ajustăm lățimile anunțurilor și schimbăm care dintre ele au marja dreaptă și care nu (via :nth-child).
În partea din spate, fiecare anunț este un câmp personalizat în WordPress. Când le trimitem pe pagină, le interogăm mai întâi și le plasăm într-o matrice. Apoi amestecați matricea respectivă. Apoi, în cele din urmă, le reamintesc. S-ar putea, de asemenea, să oferiți tuturor o imagine corectă pentru a fi cel mai bun anunț!