Cómo agregar texto sobre una imagen en WordPress (3 métodos)

¿Quieres agregar texto a tus imágenes de WordPress? Esos títulos y citas atractivos que ves superpuestos en las fotos pueden hacer que tu contenido realmente destaque. Se llama superposición de texto y es una excelente manera de hacer que tus imágenes sean más atractivas.

Si te has estado preguntando cómo crear estas superposiciones de texto, podrías pensar que necesitas software o habilidades de diseño especiales. Buenas noticias: ¡no las necesitas!

Hemos probado todo tipo de métodos y encontrado varias formas sencillas de agregar texto a las imágenes directamente en WordPress. No se necesita experiencia en diseño ni software adicional que comprar.

¿Listo para aprender cómo? Te mostraremos tres formas sencillas de agregar texto sobre una imagen en WordPress. Cuando termines esta guía, estarás creando superposiciones de texto de aspecto profesional para tu sitio web con confianza.

Cuándo agregar texto sobre imágenes en WordPress

Las imágenes pueden aumentar significativamente el atractivo de tu sitio web de WordPress, haciéndolo más interesante visualmente y ayudando a romper secciones de texto largas.

Sin embargo, hay momentos en que una imagen por sí sola no cuenta toda la historia. En esos casos, agregar superposiciones de texto puede proporcionar contexto adicional, ayudando a tu audiencia a comprender por qué la imagen es relevante para el contenido.

Ya sea que tengas un blog de WordPress o una tienda en línea, las superposiciones de texto pueden transformar imágenes normales en encabezados o banners que llaman la atención.

En esta publicación, tenemos tres formas sencillas para principiantes de agregar texto sobre una imagen en WordPress. Si prefieres ir directamente a un método en particular, puedes usar los enlaces a continuación:

• Método 1: Agregar texto sobre una imagen usando el bloque de portada
• Método 2: Agregar texto sobre una imagen usando el bloque de imagen
• Method 3: Create a Custom Page Layout with Text on Top of an Image

Método 1: Agregar texto sobre una imagen usando el bloque de portada

Una forma de agregar texto sobre una imagen en WordPress es usando el bloque de portada. Puedes usar este bloque para mostrar cualquier imagen y luego escribir texto sobre ella. Esto hace que el bloque de portada sea perfecto para crear imágenes destacadas, encabezados y banners.

Para agregar un bloque de portada a una página o publicación, simplemente haz clic en el botón más ‘+ Agregar bloque’ en el editor de bloques de Gutenberg.

Ahora puedes escribir 'Portada' y seleccionar el bloque correcto cuando aparezca.

Aquí, puedes elegir el bloque de portada predeterminado.

Pero también puedes optar por la opción de plantilla con la imagen y el texto de marcador de posición. Con la segunda opción, simplemente puedes reemplazar la imagen y el texto existentes por los tuyos.

Para reemplazar la imagen predeterminada, simplemente haz clic para seleccionarla. Una vez que lo hayas hecho, haz clic en el botón 'Reemplazar'.

Si deseas usar una imagen que ya está en tu biblioteca de medios de WordPress, simplemente haz clic en 'Abrir biblioteca de medios'. Luego puedes elegir una imagen existente.

Si deseas cargar una imagen nueva, haz clic en 'Cargar' en su lugar.

Esto abre una ventana donde puedes elegir cualquier archivo de tu computadora.

Después de elegir una imagen, puedes usar la configuración del bloque para crear efectos interesantes y llamativos.

Por ejemplo, puedes hacer que la imagen permanezca fija en su lugar mientras el visitante se desplaza por la página o agregar una superposición de color a la imagen.

Si usas una superposición, puedes cambiar su opacidad usando el control deslizante 'Opacidad'. La configuración de opacidad controla la transparencia de la imagen de fondo.

Cuando estés satisfecho con cómo se ve la imagen, estarás listo para agregar texto.

Por defecto, el bloque de Portada tiene un bloque de Encabezado y un bloque de Párrafo donde puedes agregar texto sobre la imagen.

Para agregar texto, simplemente haz clic para seleccionar el bloque de Encabezado o Párrafo. Luego, procede a escribir el texto que deseas usar.

Al agregar texto sobre imágenes, asegúrate de que tu texto sea legible para todos los visitantes. Un buen contraste entre el texto y el fondo ayuda a que todos lean tu contenido más fácilmente. Para obtener más información, consulta nuestra guía sobre cómo mejorar la accesibilidad en tu sitio de WordPress.

Dicho esto, es posible que desees estilizar tu texto para que sea más fácil de leer.

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

También puedes hacer que tu texto resalte usando un color contrastante.

Para elegir un color diferente, selecciona la pestaña 'Bloque' en el menú de la derecha. Luego, haz clic en 'Color' para expandir esta sección.

Una vez que hayas hecho eso, haz clic en 'Texto'. Esto abrirá una ventana emergente donde puedes elegir un nuevo color para todo el texto del bloque.

Típicamente, el texto más grande es más fácil de leer.

Para hacer tu texto más grande, haz clic en el campo junto a 'Tamaño' y luego escribe un número mayor en este campo.

Una vez que estés satisfecho con la apariencia de tu bloque de Portada, puedes publicar o actualizar tu página como de costumbre. Ahora, si visitas tu sitio web de WordPress, verás tu texto sobre la imagen.

Método 2: Agregar texto sobre una imagen usando el bloque de imagen

El bloque de Portada es excelente para crear banners y encabezados. Sin embargo, también puedes agregar texto sobre un bloque de Imagen estándar de WordPress.

Para empezar, necesitarás agregar un bloque de Imagen a tu página o publicación. Para hacer esto, simplemente haz clic en el botón más '+ Agregar bloque' en el editor de bloques de WordPress.

Luego puedes escribir 'Imagen' y seleccionar el bloque correcto para agregarlo a tu publicación.

Puedes entonces subir una imagen desde tu computadora 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 puedes probar los diferentes controles deslizantes de ‘Fondo fijo’ y ‘Fondo repetido’ para ver qué funciona mejor para tu bloque de imagen.

Cuando estés satisfecho con cómo se ve tu imagen, simplemente haz clic en el botón ‘Añadir texto sobre la imagen’.

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

Dependiendo de tu imagen, los visitantes pueden tener dificultades para leer tu texto superpuesto. Aquí, puede ayudar hacer el texto en negrita o cambiar su color siguiendo el mismo proceso descrito anteriormente.

También puedes hacer tu texto más grande.

Para hacer esto, busca la sección ‘Tamaño’ en el menú de la derecha. Luego puedes proceder y hacer clic en los diferentes números para hacer tu texto más grande o más pequeño.

Cuando estés satisfecho con cómo se ven tu texto e imagen, procede a previsualizar tu sitio web. Luego, haz clic en ‘Guardar borrador’, ‘Actualizar’ o ‘Publicar’ para guardar tus cambios.

Si usas un tema de bloques de WordPress, entonces puedes usar los Métodos 1 y 2 para añadir texto encima de una imagen en cualquier parte de tu tema usando el Editor de Sitio Completo (FSE) de WordPress.

Puedes aprender más sobre FSE en nuestra guía completa para principiantes sobre la edición completa del sitio en WordPress.

Método 3: Crear un diseño de página personalizado con texto sobre una imagen

Los bloques integrados de WordPress son una forma rápida y sencilla de agregar texto sobre una imagen en WordPress. Sin embargo, si deseas la libertad de crear diseños de página completamente personalizados, necesitarás un plugin de constructor de páginas.

SeedProd es el mejor plugin constructor de páginas de WordPress del mercado. Te permite agregar texto sobre cualquier imagen en todo tu sitio web.

Puedes leer nuestra reseña completa de SeedProd para más detalles.

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

Tras la activación, deberás introducir tu clave de licencia de SeedProd. Puedes obtener esta clave iniciando sesión en tu cuenta de SeedProd. Luego, haz clic en la pestaña 'Descargas'.

Una vez que hayas hecho eso, puedes copiar la clave en la sección 'Clave de licencia'.

Ahora puedes pegar esta clave en tu área de administración de WordPress yendo a la página SeedProd » Configuración.

Una vez que estés aquí, procede a pegar tu clave en el campo 'Clave de licencia'.

Luego, simplemente haz clic en 'Verificar clave'.

Después de eso, vamos a dirigirnos a SeedProd » Páginas de destino y haremos clic en 'Agregar nueva página de destino'.

Este primer paso es necesario antes de que puedas agregar texto sobre tus imágenes.

Tu próxima tarea es elegir una plantilla, que será el punto de partida de tu página.

Sin importar qué plantilla de SeedProd elijas, puedes personalizar cada parte de la plantilla para que se adapte perfectamente a tu sitio web y marca. Si prefieres empezar con un lienzo en blanco, entonces puedes hacer clic en 'Plantilla en blanco'.

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

Una vez que hayas encontrado una plantilla que quieras usar, pasa el ratón sobre ella. Luego puedes hacer clic en el icono 'Vista previa'.

Esto mostrará una vista previa de la plantilla.

Si estás satisfecho con cómo se ve esta plantilla, entonces procede a hacer clic en el botón 'Elegir esta plantilla'.

En el campo ‘Nombre de la página’, escribe un nombre para la página.

Por defecto, SeedProd usará este nombre como la URL de la página. Si deseas cambiar esta URL creada automáticamente, simplemente edita el texto en el campo ‘URL de la página’.

Cuando estés satisfecho con la información que ingresaste, haz clic en el botón ‘Guardar y empezar a editar la página’. Esto abrirá la plantilla en el editor de arrastrar y soltar de SeedProd.

En la barra lateral izquierda, verás todos los bloques y secciones que puedes arrastrar y soltar en tu página.

A menos que estés usando la Plantilla en blanco, tu página de SeedProd ya tendrá algunos bloques y secciones. Para editar cualquiera de este contenido, simplemente haz clic para seleccionar el bloque o sección.

El menú de la izquierda de SeedProd ahora mostrará todas las configuraciones que puedes usar para personalizar este bloque o sección. Como puedes ver en la siguiente imagen, puedes cambiar el texto que aparece en el bloque de Encabezado.

La forma más fácil de agregar texto sobre una imagen es usando una de las secciones Hero listas para usar de SeedProd.

Estas secciones tienen una imagen de fondo de ancho completo de marcador de posición, con algo de texto de marcador de posición agregado encima. Simplemente puedes reemplazar la imagen de fondo y el texto predeterminados con tu propio contenido.

Para empezar, haz clic en la pestaña ‘Secciones’ en el menú de la izquierda de SeedProd.

Luego puedes hacer clic en ‘Hero’ para ver todas las secciones Hero listas para usar que puedes agregar a tu página.

Para previsualizar cualquiera de estas plantillas de sección, simplemente pasa el cursor sobre la plantilla y luego haz clic en el ícono de la lupa.

Para continuar y agregar esta sección Hero a tu diseño, simplemente haz clic en ‘Elegir esta sección’.

A continuación, querrás reemplazar la imagen de stock de la plantilla con tu propia imagen. Para hacer eso, simplemente haz clic en la imagen de stock para seleccionarla.

Luego, en el menú de la izquierda de SeedProd, pasa el cursor sobre la vista previa de ‘Imagen de fondo’ hasta que aparezca un ícono de bote de basura.

Luego puedes continuar y hacer clic en este ícono para eliminar la imagen de marcador de posición.

A continuación, haz clic en ‘Usar tu propia imagen’. Luego puedes elegir una imagen de la biblioteca de medios de WordPress o usar una imagen de stock.

SeedProd te da acceso fácil a miles de imágenes de stock libres de regalías. 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, escribe una palabra o frase que describa la imagen que buscas y haz clic en el botón ‘Buscar’.

SeedProd ahora mostrará todas las imágenes de stock que coincidan con tu término de búsqueda.

Cuando encuentres una imagen que quieras agregar a tu diseño, simplemente haz clic en ella.

Una vez que hayas agregado una imagen, estarás listo para reemplazar el texto de marcador de posición.

Para hacer esto, haz clic para seleccionar el bloque de texto. Luego, en el área ‘Texto’, simplemente escribe el texto que deseas usar.

Algunas de las plantillas principales de SeedProd tienen contenido adicional, como botones de llamada a la acción.

¿Quieres cambiar este contenido? Entonces, simplemente haz clic para seleccionar el bloque y luego realiza tus cambios en el menú de la izquierda de SeedProd.

Otra opción es eliminar el bloque de la plantilla principal.

Para hacer esto, simplemente haz clic para seleccionar el bloque y luego haz clic en el ícono del bote de basura.

Cuando estés satisfecho con el diseño de tu página, puedes hacer clic en el botón ‘Guardar’.

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

Para más detalles sobre cómo crear diseños de página personalizados con SeedProd, puedes consultar nuestra guía sobre cómo crear una página de destino en WordPress.

Consejos adicionales para administrar imágenes y archivos en WordPress

Agregar texto a las imágenes es solo una forma de mejorar la apariencia de tu sitio. ¿Quieres hacer más con tus imágenes? Consulta estas guías sencillas:

• Cómo cargar imágenes de forma diferida (lazy load) fácilmente en WordPress
• Cómo agregar múltiples galerías en publicaciones y páginas de WordPress
• Cómo Agregar Correctamente un Slider de Contenido Destacado en WordPress
• Cómo añadir un borde alrededor de una imagen en WordPress
• Cómo recortar y editar miniaturas de publicaciones de WordPress
• Cómo agregar fácilmente imágenes interactivas de 360 grados en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar texto sobre una imagen en WordPress. También te puede interesar nuestra guía sobre cómo editar imágenes destacadas en bloque y nuestras selecciones expertas para los mejores plugins de slider para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.