¿Quieres destacar una oferta, añadir una llamada a la acción o hacer tus fotos más atractivas? Añadir texto a una imagen en WordPress es la forma más rápida de hacerlo. Puedes convertir una imagen normal en un banner, un encabezado principal o incluso un anuncio pequeño con solo unos clics.
En esta guía, te mostraré varias formas sencillas de poner texto sobre imágenes en WordPress, desde el editor integrado hasta plugins que te dan más control de diseño.
¿Por qué añadir texto sobre imágenes en WordPress?
Añadir texto sobre imágenes las hace más útiles. 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.
También es útil para la marca, como añadir marcas de agua, o convertir una imagen normal en un encabezado, una imagen principal o un anuncio en línea sin necesidad de software de diseño adicional.
La buena noticia es que no necesitas Photoshop ni habilidades de diseño gráfico. WordPress te ofrece varias formas sencillas de añadir superposiciones de texto directamente en tu sitio.
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 usando un potente plugin de WordPress, y luego explicaremos cómo crear superposiciones de texto con el editor de bloques de WordPress.
Empecemos.
Método 1. Añadir texto a una imagen usando el bloque de galería de SeedProd
El plugin de WordPress con el que empezaremos es SeedProd, el mejor constructor de sitios web para WordPress. Tiene un editor visual de arrastrar y soltar que te permite crear temas de WordPress, páginas de destino y diseños flexibles para tu sitio sin escribir código.
Puedes empezar con un kit de sitio web completo o una plantilla de página de destino, y luego personalizar tu diseño visualmente con bloques de WordPress. Por ejemplo, los bloques de Galería te permiten activar una superposición de color y mostrar los títulos, descripciones y leyendas de tus fotos al pasar el ratón por encima.
SeedProd también viene con las siguientes potentes funciones:
- Modo de 'próximamente' y de mantenimiento
- Constructor de temas de WordPress
- Páginas 404 y de inicio de sesión
- Panel de gestión de suscriptores
- Integraciones de marketing por correo electrónico
- Incrustaciones de redes sociales
- Controles de acceso de usuario
- Reemplazo dinámico de texto
- Mapeo de dominios
- Y m ilde;s.
Sigue la guía a continuación para aprender cómo añadir texto a 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.
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, deberás decidir qué tipo de diseño de WordPress quieres crear con SeedProd. Puedes crear un tema de WordPress desde cero utilizando uno de los Kits de sitios 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 deseas reemplazar completamente tu tema de WordPress existente. Sin embargo, si solo deseas crear o personalizar una página y mantener tu tema actual, el Constructor de páginas de destino es una mejor opción.
Afortunadamente, tenemos muchos tutoriales para ambas soluciones. 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 guiarán a través de la elección de una plantilla prehecha 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 de Portafolio, 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 siguiente ejemplo:
A la derecha hay una vista previa en vivo de tu página en la que puedes hacer clic y editar en tiempo real. Luego, 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 cursor sobre ellos y hacer clic en el icono de la papelera. Haremos esto para el bloque de galería que vino con nuestra plantilla porque lo reemplazaremos con la Galería avanzada.
El bloque de Galería avanzada de SeedProd viene con potentes opciones de personalización. Usaremos estas para agregar texto sobre las imágenes en el portafolio, así que busca el bloque Galería avanzada y arrástralo a tu página.
Como puedes ver, la configuración del bloque se abrirá 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 agregar más de una galería a tu página con un filtro en el que puedes hacer clic para ver cada galería. Mientras que la opción "Individual" muestra solo una galería sin los filtros.
Después de elegir el tipo de galería, puedes comenzar a agregar tus fotos. Simplemente haz clic en el botón Agregar imágenes de la galería y selecciona imágenes de tu computadora o de la biblioteca de medios de WordPress.
Puedes agregar cualquier foto, incluidos 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.
Por ejemplo, hacer clic en el tipo de enlace Archivo multimedia asegurará que cada foto de la galería se abra en una galería de lightbox emergente.
Ahora haz clic en el menú Superposición y activa el interruptor Superposición de fondo en la posición "Sí".
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.
Además, la pestaña Avanzado tiene muchas otras opciones de personalización, incluyendo sombra, borde, espaciado y estilos de visibilidad móvil.
Por ejemplo, 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 de 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 hacer que las personalizaciones de WordPress se publiquen en tu sitio web. Si estás creando una página de destino, simplemente haz clic en Publicar en el menú desplegable Guardar.
Sin embargo, si estás utilizando el Theme Builder de SeedProd, deberás ir a SeedProd » Theme Builder y activar el interruptor Habilitar 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 a una imagen usando Secciones de SeedProd
Otra forma de añadir texto a una imagen en WordPress es con las secciones predefinidas de SeedProd. Cuando edites cualquier plantilla con el constructor de páginas de SeedProd, verás una pestaña de Secciones en el lado izquierdo de tu pantalla.
Hacer clic en esa pestaña mostrará 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 listo para usar que puedes añadir a tu página con un solo clic.
Por ejemplo, si desea mostrar una imagen con un bot ilde{n>o de llamada a la acci ilde{n>, puede elegir una secci ilde{n>n} de la biblioteca Llamada a la acci ilde{n>n} y hacer clic en el icono m ilde{n>n}s para insertarla.
La sección aparecerá en la parte inferior de tu diseño, donde puedes personalizarla para adaptarla 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 mostrará cómo añadir texto a una imagen en WordPress sin un plugin. Puedes usar el bloque de portada de WordPress para mostrar cualquier imagen y escribir texto sobre la imagen.
Este método no ofrece tantas opciones de personalización como el anterior; sin embargo, es 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 de más (+) en el editor de bloques de WordPress. Luego puedes escribir "Portada" y elegir 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.
Además, 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 configurar la opacidad, el relleno y las dimensiones de la superposición.
Al hacer clic en el texto de superposición se abrirán las herramientas de texto, donde puedes cambiar el color del texto y el color de fondo y jugar con los diferentes estilos de fuente.
Por ejemplo, cambiar las mayúsculas, el espaciado entre letras y el tamaño de fuente nos permitió 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.
Preguntas frecuentes sobre cómo añadir texto a una imagen de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar texto sobre una imagen en WordPress. ¿Listo para sumergirte y probar SeedProd por ti mismo?
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.
