• 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

Cambiar el color de la cabecera en la home de Corporate Pro al hacer scroll

Descubre en este tutorial cómo modificar el color de la cabecera de la página principal del child theme de Genesis Corporate Pro al navegar en ella.

Un suscriptor en potencia de Código Genesis me preguntó si se podía conseguir que en Corporate Pro hubiera una cabecera transparente (donde se viera la imagen de fondo) que cambiara a color blanco al hacer scroll.

Como Corporate Pro es uno de los child themes de Genesis más popular y la propuesta me pareció interesante, me puse manos a la obra.

Por defecto, la home de Corporate Pro muestra la cabecera en blanco sobre la sección hero:

Cabecera de la home de Corporate Pro por defecto.

¿Tú también quieres cambiarlo?

Con este tutorial vas a conseguir que la cabecera de la home sea transparente pero que, al hacer scroll, cambie a color blanco con un poco de código.

Este sería el resultado final:

Cabiar color cabecera Corporate Pro scroll.gif
Resultado final de cambiar el color de la cabecera al hacer scroll.

Snippet para modificar el color de la cabecera en la home de Corporate Pro al hacer scroll

Añade este fragmento al final del fichero style.css:

Para ver este código y los otros 1803 snippets de esta web,
identifícate o suscríbete aquí.

Con este bloque muestras en la home una cabecera de color distinto dependiendo de si se ha hecho scroll o no (para pantallas con una resolución superior a 896px).

¡Importante!👇

Este snippet funciona cuando has seleccionado la opción de «mostrar las ultimas entradas» en:

Ajustes de portada > Tu portada muestra > Tus últimas entradas.

Cuando en «Ajustes de portada» del tema Corporate Pro eliges mostrar las últimas entradas, la plantilla enseña un cabecera con formato Hero donde puede leerse un texto sobre una imagen.

Ajuste portada últimas entradas personalizador WordPress
Ajustes de portada en Corporate Pro

Por cierto, si quieres cambiar el texto que coloca cuando muestras las últimas entradas echa un ojo a este tutorial.

Y si necesitas otro tipo de modificación, cuéntamelo en los comentarios. 😉

Conclusiones

Ahora ya sabes cómo cambiar el color de la cabecera en la home del child theme de Genesis Corporate Pro al navegar por la web.

¿Quieres darme una sugerencia para próximos tutoriales? Déjamela en el formulario de contacto (solo para suscriptores).

Cabecera Corporate Pro CSS Menú Página

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 login 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?