Les derniers en-têtes restants sont arrivés! Nous pouvons maintenant les terminer et faire tous nos en-têtes personnalisés. Dans ce screencast, nous travaillerons sur les en-têtes personnalisés de la section Démo réalisée par John Neiner.
Fait intéressant, John était le seul illustrateur à avoir fourni les illustrations dans Illustrator. C'est bien pour nous dans ce cas, car nous pouvons l'adapter à la taille dont nous avons besoin avec une qualité optimale. Rétrospectivement, nous aurions probablement dû le laisser vectoriel (comme SVG) et peut-être utiliser un raster de secours. Mais dans ce screencast, nous explorons les différentes options d'enregistrement raster et finissons par utiliser JPG.webp.
Il y avait une certaine confusion d'économie où je n'ai pas pu trouver le fichier enregistré parce que je cherchais le mauvais nom. Situation du monde réel DUH.
Nous sautons ensuite dans WordPress et répétons notre processus pour préparer les modèles à styliser. Nous nous assurons que les pages de démonstration chargent un fichier CSS spécial uniquement pour elles. Cela signifie ajouter de la logique à notre fichier header.php ( is_page_template()). Nous trouvons le modèle correct pour la zone de démonstration (en utilisant un test classique où nous apportons une modification évidente au modèle et le voyons reflété sur le site réel.
Nous supprimons toutes les anciennes ordures de ce modèle et les apportons à notre nouveau style. Nous écrivons un peu de balisage nécessaire pour que la page soit dans une grille et avoir une zone d'en-tête juste pour ce nouvel en-tête personnalisé et tout cela.
Nous appliquons finalement notre graphique d'en-tête personnalisé en tant qu'image d'arrière-plan à un élément de wrapper avec suffisamment de rembourrage en haut (en pourcentage) pour s'adapter au graphique en haut (dimensionné pour s'adapter). Nous avons même mis un dégradé derrière l'image qui passe du vert profond au noir, donc on dirait que vous vous enfoncez plus profondément dans l'océan lorsque vous faites défiler vers le bas.
Plus de travail à faire sur cette page, mais nous avons terminé l'en-tête et le modèle en bon état!