Después de la extraña confusión en el último video sobre qué encabezado estábamos haciendo, esta vez realmente vamos a implementar el encabezado personalizado para la página de Ofertas. Este fue hecho por Meg Hunt.
Como todos los encabezados, pasamos algún tiempo mirando los archivos originales y averiguando cómo se asentaría mejor en la página. Probamos algunas opciones, pero finalmente decidimos ponerlo en un recuadro confinado que es mejor (a diferencia de algo como el encabezado Demos donde el encabezado se funde en un borde alrededor del contenido.
Al exportarlo, jugamos con muchos de los diferentes formatos gráficos. Este estilo en particular, curiosamente, es casi igual en calidad y tamaño de archivo entre PNG y JPG.webp. Lo mostramos a 2000px de ancho, lo que debería verse bien en cualquier pantalla. También llegamos a unos 150k, que es grande, pero para un gráfico de héroe como este, es un objetivo aceptable.
Comenzamos a ordenar la plantilla para las ofertas, incluido el análisis de cómo las ofertas son cada uno de los campos personalizados individuales que se asignan al azar antes de su salida. Pasaremos más tiempo en este marcado y todo eso más adelante, pero como estamos en esta plantilla preparando las cosas para el encabezado, también podríamos limpiarlo.
Analizamos varias posibilidades diferentes para colocar el gráfico de encabezado personalizado en la página. Una imagen de fondo tiene más sentido, ya que estamos usando una semántica
para el título y el reemplazo de la imagen. Utilizando background-size, comprobamos cover, pero eso puede causar cortes. Verificamos contener, pero eso permite espacio en el exterior. 100%hace el truco, pero necesitaremos hacer un cuadro de estilo de relación de aspecto para que funcione bien. Sin embargo, eso es fácil, simplemente hacemos que la altura sea 0 y usamos un porcentaje de relleno superior para que funcione (cuadro acolchado).
Este es el séptimo encabezado personalizado que hemos hecho y cada uno de ellos se hizo de manera diferente. Diseño web, ¿eh? Qué viaje.