Cómo añadir texto sobre una imagen en WordPress (3 formas fáciles) 

¿Quieres destacar una oferta, añadir una llamada a la acción o hacer que tus fotos sean más atractivas? Añadir texto sobre una imagen en WordPress es la forma más rápida de hacerlo, y puedes hacerlo todo dentro de tu sitio sin Photoshop ni una herramienta externa en línea. Puedes convertir una imagen normal en un banner, un encabezado principal o incluso un mini anuncio en solo unos pocos clics.

En esta guía, te mostraré tres formas sencillas de poner texto sobre imágenes en WordPress, desde el editor de bloques integrado hasta un constructor de arrastrar y soltar que te da más control de diseño.

¿Por qué añadir texto sobre una imagen en WordPress?

Añadir texto sobre una imagen la hace más útil. Puedes destacar características de productos, añadir llamadas a la acción en banners o colocar etiquetas directamente en las fotos para que los visitantes entiendan al instante lo que están viendo.

No necesitas Photoshop ni habilidades de diseño gráfico para nada de esto. WordPress te ofrece varias formas integradas de añadir superposiciones de texto directamente en tu sitio, que es donde entran los tres métodos siguientes.

Cómo añadir texto sobre una imagen en WordPress

A continuación, encontrarás 3 formas diferentes de añadir texto sobre una imagen en WordPress. Empezaremos con un plugin de WordPress y luego te mostraremos cómo crear superposiciones de texto con el editor de bloques de WordPress.

Método 1. Añadir texto sobre una imagen usando el bloque Galería de SeedProd

El plugin con el que empezaremos es SeedProd, el mejor creador de sitios web para WordPress. SeedProd te permite crear diseños de texto sobre imagen visualmente, arrastrando bloques al lugar sin tocar código.

Puedes empezar con un kit completo de sitio web o una plantilla de página de destino, y luego personalizar tu diseño con bloques de WordPress. El bloque Galería, por ejemplo, te permite activar una superposición de color y mostrar los títulos, descripciones y leyendas de tus fotos al pasar el ratón por encima.

Sigue la guía a continuación para aprender a añadir texto sobre una imagen con SeedProd.

Paso 1. Instalar y Activar SeedProd

Primero, haz clic en el botón de abajo para crear tu cuenta de SeedProd y descargar el archivo del plugin a tu ordenador.

Empieza hoy mismo con SeedProd

Luego, dentro del panel de tu cuenta, haz clic en la pestaña Descargas y copia tu clave de licencia de SeedProd.

A continuación, sube el archivo .zip del plugin a tu sitio web de WordPress. Si necesitas ayuda con este paso, sigue estas instrucciones sobre cómo instalar y activar un plugin de WordPress.

Después de activar SeedProd, ve a SeedProd » Ajustes desde tu área de administración de WordPress y pega la clave de licencia que copiaste anteriormente.

Ahora haz clic en el botón Verificar clave y pasa al siguiente paso.

Paso 2. Crear un nuevo diseño de WordPress

Para este paso, necesitarás decidir qué tipo de diseño de WordPress quieres crear con SeedProd. Puedes construir un tema de WordPress desde cero utilizando uno de los Kits de Sitio Web completos, o elegir una plantilla de página de destino para crear una página de destino independiente.

La opción Theme Builder es ideal si quieres reemplazar completamente tu tema de WordPress existente. Si solo quieres crear o personalizar una página y mantener tu tema actual, el Landing Page Builder es una mejor opción.

Tenemos tutoriales para ambas rutas. Sigue esta guía para crear un tema de WordPress o estos pasos para crear una página de destino en WordPress con SeedProd.

Ambos tutoriales te guían a través de la elección de una plantilla prefabricada y la configuración de tu diseño básico. Para esta guía, seleccionaremos la opción Theme Builder.

Una vez que hayas elegido una plantilla para tu diseño, puedes editarla y agregar tus personalizaciones. En este caso, estamos utilizando el Tema de portafolio de Fotografía y planeamos personalizar la página de Portafolio.

Para editar la página Portfolio, ve a Páginas » Todas las Páginas, busca la página que deseas y haz clic en el enlace Editar con SeedProd.

Paso 3. Incrustar y personalizar el bloque de galería

Cuando abras tu diseño, verás un diseño como el del ejemplo a continuación.

A la derecha hay una vista previa en vivo de tu página que puedes hacer clic y editar en tiempo real. A la izquierda hay bloques de WordPress y secciones que puedes arrastrar y soltar en tu diseño.

También puedes eliminar elementos al pasar el ratón por encima y hacer clic en el icono de la papelera. Haremos esto para el bloque Galería que vino con nuestra plantilla, porque lo estamos reemplazando con la Galería Avanzada.

El bloque Galería Avanzada de SeedProd te permite establecer el color de superposición, la fuente, la alineación y qué texto de leyenda se muestra al pasar el ratón por encima. Lo usaremos para añadir texto sobre las imágenes del portafolio, así que busca el bloque Galería Avanzada y arrástralo a tu página.

La configuración del bloque se abre en la barra lateral izquierda. Dentro de este panel, primero elige Individual o Múltiple en el menú desplegable "Tipo".

La opción "Múltiple" te permite añadir más de una galería a tu página con un filtro en el que puedes hacer clic para ver cada galería. La opción "Individual" muestra solo una galería sin los filtros.

Después de elegir el tipo de galería, puedes empezar a añadir tus fotos. Haz clic en el botón Añadir Imágenes de Galería y selecciona imágenes de tu ordenador o de la biblioteca de medios de WordPress.

Puedes añadir cualquier foto, incluyendo JPEG/JPG, PNG, GIF y otros tipos de archivo.

Una vez que hayas subido tus fotos, puedes abrir el menú Configuración y elegir el número de columnas, el espaciado, la relación de aspecto, el tamaño de la imagen y el enlace.

A continuación, puedes elegir qué texto mostrar al pasar el ratón por encima de cada foto. Para ambas opciones, puedes mostrar lo siguiente:

• Título
• Por ejemplo, si deseas mostrar una imagen con un botón de llamada a la acción, puedes elegir una sección de la biblioteca de Llamadas a la acción y hacer clic en el icono de más para incrustarla.
• Texto alternativo
• Descripción

Así es como se ve con la leyenda de la imagen mostrada al pasar el ratón por encima.

Si tus leyendas son difíciles de leer, puedes ajustar el color de fondo de la superposición y editar la fuente del texto, la alineación del texto y el estilo del texto.

La pestaña Avanzada tiene muchas otras opciones de personalización, incluyendo sombra, borde, espaciado y estilos de visibilidad móvil.

Con la Visibilidad del Dispositivo, puedes mostrar y ocultar elementos específicos en diferentes tamaños de dispositivo, como tabletas Android, iPhones, iPads de Apple, portátiles Mac iOS y escritorios Microsoft.

Cuando estés satisfecho con tu diseño, recuerda guardar tus cambios haciendo clic en el botón Guardar en la esquina superior derecha.

Paso 4. Publica tus cambios

Ahora, todo lo que queda es aplicar las personalizaciones de WordPress en tu sitio web. Si estás creando una página de destino, haz clic en Publicar en el menú desplegable Guardar.

Si estás utilizando el Theme Builder de SeedProd, deberás ir a SeedProd » Theme Builder y activar el interruptor Activar tema de SeedProd.

Ahora puedes previsualizar tu página y ver tus superposiciones de texto en imágenes en acción.

Método 2. Añadir texto sobre una imagen usando Secciones de SeedProd

Otra forma de añadir texto sobre una imagen en WordPress es con las secciones prediseñadas de SeedProd. Cuando edites cualquier plantilla con el editor de arrastrar y soltar de SeedProd, verás una pestaña de Secciones en el lado izquierdo de tu pantalla.

Al hacer clic en esa pestaña se muestran varias secciones para tu Encabezado, Pie de página, Héroe, Llamada a la acción, Características y Preguntas frecuentes. Son colecciones de bloques de WordPress en un diseño prefabricado que puedes añadir a tu página con un solo clic.

Si quieres mostrar una imagen con un botón de llamada a la acción, puedes elegir una sección de la biblioteca de Llamadas a la acción y hacer clic en el icono de más para incrustarla.

La sección aparece en la parte inferior de tu diseño, donde puedes personalizarla para que se adapte a tus necesidades.

En este caso, hemos cambiado la imagen de fondo, añadido un color de superposición para atenuar el fondo y personalizado el texto del encabezado y los botones de llamada a la acción.

Recuerda Guardar y Publicar tus cambios cuando hayas terminado. Luego puedes previsualizar tu diseño en vivo en tu sitio web.

Método 3. Añadir texto sobre una imagen con el bloque de portada de WordPress

El siguiente método te muestra cómo añadir texto sobre una imagen en WordPress sin un plugin. Puedes usar el bloque de Portada de WordPress para mostrar cualquier imagen y escribir texto sobre ella.

Este método no ofrece tantas opciones de personalización como el anterior. Sigue siendo una forma útil de añadir texto a las imágenes si no quieres añadir otro plugin de WordPress a tu sitio web.

Para añadir el bloque de Portada a una entrada o página, haz clic en el icono más (+) en el editor de bloques de WordPress. Luego escribe "Portada" y elige el bloque de Portada cuando aparezca.

A continuación, haz clic en el botón "Subir" o "Biblioteca de medios" para elegir una imagen para tu portada.

Después de elegir una imagen, puedes escribir directamente sobre la foto para añadir un titular o una descripción.

Puedes personalizar tu imagen de fondo en el panel derecho habilitando un fondo fijo o repetido. También puedes cambiar el enfoque de la imagen arrastrando el marcador en la vista previa.

El panel Configuración de superposición te permite elegir una superposición de color o degradado para tu imagen. En el mismo panel, puedes establecer la opacidad, el relleno y las dimensiones de la superposición.

Al hacer clic en el texto de superposición se abren las herramientas de texto donde puedes cambiar el color del texto y el color de fondo y jugar con los diferentes estilos de fuente.

Cambiar las mayúsculas, el espaciado entre letras y el tamaño de la fuente nos permite crear este efecto de etiqueta.

Una vez que estés satisfecho con el aspecto de tu bloque de portada, puedes publicar o actualizar tu página. Cuando visites tu sitio web, verás tu texto sobre la imagen.

¿Cómo mantener el texto legible sobre una imagen?

El truco para que el texto sobre una imagen sea legible es el contraste, de modo que las palabras nunca compitan con la foto que tienen detrás. Una imagen muy cargada o brillante es la razón más común por la que el texto superpuesto desaparece, y unos pequeños ajustes lo solucionan.

• Usa texto de alto contraste: El texto claro sobre una foto oscura, o el texto oscuro sobre una clara, se mantiene legible de un vistazo.
• Añade una superposición para atenuar el fondo: Una capa de color semitransparente calma una imagen cargada, de la misma manera que atenuas una imagen de fondo detrás de una sección de héroe.
• Ajusta el tamaño de la fuente al dispositivo: El texto que se ve bien en el escritorio puede reducirse a nada en el móvil, así que comprueba ambos antes de publicar.
• Evita las zonas cargadas de la foto: Coloca tus palabras sobre una zona tranquila de cielo, pared o sombra en lugar de sobre un sujeto detallado.

¿Cómo añadir texto detrás de una imagen en WordPress?

Añadir texto detrás de una imagen es un efecto de diseño en capas, donde una palabra se sitúa detrás del sujeto para que la foto parezca superponerse a ella. WordPress no tiene un único botón de "texto detrás de imagen", pero puedes simular el aspecto con bloques superpuestos.

La ruta más sencilla es el bloque de portada. Establece un encabezado grande como texto de superposición y luego reduce la opacidad de la imagen en la configuración de superposición para que el texto se lea como si estuviera detrás de la foto en lugar de encima.

Para un efecto más potente, utiliza bloques de grupo superpuestos. Coloca un encabezado en un grupo y una imagen con fondo transparente (un recorte PNG) en otro, y luego usa márgenes negativos o relleno para acercar la imagen a parte del texto.

¿Cómo ajustar texto alrededor de una imagen en WordPress?

Ajustar el texto alrededor de una imagen significa que el párrafo fluye junto a la foto en lugar de detenerse encima y debajo de ella. El editor de bloques de WordPress maneja esto con la alineación de imágenes, sin necesidad de código.

Añade primero tu bloque de imagen, luego selecciónalo y elige Alinear a la izquierda o Alinear a la derecha en la barra de herramientas del bloque. Escribe tu párrafo en el bloque directamente después de la imagen, y el texto se ajustará al lado abierto.

Mantén la imagen a un ancho modesto para que haya espacio para que el texto se sitúe a su lado. En pantallas móviles estrechas, WordPress coloca automáticamente el texto ajustado debajo de la imagen, lo que mantiene el diseño legible.

Preguntas frecuentes sobre cómo añadir texto sobre una imagen de WordPress

¿Cómo añado texto sobre una imagen en WordPress sin un plugin?

Utiliza el bloque de portada integrado de WordPress. Añade un bloque de portada en el editor de bloques, elige tu imagen y escribe tu texto directamente sobre la foto. Luego puedes establecer un color de superposición y ajustar el estilo del texto en el panel derecho.

¿Cómo añado texto detrás de una imagen en WordPress?

WordPress no tiene un botón único para ello, así que simulas el aspecto en capas con bloques superpuestos. Establece un encabezado como texto de superposición del bloque de portada y reduce la opacidad de la imagen, o apila dos bloques de grupo y acerca la imagen a parte del texto con márgenes negativos.

¿Cómo ajusto texto alrededor de una imagen en WordPress?

Añade un bloque de imagen, selecciónalo y elige Alinear a la izquierda o Alinear a la derecha en la barra de herramientas del bloque. Escribe tu párrafo en el bloque justo después de la imagen, y el texto fluirá alrededor del lado abierto. En móvil, WordPress coloca automáticamente el texto debajo de la imagen.

¿Cómo mantengo el texto legible sobre una imagen con mucho contenido?

Añade una superposición semitransparente para atenuar la foto, luego usa texto de alto contraste para que las palabras destaquen. Coloca el texto sobre una parte tranquila de la imagen, como el cielo o una pared lisa, y comprueba el tamaño de la fuente en el móvil antes de publicar.

Empieza a Añadir Texto Sobre Tus Imágenes Hoy Mismo

Ahora puedes añadir texto sobre cualquier imagen en WordPress, desde una rápida superposición de bloque de portada hasta una galería SeedProd completamente estilizada. Elige el método que se ajuste a la cantidad de control de diseño que deseas, y podrás tenerlo en funcionamiento en minutos.

Empieza hoy mismo con SeedProd

También te pueden interesar los siguientes tutoriales de WordPress:

• Cómo crear pestañas en WordPress para contenido en pestañas
• Cómo personalizar los extractos de publicaciones de WordPress (sin código)
• ¿Cómo crear animaciones de texto en WordPress (pasos sencillos)?

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.