Video-Tutorial: Deine E-Mails zu MailChimp hochladen
Dieses Video zeigt, wie du HTML-E-Mails aus dem Figma-Plugin Emailify zu MailChimp hochlädst.
Wenn du in deinen Textabsätzen Links mit Mailchimp-Merge-Tags brauchst (zum Beispiel *|UNSUB|*), blockiert das native Linkfeld von Figma sie als ungültige URLs. Um das zu umgehen, kannst du stattdessen das spezielle Mailchimp-Linkformat von Emailify verwenden, https://mailchimp.invalid/?*|UNSUB|*. Emailify gibt dann im exportierten HTML das unveränderte Mailchimp-Merge-Tag aus.
Wähle im Export-Panel von Emailify die Option MailChimp (API) aus der Dropdown-Liste und füge dann einen gültigen MailChimp-API-Schlüssel ein. Den Schlüssel erzeugst du auf der Seite mit deinen MailChimp-Kontoeinstellungen.
Wenn du so weit bist, klick auf den Button Upload To MailChimp, um die in Figma ausgewählten E-Mails als HTML zu exportieren und automatisch auf deine Seite mit MailChimp-Vorlagen hochzuladen. Diese Seite erreichst du auch über das Menü deines MailChimp-Dashboards, indem du auf Content und dann auf Email templates klickst.
Bilder im Kampagneneditor von MailChimp bearbeitbar machen
Standardmäßig sind die Textbereiche und Zeilen deiner HTML-Vorlage nach dem Upload im Kampagneneditor von MailChimp bearbeitbar. Optional kannst du auch Bilder bearbeitbar machen, indem du in den Exporteinstellungen von Emailify den Schalter Editable Images aktivierst.
Wenn du bearbeitbare Bilder aktivierst, werden Bilder in @1x statt in @2x (Retina) verwendet. Mit dem Schalter Editable Images kannst du die Bilder in der Vorlage optional in MailChimp bearbeitbar machen. Leider unterstützt MailChimp keine bearbeitbaren @2x-Retina-Bilder, daher werden sie stattdessen in @1x ausgegeben. Wenn du lieber @2x-Retina-Bilder möchtest, die nicht bearbeitbar sind, lass diese Option ausgeschaltet.
Unscharfe Bilder im MailChimp-Editor (bei bearbeitbarer Vorlage)
Leider unterstützt MailChimp keine bearbeitbaren @2x-Retina-Bilder. Wenn du den Schalter Editable Images aktiviert hast, werden deine Bilder deshalb in @1x-Auflösung exportiert. Wenn du lieber @2x-Retina-Bilder möchtest, die nicht bearbeitbar sind, lass den Schalter Editable Images ausgeschaltet.
Lokale .zip-Exporte manuell zu MailChimp hochladen (ohne die MailChimp-API)
Wenn du deine E-Mail-Vorlagen lieber manuell per .zip-Datei zu MailChimp hochladen möchtest, wähle in der Dropdown-Liste von Export HTML die Option MailChimp (Zip) und klick dann auf den Button Export For MailChimp.
Wenn der Export abgeschlossen ist, klick auf den Button Download your .zip file, speichere die Datei auf deinem Computer und entpacke sie. Danach kannst du die .zip-Dateien aus dem Ordner _zips (For upload to MailChimp) in deinem entpackten Hauptordner hochladen (wie in der Bildschirmaufnahme oben).
HTML-Änderungen durch MailChimp und Darstellung in Gmail
MailChimp verändert hochgeladene HTML-E-Mail-Vorlagen vor dem Versand automatisch. Diese Änderungen werden zwingend angewendet und lassen sich nicht abschalten.
Zu den bekannten Änderungen gehören:
- Kombinierte
@media-Query-Blöcke werden in mehrere separate Media Queries aufgeteilt - CSS-Regeln werden umgeschrieben oder umstrukturiert
"-Anführungszeichen werden aus bestimmten CSS-Selektoren entfernt (zum Beispiel wird ausa[href^="tel:"]danna[href^=tel:])
Diese Änderungen können unbeabsichtigte Nebenwirkungen haben, besonders in Gmail. Gmail hat einen strengen CSS-Parser und ignoriert alle Stile in einem <style>-Tag, sobald er auf einen einzigen ungültigen Selektor oder eine ungültige Eigenschaft stößt. Das kann zum Beispiel dazu führen, dass Spaltenbreiten nicht angewendet werden oder Layouts unerwartet gestapelt werden.
Wo möglich, wendet Emailify beim Export aus dem Plugin MailChimp-spezifische Workarounds an, um bekannte Probleme zu vermeiden. Da diese Änderungen aber erst nach dem Upload des HTML stattfinden, liegt manches Verhalten außerhalb unserer Kontrolle (vor allem, wenn du zusätzlich eigenes CSS hinzufügst).
Wenn beim Versand über MailChimp Layoutprobleme speziell in Gmail auftreten, hängen sie sehr wahrscheinlich mit diesen automatischen Vorlagenänderungen zusammen und nicht mit dem ursprünglich aus Figma exportierten HTML.