#117: Benutzerdefinierter Header für Deals

Nach der seltsamen Verwirrung im letzten Video darüber, welchen Header wir eigentlich gemacht haben, werden wir dieses Mal wirklich den benutzerdefinierten Header für die Angebotsseite implementieren! Dieser wurde von Meg Hunt erstellt.

Wie bei allen Headern haben wir uns die Originaldateien angesehen und überlegt, wie sie am besten auf der Seite platziert werden können. Wir probieren ein paar Optionen aus, entscheiden uns aber letztendlich dafür, sie in einem begrenzten Feld zu platzieren (im Gegensatz zu etwas wie dem Demos-Header, bei dem der Header in einen Rahmen um den Inhalt übergeht.

Beim Exportieren experimentieren wir mit vielen verschiedenen Grafikformaten. Dieser spezielle Stil ist interessant genug, um in Bezug auf Qualität und Dateigröße zwischen PNG und JPG gleichwertig zu sein. Wir exportieren ihn mit einer Breite von 2000 Pixeln, was auf jedem Bildschirm gut aussehen sollte. Wir erreichen auch etwa 150k, was groß ist, aber für eine solche Hero-Grafik ein akzeptables Ziel darstellt.

Wir beginnen damit, die Vorlage für Deals in Ordnung zu bringen, einschließlich der Überlegung, wie Deals als individuelle benutzerdefinierte Felder, die vor der Ausgabe randomisiert werden, gehandhabt werden. Wir werden uns später mehr mit diesem Markup und allem anderen beschäftigen, aber da wir uns in dieser Vorlage befinden, um die Dinge für den Header vorzubereiten, können wir ihn auch gleich aufräumen.

Wir betrachten verschiedene Möglichkeiten, die benutzerdefinierte Header-Grafik auf der Seite anzuzeigen. Ein Hintergrundbild ist am sinnvollsten, da wir ein semantisches <h1> für den Titel und die Bildersetzung verwenden. Mit background-size prüfen wir cover, aber das kann zu Abschnitten führen. Wir prüfen contain, aber das lässt Platz an den Rändern. 100% erledigt die Arbeit, aber wir benötigen ein element mit einem Seitenverhältnis, damit dies gut funktioniert. Das ist jedoch einfach, wir setzen die Höhe auf 0 und verwenden einen prozentualen oberen Abstand, um dies zu erreichen (gepolsterte Box).

Dies ist der siebte benutzerdefinierte Header, den wir erstellt haben, und **jeder einzelne davon wurde anders erstellt.** Webdesign, nicht wahr? Was für eine Reise.