Nach der seltsamen Verwirrung im letzten Video darüber, welchen Header wir tatsächlich gemacht haben, werden wir dieses Mal wirklich den benutzerdefinierten Header für die Deals-Seite implementieren! Dieser wurde von Meg Hunt gemacht.
Wie bei allen Headern haben wir einige Zeit damit verbracht, die Originaldateien zu betrachten und herauszufinden, wie sie am besten auf der Seite sitzen. Wir probieren einige Optionen aus, entscheiden aber letztendlich, dass es am besten ist, sie in eine begrenzte Box zu legen (im Gegensatz zu etwas wie dem Demos-Header, bei dem der Header zu einem Rand um den Inhalt verschmilzt.
Beim Exportieren spielen wir mit vielen verschiedenen Grafikformaten. Interessanterweise ist dieser besondere Stil in Bezug auf Qualität und Dateigröße zwischen PNG und JPG.webp ungefähr gleich. Wir geben es mit einer Breite von 2000px aus, was auf jedem Bildschirm gut aussehen sollte. Wir haben auch ungefähr 150.000 getroffen, was groß ist, aber für eine Heldengrafik wie diese ein OK-Ziel ist.
Wir beginnen, die Vorlage für Deals in der richtigen Reihenfolge zu erhalten, einschließlich der Frage, wie Deals die einzelnen benutzerdefinierten Felder sind, die vor der Ausgabe zufällig ausgewählt werden. Wir werden mehr Zeit mit diesem Markup und all dem später verbringen, aber da wir in dieser Vorlage sind, um die Dinge für den Header vorzubereiten, können wir es genauso gut bereinigen.
Wir betrachten verschiedene Möglichkeiten, um die benutzerdefinierte Header-Grafik auf die Seite zu setzen. Ein Hintergrundbild ist am sinnvollsten, da wir eine Semantik verwenden
für den Titel- und Bildersatz. Mit background-size, checken wir aus cover, aber das kann zu Unterbrechungen führen. Wir checken enthalten aus, aber das lässt Platz nach außen. 100%macht den Trick, aber wir müssen eine Box im Seitenverhältnis-Stil erstellen, damit das gut funktioniert. Das ist jedoch einfach, wir machen einfach die Höhe 0 und verwenden eine prozentuale obere Polsterung, damit dies funktioniert (gepolsterte Box).
Dies ist der siebte benutzerdefinierte Header, den wir erstellt haben, und jeder einzelne von ihnen wurde anders erstellt. Webdesign, was? Was für eine Reise.