Las imágenes con un texto superpuesto no son nada nuevo, pero parece que tienen una segunda vida gracias a las redes sociales. No es extraño encontrar imágenes con textos en Instagram por ejemplo, ya que ayudan a distribuir un mensaje de forma más directa y amplia. Por supuesto, esto también lo podemos hacer en WordPress, pero suponía tener que usar algún plugin, o escribir algo de código. Pero desde WordPress 6.0, no necesitaremos ninguna de estas dos cosas.
Antes que nada, y pensando en el diseño, os recomendamos echar un vistazo a nuestro artículo sobre como crear composiciones de imagen y texto. Ahí damos algunos consejos sobre todo en temas relativos en legibilidad y contraste, para que nuestro texto nunca se pierda sea cual sea su imagen de fondo.
Una vez dicho esto, seguro que muchos habréis pensado: ¿no será más sencillo insertar hacer esta composición de imagen y texto en Photoshop, y subir el resultado a nuestro WordPress?. Sí, es una opción, pero no es mi favorita. Imaginemos que hemos hecho esto y ya tenemos la imagen con texto en nuestra web. ¿Qué ocurre si hay que modificar el texto?. Tendremos que volver a Photoshop, modificar el texto, sacar la imagen, subirla a la web, reemplazar y borrar la antigua. Y todo este proceso cada vez que haya algún ligero cambio. Con el método que veremos más adelante, todas las modificaciones, ya sea de texto e imagen las haremos directamente en WordPress y actualizaremos al instante. Con el consiguiente ahorro de tiempo.
Bueno, no tardemos más y veamos como vamos a crear nuestras imágenes con texto superpuesto en WordPress.
Imágenes con texto superpuesto gracias al bloque Fondo
Lo primero que vamos a hacer es crear una nueva entrada o página, para empezar a trastear un poco. Una vez dentro del editor, solo tendremos que buscar el bloque Fondo dentro del listado de bloques disponibles.
Muy importante, tendremos que tener WordPress actualizado como mínimo a la versión 6.0, ya que fue en esta actualización cuando se añadió este bloque, y otros que utilizaremos más adelante. Lo primero que vamos a hacer es añadir una imagen y ver como queda. Esto es tan sencillo como hacer clic en la opción Añadir biblioteca de medios o Biblioteca de medios si ya tenemos la imagen subida a nuestro WordPress. Y si no la hemos subido aun, usar el botón Subir.
Bien, ya tenemos nuestra imagen. En mi caso, he elegido una que he encontrado en Unsplash, repositorio de fotografías que recomendamos siempre que podemos. Lo siguiente es pararnos a ver todas las opciones disponibles del bloque Fondo en la barra de herramientas superior. Vamos a centrarnos en estas cuatro por ahora:
- Cambiar la alineación: esta opción es común con otros bloques, y nos permite decidir el ancho que va a ocupar el mismo. Podemos ajustarlo al contenedor del tema, ponerlo al ancho completo del navegador, etc.
- Cambiar posición del contenido: con esta opción podemos modificar la posición del texto sobre la imagen con respecto a esta. Lo podemos colocar centrado, en alguno de sus laterales o de sus esquinas.
- Cambiar a altura completa: hará que nuestro bloque tenga la misma altura que el de la imagen que elijamos.
- Aplicar filtro duotono: aplicará este filtro entre algunos de los predeterminados, o de alguno que creemos. Si quieres saber más sobre este tipo de filtro, hace unas semanas hicimos un tutorial de como crear un efecto duotono en Photoshop.
Ahora, vamos a irnos al panel de opciones derecho, también llamado Ajustes del bloque. En nuestro caso, serán los ajustes del bloque Fondo. Aquí tenemos opciones variadas, como hacer que el fondo se repita o no, que mantenga las dimensiones originales de la imagen, seleccionar el punto focal, seleccionar el color que se va a superponer de la imagen y su opacidad, o la altura mínima. Como es habitual, para saber como funciona todo, lo mejor es que vayáis probando cada una de ellas y experimentéis un poco.
No lo he dicho hasta ahora, pero nunca está de más recordarlo. Siempre que podáis, tened abierta la vista de lista en el editor, ya que con ella vamos a poder ver tanto los bloques que hemos añadido, como el que tenemos seleccionado. En este caso, nos va a servir para comprobar que, anidado dentro del bloque Fondo, tenemos un bloque Párrafo.
Este es el bloque donde vamos a poder añadir nuestro texto. Este bloque funciona como el bloque Párrafo habitual del editor, y vamos a poder hacer lo de costumbre: cambiar su tamaño, color, fondo, tipografía, si queremos que sea un heading… Es cuestión de jugar un poco con el texto hasta tener lo que vayamos buscando. Así ha quedado el mío.
Una vez que hemos visto como funciona el bloque fondo, vamos a intentar ir un poco más allá y buscarle otra funcionalidad a este bloque.
Miniatura de página/entrada con título superpuesto
Seguro que mucho habéis entrado en algún blog, y tenían la miniatura de la entrada con el título de la misma superpuesta. Es una diseño bastante llamativo, y que podemos automatizar completamente en WordPress gracias a otro de los bloques que se añadieron en la actualización 6.0.
Lo primero es decirle a WordPress que nuestro bloque Fondo no utilice una imagen cualquiera que le digamos, sino que siempre use la imagen destacada. Para ello, vamos a volver a irnos a la barra de herramientas superior, y activar este icono clicando sobre él.
Automáticamente, la zona del bloque donde tendría que aparecer la imagen, se va a sombrear de gris. Esto es porque aun no tenemos añadida la imagen destacada, por lo que WordPress no puede saber que va aquí. Lo siguiente que vamos a hacer es que nuestro texto sea el título de nuestra entrada. Para ellos, vamos a buscar el bloque Título de la entrada dentro de nuestro listado de bloques. Al añadir este bloque, es posible que no aparezca anidado dentro del bloque Fondo. No hay que preocuparse. Nos vamos a ir a la vista de lista, y arrastraremos el bloque Título de la entrada dentro del bloque Fondo. Y eliminamos el bloque Párrafo, ya que no lo vamos a utilizar, quedando así:
Vaya, acabo de fijarme que el texto que me aparece es Sin título. Esto es porque aun no le he puesto nombre a mi entrada. Voy con ello.
Por arte de magia, al cambiar el título de mi entrada, se va a cambiar el texto del bloque Título de entrada, ya que el contenido de ambos está enlazado. Solo nos queda lo más importante: la imagen destacada. Vamos a irnos a los ajustes de la página en el panel derecho, y añadir una imagen destacada. Como pasaba con el título, al añadir la imagen destacada se va a actualizar el bloque Fondo.
Nosotros hemos creado un ejemplo sencillo, donde el bloque Fondo solo tiene el bloque Título de entrada dentro de él. Pero podemos añadir más elementos. Echemos un vistazo a la web de la revista Polygon.
Vemos que también usan la imagen destacada con el título de la entrada. Pero además está la categoría del artículo, su autor y el número de comentarios. Y todo estos bloques los tenemos disponibles en el editor de WordPress, por lo que podemos crear un diseño parecido nosotros mismos de forma sencilla.
Conclusiones
Aquí terminamos. Como hemos visto, y gracias a las ultimas novedades en el editor de WordPress crear una imagen con un texto superpuesto es más sencillo que nunca. Y además nos ofrece multitud de opciones, como elegir la posición del texto, añadir un color superpuesto a la imagen, o cambiar su punto focal, entre muchas otras opciones.
A partir de aquí, podemos crear composiciones más complejas, como que la imagen de fondo sea la imagen destacada de un artículo o página, y el texto sea su título. Esto es muy útil cuando estemos diseñando plantillas en WordPress, ya que nos va a dar mucha más flexibilidad para crear una web completamente personalizada. Y todo esto sin tener que escribir una línea de código.
