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:
¿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:
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 1001 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.
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).
