Descubre en este tutorial cómo añadir una cabecera con imagen en la pagina de blog para Genesis Sample mediante snippets de código.
Una de las ventajas de pertenecer al club de Código Genesis es que puedes sugerir futuros tutoriales.
Por ejemplo, Carlos, uno de nuestros suscriptores, me dejó este comentario:
¡Hola!
Me va a venir genial este snippet. Gracias.
Te paso una sugerencia para un tutorial:
Situados en la página del blog, ¿se podría poner el título y la imagen destacada del blog para que se vean debajo del menú en ancho completo (la imagen)? Y debajo de esta imagen ya vendrían las entradas. Al estilo Mai Pro Lifestyle también. Espero haberme explicado.
Gracias de nuevo.
Saludos.
En resumen, lo que Carlos está pidiendo es mostrar una cabecera de ancho completo con el título superpuesto sobre la imagen antes de que aparezcan las entradas del post.
Pues dicho y hecho. 😉
Aunque he creado estos snippets para Genesis Sample, puedes aplicarlos en cualquier otro child theme de Genesis tras realizar pequeños cambios en el código.
Este es el resultado final:
¿Quieres algo así?
Instrucciones para añadir una cabecera con imagen a la página de blog en Genesis Sample
1. Crea una plantilla para la página de blog
Genesis Sample carece de una plantilla dedicada por defecto al blog, así que el primer paso es crear un fichero home.php en la carpeta raíz del tema que contenga el siguiente código:
Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.
Con esto generas la plantilla que se mostrará en la página de blog y le añades una sección de cabecera en formato Hero.
Además, este bloque fuerza el diseño de ancho completo, aunque si prefieres dejar la sidebar puedes eliminar la línea responsable y listo.
2. Personaliza el CSS de la cabecera
Una vez configurada la plantilla para la página de blog, solo te falta asignar los estilos para que luzca tal y como deseas.
Para ello añade este bloque 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 cabecera se visualiza correctamente.
Ahora solo te falta el último detalle.
3. Agrega la imagen de fondo
Por último, introduce la fotografía que deseas usar como fondo en la carpeta /images/ de la raíz de Genesis Sample.
Hay 2 opciones:
- Subir una imagen con el nombre hero-blog.jpg (en este caso no tienes que hacer nada más).
- Cargar una foto con el nombre que quieras y editar la línea de CSS siguiente sustituyendo hero-blog.jpg por el nombre de tu fichero.
background: #222 url(images/hero-blog.jpg) no-repeatProcura que la imagen tenga un ancho generoso (1600-2000px), para que también se adapte a los dispositivos de alta resolución.
Conclusiones
Ahora ya conoces el código para de añadir una cabecera con imagen y título en la página de blog de Genesis Sample.
¿Quieres aplicarlo en otro child theme de Genesis? Haz unos pocos ajustes y ya lo tienes.
Por cierto, ¿te interesaría que preparara un versión avanzada de este tutorial con la que puedas elegir la imagen y cambiar el color de texto desde el personalizador de WordPress? Pues pide por esa boquita. 😉
Ventajas de ser suscriptor.
