In diesem Screencast tauchen wir in den Angebotsbereich ein. Der Angebotsbereich ist im Grunde eine „Wand aus Anzeigen“. Es ist ein Bereich der Seite, zu dem die Leute selbst navigieren müssten, daher mache ich mir keine Sorgen, Anzeigen aufzuzwingen. Außerdem hat jede Anzeige einen Rabatt und ist ein Produkt, das ich persönlich empfehle, also ist nichts unseriöses im Gange.
Wir haben bereits den Header eingerichtet. Wir haben auch bereits die Inhalte, die auf die Seite ausgegeben werden und die wir gestalten müssen. Dies ist der perfekte Ort, um mit dem Schreiben von CSS zu beginnen.
Das Coole an dieser Seite ist, dass wir uns mit dem Thema responsiver Werbung auseinandersetzen können. Die Werbewelt hat das Responsive Design noch nicht wirklich erreicht. Anzeigen haben oft feste Größen und das Ändern ihrer Größe ist schwierig oder schlichtweg verboten. Das ist auf dieser Seite nicht der Fall, da ich die Anzeigen selbst erstelle.
Jede Anzeige wird aus einem Hintergrundbild, einem Logo und Textteilen erstellt. Die Verwendung eines background-image bedeutet, dass wir die Ränder etwas abschneiden können und das ist in Ordnung. Wir verlieren keinen Text oder wichtige Teile des Logos.
Das Layout dieser „Wand“ wird wandartig sein =). Wir werden sie bei großen Desktop-Größen aus drei Spalten bestehen lassen, dann auf zwei Spalten reduzieren und schließlich bei Telefon-ähnlichen Größen eine einzelne Spalte haben. Wir machen einfach die Anzeigen flott und wenden eine min-height an, um sie alle gleich hoch zu halten. Bei verschiedenen Media Queries passen wir einfach die Breiten der Anzeigen an und ändern, welche davon einen rechten Rand haben und welche nicht (über :nth-child).
Auf der Backend-Seite ist jede Anzeige ein benutzerdefiniertes Feld in WordPress. Wenn wir sie auf der Seite ausgeben, fragen wir zuerst danach und legen sie in ein Array. Dann mischen wir dieses Array. Dann geben wir sie schließlich aus. Können genauso gut jedem eine faire Chance geben, die Top-Anzeige zu sein!