Con ayuda de la IA, puedes crear diseños de correo electrónico personalizados sin tener que escribir tú mismo el código HTML.
La IA puede ayudarte a convertir una simple descripción en un correo electrónico completo, incluyendo el diseño, los colores, los botones, las imágenes y las áreas de texto.
El proceso básico es el siguiente:
- Describes a la IA cómo quieres que sea tu correo electrónico.
- Primero le pides que cree un mockup.
- Ajustas el diseño junto con la IA.
- Cuando estés satisfecho con el resultado, le pides que genere el código HTML.
- Después, insertas el código HTML en Quentn.
- Por último, envías un correo de prueba y compruebas cómo se muestra.
1. Describe a la IA el correo electrónico que quieres crear
Cuanto más exactamente expliques a la IA lo que quieres, mejor será el resultado.
Una instrucción que das a una IA suele llamarse prompt.
Un prompt es simplemente el texto que escribes en el campo de entrada de la IA.
Por ejemplo:
Crea un correo electrónico moderno para promocionar nuestro próximo webinar.
Eso ya funciona. Pero es mejor proporcionar más información a la IA.
Por ejemplo, puedes describir:
- ¿Cuál es el objetivo del correo?
- ¿Quién debe recibirlo?
- ¿Qué colores deben utilizarse?
- ¿El correo debe tener un diseño sencillo o llamativo?
- ¿Qué tono quieres utilizar?
- ¿Ya tienes textos terminados?
- ¿Qué titulares deben utilizarse?
- ¿Debe incluirse un botón?
- ¿Deben incorporarse imágenes?
- ¿Hay secciones específicas que necesites?
¿Qué significa “público objetivo”?
El público objetivo son las personas que deben recibir tu correo electrónico.
Por ejemplo:
- nuevos interesados,
- clientes actuales,
- participantes de un webinar,
- compradores de un producto,
- miembros de un curso,
- autónomos,
- empresas.
Esta información ayuda a la IA a adaptar mejor el diseño y los textos a los destinatarios.
¿Qué significa “tono”?
El tono describe cómo debe sonar tu correo electrónico.
Por ejemplo:
- informal,
- personal,
- profesional,
- emocional,
- objetivo,
- directo,
- divertido.
Por ejemplo, puedes escribirle a la IA:
El correo debe transmitir un tono amable, directo y moderno. Dirígete al lector utilizando “tú”.
Ejemplo de un prompt más detallado
Crea un mockup para un correo electrónico HTML moderno.
El correo debe promocionar un webinar gratuito.
El público objetivo son autónomos y empresarios.
El diseño debe parecer moderno, premium y claro. Utiliza principalmente azul oscuro, blanco y un color de acento llamativo para el botón.
El correo debe incluir las siguientes secciones:
- Logotipo
- Titular grande
- Texto introductorio breve
- Imagen
- Tres ventajas del webinar
- Botón llamativo
- Cierre breve
El tono debe ser directo, personal y fácil de entender.
No necesitas conocer todavía todos los detalles.
Una idea general es más que suficiente para el primer borrador.
2. Pide primero un mockup
Antes de generar el código HTML, deberías pedir a la IA que cree primero un mockup.
Un mockup es una vista previa visual.
Te permite ver aproximadamente cómo podría quedar el correo terminado.
Así puedes valorar:
- ¿Cómo está estructurado el correo?
- ¿Dónde aparece el titular?
- ¿Dónde se muestra la imagen?
- ¿Cómo es el botón?
- ¿Funcionan bien los colores?
- ¿Son adecuados los espacios?
- ¿El correo se ve claro y ordenado?
La ventaja:
Puedes modificar el diseño antes de que se genere el código HTML.
Por ejemplo:
Me gusta la parte superior, pero haz el botón más grande y llamativo.
O:
El diseño todavía parece demasiado juguetón. Hazlo más sencillo y profesional.
O:
Sube un poco la imagen y reduce el espacio entre la imagen y el titular.
Sigue trabajando en el mockup hasta que estés satisfecho con el resultado.
Solo entonces deberías generar el código HTML.
3. Pide a la IA que genere el código HTML del correo
Cuando estés satisfecho con el mockup, puedes pedir a la IA que genere el código HTML a partir de él.
HTML significa “Hypertext Markup Language”.
HTML es un lenguaje de marcado que define qué contenidos se muestran y cómo se organizan.
Por ejemplo:
- titulares,
- textos,
- imágenes,
- botones,
- espacios,
- colores de fondo.
No necesitas escribir ni comprender completamente el código tú mismo.
Lo importante es explicar a la IA con la mayor precisión posible para qué se utilizará el código.
Asegúrate de incluir esta indicación
Escribe a la IA:
Crea el código HTML de forma que pueda pegarlo como un bloque HTML en la sección body de un editor HTML.
Además, debes indicarle claramente que el código está pensado para un correo electrónico:
El código HTML está destinado a un correo electrónico. Por lo tanto, utiliza únicamente HTML y CSS que sean compatibles de forma fiable con los clientes de correo más habituales.
¿Por qué es importante esta indicación?
Los correos HTML funcionan técnicamente de forma diferente a las páginas web normales.
Una página web puede utilizar muchas posibilidades de diseño modernas.
Los clientes de correo electrónico son mucho más limitados.
Por ejemplo, Outlook puede mostrar determinadas instrucciones HTML o CSS de forma diferente a Gmail o Apple Mail.
Por eso, la IA debe saber:
Esto no es una página web. Es un correo electrónico.
¿Qué es CSS?
CSS significa “Cascading Style Sheets”.
CSS determina el aspecto del contenido HTML.
Por ejemplo, define:
- el color de un texto,
- el tamaño de un titular,
- el aspecto de un botón,
- el tamaño de los espacios,
- el color de fondo.
En los correos HTML conviene utilizar instrucciones CSS sencillas y probadas siempre que sea posible.
¿Qué es la sección body?
El body es la parte del código HTML que contiene el contenido visible.
Por ejemplo:
- titulares,
- textos,
- imágenes,
- botones.
En este caso, no necesitas necesariamente que la IA genere un archivo HTML completo, sino el código que puedes pegar directamente en tu editor HTML.
Ejemplo de tu prompt final
Ahora crea el código HTML para el mockup mostrado.
Crea el código HTML de forma que pueda pegarlo como un bloque HTML en la sección body de un editor HTML.
El código está pensado para un correo electrónico. Por lo tanto, utiliza un HTML lo más sencillo posible y compatible con los clientes de correo más habituales.
Asegúrate de que el correo también se muestre correctamente en smartphones.
4. ¿Qué significa “responsive”?
Al crear correos electrónicos, a menudo encontrarás el término responsive.
Responsive significa:
El diseño se adapta automáticamente al tamaño de la pantalla.
Por ejemplo, un correo debería:
- verse bien en una pantalla grande de ordenador,
- funcionar correctamente en una tablet,
- seguir siendo fácil de leer en un smartphone.
Esto es especialmente importante en los correos electrónicos, ya que muchas personas leen sus mensajes en el móvil.
Por eso, también puedes escribir a la IA:
Haz que el correo sea responsive. En smartphones, los contenidos deben colocarse uno debajo del otro y seguir siendo fáciles de leer.
5. Utilizar tus propias imágenes en el correo
Si quieres utilizar tus propias imágenes en el diseño, la IA necesita la ruta de la imagen o ruta del archivo.
¿Qué es una ruta de imagen?
Una ruta de imagen es la dirección en la que se puede acceder a una imagen.
El código HTML utiliza esta dirección para mostrar la imagen en el correo.
Sin esta ruta, la IA puede reservar un espacio para una imagen, pero no puede utilizar tu imagen real.
Cómo obtener la ruta de la imagen
En tu plantilla de correo, sigue estos pasos:
- Abre la plantilla que quieras utilizar.
- Añade el bloque de contenido “Imagen”.
- Sube la imagen que quieras utilizar.
- Después de subirla, se mostrará la ruta del archivo.
- Copia esa ruta.
- Añádela a tu prompt para la IA.
Por ejemplo:
Utiliza esta imagen debajo de la introducción:
[INSERTAR RUTA DE LA IMAGEN AQUÍ]
La imagen debe adaptarse al ancho del correo y no debe recortarse en smartphones.
Una vez que hayas copiado la ruta del archivo, puedes eliminar el bloque de imagen que habías añadido a la plantilla.
La imagen seguirá pudiendo utilizarse en el código HTML mediante la ruta copiada.
6. Añadir botones y llamadas a la acción
Un botón dentro de un correo electrónico suele denominarse call to action o llamada a la acción.
La abreviatura es CTA.
Una llamada a la acción anima al lector a realizar una acción concreta.
Por ejemplo:
- “Regístrate ahora”
- “Más información”
- “Reserva una cita”
- “Pruébalo gratis”
- “Ver la oferta”
El botón debe llevar al lector hacia una acción determinada.
Por eso, siempre debes indicar a la IA:
- qué texto debe aparecer en el botón,
- a dónde debe llevar el botón,
- qué tan llamativo debe ser.
Por ejemplo:
Añade un botón llamativo después del texto principal.
El botón debe decir “Regístrate gratis ahora” y enlazar a la siguiente página:
[INSERTAR ENLACE]
¿Qué es un enlace?
Un enlace es una dirección de Internet que se abre al hacer clic.
El botón es simplemente el elemento visual.
El enlace determina adónde llega el lector después de hacer clic.
7. Proporciona directamente los textos que ya tengas
Si los textos de tu correo ya están terminados, deberías incluirlos directamente en tu prompt.
Esto tiene una gran ventaja:
La IA puede adaptar el diseño a la cantidad real de texto.
Por ejemplo:
Utiliza exactamente los siguientes textos. No cambies el contenido.
Titular:
[TITULAR]
Introducción:
[TEXTO]
Botón:
[TEXTO DEL BOTÓN]
Si permites que la IA mejore también la redacción, puedes indicárselo:
Puedes optimizar ligeramente la redacción, pero mantén el mensaje y el tono.
Así evitas que la IA haga cambios que en realidad no querías.
8. Por qué los correos deberían tener un diseño técnicamente más sencillo
En las páginas web, la IA puede generar diseños muy elaborados.
En los correos electrónicos conviene ser un poco más prudente.
El motivo:
Los clientes de correo no admiten todas las funciones modernas de HTML y CSS.
Por ejemplo, un diseño puede verse perfecto en Gmail y de repente aparecer de forma diferente en Outlook:
- con otros espacios,
- con botones representados de otra forma,
- con elementos desplazados,
- con determinados formatos ignorados.
Por eso, en los correos suele aplicarse esta regla:
Cuanto más sencillo, más fiable.
Por ejemplo, puedes escribir a la IA:
Utiliza para el correo un diseño lo más sencillo y robusto posible. Evita efectos CSS innecesariamente complejos.
También conviene evitar animaciones elaboradas o efectos web muy modernos en un correo de marketing normal.
9. Las tablas en el código HTML de un correo son normales
Si le pides a la IA que genere HTML para un correo, es posible que veas muchas tablas en el código.
Por ejemplo:
<table>
<tr>
<td>
A primera vista puede parecer extraño.
En las páginas web modernas, normalmente no se utilizan tablas para crear el diseño.
Sin embargo, en los correos HTML siguen siendo muy habituales.
El motivo:
Muchos clientes de correo representan de forma especialmente fiable los diseños basados en tablas.
Por lo tanto, si la IA utiliza tablas para estructurar tu correo, no significa automáticamente que haya un error.
10. ¿Qué es el CSS inline?
Otro término que encontrarás con frecuencia en los correos HTML es CSS inline.
Esto significa que las instrucciones de diseño se colocan directamente en el elemento HTML correspondiente.
Por ejemplo, el color de un botón se define directamente dentro del código de ese botón.
En las páginas web normales no siempre es la forma más elegante de hacerlo.
Sin embargo, en los correos puede ser útil porque distintos clientes de correo suelen admitir este tipo de formato de forma más fiable.
Por ejemplo, puedes decirle a la IA:
Utiliza CSS inline para los formatos importantes siempre que sea posible, para que el correo se muestre de forma fiable en distintos clientes de correo.
No necesitas modificar el código tú mismo.
Es suficiente con que la IA sepa cómo debe generarlo.
11. Envía un correo de prueba
Después de insertar el código HTML en Quentn, nunca deberías enviarlo directamente a toda tu lista de destinatarios.
Primero, envía un correo de prueba.
Comprueba:
- ¿Se ve completo el titular?
- ¿Los colores son correctos?
- ¿Todos los textos se leen bien?
- ¿Se muestran las imágenes?
- ¿Funcionan los botones?
- ¿Todos los enlaces llevan a la página correcta?
- ¿Los espacios son adecuados?
- ¿El correo se ve bien en un smartphone?
Si es posible, también deberías probar el correo en distintos clientes.
Por ejemplo:
- Gmail
- Outlook
- Apple Mail
Así detectarás más rápidamente si un programa concreto muestra tu correo de forma diferente.
12. ¿Qué hacer si el correo no se ve correctamente?
No necesitas corregir tú mismo un código HTML defectuoso.
Puedes volver a proporcionar el código existente a la IA.
Describe con la mayor precisión posible qué está mal.
Por ejemplo:
El botón es demasiado ancho en smartphones.
Ajusta el siguiente código HTML para que el botón se muestre más estrecho en pantallas pequeñas.
No cambies nada más.
[INSERTAR CÓDIGO HTML]
O:
En Outlook hay demasiado espacio entre la imagen y el texto.
Revisa el siguiente código HTML y ajústalo para que se muestre de la forma más fiable posible en los clientes de correo habituales.
[INSERTAR CÓDIGO HTML]
Cuanto más exactamente describas qué está mal y qué debe mantenerse sin cambios, mejor podrá la IA ajustar el código.
13. No hagas el correo innecesariamente ancho
Los correos electrónicos no deberían extenderse por toda la pantalla como una página web.
Para el área principal de contenido suele utilizarse un ancho limitado.
Por ejemplo, puedes escribir a la IA:
Configura el área principal del correo con un ancho máximo de aproximadamente 600 píxeles y céntrala.
¿Qué son los píxeles?
Los píxeles son pequeños puntos que forman la imagen de una pantalla.
Se utilizan, entre otras cosas, para definir tamaños en el diseño digital.
No necesitas saber exactamente cuánto miden 600 píxeles.
Para ti es suficiente saber:
Un ancho limitado evita que el correo se estire demasiado en monitores grandes.
14. No olvides la información del remitente y los datos obligatorios
Al crear el diseño principal, debes tener en cuenta que un correo de marketing no consiste únicamente en el contenido visual.
Dependiendo de la plantilla y del método de envío utilizado, pueden ser necesarias otras secciones, por ejemplo:
- información del remitente,
- información legal,
- enlace para darse de baja,
- otros datos obligatorios.
Si estos elementos ya están incluidos en tu plantilla de Quentn, no deberías añadirlos innecesariamente al bloque HTML generado por la IA.
En ese caso, pide a la IA que genere únicamente el área principal de contenido.
Todo el proceso explicado de forma sencilla
1. Describe el correo
Explica a la IA qué debe conseguir tu correo y cómo quieres que se vea.
2. Crea un mockup
Primero, pide a la IA que te muestre aproximadamente cómo podría quedar el correo.
3. Modifica el diseño
Ajusta junto con la IA los colores, la estructura, las imágenes y los botones.
4. Genera el código HTML
Cuando estés satisfecho con el mockup, pide a la IA que genere el código definitivo.
Incluye siempre esta indicación:
Crea el código HTML de forma que pueda pegarlo como un bloque HTML en la sección body de un editor HTML.
Además:
El código está destinado a un correo electrónico. Por lo tanto, utiliza un HTML lo más sencillo posible y compatible con los clientes de correo más habituales.
5. Prepara las imágenes
Si quieres utilizar tus propias imágenes, súbelas mediante el bloque de imagen y copia la ruta del archivo.
6. Añade los enlaces
Proporciona a la IA los enlaces de los botones y de otros elementos enlazados.
7. Inserta el código
Copia el código HTML terminado en el área HTML correspondiente de tu plantilla de correo.
8. Envía un correo de prueba
Comprueba el resultado tanto en ordenador como en smartphone.
9. Corrige los errores con ayuda de la IA
Si algo no está bien, proporciona a la IA el código existente y describe exactamente qué debe modificarse.