Sparen Sie Zeit, indem Sie E-Mail-Vorlagen importieren, die Sie bereits entworfen haben. Laden Sie HTML-Dateien von Canva, Mailchimp, Klaviyo oder benutzerdefiniertem Code hoch und verwenden Sie sie dann in E-Mail-Kampagnen und Die Automatisierung Workflows.
Dieser Leitfaden zeigt Ihnen, wie Sie Vorlagen importieren, häufige Fehler beheben und sicherstellen, dass Bilder korrekt angezeigt werden.
Bevor Sie beginnen
Lesen Sie die HTML-Anforderungen:
Lesen Sie vor dem Import Grundlagen von E-Mail-HTML und Benutzerdefinierter HTML-Inhaltsblock, um die vollständige Liste der unterstützten Tags zu sehen.
⚠️ Wichtig: <!DOCTYPE HTML> und <head>-Tags müssen vor dem Hochladen entfernt werden. </head>Sie können dies manuell in einem Texteditor tun oder htmlcorrector.com verwenden, um diese Tags und andere nicht unterstützte Elemente automatisch zu entfernen.
Zwei Importmethoden:
HTML importieren (eine .html-Datei hochladen) – nützlich für Mailchimp-Nutzer
Code einfügen (HTML kopieren/einfügen) – nützlich für Klaviyo- und Canva-Nutzer
Import von Canva
Canva ist ein beliebtes Design-Tool, aber der HTML-Export erfordert zusätzliche Schritte, bevor es in Omnisend funktioniert.
Schritt 1. Export von Canva
Gehen Sie in Canva zu Teilen → Herunterladen → Dateityp: HTML. Canva wird einen Ordner herunterladen, der Folgendes enthält:
email.html (die Datei, die Sie benötigen)Ein
images-Ordner (diesen müssen Sie separat hosten – siehe unten)
Schritt 2. Öffnen Sie die HTML-Datei in einem Texteditor
Windows: Rechtsklick auf
email.html →Öffnen mit → NotepadMac: Rechtsklick auf
email.html →Öffnen mit → TextEdit
⚠️ Öffnen Sie die Datei nicht durch Doppelklick – sie wird stattdessen in Ihrem Browser geöffnet.
Schritt 3. Bereinigen Sie das HTML
Löschen Sie die gesamte
<!DOCTYPE html>-Zeile obenLöschen Sie alles zwischen
<head></head>und (einschließlich der Tags selbst)Kopieren Sie den verbleibenden Code und fügen Sie ihn in htmlcorrector.com ein.
Klicken Sie auf HTML bereinigen und kopieren Sie das Ergebnis
Schritt 4. Hosten Sie Ihre Bilder
Omnisend kann Bilddateien nicht direkt importieren. Der images-Ordner von Canva funktioniert nicht – Bilder müssen online mit vollständigen URLs gehostet werden (z. B. https://yoursite.com/image.jpg).
Option A: Hochladen zu Omnisend
In Omnisend, eine neue E-Mail-Kampagne erstellen
Fügen Sie einen Bild-Block hinzu → Laden Sie jedes Bild hoch
Rechtsklick auf das Bild → Bild-URL kopieren
Ersetzen Sie in Ihrem HTML lokale Bildpfade (
images/photo.jpg) durch Omnisend-URLs
Option B: Verwenden Sie externes Hosting
Laden Sie Bilder auf Imgur, Cloudinary oder Ihre Website hoch und aktualisieren Sie dann die Bild-URLs in Ihrem HTML.
Schritt 5. Code einfügen
Gehe zu Webshop-Einstellungen → Gespeicherte Templates → Template importieren → Code einfügen, und füge dann deinen bereinigten HTML-Code ein.
Importprozess
Schritt 1. Navigieren Sie zu den Einstellungen des Webshops
Gehen Sie zu Einstellungen des Webshops → Gespeicherte Vorlagen.
Schritt 2. Gespeicherte Vorlagen anzeigen
Sie werden sehen:
Eine Liste der gespeicherten Vorlagen – Sie können sie kopieren, anzeigen oder löschen. Erfahren Sie mehr über das Kopieren von Vorlagen.
Import-Template-Button – Klicken Sie hier, um Ihre Importmethode auszuwählen.
Option 1. HTML-Datei importieren
Wenn Sie eine .html-Datei auf Ihrem Computer gespeichert haben:
Klicken Sie auf HTML importieren
Fügen Sie Ihren Template-Namen hinzu
Wählen Sie die HTML-Datei aus
Klicken Sie auf Hochladen
Wenn Sie "Entschuldigung, wir konnten das HTML-Template nicht importieren:" sehen
Häufige Ursachen:
HTML enthält noch
<doctype></doctype>oder<head></head>-Tags (entfernen Sie diese zuerst)Die Datei enthält nicht unterstützte Elemente (
<iframe>,<script>, ungültiges CSS)Falsches Dateiformat (.zip, .txt oder Ordner) – muss eine .html-Datei sein
Beheben: Reinigen Sie Ihren Code mit htmlcorrector.com, versuchen Sie dann Option 2: Code einfügen stattdessen.
Ihr importiertes Template wird auf der Gespeicherten Templates-Seite angezeigt und ist beim Erstellen von Kampagnen und Automatisierungen verfügbar.
Option 2. HTML-Code einfügen
Wenn Sie HTML-Code kopiert haben (z. B. von Canva, Klaviyo oder einem anderen Tool):
Klicken Sie auf Code einfügen
Fügen Sie Ihren Template-Namen hinzu
Fügen Sie das bereinigte HTML ein
Klicken Sie auf Importieren
Ihr Template wird auf der Gespeicherten Templates-Seite angezeigt und ist in Kampagnen und Automatisierungen verfügbar.
Importiertes Template bearbeiten
Sie können den Inhalt und das Design Ihrer Vorlage bearbeiten. Klicken Sie auf den E-Mail-Inhalt, um den HTML-Editor zu öffnen.
⚠️ Wichtige Hinweise:
Wenn Sie ein Template von einem anderen E-Mail-Dienstanbieter übertragen, müssen Sie manuell löschen:
Alle Personalisierungstags
Link im Browser anzeigen
Abmeldelink
Omnisend wird automatisch seine eigenen Versionen hinzufügen.
Hinweis: Bilder werden möglicherweise nicht korrekt in Test-E-Mails oder Vorschauen angezeigt. Dies ist das erwartete Verhalten – Test-E-Mails verwenden temporäre Bildlinks, die nicht immer richtig dargestellt werden (insbesondere in Gmail und Outlook Web). Um Ihr Design zu überprüfen, senden Sie die Kampagne an ein echtes Testsegment oder Ihre eigene E-Mail-Adresse. Bilder werden in Live-Kampagnen korrekt angezeigt.
Fehlerbehebung
Warum ist mein HTML in der Vorschau leer?
Leere Vorschauen werden normalerweise durch nicht unterstützte HTML-Tags oder Formatierungsfehler verursacht.
Beheben:
Bereinigen Sie Ihr HTML mit htmlcorrector.com
Entfernen Sie die
<DOCTYPE>-,<head>-,<iframe>- und<script>-TagsStellen Sie sicher, dass Bilder vollständige URLs verwenden, keine lokalen Dateipfade
Testen Sie zuerst mit einfachem HTML (z. B.
<p>Test</p>), um zu bestätigen, dass der Block funktioniert, und fügen Sie dann schrittweise Ihren Inhalt wieder hinzu
Warum kann ich nach dem Importieren keine Bilder sehen?
Omnisend kann nicht auf lokale Bilddateien zugreifen. Wenn Ihr HTML auf Bilder verweist, die auf Ihrem Computer gespeichert sind (z. B. images/photo.jpg), sie werden nicht angezeigt.
Beheben: Bilder online hosten und die URLs in Ihrem HTML aktualisieren. Siehe die "Hosten Sie Ihre Bilder" Abschnitt oben.
Was bedeutet "Text enthält verbotene HTML-Tags"?
Dieser Fehler bedeutet, dass Ihr HTML-Tags enthält, die in E-Mails nicht unterstützt werden. Häufige Übeltäter:
<doctype> und </doctype><head>-Tags</head><iframe> (eingebetteter Inhalt)</iframe><script> (JavaScript)</script>Komplexes CSS oder Schriftstil
Behebung: Verwenden Sie htmlcorrector.com, um diese Tags automatisch zu entfernen, oder löschen Sie sie manuell. Siehe Benutzerdefinierter HTML-Inhaltsblock für die vollständige Liste der unterstützten Tags.
Häufig gestellte Fragen
Kann ich den Bildordner von Canva zusammen mit der HTML-Datei hochladen?
Nein. Omnisend akzeptiert nur HTML-Code – es kann keine Bildordner oder lokale Bilddateien verarbeiten. Sie müssen die Bilder separat hochladen und die URLs in Ihrem HTML aktualisieren. Siehe "Hosten Sie Ihre Bilder" oben.
Das importierte HTML sieht anders aus als mein Design. Warum?
E-Mail-HTML wird anders gerendert als Web-HTML. Häufige Probleme:
E-Mail-Clients entfernen komplexes CSS – Gmail, Outlook und Apple Mail unterstützen viele moderne CSS-Eigenschaften nicht
Canva-Designs verwenden Webformatierung – Canva optimiert für das Web, nicht für E-Mail-Clients
Schriftarten laden möglicherweise nicht – Benutzerdefinierte Schriftarten fallen oft auf Ersatzschriftarten in E-Mails zurück
Lösungen:
Verwenden Sie htmlcorrector.com, um nicht unterstützten Code zu bereinigen
Vereinfachen Sie Ihr Design: Verwenden Sie grundlegende HTML-Tags und Inline-CSS
Erwägen Sie, im Der E-Mail-Builder von Omnisend neu zu erstellen, um eine bessere Kompatibilität zu gewährleisten. Mit dem Der E-Mail-Builder beginnen.
Testen Sie Ihre E-Mail in mehreren Clients (Gmail, Outlook, Apple Mail), bevor Sie sie versenden
Für weitere Anleitungen oder Hilfe, kontaktieren Sie unser preisgekröntes Support-Team über den In-App-Chat oder per E-Mail an [email protected].