Descubre en este tutorial cómo mostrar un Hero que ocupe toda la cabecera, integrándola en la sección, y que esta cambie de color al hacer scroll mediante código.
En tutoriales anteriores ya has visto cómo mostrar un apartado Hero (una imagen + texto + llamada a la acción) que ocupe toda la cabecera y cómo conseguir que la cabecera cambie de color al hacer scroll.
Y aunque para obtener ambas cosas a la vez se pueden combinar los tutoriales, lo cierto es que necesitas realizar algún ajuste extra.
Así que, a petición de un suscriptor, aquí vas a ver cómo crear un Hero que contenga la cabecera y hacer que esta cambie de color con la navegación.
Este sería el resultado final:
Esto es especialmente interesante para la página principal o una landing.
En este tutorial vas a ver cómo conseguirlo en Genesis Sample mediante código.
¿Te interesa? Vamos allá.
Pasos para mostrar una sección Hero con la cabecera integrada y cambio de color de la misma al hacer scroll
1. Crea un bloque Hero y añade una clase CSS
En este paso solo tienes que crear el diseño que quieres convertir en un patrón directamente en el editor de bloques.
Para este ejemplo usamos el mismo del tutorial sobre cómo crear patrones de bloques en WordPress, que consta de:
- 1 bloque de fondo
- 1 bloque de encabezado
- 1 bloque de párrafo
- 1 bloque de botón
Una vez que lo hayas dejado a tu gusto, selecciona el bloque de fondo (que es el que engloba todo el contenido), ve al apartado de «Avanzado» y añade osom-hero en «Clase(s) CSS adicional(es)».
2. Otorga clases CSS a la página
Una vez creada la sección Hero, necesitas dar una clase CSS específica a la página donde quieres que se muestre.
Si estás usando Genesis Framework lo tienes fácil. Solo tienes que ir a la barra lateral de Genesis > Clases Personalizadas y añadir osom-hero-page en «Clase del cuerpo»:
Si estás usando otro tema puedes buscar una sección que te permita hacer lo mismo o seguir el tutorial para añadir una clase CSS a una página determinada en WordPress.
Por otro lado, puedes usar la opción de ocultar el título de Genesis o tu tema.
O, en su defecto, ocultarlo mediante CSS:
/* Ocultar título de la página */
.osom-hero-page .entry-title {
display: none;
}3. Crea un fichero scroll-header.js
Inserta este fragmento en un nuevo archivo llamado scroll-header.js dentro de la carpeta /lib/js/:
Para ver este código y los otros 1271 snippets de esta web,
identifícate o suscríbete aquí.
Este script es el encargado de añadir la clase CSS change-color al hacer scroll, para que puedas personalizar el diseño a tu gusto.
4. Modifica el fichero functions.php
Ahora, pega el siguiente bloque al final del archivo functions.php:
Para ver este código y los otros 1271 snippets de esta web,
identifícate o suscríbete aquí.
Con estas líneas consigues que el tema cargue el fichero scroll-header.js.
5. Personaliza el CSS de la cabecera y la sección hero
Ahora solo te falta asignar los estilos para que luzca tal y como deseas.
Para ello, introduce el siguiente código al final de style.css:
Para ver este código y los otros 1271 snippets de esta web,
identifícate o suscríbete aquí.
Al insertar estas líneas de CSS te aseguras de que la sección Hero cubre también la cabecera además de hacer unos ajustes para que se visualize correctamente.
Además, aplicas los estilos para que la cabecera cambie de color al hacer scroll hacia abajo. En este caso, estás aplicando el azul característico de Genesis Sample, pero puedes sustituirlo por el que tú quieras.
Por último, también cambias el color de título de la web y de los elementos del menú a blanco para que tengan mejor contraste.
Y sin olvidar el menú hamburguesa para dispositivos móviles. 😉
Como siempre, esto es solo un ejemplo que puedes personalizar a tu gusto, incluso en otros child themes de Genesis.
Conclusiones
Ahora ya sabes cómo conseguir que en una página concreta se muestre una sección Hero con la cabecera integrada y que la cabecera cambie de color al hacer scroll.
Si tienes alguna duda sobre este tutorial, déjala en los comentarios.
¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.
Todo ventajas de ser suscriptor.
