Correo hecho con una imagen: cómo reconstruirlo con texto HTML y un botón editable

Tu correo se ve ordenado en la vista previa, pero el texto queda pequeño en el celular y cualquier cambio exige editar toda la imagen. Cuando no carga, también puede desaparecer información importante. Una solución es reconstruir el contenido con título, párrafos y botón editables, manteniendo la fotografía como apoyo.

Un correo compuesto por una imagen ya puede ser un documento HTML, incluso con un enlace en todo el banner. Aquí cambia la estructura: las palabras dejan de existir únicamente como píxeles. Es un rediseño manual basado en el contenido real de la campaña, no una conversión automática ni una recuperación de capas perdidas.

Qué cambia en la misma campaña

Una fotografía, ilustración o logotipo puede seguir siendo imagen. Lo importante es que la oferta, sus condiciones y la acción no dependan exclusivamente de ella. Separar estos elementos mejora la base para editar y leer, pero no vuelve automáticamente accesible cualquier HTML ni garantiza el mismo aspecto en todos los clientes.

1. Separa el contenido de la imagen original

Abre tu propio banner y anota qué necesita entender la persona para decidir. Confirma el texto con quien responde por la campaña. Copia la oferta correcta, la URL de destino y todas las condiciones relevantes; no inventes un descuento o una fecha para llenar el nuevo diseño.

Prefiere la fotografía original, sin títulos ni botones dibujados encima. Si solo tienes tu imagen aplanada, prepara el recorte o recrea la imagen en una herramienta externa; también puedes omitir una foto opcional. El bloque de imagen de Mailvex no extrae automáticamente la fotografía ni convierte las letras del banner en texto.

2. Utiliza un ejemplo sencillo como referencia

Imagina una campaña ficticia de una tienda de artículos de oficina que presenta una nueva colección para el escritorio. Puedes distribuir la misma información de esta manera. Sustituye los productos y el destino por los datos reales de tu campaña antes de enviar.

El asunto se configurará en el sistema de envío. En el diseño, la foto presenta los objetos, el párrafo explica la novedad y el botón identifica el destino. No necesitas mantener el banner completo debajo de los bloques: duplicaría el mensaje y conservaría las letras pequeñas que acabas de separar.

3. Crea un proyecto con bloques nativos en Mailvex

Con el correo de la cuenta confirmado y cuota de exportación disponible, elige una plantilla de una columna en el catálogo. Utiliza Usar plantilla o Usar esta plantilla en los detalles para crear tu propia copia. Guarda un nombre reconocible y conserva la imagen original como referencia, sin modificar la plantilla pública del catálogo.

En la nueva versión, elimina el bloque que contiene todo el banner. Desde Bloques, añade Título + texto, Texto, Imagen y Botón centrado según la estructura elegida. Puedes editar estos elementos por separado; subir otra vez el banner a Imagen no produciría esa separación.

• Selecciona Título + texto y completa Título y Texto. Si prefieres un párrafo independiente, deja Texto vacío en ese bloque y utiliza el bloque Texto debajo.
• Coloca la explicación y las condiciones relevantes en el cuerpo. Usa un orden de lectura sencillo, sin depender de las coordenadas del diseño anterior.
• En Botón centrado, completa Texto del botón con una acción específica y URL del botón con el destino real aprobado.
• Conserva el logotipo que identifica la marca y los elementos necesarios del pie. No sustituyas el botón nativo por una imagen de botón.

4. Añade una foto y un alt coherente

En Imagen, utiliza Abrir biblioteca de medios. Elige un archivo existente o selecciona Subir para añadir tu foto. Revisa que el recorte sea adecuado antes de subirla. Una imagen demasiado alta puede alejar la acción del texto; ajusta el archivo original en lugar de ocultar información importante.

Completa Descripción de la imagen (alt) con texto sencillo que explique la información relevante de esa foto. No pegues HTML ni transcribas toda la campaña en ese campo. Para el logotipo, escribe el nombre real de la marca cuando esa sea su función; el editor no tiene que adivinarlo.

Una imagen puramente decorativa y sin enlace puede tener alt vacío, lo que este bloque permite. Si utilizas Enlace al hacer clic, la alternativa debe ayudar a entender el destino. La oferta y sus condiciones permanecen en el texto visible, aunque el alt esté bien redactado.

5. Revisa lectura y visibilidad antes de exportar

Utiliza los iconos de monitor y teléfono para cambiar el ancho de la vista previa. Observa si el título se distribuye en líneas legibles, si el párrafo tiene espacio y si el botón aparece en la secuencia esperada. Es una vista de navegador, no una emulación de todos los celulares o versiones de Outlook.

En el contenido esencial, el botón y los bloques que los contienen, revisa Visibilidad. Mantén desactivados Ocultar en móvil y Ocultar en escritorio. Una acción independiente todavía puede desaparecer si su propio bloque o el contenedor está configurado para ocultarse.

Revisa contraste, orden de lectura, tamaño del texto y etiquetas de enlaces. Si tienes un lector de pantalla, escucha el mensaje y busca repeticiones o nombres sin significado. Estas comprobaciones ayudan a encontrar problemas; una sola revisión no equivale a una auditoría completa de accesibilidad.

6. Exporta el HTML y comprueba su estructura

Para esta muestra estática, elimina variables de demostración sin uso y desactiva Mostrar según condición en Condición de visibilidad (ESP) en los bloques que no necesiten esas reglas. Conserva el pie y los enlaces de servicio exigidos por tu sistema. En una campaña personalizada, las variables reales deben corresponder al sistema que envía.

Abre Exportar HTML, mantén mailvex en Formato de variables (ESP) y utiliza Copiar HTML una vez. Comprueba la cuota y la firma exigida por el plan. Puedes guardar el código ya copiado en un archivo .html completo; Descargar HTML es una alternativa, no otro paso obligatorio.

En el código, busca el título, el párrafo y el texto del botón. Deben aparecer como contenido textual, con el destino de la acción separado de la foto. Intentar seleccionar palabras en la vista previa es una pista, pero algunas aplicaciones tienen OCR: ese gesto no demuestra por sí solo que dejaron de ser imagen.

Comprueba también las URLs de imágenes fuera de la sesión del editor. El modo Mailvex conserva URLs alojadas; algunos recursos pueden permanecer en hosts externos. El modo Propio requiere archivos realmente disponibles en el destino; cambiar la base no los sube. Conserva los recursos necesarios para los correos ya enviados.

7. Envía a tu propia dirección desde el sistema habitual

Importa o pega el documento completo en el modo HTML que realmente admite tu sistema de envío. Revisa el resultado después de importar y envía únicamente a tu propia dirección de prueba. Mailvex prepara el contenido; este paso utiliza el servicio que ya empleas para enviar.

Abre el mensaje en computadora y celular, incluido Outlook si forma parte del público. Utiliza los controles del cliente para bloquear imágenes remotas cuando lo permita. Este recorrido del editor no incluye una opción de “imágenes apagadas”. Desconectar todo el navegador también interrumpe los enlaces y no sustituye esa prueba.

Comprueba que oferta, condiciones y etiqueta de la acción sigan entendiéndose. El alt puede aparecer de distintas formas o no mostrarse; no dependas de un párrafo largo dentro del espacio de la imagen. Un enlace separado reduce la dependencia de la foto, pero no evita políticas del cliente que bloqueen enlaces.

Registra qué funciona y qué debes modificar

Guarda el proyecto visual, el HTML y la identificación de la prueba. Para corregir una frase, vuelve al bloque original, exporta nuevamente y actualiza el código en el sistema de envío: editar el proyecto no modifica una copia ya transferida. Compara versiones con el mismo contenido para entender el efecto del cambio.

Si después evalúas resultados comerciales mediante una prueba A/B, mantén comparables oferta, público y condiciones de envío. Observa clics y acciones finales, además de aperturas. La prueba funcional de esta guía no demuestra un aumento de ventas ni una mejora de entrega.

Preguntas frecuentes

¿Puedo conservar el hero o el logotipo como imagen?

Sí. Utiliza la imagen para la parte visual y deja título, información esencial y acción en sus propios elementos. No necesitas eliminar todas las imágenes para crear un mensaje legible.

¿Dividir el banner en imágenes pequeñas resuelve el problema?

Eso no convierte las letras dibujadas en texto editable. Aumentar la resolución tampoco crea párrafos que se reorganizan. La separación útil ocurre al volver a escribir el contenido en bloques reales.

¿Puede ayudar la importación de una captura de pantalla?

Puede ser un punto de partida opcional para un borrador, seguido de revisión manual y sustitución de imágenes. La guía relacionada presenta esa ruta. Aquí, la reconstrucción parte del texto y los recursos que elegiste para la campaña.

¿Texto en HTML equivale a un correo plain text?

No. Este mensaje sigue siendo HTML, con texto, estilos e imágenes. Una alternativa de texto simple dentro del formato del correo depende del sistema de envío; este procedimiento no promete generar esa parte automáticamente.

¿Esto evita el spam o traduce la campaña automáticamente?

No. La entrega depende de otros factores, y cada idioma requiere contenido y revisión propios. No existe una proporción universal de imagen y texto que garantice resultados. El objetivo inmediato es tener un mensaje editable y validado en uso real.