Tässä kuvakaappauksessa kaivetaan Tarjoukset-osioon. Tarjoukset-osio on pohjimmiltaan "mainosten seinä". Se on sivuston alue, jolla ihmisten olisi navigoitava itseensä, joten en ole huolissani mainosten häiritsemisestä ihmisten ajatuksiin. Jokaisella mainoksella on myös alennus siitä ja se on tuote, jota suosittelen henkilökohtaisesti, joten ei ole varjoa.
Otsikko on jo paikallaan. Meillä on myös jo sylkeä sisältö sivulle, jonka meidän on tyyliteltävä. Tämä on täydellinen paikka aloittaa heti CSS: n kirjoittaminen.
Tältä sivulta on hienoa, että voimme upottaa varpaamme reagoivan mainonnan maailmaan. Mainosmaailma ei todellakaan ole saavuttanut reagoivaa suunnittelua. Mainokset ovat usein kiinteitä, ja niiden koon muuttaminen on vaikeaa tai suoraan kielletty. Näin ei ole tällä sivustolla, koska luon mainokset itse.
Jokainen mainos luodaan taustakuvasta, logokuvasta ja tekstinpaloista. Välineiden background-imageavulla voimme jonkin verran rajata sen reunat ja se on OK. Emme menetä tekstiä tai logon tärkeitä osia.
Tämän "seinän" asettelun tulee olemaan seinämainen =). Meillä on kolme saraketta laajalla työpöydän koossa ja sitten alas kahteen sarakkeeseen ja lopuksi yksi sarake puhelinkokoisina. Kaikki mitä teemme, on kellua mainokset ja käyttää a min-heightpitämään ne kaikki samalla korkeudella. Eri mediakyselyissä yksinkertaisesti säädämme mainosten leveyksiä ja vaihdamme, kenellä mainoksista on oikea marginaali ja millä ei (kautta :nth-child).
Takana jokainen mainos on mukautettu kenttä WordPressissä. Kun tuotamme ne sivulle, haemme ensin heitä ja laitamme ne taulukkoon. Sekoita sitten tämä taulukko. Sitten kaiku ne lopulta. Voi myös antaa kaikille reilun kuvan ylimmäksi mainokseksi!