Cuando cree campañas por e-mail, siempre debe previsualizar y probar el mensaje en diferentes clientes de e-mail antes de enviarlo. De hecho, algunos clientes de e-mail no admiten todo el contenido HTLM, ya que el HTML del e-mail no está tan desarrollado como el HTML web. Los elementos interactivos como Flash o JavaScript no funcionan en la mayoría de los clientes de e-mail.
El uso de bloques HTML se recomienda únicamente para usuarios avanzados. La incorporación de un código HTML personalizado puede afectar la visualización de su campaña de email en algunos clientes de email. El HTML personalizado debe maximizar la compatibilidad con el correo electrónico y la capacidad de respuesta en la mayor medida posible. A fin de garantizar que su email se muestre como se espera en los clientes de email, le recomendamos encarecidamente que primero pruebe la campaña de email antes de enviarla a sus contactos.
¿Existe alguna diferencia entre un editor HTML y un bloque HTML?
Puede personalizar el diseño de su campaña de email con la ayuda de dos herramientas HTML diferentes:
El editor HTML le permite diseñar toda su campaña de email utilizando un código HTML. Si desea utilizar el editor HTML, cree una campaña de email y, a continuación, elija la herramienta editor HTML en el paso Diseño. Para obtener más información, consulte nuestro artículo específico Carga de un archivo HTML para diseñar su campaña.
Por otro lado, el bloque HTML se puede utilizar en el Editor arrastrar y soltar para diseñar algunos elementos de su email que incluyan un código HTML. Si desea utilizar el bloque HTML, cree una campaña de email y, desde el paso Diseño, elija una plantilla y arrastre y suelte el bloque HTML en el diseño de email:
¿Qué formatos HTML puedo usar en mi campaña por e-mail?
Consulte la siguiente tabla para descubrir qué formatos HTML puede usar o no de forma segura en su campaña por e-mail:
| ✅ Uso seguro | 🟠 Uso con cautela | ❌ Uso prohibido |
|
|
|
🌐 CSS
El uso de CSS está limitado en el HTML de los e-mails. Para obtener los mejores resultados al diseñar su campaña, le recomendamos:
- Usar CSS muy básico.
Use este sitio web como referencia para comprobar si su CSS será compatible con los clientes de e-mail. - Usar CSS únicamente para los elementos de estilo generales, como la fuente y los colores.
- Usar CSS en líneas en lugar de CSS incrustado. En el CSS en líneas, los colores del fondo o los ajustes de la etiqueta <body> deben gestionarse con una etiqueta <table> del 100 % de ancho alrededor de su e-mail.
❗️ ImportanteAlgunos clientes de e-mail eliminan las líneas de código que comienzan con una coma o un punto. Añada un espacio al principio de cada línea que comience con una coma o un punto para evitarlo.
🔤 Fuentes seguras para la web
Utilice fuentes legibles y fácilmente reconocibles por cualquier cliente de e-mail. Compruebe las fuentes que está utilizando antes de enviar su campaña de e-mail. Para asegurarse de que los clientes podrán leer su campaña de e-mail con la fuente que haya elegido, añada una fuente de sustitución en el editor «Drag and Drop». Podrá elegir qué fuentes utilizar si la que ha utilizado no es compatible con el cliente de e-mail. Para obtener más información, consulte nuestro artículo Añadir fuentes de Google y de sustitución en el editor de Drag and Drop.
También le recomendamos que utilice un máximo de dos o tres fuentes en una campaña de e-mail. Para que su e-mail sea fácil de leer, elija un tamaño entre 14 y 16 px. para el cuerpo del texto: 14 px. para los e-mails largos con párrafos, y 16 px. para los cortos (dos o tres frases).
🏞 Mapas de imágenes
Puede añadir fácilmente mapas de imágenes a sus campañas añadiendo un enlace a su bloque de imágenes en el editor de «Drag and Drop»:
- Añada un bloque de imágenes al diseño de su campaña y haga clic en la imagen.
- Haga clic en Añadir enlace. Se abrirá la ventana de Insertar/editar enlace.
- Rellene la información relativa a los siguientes campos:
- Tipo de enlace, que con frecuencia es un Enlace absoluto (URL), pero puede elegir cualquier otro tipo de enlace.
- Destino del enlace, que es el enlace al que quiere que lleve su imagen.
- Título del enlace, que es la palabra que quiere mostrar cuando se pase el ratón por encima de la imagen.
- Haga clic en Insertar.
🚨 Escape automático
De manera predeterminada, escapamos el contenido HTML (y JS) de todas las variables. Esto quiere decir que cualquier HTML pasado en una variable se escapará y se imprimirá como texto. Por ejemplo, si el contenido de la variable es <h1>Mi título</h1>, la plantilla mostrará exactamente este texto en el e-mail: <h1>Mi título</h1> en lugar de mostrar la frase «Mi título» con el formato de un título H1.
Para obtener más información, consulte nuestro artículo relacionado Desactive el escape automático para mostrar llaves dobles en sus e-mails.
⏩ ¿Qué es lo siguiente?
- Serie de artículos para el editor «Drag and Drop»
- Cargar un archivo HTML para diseñar su campaña
- Crear una campaña de e-mail
- Cómo añadir fuentes de Google Fonts y de sustitución en el editor «Drag and Drop»
- Cómo probar su campaña de e-mail
🤔 ¿Tiene alguna duda?
Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.