Die letzten verbleibenden Header sind eingegangen! Wir können diese jetzt fertigstellen und alle unsere benutzerdefinierten Header erstellen lassen. In diesem Screencast arbeiten wir an den benutzerdefinierten Headern für den Demo-Bereich von John Neiner.
Interessanterweise war John der einzige Illustrator, der das Kunstwerk in Illustrator zur Verfügung stellte. Das ist schön für uns in diesem Fall, weil wir es bei voller Qualität auf jede gewünschte Größe skalieren können. Im Nachhinein hätten wir es wahrscheinlich als Vektor (als SVG) belassen und vielleicht einen Raster-Fallback verwenden sollen. In diesem Screencast untersuchen wir jedoch die verschiedenen Optionen zum Speichern von Rasters und entscheiden uns für JPG.webp.
Es gab einige rettende Verwirrung, wo ich die gespeicherte Datei nicht finden konnte, weil ich nach dem falschen Namen suchte. Reale Welt DUH Situation.
Wir springen dann in WordPress und wiederholen unseren Vorgang, um Vorlagen für den Stil vorzubereiten. Wir stellen sicher, dass die Demoseiten eine spezielle CSS-Datei nur für sie laden. Das bedeutet, dass wir unserer Datei header.php ( is_page_template()) Logik hinzufügen . Wir finden die richtige Vorlage für den Demobereich (mithilfe eines klassischen Tests, bei dem wir eine offensichtliche Änderung an der Vorlage vornehmen und sehen, dass sie sich auf der realen Site widerspiegelt.
Wir entfernen den alten Müll aus dieser Vorlage und bringen ihn auf unseren neuen Stil. Wir schreiben ein bisschen Markup, das benötigt wird, damit sich die Seite in einem Raster befindet und einen Header-Bereich nur für diesen neuen benutzerdefinierten Header und all das hat.
Letztendlich wenden wir unsere benutzerdefinierte Header-Grafik als Hintergrundbild auf ein Wrapper-Element an, das oben ausreichend aufgefüllt ist (prozentual), um die Grafik oben anzupassen (Größe passend). Wir haben sogar einen Farbverlauf hinter das Bild gesetzt, der von tiefgrün nach schwarz übergeht. Es sieht also so aus, als würden Sie beim Scrollen nach unten tiefer in den Ozean vordringen.
Weitere Arbeiten auf dieser Seite, aber wir haben den Header und die Vorlage in gutem Zustand!