Cómo añadir texto encima de una imagen en WordPress (3 métodos)

Hay muchas ocasiones en las que necesita añadir una superposición de texto a una imagen en WordPress.

Tal vez esté creando un banner llamativo para su página de inicio. O quizá quieras añadir un título llamativo a tu imagen destacada. Nosotros mismos nos hemos encontrado en esta situación, y añadir una superposición de texto es una forma estupenda de hacer que tus imágenes sean más informativas y atractivas.

Si necesitas ayuda para añadir texto encima de una imagen en WordPress, estás en el lugar adecuado. Hemos encontrado 3 maneras fáciles de añadir texto en la parte superior de las imágenes en WordPress, sin necesidad de conocimientos de diseño.

Cuándo añadir texto sobre las imágenes en WordPress

Las imágenes pueden hacer que su sitio web de WordPress parezca más interesante y ayudar a romper grandes párrafos de texto.

Sin embargo, a veces tus imágenes pueden necesitar más explicaciones. Por ejemplo, puede añadir texto encima de una imagen para explicar qué muestra y por qué la ha añadido a la entrada.

Muchos blogs de WordPress también añaden texto encima de una imagen para crear banners y cabeceras llamativos e informativos.

En esta entrada, tenemos tres maneras fáciles de principiantes de añadir texto encima de una imagen en WordPress. Si prefiere saltar directamente a un método en particular, entonces usted puede utilizar los siguientes enlaces:

Método 1: Añadir texto encima de una imagen con el bloque de portada

Una forma de añadir texto encima de una imagen en WordPress es utilizando el bloque Portada. Puede utilizar este bloque para mostrar cualquier imagen y luego escribir el texto sobre la imagen. Esto hace que el bloque Portada sea perfecto para crear imágenes a pantalla completa, cabeceras y banners.

Para añadir un bloque de Portada a una página o entrada, basta con hacer clic en el botón “+ Añadir bloque” del editor de bloques de Gutenberg.

Ahora puede escribir “Portada” y seleccionar el bloque adecuado cuando aparezca.

Aquí puede elegir el bloque Portada por defecto. Pero también puede optar por la opción de plantilla con la imagen y el texto del marcador de posición. Con la segunda opción, puede sustituir simplemente la imagen y el texto existentes por los suyos.

Para sustituir la imagen por defecto, basta con hacer clic para seleccionarla. Una vez hecho esto, haz clic en el botón “Reemplazar”.

Si desea utilizar una imagen que ya está en su biblioteca de medios de WordPress, sólo tiene que hacer clic en “Abrir biblioteca de medios”. A continuación, puede elegir una imagen existente.

Si desea subir una nueva imagen, haga clic en “Subir”.

Se abrirá una ventana en la que podrá elegir cualquier archivo de su ordenador.

Después de elegir una imagen, puede utilizar los ajustes de bloque para crear algunos efectos interesantes y llamativos. Por ejemplo, puede hacer que la imagen quede corregida mientras el visitante se desplaza por la página o añadir una superposición de colores a la imagen.

Si utiliza una superposición, puede cambiar su opacidad utilizando el carrusel / control deslizante “Opacidad”. El ajuste de opacidad controla la transparencia de la imagen de fondo.

Cuando estés satisfecho con el aspecto de la imagen, podrás añadir el texto.

Por defecto, el bloque Portada tiene un encabezado y un bloque Párrafo donde puede añadir texto encima de la imagen.

Para añadir texto, basta con hacer clic para seleccionar el bloque Encabezado o Párrafo. A continuación, escriba el texto que desee utilizar.

Cuando se añade texto a una imagen, a veces resulta difícil leerlo. Esto es especialmente cierto para los visitantes con problemas de visión. Para obtener más información, consulte nuestra guía sobre cómo mejorar la accesibilidad en su sitio de WordPress.

Dicho esto, es posible que desee dar estilo a su texto para que sea más fácil de leer.

Si está trabajando con un bloque Encabezado, también puede probar los diferentes estilos de encabezado para ver cuál es el más fácil de leer.

También puede ayudar a que su texto destaque utilizando un color que contraste.

Para elegir otro color, seleccione la pestaña “Bloque” del menú de la derecha. A continuación, haz clic en “Color” para ampliar esta sección.

Una vez hecho esto, haz clic en “Texto”. Se abrirá una ventana emergente en la que podrás elegir un nuevo color para todo el texto del bloque.

Normalmente, un texto más grande es más fácil de leer.

Para aumentar el tamaño del texto, haz clic en el campo situado junto a “Tamaño” y escribe un número mayor en él.

Una vez que esté satisfecho con el aspecto de su bloque de portada, puede publicar o actualizar su página normalmente. Ahora, si visitas tu sitio web WordPress, verás tu texto encima de la imagen.

Método 2: Añadir texto encima de una imagen utilizando el bloque de imagen

El bloque Portada es ideal para crear banners y cabeceras. Sin embargo, también puede añadir texto sobre un bloque de imagen estándar de WordPress.

Para empezar, tendrás que añadir un bloque de imagen a tu página o entrada. Para ello, basta con hacer clic en el botón “+ Añadir bloque” del editor de bloques de WordPress.

A continuación, escriba “Imagen” y seleccione el bloque adecuado para añadirla a su entrada.

A continuación, puede subir una imagen desde su ordenador o hacer clic en “Biblioteca de medios” para elegir una imagen de la biblioteca de medios de WordPress.

Después de elegir tu imagen, puedes cambiar su punto focal, añadir una superposición y cambiar la opacidad siguiendo el mismo proceso descrito anteriormente.

También puede probar los distintos carruseles de “Fondo corregido” y “Fondo repetido” para ver qué funciona mejor para su bloque de imagen.

Cuando estés satisfecho con el aspecto de tu imagen, sólo tienes que hacer clic en el botón “Añadir texto sobre la imagen”.

Esto añade un área donde puedes escribir tu texto.

Dependiendo de la imagen, los visitantes pueden tener dificultades para leer el texto superpuesto. En este caso, puede ser útil poner el texto en negrita o cambiar su color siguiendo el mismo proceso descrito anteriormente.

También puedes aumentar el tamaño del texto.

Para ello, busque la sección “Tamaño” en el menú de la derecha. A continuación, puedes hacer clic en los distintos números para aumentar o reducir el tamaño del texto.

Cuando estés satisfecho con el aspecto del texto y la imagen, ve a la vista previa de tu sitio web. A continuación, haz clic en “Guardar borrador”, “Actualizar” o “Publicar” para guardar los cambios.

Si utiliza un tema de WordPress en bloque, entonces puede utilizar los métodos 1 y 2 para añadir texto encima de una imagen en cualquier parte de su tema utilizando el Full Site Editor (FSE) de WordPress.

Puede obtener más información acerca de FSE en nuestra guía completa para principiantes sobre la edición completa del sitio de WordPress.

Método 3: Crear una disposición de página personalizada con texto sobre una imagen

Los bloques integrados de WordPress son una forma rápida y sencilla de añadir texto encima de una imagen en WordPress. Sin embargo, si desea tener la libertad de crear diseños de página completamente personalizados, entonces necesitará un plugin maquetador de páginas.

SeedProd es el mejor plugin maquetador de páginas para WordPress del mercado. Te permite añadir texto encima de cualquier imagen en todo tu sitio web.

Puede leer nuestra reseña / valoración completa de SeedProd para más detalles.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, deberá introducir su clave de licencia de SeedProd. Puede obtener esta clave accediendo a su cuenta SeedProd. A continuación, haga clic en la pestaña “Descargas”.

Una vez hecho esto, puedes copiar la clave en la sección “Clave de licencia”.

Ahora puede pegar esta clave en su área de administrador de WordPress yendo a la página SeedProd ” Ajustes.

Una vez aquí, pega tu clave en el campo “Clave de licencia”.

A continuación, basta con hacer clic en “Verificar clave”.

Después, nos dirigiremos a SeedProd “ Páginas de destino y haremos clic en “Añadir nueva página de destino”.

La siguiente tarea es elegir una plantilla, que será el punto de partida de su página. Independientemente de la plantilla SeedProd que elija, puede personalizar cada parte de la plantilla para que se adapte perfectamente a su sitio web y a su imagen de marca / marca.

Si prefiere empezar con un lienzo en blanco, puede hacer clic en “Plantilla en blanco”.

En todas nuestras imágenes, estamos utilizando la plantilla Tasty Squeeze Page, que es perfecta para conseguir más campañas de suscriptores.

Cuando hayas encontrado una plantilla que te interese, pasa el cursor por encima de ella. A continuación, puedes hacer clic en el icono “Vista previa”.

Esto mostrará una vista previa de la plantilla.

Si está satisfecho con el aspecto de esta plantilla, haga clic en el botón “Elegir esta plantilla”.

En el campo “Nombre de página”, escriba un nombre para la página.

Por defecto, SeedProd utilizará este nombre como URL de la página. Si desea cambiar esta URL creada automáticamente, simplemente edite el texto en el campo “URL de la página”.

Cuando esté satisfecho con la información que ha introducido, haga clic en el botón “Guardar y empezar a editar la página”. Esto abrirá la plantilla en el editor arrastrar y soltar de SeedProd.

En la barra lateral izquierda verás todos los bloques y secciones que puedes añadir a tu página arrastrando y soltando.

A menos que esté utilizando la plantilla en blanco, su página SeedProd ya tendrá algunos bloques y secciones. Para editar cualquiera de estos contenidos, simplemente haga clic para seleccionar el bloque o sección.

El menú de la izquierda de SeedProd mostrará ahora todos los ajustes que puede utilizar para personalizar este bloque o sección. Como puede ver en la siguiente imagen, si hace clic en un bloque Titular, puede cambiar el texto que aparece en este bloque.

La forma más fácil de añadir texto encima de una imagen es utilizando una de las secciones de pantalla completa de SeedProd.

Estas secciones tienen un marcador de posición, una imagen de fondo de ancho completo, con un poco de texto de marcador de posición añadido en la parte superior. Puede sustituir la imagen de fondo y el texto por defecto por su propio contenido.

Para empezar, haga clic en la pestaña “Secciones” del menú de la izquierda de SeedProd.

A continuación, puede hacer clic en “Héroe” para ver todas las secciones de héroe ya preparadas que puede añadir a su página.

Para obtener una vista previa de cualquiera de estas plantillas de sección, sólo tiene que pasar el ratón por encima de la plantilla y hacer clic en el icono de la lupa.

Para seguir adelante y añadir esta sección a pantalla completa, basta con hacer clic en “Elegir esta sección”.

A continuación, sustituya la imagen de inventario / existencias de la plantilla por su propia imagen. Para ello, basta con hacer clic en la imagen de inventario / existencias para seleccionarla.

A continuación, en el menú de la izquierda de SeedProd, pase el cursor por encima de la vista previa de “Imagen de fondo” hasta que aparezca el icono de una papelera.

A continuación, puede seguir adelante y hacer clic en este icono para borrar la imagen del marcador de posición.

A continuación, haz clic en “Usar tu propia imagen”. A continuación, puede elegir una imagen de la biblioteca de medios de WordPress o utilizar una imagen de inventario / existencias.

SeedProd le facilita el acceso a miles de imágenes de inventario / existencias libres de derechos de autor. Para echar un vistazo a la biblioteca de imágenes de stock de SeedProd, haz clic en “Usar una imagen de stock”.

En la barra de búsqueda, escriba una palabra o frase que describa la imagen que busca y haga clic en el botón “Buscar”.

SeedProd mostrará ahora todas las imágenes de inventario / existencias que coincidan con su término de búsqueda.

Cuando encuentres una imagen que quieras añadir a tu diseño, sólo tienes que darle un clic.

Una vez añadida la imagen, puede sustituir el texto del marcador de posición.

Para ello, haga clic para seleccionar el bloque Texto. A continuación, en el área “Texto”, escriba el texto que desee utilizar.

Algunas de las plantillas a pantalla completa de SeedProd tienen contenido extra, como botones de llamada a la acción.

¿Desea modificar este contenido? Entonces sólo tiene que hacer clic para seleccionar el bloque y, a continuación, realizar los cambios en el menú de la izquierda de SeedProd.

Otra opción es borrar el bloque de la plantilla a pantalla completa.

Para ello, basta con hacer clic para seleccionar el bloque y, a continuación, hacer clic en el icono de la papelera.

Cuando esté satisfecho con el diseño de su página, puede hacer clic en el botón “Guardar”.

Desde aquí, puede elegir publicar la página o guardarla como plantilla.

Para más detalles sobre cómo crear disposiciones de página personalizadas con SeedProd, puede consultar nuestra guía sobre cómo crear una página de destino en WordPress.

Consejos extra para gestionar imágenes y archivos en WordPress

Añadir texto a las imágenes es sólo una forma de mejorar el aspecto de su sitio. ¿Quieres hacer más con tus imágenes? Marca / comprueba estas sencillas guías:

• Cómo cargar fácilmente imágenes diferidas en WordPress
• Cómo añadir múltiples galerías en entradas y páginas de WordPress
• Cómo añadir correctamente un carrusel / control deslizante de contenido destacado en WordPress
• Cómo añadir un borde alrededor de una imagen en WordPress
• Cómo recortar y editar miniaturas de entradas en WordPress
• Cómo añadir fácilmente imágenes interactivas de 360 grados en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo añadir texto encima de una imagen en WordPress. Puede que también quieras ver nuestra guía sobre cómo editar por lotes las imágenes destacadas y nuestra selección de los mejores plugins de carrusel / control deslizante para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.