Al crear una campaña de email, siempre debe previsualizar y probar el email en diferentes clientes antes de enviarlo. De hecho, algunos clientes de email no tienen compatibilidad con todo el contenido HTML, ya que el HTML de email no está tan desarrollado como el HTML de web. Los elementos interactivos como Flash o JavaScript no funcionarán en la mayoría de los clientes de email.
Recomendamos el uso de bloque HTML solo a usuarios avanzados. Añadir un código de HTML personalizado puede afectar a la visualización de su campaña de email en algunos clientes de email. El HTML personalizado tiene que ser lo más compatible y receptivo posible con el email. Para asegurarse de que su email se muestre como se espera en clientes de email, le recomendamos encarecidamente que pruebe su campaña antes de enviarla a sus contactos.
¿Cuál es la diferencia entre el editor HTML y el bloque HTML?
Puede personalizar el diseño de su campaña de email con dos herramientas de HTML diferentes:
El editor HTML le permite diseñar toda su campaña de email utilizando HTML. Para utilizar el editor HTML, cree una campaña de email y elija el editor HTML en el paso Design (Diseño). Para obtener más información, consulte nuestro artículo dedicado Cargar un archivo HTML para diseñar su campaña.
El bloque HTML se puede utilizar en el editor Drag and Drop para diseñar algunos elementos de su email con código HTML. Para utilizar el bloque HTML, cree una campaña de email y desde el paso Design (Diseño), elija una plantilla y arrastre y suelte el bloque HTML en su diseño de email:
¿Qué formatos de HTML puedo utilizar en mi campaña de email?
Consulte la siguiente tabla para saber qué formatos de HTML son seguros de usar o no en su campaña de email:
✅ Seguro de usar | 🟠 Usar con precaución | ❌ No usar nunca |
|
|
|
CSS está limitado cuando se utiliza en HTML de email. Para obtener los mejores resultados a la hora de diseñar su campaña de email, le recomendamos:
- Utilizar CSS muy sencillos,
Utilizar este sitio web como diccionario para verificar si su CSS será totalmente compatible en clientes de email. - Utilizar CSS solo para elementos de estilo general, como la fuente y los colores,
- Utilizar CSS en línea en lugar de CSS incrustado. En el CSS línea, cualquier color de fondo o configuración de <body> debe gestionarse con una <table> de un ancho del 100 % alrededor de su email.
❗️ ImportanteAlgunos clientes de email eliminan líneas de código que comienzan con una coma o un punto. Añada un espacio al comienzo de cada línea que comience con una coma o un punto para evitarlo.
Utilice fuentes que sean fáciles de leer y fácilmente legibles por cualquier cliente de email. Revise las fuentes que esté utilizando antes de enviar su campaña de email. Para asegurarse de que sus clientes puedan leer su campaña de email con la fuente que haya elegido, añada una fuente alternativa en el editor Drag and Drop. Podrá elegir qué fuentes utilizar si la elegida no es compatible con su destinatario. Para obtener más información, consulte nuestro artículo dedicado Añadir fuentes personalizadas, alternativas y de Google al diseño del email en el editor Drag & Drop.
También le recomendamos que utilice un máximo de dos o tres fuentes en una campaña de email. Para que su email sea fácil de leer, elija un tamaño de entre 14 y 16 px para el cuerpo del texto: 14 px para emails largos con párrafos y 16 px para los cortos (dos o tres frases).
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 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 Add link (Añadir enlace). Se abre la ventana Insert/edit link (Insertar/editar enlace).
-
Complete la información sobre:
- Type of link (Tipo de enlace) que suele ser un enlace absoluto (URL), pero puede elegir cualquier otro tipo de enlace,
- Link target (Destino de enlace) que es el enlace al que quiere que dirija su imagen,
- Link title (Título del enlace) es la palabra que desea mostrar al pasar el cursor sobre la imagen.
- Haga clic en (Insert (Insertar).
De forma predeterminada, escapamos el contenido HTML (y JS) de todas las variables. Esto significa que cualquier HTML pasado dentro de una variable se escapará automáticamente y se imprimirá como texto. Por ejemplo, si el contenido de la variable es <h1>Mi título</h1>
, entonces la plantilla generaría exactamente este texto dentro de su email: <h1>Mi título/h1>
en lugar de generar la frase "Mi título" con el formato de un título H1.
Para saber cómo desactivar el escape automático, consulte nuestro artículo dedicado Desactive el escape automático para mostrar llaves dobles en sus emails.
⏩ ¿Qué es lo siguiente?
- Serie de artículos sobre el editor Drag and Drop
- Cargar un archivo HTML para diseñar su campaña
- Crear una campaña de email
- Cómo añadir fuentes de Google Fonts en el Editor Drag and Drop
- Cómo probar la campaña de email
🤔 ¿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í.
Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con un socio certificado de Brevo.