• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar Hero que integre la cabecera y esta cambie de color al hacer scroll en Genesis Sample

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:

Ejemplo de sección hero con la cabecera integrada y cambio de color de la cabecera.

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)».

añadir clase al CSS imagen WordPress
Añadir clase CSS al bloque

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»:

Añadir clase CSS al cuerpo de la página.

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.

Ajuste para ocultar título en Genesis Framework.

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 1867 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 1867 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 1867 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 te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

Cabecera CSS Genesis Sample Javascript PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?