Tutorials

So fügst du HTML-Code zu einer Mailchimp-E-Mail hinzu: Schritt-für-Schritt-Anleitung

Melden

Hier ist ein umfassendes Tutorial, wie du HTML-Code in deine Mailchimp-Kampagnen einfügst.

Mailchimp bietet verschiedene Möglichkeiten, HTML zu nutzen – je nachdem, ob du nur einen kleinen Teil (wie einen Button oder Countdown) oder ein komplett selbst gestaltetes Design verwenden möchtest.

Methode 1: HTML-Code-Blöcke im Drag-and-Drop-Editor

Diese Methode eignet sich am besten, wenn du das Standard-Layout von Mailchimp nutzt, aber spezifische Elemente (z. B. personalisierte Tabellen oder externe Widgets) einbetten möchtest.

Im neuen Builder (Content Optimizer):

  1. Erstelle eine neue Kampagne und gehe zum Schritt Design.
  2. Klicke in der linken Seitenleiste auf das Icon für Blocks.
  3. Suche den Block Code und ziehe ihn per Drag-and-Drop an die gewünschte Stelle in deiner E-Mail.
  4. Im rechten Bearbeitungsfenster öffnet sich ein Editor. Lösche den Platzhalter-Text und füge deinen HTML-Code ein.
  5. Mailchimp zeigt dir sofort eine Vorschau des gerenderten Codes an.

Im klassischen Builder:

  1. Wähle im Reiter Content den Block Code aus.
  2. Ziehe ihn in dein Layout.
  3. Füge deinen Code im Editor-Panel auf der rechten Seite ein.

Methode 2: Ein komplett eigenes HTML-Template importieren

Wenn du ein fertiges Design von einem Designer hast oder Code aus Tools wie MJML nutzt, solltest du die Import-Funktion verwenden.

  1. Gehe im Hauptmenü auf Content und dann auf Email templates.
  2. Klicke oben rechts auf den Button Create Template.
  3. Wähle den Reiter Code your own.
  4. Hier hast du drei Optionen:
    • Paste in code: Kopiere deinen gesamten HTML-Code direkt in den Editor.
    • Import zip: Lade eine ZIP-Datei hoch, die die HTML-Datei und alle zugehörigen Bilder enthält.
    • Import from URL: Mailchimp holt sich den Code direkt von einer Webseite.

Wichtige technische Regeln für HTML in Mailchimp

Damit dein HTML-Code in allen E-Mail-Programmen (Outlook, Gmail, Apple Mail) korrekt angezeigt wird, beachte bitte diese Punkte:

1. Nutze Inline-CSS

E-Mail-Clients ignorieren oft CSS im <head> oder externe Stylesheets. Dein CSS muss direkt in den HTML-Tags stehen:

  • Schlecht: <p class="text">Hallo</p>
  • Gut: <p style="color: #ff0000; font-size: 16px;">Hallo</p>

2. Tabellen-Layouts verwenden

Obwohl modernes Webdesign auf <div> setzt, ist HTML-E-Mail-Design immer noch auf <table> angewiesen, um die Struktur in Outlook stabil zu halten.

3. Bild-URLs müssen absolut sein

Bilder dürfen nicht lokal auf deinem Rechner liegen. Sie müssen auf einem Server (oder in der Mailchimp Content Studio Cloud) gespeichert sein:

  • Richtig: <img src="https://deine-domain.de/bild.jpg">

4. Pflicht-Merge-Tags nicht vergessen

Mailchimp lässt dich keine E-Mail versenden, wenn der Abmelde-Link und die Postanschrift fehlen. Füge diese Tags in deinen HTML-Code ein:

  • Abmelde-Link: <a href="*|UNSUB|*">Abmelden</a>
  • Postanschrift: *|HTML:LIST_ADDRESS_HTML|*

Tipps für die Fehlersuche

  • Vorschau-Modus: Nutze immer die Funktion Preview and Test > Enter preview mode, um zu sehen, wie der Code gerendert wird.
  • Test-Mail: Sende eine Test-E-Mail an dich selbst, da der Editor Code manchmal anders darstellt als ein echtes Postfach.
  • Code-Bereinigung: Mailchimp bereinigt manchmal "ungültiges" HTML. Wenn dein Code verschwindet, fehlen meistens schließende Tags (z. B. ein vergessenes </div>).

Pro-Tipp: Wenn du kein Profi im Codieren bist, aber mehr Freiheit als im Standard-Editor willst, ist der "Code Block" innerhalb des Standard-Templates meist der sicherste Weg, um Fehler im Layout zu vermeiden.

0