Das Wichtigste in Kürze

• Erst Design, dann Code. Gestalten Sie Ihre E-Mail visuell in Canva, bringen Sie sie genau in die gewünschte Form und lassen Sie Canva den HTML-Code für Sie erstellen. Sie müssen keine einzige Zeile Code schreiben.
• Beginnen Sie im E-Mail-Designer von Canva, nicht mit einer leeren Arbeitsfläche. Nur Designs, die im E-Mail-Designer erstellt wurden, lassen sich als HTML exportieren. Wählen Sie eine kostenlose oder kostenpflichtige E-Mail-Vorlage und passen Sie Text, Bilder, Logo und Farben an.
• Verzichten Sie auf die Canva-Fußzeile. Benchmark Email fügt jedem Versand automatisch eine rechtskonforme Fußzeile mit Ihren Unternehmensangaben, Ihrer Postanschrift sowie Links zum Abmelden und zum Melden von Missbrauch hinzu. Löschen Sie die Fußzeile aus Ihrer Canva-Vorlage, damit Sie am Ende nicht zwei Fußzeilen haben.
• Kopieren, einfügen, Vorschau ansehen. Gehen Sie in Canva zu Teilen > HTML kopieren. Wählen Sie in Benchmark Email den Block Benutzerdefiniertes HTML, starten Sie ohne Vorlage und fügen Sie den Code ein. Ihr Design erscheint sofort, und Sie können die mobile Ansicht vor dem Versand überprüfen.
• Personalisieren Sie Ihre E-Mail vor dem Versand. Ersetzen Sie eine allgemeine Begrüßung durch ein Personalisierungsfeld für den Vornamen mit einem Standardwert. Speichern Sie die E-Mail anschließend als Vorlage, damit Ihre nächste Kampagne nur einen Bruchteil der Zeit in Anspruch nimmt.

 

Die meisten Menschen denken beim E-Mail-Design nur in eine Richtung: Sie beginnen mit Code oder einer Vorlage und füllen dann den Inhalt ein. Wenn Sie jedoch visuell denken, ist es besser, diese Reihenfolge umzukehren.

Beginnen Sie damit, die E-Mail so zu gestalten, wie Sie alles andere auch gestalten würden – in Canva, wo Sie genau sehen, was Sie erstellen. Bringen Sie alles in die perfekte Form: Layout, Farben, Typografie und Abstände. Übergeben Sie dieses fertige Design dann an eine KI mit Bilderkennungsfunktionen und lassen Sie sie den HTML-Code schreiben, der genau dem entspricht, was Sie bereits erstellt haben.

Das Ergebnis ist eine voll funktionsfähige, versandbereite HTML-E-Mail, die auf einem Design basiert, das Sie zuvor tatsächlich freigegeben haben. Kein blind geschriebener Code. Keine Schleife aus „Vorschau ansehen und anpassen“, die länger dauert als das Design selbst. Sie sehen es, es gefällt Ihnen, und dann wird daraus Code.

Warum Reverse Engineering funktioniert

Beim traditionellen E-Mail-Design steht der Code zwischen der kreativen Arbeit und dem Endergebnis. Sie skizzieren eine Idee, öffnen eine Vorlage oder einen Code-Editor und versuchen, den Code an Ihre Idee anzupassen. Das funktioniert, ist aber ein Umweg. Sie übersetzen ständig zwischen dem Bild, das Sie sich vorgestellt haben, und dem Markup, das Sie schreiben.

Reverse Engineering überspringt diese Übersetzung. Sie gestalten in der visuellen Umgebung, die sich für Sie natürlich anfühlt, exportieren das Ergebnis und bitten eine KI, es zu übersetzen. Die KI hat gesehen, was Sie möchten. Sie rät nicht anhand einer Textbeschreibung, sondern arbeitet mit dem tatsächlichen, fertigen Design.

Dieser Workflow ist besonders nützlich für:

• Marketer, die sicher in Canva gestalten, aber kein HTML schreiben
• Teams, in denen dieselbe Person für Design und E-Mail-Produktion verantwortlich ist
• Kampagnen mit markanten Layouts, die nicht zu Standardvorlagen passen
• Alle, die ihr E-Mail-Design an bestehende Markenelemente anpassen möchten, ohne mit einem Code-Grundgerüst zu beginnen

Schritt 1: Öffnen Sie den E-Mail-Designer von Canva

Wenn Sie noch kein Canva-Konto haben, können Sie kostenlos eines erstellen. Sobald Sie in Canva sind, öffnen Sie den E-Mail-Designer, anstatt ein Design auf einer leeren Seite zu beginnen. Das ist wichtig: Nur Designs, die im E-Mail-Designer erstellt wurden, lassen sich als HTML exportieren. Eine normale leere Arbeitsfläche bietet Ihnen also nicht die Kopieren-und-Einfügen-Option, die Sie später benötigen.

 

Schritt 2: Eine Vorlage auswählen und individuell anpassen

Der E-Mail-Designer von Canva bietet sowohl kostenlose als auch kostenpflichtige Vorlagen. Wählen Sie eine Vorlage, die zu Ihrer Kampagne passt, und passen Sie sie an: Aktualisieren Sie den Text, tauschen Sie Bilder aus, fügen Sie Ihr Logo hinzu und verwenden Sie Ihre Markenfarben.

Mit ein paar Gewohnheiten bleibt Ihr Design E-Mail-tauglich:

• Belassen Sie Text in Textfeldern. Text, der in ein Bild oder eine gruppierte Grafik eingebettet ist, wird als flaches Bild exportiert. Abonnenten können ihn dann nicht markieren, und Screenreader können ihn nicht vorlesen.
• Verwenden Sie E-Mail-sichere Schriftarten. Canva warnt Sie, wenn eine Schriftart nicht korrekt im Posteingang angezeigt wird.
• Verwenden Sie echte Texte und echte Links. Fügen Sie vor dem Export Ihre tatsächliche Überschrift, Ihren Fließtext und Ihre Button-Links ein.

Schritt 3: Den Canva-Footer löschen

Viele E-Mail-Vorlagen von Canva enthalten einen Footer-Bereich. Löschen Sie ihn einfach. Benchmark Email fügt jedem Versand automatisch einen rechtskonformen Footer hinzu, einschließlich Ihres Firmennamens, Ihrer Postanschrift sowie der für die Compliance erforderlichen Links zum Abmelden und zum Melden von Missbrauch. Würden Sie den Footer von Canva behalten, hätten Sie am Ende zwei.

Schritt 4: HTML kopieren

Sobald Ihr Design fertig ist:

1. Wählen Sie Teilen im Canva-Editor.
2. Wählen Sie HTML kopieren.
3. Sobald Canva den Code generiert hat, wählen Sie In die Zwischenablage kopieren.

Mit Canva können Sie Ihr Design auch direkt über Gmail versenden. Das funktioniert für eine Handvoll Empfänger. Wenn Sie jedoch mehr als etwa 10 Kontakte anschreiben, sorgt der Versand über eine E-Mail-Marketing-Plattform wie Benchmark dafür, dass Ihre Kontaktdaten organisiert bleiben. Außerdem erhalten Sie Compliance-Funktionen und Tracking.

Schritt 5: HTML in Benchmark Email einfügen

Sie haben noch kein Benchmark-Konto? Sie können sich kostenlos registrieren.

1. Erstellen Sie in Ihrem Benchmark-Dashboard eine neue E-Mail.
2. Wählen Sie den Custom HTML Block.
3. Öffnen Sie den HTML-E-Mail-Editor, wählen Sie Von Grund auf neu, und fügen Sie Ihr Canva-HTML ein.

Ihr Design wird sofort angezeigt. Wechseln Sie zur mobilen Vorschau, um zu prüfen, ob es auf kleineren Bildschirmen sauber skaliert. Außerdem sehen Sie, dass unten die Fußzeile von Benchmark hinzugefügt wurde.

 

Schritt 6: Personalisierung hinzufügen (optional, aber lohnenswert)

Canva-Vorlagen verwenden oft eine allgemeine Begrüßung wie „Hallo Kaffeeliebhaber“. In Benchmark können Sie daraus eine personalisierte Begrüßung machen:

1. Suchen Sie den Begrüßungstext im HTML. Verwenden Sie Strg+F (Cmd+F auf dem Mac), um ihn schnell zu finden.
2. Löschen Sie den fest codierten Text.
3. Klicken Sie auf Personalisieren und wählen Sie das Feld für den Vornamen Ihres Kontakts aus.
4. Legen Sie einen Fallback-Wert fest, etwa den ursprünglichen Text „Kaffeeliebhaber“, damit auch Kontakte ohne hinterlegten Vornamen eine vollständige Begrüßung sehen.

Ihre E-Mail beginnt nun bei den meisten Abonnenten mit „Hallo Sarah,“ und zeigt nie eine leere Stelle an.

Schritt 7: Versand einrichten

Speichern Sie Ihre E-Mail und klicken Sie auf Weiter. Anschließend:

1. Fügen Sie Ihre Betreffzeile und Ihren Vorschautext hinzu.
2. Bestätigen Sie Ihren Absendernamen und Ihre Absenderadresse.
3. Wählen Sie Ihre Kontaktliste aus.
4. Senden Sie eine Test-E-Mail an sich selbst und prüfen Sie sie in Gmail, Outlook und auf Ihrem Smartphone.
5. Senden Sie die E-Mail.

Sobald alles funktioniert, speichern Sie sie als Vorlage in Benchmark Email, damit Ihre nächste Kampagne mit demselben Marken-Layout startet.

Wann Sie zu Canva zurückkehren und wann Sie bei der KI bleiben sollten

Sobald Sie mit dem HTML arbeiten, lassen sich kleine strukturelle Anpassungen im KI-Chat schneller umsetzen. Abstände anpassen, Farben korrigieren, Schriftgrößen ändern: Beschreiben Sie die Änderungen im Chat und Sie erhalten den aktualisierten Code zurück.

Größere visuelle Änderungen, etwa ein neu gedachtes Layout, ein neues Abschnittskonzept oder eine veränderte Designrichtung insgesamt, setzen Sie schneller in Canva um. Aktualisieren Sie das Design, erstellen Sie einen neuen Screenshot und geben Sie der KI einen neuen Prompt. Sie kann entweder eine frische Vorlage generieren oder den neuen Screenshot mit dem bestehenden HTML vergleichen und beschreiben, was geändert werden muss.

Die beiden Tools ergänzen sich. Canva ist für das visuelle Design zuständig. Die KI für den Code. Benchmark Email für den Versand. Jedes Tool erledigt seine Aufgabe.

Häufig gestellte Fragen

Häufig gestellte Fragen

Benötige ich ein kostenpflichtiges Canva-Konto, um HTML zu exportieren?

Nein. Sie können ein kostenloses Canva-Konto erstellen und den E-Mail-Designer nutzen, der sowohl kostenlose als auch kostenpflichtige Vorlagen enthält. Entscheidend ist, dass Sie im E-Mail-Designer beginnen und nicht mit einem leeren Design, denn nur dort erhalten Sie die Option „HTML kopieren“.

Warum wird meine E-Mail als ein einziges großes Bild angezeigt?

Alles, was als Teil eines Bildes gespeichert ist, etwa Text auf einer Bannergrafik oder Elemente, die zu einem einzigen Design gruppiert wurden, wird als flaches Bild statt als echtes HTML exportiert. Das kann die Lesbarkeit, die Barrierefreiheit und die Darstellung Ihrer E-Mail in manchen Postfächern beeinträchtigen. Um das zu vermeiden, erstellen Sie Ihr Design mit den Textfeldern, Rahmen und Layoutblöcken von Canva und halten Sie wichtige Texte aus Bildern heraus.

Werden meine Schriftarten übernommen?

Nur E-Mail-sichere Schriftarten bleiben erhalten. Individuelle oder markenspezifische Display-Schriftarten werden in den Postfächern Ihrer Abonnenten möglicherweise durch eine Ersatzschrift ersetzt. Canva weist auf nicht unterstützte Schriftarten hin, achten Sie also beim Gestalten auf diese Warnungen. Senden Sie sich immer eine Test-E-Mail, um zu sehen, wie Ihre Schriftarten tatsächlich dargestellt werden.

Muss ich einen Abmeldelink oder eine Fußzeile hinzufügen?

Nein. Benchmark Email fügt jeder E-Mail automatisch eine rechtskonforme Fußzeile hinzu, einschließlich Ihres Firmennamens, Ihrer Postanschrift sowie der Links zum Abmelden und zum Melden von Missbrauch. Löschen Sie die Fußzeile, die in Ihrer Canva-Vorlage enthalten ist, damit Sie am Ende nicht zwei Fußzeilen haben.

Unterscheidet sich das von dem Beitrag zum Canva-Workflow, den Sie zuvor veröffentlicht haben?

Ähnlich, aber nicht gleich. Im früheren Beitrag werden Canva-Elemente verwendet, und KI erstellt anhand eines Text-Prompts den passenden HTML-Code dazu. Dieser Workflow kommt ganz ohne KI aus: Der E-Mail-Designer von Canva generiert den HTML-Code für Sie, und Sie fügen ihn direkt in Benchmark Email ein. Das ist die einfachste Option, wenn Sie visuell gestalten und komplett auf Code verzichten möchten.

Was tun, wenn meine E-Mail in Outlook oder auf Mobilgeräten nicht richtig aussieht?

Sehen Sie sich Ihre E-Mail in der mobilen Vorschau von Benchmark an, senden Sie dann eine Test-E-Mail und öffnen Sie sie in Gmail, Outlook und auf Ihrem Smartphone. Kleine Korrekturen, etwa bei Tippfehlern oder Links, können Sie direkt im HTML-Editor von Benchmark vornehmen. Bei Änderungen am Layout oder Design ist es meist einfacher, das Design in Canva anzupassen, den HTML-Code erneut zu kopieren und ihn wieder in Benchmark einzufügen.

Kann ich das Design für zukünftige Kampagnen speichern?

Ja. Sobald Ihre E-Mail richtig aussieht, speichern Sie sie in Benchmark Email als Vorlage. Für zukünftige Kampagnen laden Sie einfach die Vorlage und aktualisieren die Inhalte (Überschrift, Fließtext, Bilder und Links), ohne das Layout neu aufbauen zu müssen.