---
url: "/de/emailify/design/import.md"
description: "Mach mit dem experimentellen Tab „Import“ von Emailify aus vorhandenem HTML oder MJML bearbeitbare E-Mail-Ebenen in Figma."
---

# HTML- und MJML-E-Mails importieren

> Mach mit dem experimentellen Tab „Import“ von Emailify aus vorhandenem HTML oder MJML bearbeitbare E-Mail-Ebenen in Figma.

Mit dem Tab **Import** in **New Email** startest du mit vorhandenem E-Mail-Code, statt jede Row und Column von Grund auf zu bauen. Füge HTML oder MJML ein oder wähle eine Datei und prüfe dann die Quelle, bevor du einen bearbeitbaren Emailify-Frame erstellst.

> **Note:** Der Import ist experimentell und derzeit in lokal aktivierten Entwicklungs-Builds verfügbar. Im Standard-Build des Plugins ist er ausgeblendet. Die folgenden Schritte gelten, wenn dein Modal **New Email** den Tab **Import** enthält.

## Unterstützte Quellen {#supported-sources}

- **HTML:** Füge E-Mail-HTML ein oder wähle eine `.html`- oder `.htm`-Datei.
- **MJML XML:** Füge ein vollständiges ``-Dokument ein oder wähle eine `.mjml`- oder `.xml`-Datei.
- **MJML JSON:** Füge einen standardmäßigen MJML-Komponentenbaum ein oder wähle eine `.json`-Datei.
- **Kopierte E-Mail-Pakete:** Füge ein Paket aus der experimentellen Erweiterung **Copy to Emailify** ein.

Die Eingabe muss kleiner als **2 MB** sein. Auch MJML muss innerhalb dieser Grenze zu HTML kompiliert werden. `.eml`-Nachrichten, ZIP-Dateien und beliebiges JSON werden nicht unterstützt. Extrahiere bei einer `.eml`-Nachricht vor dem Import den HTML-Body und mach die zugehörigen Bilder zugänglich.

Verwende zugängliche Bild-URLs. Bilder, die eine Anmeldung erfordern, lokale Dateien und Anhangsverweise wie `cid:` musst du womöglich durch gehostete Dateien ersetzen.

> **Tip:** Suchst du eine E-Mail zum Ausprobieren? Besuche [Really Good Emails](https://reallygoodemails.com/), öffne eine E-Mail und wähle **Code**, um ihren HTML-Quellcode zu sehen. Kopiere das HTML, füge es im Tab **Import** in das Feld **Email code** von Emailify ein und klick dann auf **Preview Import**, um es vor dem Erstellen der E-Mail zu prüfen.

## Eine E-Mail importieren {#import-an-email}

1. Öffne Emailify in Figma.
2. Klick neben der E-Mail-Auswahl auf das Icon **+**, um **New Email** zu öffnen.
3. Wähle **Import** am Ende der Tab-Leiste.
4. Füge deinen E-Mail-Code in **Email code** ein und klick dann auf **Preview Import**. Alternativ klickst du auf **Choose file**, um eine unterstützte Datei zu laden und zu analysieren.
5. Prüfe **Preview** und eventuelle **Notes**. Kontrolliere, ob die Quelle die erwarteten Texte, Bilder und Hintergründe enthält.
6. Gib einen **Email name** ein und klick dann auf **Create Email**.
7. Prüfe den erstellten Emailify-Frame und seine bearbeitbaren Ebenen.
8. Prüfe vor dem Export mit der [HTML-Vorschau von Emailify](/de/emailify/design/preview) die erzeugte Ausgabe für Desktop und Mobilgeräte.

> **Warning:** Das Import-Panel zeigt eine Vorschau der Quell-E-Mail. Es zeigt nicht das endgültige HTML, das aus den nachgebauten Emailify-Ebenen exportiert wird. Prüfe den erstellten Frame und die erzeugte Vorschau von Emailify immer separat.

Bearbeitest du die Quelle, wird die vorherige Importvorbereitung verworfen. Klick dann erneut auf **Preview Import**, bevor du die aktualisierte E-Mail erstellst.

## MJML importieren {#import-mjml}

Stelle ein vollständiges MJML-Dokument mit genau einem `mj-body` bereit. Zum Beispiel:

```xml

        Hello from Emailify

```

Das entsprechende JSON verwendet `tagName`, `attributes`, `children` und `content`:

```json
{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}
```

Emailify validiert MJML mit **MJML4**, rendert es zu HTML und baut aus diesem HTML dann bearbeitbare Ebenen nach. Der ursprüngliche MJML-Komponentenbaum wird dabei nicht direkt wiederhergestellt. Prüfe nach dem Import eigenes CSS, Schriften, Abstände und das responsive Verhalten.

- Füge `mj-include`-Inhalte vor dem Import direkt ein; eingebundene Dateien werden nicht geladen.
- Ersetze `mj-raw` durch bearbeitbare MJML-Komponenten oder importiere das gerenderte HTML zur Prüfung.
- Verwende eine statische Version von MJML-Akkordeons und -Karussells; interaktive Komponenten werden als bearbeitbarer Import nicht unterstützt.
- Entferne XML-DOCTYPE- und Entity-Deklarationen. Korrigiere ungültige Komponentenstrukturen oder Attribute, bevor du es erneut versuchst.

## Das Ergebnis prüfen {#check-the-result}

Vergleiche die erstellte E-Mail mit der Quelle auf dem Desktop und in einer schmalen mobilen Breite wie **375px**. Prüfe alle Texte, Bilder, Hintergrundbilder, Buttons und Linkziele und kontrolliere dann das Stapeln der Spalten, die Umbrüche und den Innenabstand.

Der Import versucht, die Quelle auf die unterstützte Layoutstruktur von Emailify abzubilden. Komplexe Verschachtelungen, eigenes CSS und nicht verfügbare Dateien können manuelle Anpassungen erfordern. Eine erfolgreiche Vorbereitung der Quelle garantiert weder eine exakte visuelle Übereinstimmung noch das Verhalten beim Versand in jedem E-Mail-Client.

Schlägt die Vorbereitung fehl, öffne **Notes**, um das gemeldete Problem zu sehen. Korrigiere die Quelle oder ersetze nicht zugängliche Dateien und sieh dir die Vorschau dann erneut an. Muss das erstellte Layout angepasst werden, nutze [Rows](/de/emailify/design/rows), [Columns](/de/emailify/design/columns) und die [responsiven Einstellungen](/de/emailify/design/responsive) und folge dann der [Anleitung zum Testen von E-Mails](/de/emailify/export/testing).