En el último screencast tomamos esa foto de iStockPhoto de la cabaña nevada y el bosque. Lo dejamos caer en segundo plano, detrás del área de contenido principal y la barra lateral de nuestro documento de Photoshop y encajó muy bien allí, en una especie de estilo de los encabezados de las otras áreas del sitio. Entre screencasts, también escribí una copia para la página. Me hubiera gustado hacer un screencast de eso, pero escribir una copia es una de esas cosas que lleva mucho tiempo y es incluso más delicado que modificar el diseño. Sin embargo, hablamos un poco de eso.
En Photoshop, "escondí" el texto "The Lodge" detrás de los árboles con un poco de zoom en la máscara de imagen. No hice un trabajo súper detallado, pero realmente no tienes que hacerlo cuando haces zoom y la imagen también se reducirá en la web.
Hacemos una plantilla de página única solo para esta página (page-lodge.php). Usando la convención de comentarios de PHP /* Template Name: The Lodge */, esa plantilla aparece en nuestra página desplegable Plantilla de página al crear una nueva página en WordPress. Esto nos da todo el control que necesitamos. Podemos editar el HTML en esta plantilla, y si necesitamos CSS único para esta página, podemos usar la lógica condicional y vincularla en el archivo header.php. En retrospectiva, tiene más sentido usar el archivo functions.php para vincular CSS único para mantener la "vista" (header.php) más limpia, pero eso es algo para la próxima vez.
El gráfico de fondo de este encabezado se denominaría “Gráfico de héroe”, es decir, un gráfico grande (literalmente y en tamaño) que es importante para la apariencia / sensación / contenido de la página. Dado que estamos tratando de ser responsables con el rendimiento (queremos que el sitio se cargue rápido), realmente no deberíamos mostrar este gráfico gigantesco en pantallas pequeñas. Esto es mucho más fácil en CSS que en HTML. Usamos nuestras consultas de medios "reverso" (en min-widthlugar de max-width) para decir "cuando la pantalla sea así de ancha o más ancha, use este gráfico ... cuando sea aún más ancho, use este gráfico", etc. De esa manera, de forma predeterminada, solo se usa la imagen más pequeña, pero eso se anula cuando un navegador más amplio solicita la página. Un poco de pensamiento móvil primero allí.
Al final, tenemos un bonito lienzo (si lo desea) en el que trabajar para todas las páginas de The Lodge.