Im letzten Screencast haben wir das Foto von iStockPhoto von der schneebedeckten Hütte und dem Wald aufgenommen. Wir haben es im Hintergrund hinter dem Hauptinhaltsbereich und der Seitenleiste unseres Photoshop-Dokuments abgelegt und es passt dort oben gut in den Stil der Überschriften der anderen Bereiche der Website. Zwischen den Screencasts habe ich auch eine Kopie für die Seite geschrieben. Ich hätte das gerne per Screencast übertragen, aber das Schreiben von Kopien ist eines der Dinge, die nur lange dauern und noch kniffliger sind als Design-Optimierungen. Wir reden aber ein bisschen darüber.
In Photoshop habe ich den Text "The Lodge" hinter den Bäumen "versteckt" und die Bildmaskierung etwas vergrößert. Ich habe es nicht sehr detailliert gemacht, aber Sie müssen es nicht wirklich tun, wenn Sie hineingezoomt werden, und das Bild wird auch im Web verkleinert.
Wir erstellen eine einzigartige Seitenvorlage nur für diese Seite (page-lodge.php). Wenn Sie die PHP-Kommentarkonvention verwenden, /* Template Name: The Lodge */wird diese Vorlage beim Erstellen einer neuen Seite in WordPress in unserer Dropdown-Seite Seitenvorlage angezeigt. Dies gibt uns die Kontrolle, die wir brauchen. Wir können den HTML-Code in dieser Vorlage bearbeiten. Wenn wir für diese Seite ein eindeutiges CSS benötigen, können wir die bedingte Logik verwenden und sie in der Datei header.php verknüpfen. Rückblickend ist es sinnvoller, die Datei functions.php zu verwenden, um eindeutiges CSS zu verknüpfen, damit die Ansicht (header.php) sauberer bleibt, aber das ist etwas für das nächste Mal.
Die Hintergrundgrafik für diesen Header wird als "Heldengrafik" bezeichnet, dh eine große (buchstäblich und in Bezug auf die Größe) Grafik, die für das Erscheinungsbild der Seite wichtig ist. Da wir versuchen, für die Leistung verantwortlich zu sein (wir möchten, dass die Website schnell geladen wird), sollten wir diese gigantische Grafik wirklich nicht auf winzigen Bildschirmen bereitstellen. Dies ist in CSS viel einfacher als in HTML. Wir verwenden unsere "Umkehr" -Medienabfragen ( min-widthanstelle von max-width), um zu sagen: "Wenn der Bildschirm so breit oder breiter ist, verwenden Sie diese Grafik ... wenn er noch breiter ist, verwenden Sie diese Grafik" und so weiter. Auf diese Weise wird standardmäßig nur das kleinste Bild verwendet, das jedoch überschrieben wird, wenn ein breiterer Browser die Seite anfordert. Ein bisschen Mobile-First-Denken dort.
Am Ende haben wir eine schöne Leinwand (wenn Sie so wollen), an der wir für alle The Lodge-Seiten arbeiten können.