¿Deseas agregar texto a imágenes destacadas en tu sitio de WordPress? Agregar un título de texto a las imágenes destacadas nos permite incluirlas en el contexto de nuestras publicaciones. Sin embargo, si nuestro tema de WordPress no viene con una función incorporada para esto, puede ser difícil de configurar.
Afortunadamente, hay formas sencillas de agregar texto sobre las imágenes destacadas en WordPress sin recurrir métodos complejos.
Índice
- 1 ¿Cómo agregar texto a imágenes destacadas en WordPress?
- 1.1 Agregar texto a las imágenes con el título de la imagen destacada
- 1.2 ¿Cómo agregar texto a una imagen destacada con el editor de bloques de WordPress?
- 1.3 ¿Cómo agregar texto sobre una imagen destacada con el plugin FSM Custom Featured Image Caption?
- 1.4 ¿Cómo agregar texto destacado sobre imágenes con el plugin Elementor?
- 2 En resumen
¿Cómo agregar texto a imágenes destacadas en WordPress?
En este artículo de Ayuda Hosting, les mostraremos algunos métodos sencillos para agregar texto a imágenes destacadas en WordPress:
- Empleando dos plugins gratuitos diferentes que nos permitirán agregar subtítulos a las imágenes destacadas.
- Mediante un bloque nativo en el editor de bloques de WordPress.
- Usando los generadores de páginas Elementor y su versión paga Elementor Pro.
Análisis previo: Vamos a comprobar si nuestro tema admite subtítulos de imágenes destacadas.
Antes de entrar en los otros métodos para agregar texto sobre imágenes destacadas en WordPress, vale la pena verificar si nuestro tema admite subtítulos de imágenes destacadas.
Probamos con el nuevo tema predeterminado Twenty Twenty. El tema nos mostrará automáticamente el título que hemos configurado en la Biblioteca de medios de WordPress a manera de ejemplo:
A modo de referencia, así es como hemos configurado el título:
En consecuencia, si nuestro tema lo admite, esa es una manera fácil de agregar subtítulos a las imágenes destacadas.
Sin embargo, no todos los temas son compatibles con esto. Si hacemos exactamente lo mismo en el tema predeterminado anterior de WordPress (Twenty Nineteen), este no mostró el título.
Si nuestro tema no muestra el título de forma predeterminada, sigamos adelante ya que existen otras formas de agregar texto sobre las imágenes destacadas en WordPress.
Agregar texto a las imágenes con el título de la imagen destacada
Featured Image Caption es un plugin gratuito que nos permite agregar un título a nuestras imágenes destacadas de WordPress. Asimismo, nos permite agregar títulos a las imágenes incluidas en nuestro contenido.
Es bastante fácil de usar y funciona con la mayoría de los temas de WordPress desde el primer momento. Además, funciona tanto con el editor clásico como con el nuevo editor de bloques.
Para comenzar, instalamos y activamos el plugin gratuito Featured Image Caption de WordPress.
Una vez que hayamos activado el plugin, veremos una nueva sección denominada Título de imagen destacada en el editor de WordPress. Seguidamente, en el editor de bloques, esta sección aparecerá en la barra lateral.
Todo lo que necesitamos hacer es agregar el texto que deseamos usar al cuadro:
Eso es todo, el plugin agrega automáticamente el título de texto a nuestra imagen destacada, colocándolo debajo de esta:
Si deseamos mover este texto para que flote sobre la imagen, podemos emplear un código corto o CSS bastante sencillo.
A continuación, presentamos el siguiente código corto, el cual está modificado para cambiar el tamaño y el color del texto:
span.ccfic-text {
position: relative;
bottom: 50px;
color: white;
font-size: 32px;
}
Si no están seguros de cómo agregar un código corto o CSS, pueden consultar nuestra guía sobre cómo agregar CSS personalizado en WordPress.
¿Cómo agregar texto a una imagen destacada con el editor de bloques de WordPress?
Si estamos utilizando el editor de bloques de WordPress o Gutenberg, podemos agregar una imagen destacada con texto usando los bloques predeterminados.
Si bien el editor de bloques incluye múltiples opciones para agregar texto sobre las imágenes, se recomienda el bloque nativo Cover para las imágenes destacadas. También podemos hacerlo en ancho completo para agregar un buen efecto destacado:
Y listo, ya tenemos una imagen destacada con texto:
Si nuestro tema muestra automáticamente la imagen destacada en la página individual, es posible que deseemos deshabilitarla para evitar imágenes duplicadas porque el bloque Cover está técnicamente separado de la imagen destacada, a pesar de que logra lo mismo.
¿Cómo agregar texto sobre una imagen destacada con el plugin FSM Custom Featured Image Caption?
FSM Custom Featured Image Caption es otro complemento gratuito en WordPress que facilita agregar un título a una imagen destacada en WordPress, junto con algunas otras configuraciones útiles.
Este viene con algunas opciones más que el plugin de subtítulos de imágenes destacadas que hemos visto anteriormente.
Para comenzar, instalamos y activamos el plugin gratuito de WordPress. Luego, vamos a Configuración -> FSM Custom Featured Image Caption para configurar algunas opciones.
En primer lugar, si deseamos mostrar el título de nuestra imagen destacada en la lista de publicaciones del blog, debemos marcar la casilla Mostrar títulos de imagen en las listas. De lo contrario, el complemento solo mostrará el subtítulo en páginas de publicación de blog individuales.
Si deseamos que el texto flote sobre la imagen presentada, también podemos elegir la opción Estilo personalizado e ingresar algún código o CSS personalizado. Por ejemplo:
position: relative; bottom: 50px; left: 35px; color: white; font-size: 22px;
El plugin extrae automáticamente nuestro título del título que hemos configurado en la Biblioteca de medios de WordPress.
De esta manera es como se ve el subtítulo con el estilo predeterminado en el tema Twenty Fifteen:
Y así es como se ve cuando agregamos el código corto o CSS personalizado para hacer que el texto flote sobre la imagen:
¿Cómo agregar texto destacado sobre imágenes con el plugin Elementor?
Finalmente, si deseamos una revisión más completa de cómo mostrar las publicaciones y las imágenes destacadas, podemos usar el generador de páginas Elementor.
Por otro lado, el plugin pago Elementor Pro nos permite crear una plantilla personalizada para nuestras publicaciones de blog utilizando su función Theme Builder. Como parte de esto, podemos superponer texto sobre nuestras imágenes destacadas.
Para hacerlo, necesitaremos tanto el plugin gratuito Elementor como su versión Elementor Pro para poder acceder a la función Theme Builder.
Seguidamente, nos vamos a Plantillas -> Generador de temas y creamos una nueva Plantilla única para nuestras publicaciones. Esto permitirá controlar el diseño de las publicaciones de blog individuales.
Para agregar la imagen destacada, arrastramos sobre un widget de Imagen destacada. Luego, para agregar texto, usamos el menú desplegable Título y lo configuramos en:
- Título del archivo adjunto: Esta opción extraerá el título del cuadro de subtítulos de la biblioteca multimedia de WordPress.
- Subtítulo personalizado: Esta opción permite ingresar un subtítulo personalizado. Si combinamos esto con la función dinámica de Elementor Pro, podemos insertar automáticamente un título de un campo personalizado que estemos utilizando.
En resumen
Hemos expuesto cuatro formas diferentes de agregar texto sobre las imágenes destacadas de nuestro sitio de WordPress.
Para el método más sencillo, podemos usar un bloque Cover en el nuevo editor de bloques de WordPress.
Además, los plugins Featured Image Caption y FSM Custom Featured Image Caption son las dos opciones gratuitas simples.
Por otro lado, si deseamos tener más control sobre cómo funcionan exactamente nuestras imágenes destacadas de WordPress, podríamos emplear Elementor y Elementor Pro.
Esperamos que este artículo sobre cómo agregar texto a imágenes destacadas en WordPress, les haya resultado útil. Más información sobre este y otros temas en Ayuda Hosting.
