¡Han llegado los últimos encabezados restantes! Ahora podemos terminarlos y hacer todos nuestros encabezados personalizados. En este screencast trabajaremos en los encabezados personalizados para la sección de demostración realizada por John Neiner.
Curiosamente, John fue el único ilustrador que proporcionó la obra de arte en Illustrator. Eso es bueno para nosotros en este caso porque podemos escalarlo al tamaño que necesitemos con la máxima calidad. En retrospectiva, probablemente deberíamos haberlo dejado vector (como SVG) y quizás haber usado un respaldo de ráster. Pero en este screencast exploramos las diferentes opciones de guardado de ráster y terminamos con JPG.webp.
Hubo una cierta confusión de ahorro en la que no pude encontrar el archivo guardado porque estaba buscando el nombre incorrecto. Situación DUH en el mundo real.
Luego saltamos a WordPress y repetimos nuestro proceso para preparar las plantillas para diseñar. Nos aseguramos de que las páginas de demostración carguen un archivo CSS especial solo para ellas. Eso significa agregar lógica a nuestro archivo header.php ( is_page_template()). Encontramos la plantilla correcta para el área de demostraciones (usando una prueba clásica donde hacemos un cambio obvio en la plantilla y lo vemos reflejado en el sitio real.
Eliminamos toda la basura vieja de esa plantilla y la llevamos a nuestro nuevo estilo. Escribimos un poco de marcado necesario para que la página esté en una cuadrícula y tenga un área de encabezado solo para este nuevo encabezado personalizado y todo eso.
En última instancia, aplicamos nuestro gráfico de encabezado personalizado como imagen de fondo a un elemento de envoltura con suficiente relleno en la parte superior (basado en porcentaje) para que quepa el gráfico en la parte superior (tamaño adecuado). Incluso colocamos un degradado detrás de la imagen que se desvanece del verde profundo al negro, por lo que parece que te adentras en el océano a medida que te desplazas hacia abajo.
Más trabajo por hacer en esta página, ¡pero hicimos el encabezado y la plantilla en buena forma!