In diesem Screencast werden wir uns mit dem Abschnitt Angebote befassen. Der Bereich Angebote ist im Wesentlichen eine „Wand aus Anzeigen“. Es ist ein Bereich der Website, in dem die Leute zu sich selbst navigieren müssten, daher mache ich mir keine Sorgen, dass Anzeigen die Gedanken der Menschen stören. Außerdem hat jede Anzeige einen Rabatt und ist ein Produkt, das ich persönlich empfehle, sodass keine Schattigkeit auftritt.
Wir haben den Header bereits installiert. Wir haben auch bereits den Inhalt, der auf die Seite gespuckt wird, die wir stylen müssen. Dies ist der perfekte Ort, um direkt mit dem Schreiben von CSS zu beginnen.
Das Coole an dieser Seite ist, dass wir unsere Zehen in die Welt der reaktionsschnellen Werbung eintauchen können. Die Werbewelt hat Responsive Design wirklich nicht eingeholt. Anzeigen haben häufig eine feste Größe und die Größenänderung ist schwierig oder direkt verboten. Dies ist auf dieser Website nicht der Fall, da ich die Anzeigen selbst erstelle.
Jede Anzeige wird aus einem Hintergrundbild, einem Logo und Textstücken erstellt. Mit einem background-imageMittel können wir die Ränder irgendwie zuschneiden und das ist in Ordnung. Wir verlieren keinen Text oder wichtige Teile des Logos.
Das Layout dieser „Wand“ ist wandartig =). Wir haben drei Spalten bei großen Desktop-Größen und gehen dann zu zwei Spalten und schließlich zu einer einzelnen Spalte bei telefonischen Größen. Alles, was wir tun, ist, die Anzeigen zu schweben und ein min-heightzu verwenden, um sie alle auf der gleichen Höhe zu halten. Bei verschiedenen Medienabfragen passen wir einfach die Breite der Anzeigen an und ändern, welche den rechten Rand haben und welche nicht (via :nth-child).
Im Backend ist jede Anzeige ein benutzerdefiniertes Feld in WordPress. Wenn wir sie auf der Seite ausgeben, fragen wir sie zuerst ab und fügen sie in ein Array ein. Mische dann das Array. Dann geben Sie sie endlich wieder. Könnte auch jedem einen fairen Versuch geben, die Top-Anzeige zu sein!