Die letzten verbleibenden Header sind eingetroffen! Wir können diese nun fertigstellen und alle unsere benutzerdefinierten Header sind bereit. In diesem Screencast arbeiten wir an den benutzerdefinierten Headern für den Demo-Bereich, erstellt von John Neiner.
Interessanterweise war John der einzige Illustrator, der die Grafiken in Illustrator geliefert hat. Das ist in diesem Fall schön für uns, da wir sie auf jede gewünschte Größe bei voller Qualität skalieren können. Rückblickend hätten wir sie wahrscheinlich als Vektor (als SVG) belassen und vielleicht einen Raster-Fallback verwendet sollen. Aber in diesem Screencast erkunden wir die verschiedenen Raster-Speicheroptionen und entscheiden uns letztendlich für JPG.
Es gab einige Verwirrung beim Speichern, bei der ich die gespeicherte Datei nicht finden konnte, weil ich nach dem falschen Namen gesucht habe. Echte DUH-Situation im wirklichen Leben.
Anschließend springen wir zu WordPress und wiederholen unseren Prozess, um Vorlagen für das Styling vorzubereiten. Wir stellen sicher, dass die Demo-Seiten eine spezielle CSS-Datei nur für sie laden. Das bedeutet, dass wir Logik in unsere header.php-Datei einfügen (is_page_template()). Wir finden die richtige Vorlage für den Demo-Bereich (mithilfe eines klassischen Tests, bei dem wir die Vorlage offensichtlich ändern und sehen, wie sie sich auf der echten Website widerspiegelt).
Wir entfernen allen alten Müll aus dieser Vorlage und bringen sie auf unseren neuen Stil. Wir schreiben ein wenig Markup, das benötigt wird, um die Seite in einem Raster anzuordnen und einen Header-Bereich nur für diesen neuen benutzerdefinierten Header und all das zu haben.
Wir wenden letztendlich unsere benutzerdefinierte Header-Grafik als Hintergrundbild auf ein Wrapper-Element an, das oben genügend Abstand (prozentual) hat, um die Grafik oben einzufügen (passend zugeschnitten). Wir haben sogar einen Farbverlauf hinter das Bild gelegt, der von tiefem Grün zu Schwarz übergeht, sodass es so aussieht, als ob man beim Scrollen tiefer in den Ozean eintaucht.
Es gibt noch mehr zu tun auf dieser Seite, aber wir haben den Header fertig und die Vorlage in gutem Zustand!
Hallo Chris, die rote Linie ist der Anschnitt (bleed) und die schwarze Linie ist die tatsächliche Dokumentgröße.