Descubre en este tutorial cómo ocultar la imagen de la cabecera en algunas entradas del child theme de Genesis Corporate Pro.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes sugerir nuevos tutoriales.
El otro día, Miriam me preguntó cómo conseguir que no se mostrara la imagen de la cabecera de las entradas de Corporate Pro; pero no en todos lo casos, sino únicamente en los que a ella le interesara.
Por defecto, el child theme de Genesis Corporate Pro muestra la imagen destacada de una entrada en la cabecera de la misma.
Pero ¿y si quieres colocar una imagen justo debajo del título en algún artículo y te das cuenta de que dos imágenes tan seguidas pueden quedar demasiado redundantes.
No te preocupes, Código Genesis viene al rescate. 😉
En este tutorial vas a aprender cómo ocultar la imagen de la cabecera de forma selectiva con un poco de código.
Este sería el resultado final:
¿Vamos allá?
Pasos para ocultar la imagen de cabecera de algunas entradas en Corporate Pro
1. Añade una clase CSS a la entrada
Como la idea es que puedas ocultar la imagen solo en las entradas (o páginas) que te interesen, primero vas a crear una clase CSS específica.
Por ejemplo, «no-hero-image».
Añádela en el apartado Clases personalizadas > Clase del cuerpo, en la sidebar de Genesis de esa entrada:
Actualiza o guarda el borrador para asegurarte de que la clase se aplica correctamente.
2. Agrega un diseño a la clase CSS
A continuación necesitas indicar qué modificaciones se van a aplicar a las entradas con esta clase CSS.
Para ello, introduce lo siguiente en el fichero style.css:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque cambias la imagen por un fondo gris (f5f5f5), de esta manera mantienes la estructura de la cabecera con el título, pero con un fondo sólido en lugar de la imagen.
Por supuesto, puedes cambiar este color por el que te interese. Eso sí, asegúrate de que el texto tiene un buen contraste sobre el mismo para que se lea fácilmente.
Si necesitas otro tipo de modificación, cuéntamelo en los comentarios. 😉
Conclusiones
Ahora ya sabes cómo ocultar la imagen de la cabecera de algunas entradas del child theme de Genesis Corporate Pro.
¿Quieres darme una sugerencia para próximos tutoriales? Déjamela en el formulario de contacto (solo para suscriptores).
