 | Importante: Este artículo requiere el uso de código HTML. |
Tenemos una gran cantidad de plantillas con diseño profesional disponibles en nuestro editor de correo electrónico con función de arrastrar y soltar; sin embargo, si tiene su propio diseño de correo electrónico, puede usar su HTML para crear uno con nuestro Editor de código personalizado.
Directrices para diseñar correos electrónicos con código personalizado
Al crear su HTML, hay algunas cosas para tener en cuenta:
- Las aperturas y el seguimiento de enlaces son automáticos. De forma predeterminada, se añade un píxel de seguimiento al código de tu correo electrónico cuando se envía, para controlar las aperturas.
- Las hojas de estilo externas no son compatibles.
- Los estilos se pueden agregar al código en la parte superior del correo electrónico y se alinean automáticamente cuando se envía el correo electrónico, o puede usar estilos en línea.
- Los códigos de formularios y de iFrames son compatibles, pero generalmente son descartados por los clientes de correo.
- Las etiquetas HTML no estándar generadas por un software propietario, como Microsoft Publisher o FrontPage, no se mostrarán correctamente en muchos navegadores y clientes de correo:
- <v:shape>
- <o:column>
- <b: Xl>
- ![endif]
- JavaScript probablemente no se mostrará, porque la mayoría de los clientes de correo electrónico lo desactivan por razones de seguridad.
- Desaconsejamos el uso del mapeo de imágenes (añadir varios enlaces a una sola imagen) por las siguientes razones:
- El uso del mapeo de imágenes rompe nuestra funcionalidad de seguimiento de enlaces, por lo que los clics en estos enlaces no aparecerán en su informe de clics.
- El uso de mapas de imagen es una práctica anticuada y muchas versiones de Outlook y otros clientes de correo electrónico no los leen correctamente.
- Los mapas de imagen no responden correctamente a los dispositivos móviles. El mapeo de imágenes especifica el "punto en el que se puede hacer clic" en su correo electrónico utilizando coordenadas exactas, pero los elementos de su correo electrónico pueden cambiar para que un correo electrónico se muestre correctamente en un dispositivo móvil. En consecuencia, es posible que las coordenadas que especificó no se mantengan en el lugar previsto.
Cree un correo electrónico con código personalizado
- Haz clic en Canales > Correos electrónicos.
- Haga clic en el botón + Create an email (Crear un correo electrónico).
- Seleccione la opción Pegue su propio código o Pegue código HTML .
- Haga clic en el nombre del correo electrónico para cambiarlo.
- Ingrese un nombre único que pueda reconocer fácilmente en su cuenta más tarde. Sus contactos no verán este nombre; solo verán su línea de asunto.
- Haz clic en el botón Guardar.
Personalice el encabezado del correo electrónico
 | ¿Sabía que…? De acuerdo con la Ley CAN-SPAM, siempre se agrega un pie de página con su dirección física al final de su correo electrónico. Puede cambiar esta dirección física cuando programa y envía su correo electrónico. |
- Haz clic en Configuración de correo electrónico para editar el encabezado del correo electrónico.
- (Opcional) Si desea utilizar un preencabezado con su línea de asunto, agregue el siguiente código después de la etiqueta <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head><body> en su HTML y actualice el marcador de posición "Texto del preencabezado":
<div id="preheader" style="display: none; font-size: 1px; color: transparent; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> Texto del preencabezado</div>
Agregue el código al correo electrónico
 | Consejo de diseño: para obtener los mejores resultados en la mayor cantidad de clientes de correo electrónico, diseñe su código para un correo electrónico, no para una página web. |
- Escriba o pegue su código HTML entre las etiquetas <body>.
- (Opcional) Haga clic en el interruptorVista previa en vivo para ver cómo se muestra su código HTML. Puede activar o desactivar esto mientras edita.
- Utilice el menú desplegable Insertar para agregar fácilmente uno de los siguientes elementos dondequiera que se encuentre el cursor dentro del código:
- Agregue una imagen de la Biblioteca, incluidos logotipos y GIF animados.
- Agregue un video de su cuenta de Vimeo.
- Agregue detalles de contacto para personalizar el contenido para cada destinatario.
- Agregue un enlace "Ver como página web" para que sus contactos puedan ver la versión completa de su correo electrónico en el caso que su cliente de correo electrónico inhabilite las imágenes.
| ¿Sabía que…? Las etiquetas "Span id" con el valor de una plataforma de redes sociales, como Facebook o LinkedIn, convierten el texto en un enlace que les permita a los destinatarios compartir su correo electrónico en los perfiles de redes sociales. Por ejemplo: <span id="Facebook"> Compartir en Facebook</span> |
Actualice la imagen de fondo en su correo electrónico
Para actualizar la imagen de fondo en su plantilla de correo electrónico HTML, puede agregar el siguiente código a la etiqueta <BODY>.
style="background-image: url('IMAGE-URL');"
Reemplace IMAGE-URL con el enlace a su imagen. De forma predeterminada, si el tamaño de la imagen es menor que el correo electrónico, la imagen se repetirá horizontal y verticalmente hasta que llene todo el fondo del correo electrónico. Para evitar esto, guarde su imagen en un tamaño mayor o agregue la propiedad "background-repeat: no-repeat" a su HTML.
style="background-image: url('IMAGE-URL'); background-repeat: no-repeat;"
Ahora que su imagen va a aparecer sólo una vez, puede asegurarse de que se amplíe para cubrir todo el ancho de su correo electrónico con la propiedad "background-size", "cover".
style="background-image: url('IMAGE-URL'); background-repeat: no-repeat; background-size: cover;"
Así es como se ve el código cuando se agrega al elemento BODY en su correo electrónico.
Es posible que la vista previa en vivo no muestre la imagen de fondo, pero puede ver la imagen cuando usa la opción "Check & Preview" (Verificar y Vista previa). La imagen no cubrirá el pie de página de su correo electrónico sin código adicional. Para obtener ayuda con el código y el diseño, considere consultar a nuestro equipo de Servicios Profesionales.
| Importante: Recomendamos previsualizar su correo electrónico y enviar una versión de prueba antes de enviarlo a sus contactos para que pueda ver exactamente cómo se verá para sus destinatarios. |
Revise el código en busca de errores
Nuestro editor de código personalizado busca errores automáticamente en su código que podrían evitar que su correo electrónico sea enviado o visualizado de la forma que usted desea. Mientras trabaja, hay indicadores visuales que le avisan al respecto. Se resalta cada error en el código para llamar su atención o puede ver una lista detallada de los errores y sugerencias para corregirlos haciendo clic en el aviso de error en la parte superior del editor de correo electrónico.
- Haga clic en los mensajes de advertencia para ver información detallada de los problemas encontrados en el código HTML. Puede corregir los errores usted mismo o, dependiendo del error, puede hacer clic en el botón Fix errors for me (Resolver los errores por mí).
Nota: El código con errores se actualiza o se elimina, así que revise su trabajo cuidadosamente, ¡ya que no hay opción de "deshacer"!
- (Opcional) Haga clic en Comprobar & Vista previa > Vista previa para ver una vista previa de su correo electrónico yenviar una versión de prueba.
- Cuando esté listo para programar y enviar su correo electrónico a sus contactos, haga clic en el botón Continue (Continuar).
Una vez que haya programado el correo electrónico, puede compartirlo en sus redes sociales para ampliar su alcance. Deles un tiempo a sus contactos para que abran el correo electrónico y, luego revise los resultados en el informe para ver qué tan bien se desempeñó.
