Descubre en este tutorial cómo conseguir que se muestre un Hero en WordPress que integre la cabecera dentro de la sección mediante código.
En tutoriales anteriores ya has visto cómo usar secciones Hero (una imagen + texto + llamada a la acción) en distintos puntos de las web.
En el tutorial sobre cómo introducir una imagen en la cabecera de la página de blog tienes un ejemplo.
En estos casos, las secciones Hero se mostraban justo debajo de la cabecera. Pero en algunas situaciones te puede interesar introducir un Hero en el que la cabecera aparezca integrada dentro de la sección.
Por ejemplo:
Esto es especialmente interesante para la página principal o una landing.
En este tutorial vas a ver cómo conseguirlo de forma sencilla en cualquier tema de WordPress, aplicando una serie de clases CSS y un poco de código.
¿Te interesa? Vamos allá.
Pasos para mostrar una sección Hero con la cabecera integrada en cualquier tema de WordPress
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)».
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»:
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.
O, en su defecto, ocultarlo mediante CSS:
/* Ocultar título de la página */
.osom-hero-page .entry-title {
display: none;
}3. Personaliza el CSS de la sección Hero y la cabecera
Ahora solo te falta asignar los estilos para que luzca tal y como deseas.
Para ello, introduce este bloque al final de style.css:
Para ver este código y los otros 2107 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.
¡Listo!
Conclusiones
Ahora ya sabes cómo conseguir que en una página concreta se muestre una sección hero con la cabecera integrada.
Puedes usar este tutorial en cualquier tema de WordPress. Para que quede a tu gusto solo tendrás que realizar unos pequeños ajustes de CSS.
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. 😉
