Vídeo tutorial: subir tus emails a MailChimp
Este vídeo explica cómo subir a MailChimp los emails HTML del plugin Emailify de Figma.
Si necesitas enlaces con etiquetas de combinación de Mailchimp (por ejemplo, *|UNSUB|*) en tus párrafos de texto, el campo de enlace nativo de Figma las bloqueará por no ser URL válidas. Para evitarlo, puedes usar el formato especial de enlace de Mailchimp de Emailify, https://mailchimp.invalid/?*|UNSUB|*, y Emailify incluirá la etiqueta de combinación de Mailchimp sin modificar en el HTML exportado.
En el panel de exportación de Emailify, selecciona la opción MailChimp (API) en la lista desplegable y, después, pega una clave de API válida de MailChimp, que puedes generar en la página de ajustes de tu cuenta de MailChimp.
Cuando estés listo, haz clic en el botón Upload To MailChimp para empezar a exportar a HTML los emails que hayas seleccionado en Figma y subirlos automáticamente a tu página de plantillas de MailChimp (a la que también puedes llegar desde el menú de tu panel de MailChimp haciendo clic en Content y, después, en Email templates).
Hacer que las imágenes se puedan editar en el editor de campañas de MailChimp
De forma predeterminada, las zonas de contenido de texto y las filas de tu plantilla HTML se podrán editar en el editor de campañas de MailChimp después de subirla; si quieres, también puedes hacer que las imágenes se puedan editar activando el interruptor Editable Images en los ajustes de exportación de Emailify.
Al activar las imágenes editables se usarán imágenes @1x (en lugar de @2x retina). Puedes hacer que las imágenes de la plantilla se puedan editar en MailChimp con el interruptor Editable Images pero, por desgracia, MailChimp no admite imágenes @2x retina editables, así que serán @1x. Si prefieres tener imágenes @2x retina que no se puedan editar, deja esta opción desactivada.
Imágenes borrosas en el editor de MailChimp (cuando la plantilla es editable)
Por desgracia, MailChimp no admite imágenes @2x retina editables, así que tus imágenes se exportarán con resolución @1x si has activado el interruptor Editable Images. Si prefieres tener imágenes @2x retina que no se puedan editar, deja el interruptor Editable Images desactivado.
Subir a mano exportaciones .zip locales a MailChimp (sin usar la API de MailChimp)
Si prefieres subir tus plantillas de email a MailChimp a mano con un archivo .zip, selecciona la opción MailChimp (Zip) en la lista desplegable de Export HTML y, después, haz clic en el botón Export For MailChimp.
Cuando termine la exportación, haz clic en el botón Download your .zip file, guarda el archivo en tu ordenador y descomprímelo. Después, podrás subir los archivos .zip desde la carpeta _zips (For upload to MailChimp), dentro de la carpeta principal descomprimida (como se ve en la grabación de pantalla de arriba).
Modificaciones de HTML de MailChimp y visualización en Gmail
MailChimp modifica automáticamente las plantillas de email HTML subidas antes de enviarlas. Estos cambios se aplican de forma obligatoria y no se pueden desactivar.
Algunas de las modificaciones conocidas son:
- Dividir los bloques combinados de
@mediaqueries en varias media queries independientes - Reescribir o reestructurar reglas de CSS
- Eliminar las comillas
"de ciertos selectores de CSS (por ejemplo,a[href^="tel:"]pasa a sera[href^=tel:])
Estos cambios pueden tener efectos secundarios no deseados, sobre todo en Gmail. Gmail tiene un analizador de CSS estricto e ignora todos los estilos de una etiqueta <style> si encuentra un solo selector o propiedad no válidos. Esto puede provocar problemas como que no se apliquen los anchos de las columnas o que los diseños se apilen de forma inesperada.
Siempre que es posible, Emailify aplica soluciones específicas para MailChimp durante la exportación desde el plugin para evitar los problemas conocidos. Sin embargo, como estas modificaciones se producen después de subir el HTML, parte del comportamiento escapa a nuestro control (sobre todo si además añades CSS personalizado).
Si te encuentras con problemas de diseño específicos de Gmail al enviar con MailChimp, lo más probable es que se deban a estas transformaciones automáticas de la plantilla y no al HTML original exportado desde Figma.