E-Mails des alten Editors in Email Designer konvertieren

Beginnen Sie mit Email Designer zu arbeiten und erstellen Sie wiederverwendbare Vorlagen und Fragmente aus dem im alten Editor generierten E-Mail-HTML-Code.

Dieser Anwendungsfall ermöglicht es Ihnen, eine Email Designer-Vorlage zu erstellen, indem Sie eine HTML-E-Mail verwenden und sie in Email Designer in HTML-Komponenten aufteilen.

HINWEIS

Wie im Kompatibilitätsmodus ist eine HTML-Komponente nur beschränkt bearbeitbar: Sie kann nur an Ort und Stelle bearbeitet werden.

WICHTIG

Dieser Abschnitt richtet sich an Benutzer mit fortgeschrittenen HTML-Kenntnissen.

E-Mail-Inhalte vorbereiten

  1. Wählen Sie eine HTML-E-Mail aus.
  2. Identifizieren Sie Abschnitte, um die HTML-E-Mail zu unterteilen.
  3. Schneiden Sie die verschiedenen Blöcke aus Ihrer HTML-E-Mail aus.

E-Mail-Struktur erstellen

  1. Öffnen Sie Email Designer, um leeren E-Mail-Inhalt zu erstellen.
  2. Legen Sie die Attribute für den Hauptteil fest: Hintergrundfarben, Breite etc. Weiterführende Informationen dazu finden Sie im Abschnitt E-Mail-Stile bearbeiten.
  3. Fügen Sie so viele Strukturkomponenten hinzu, wie Sie Abschnitte haben. Weiterführende Informationen dazu finden Sie im Abschnitt zum Bearbeiten des E-Mail-Aufbaus.

HTML-Inhalt hinzufügen

  1. Fügen Sie zu jeder Strukturkomponente eine HTML-Komponente hinzu. Weiterführende Informationen dazu finden Sie im Abschnitt Fragmente und Inhaltskomponenten hinzufügen.
  2. Fügen Sie Ihren HTML-Code in jede Komponente ein.

Stil Ihrer E-Mail verwalten

  1. Wechseln Sie zur Mobile-Ansicht. Weiterführende Informationen hierzu finden Sie in diesem Abschnitt.

  2. Um dieses Problem zu beheben, wechseln Sie zum Quellcode-Modus und kopieren Sie Ihren CSS-Abschnitt in einen neuen CSS-Abschnitt. Beispiel:

    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    HINWEIS

    Stellen Sie sicher, dass Sie Ihren Stil nach diesem Abschnitt in einem anderen CSS-Tag hinzufügen.

    Verändern Sie das von Email Designer erzeugte CSS nicht:

    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  3. Kehren Sie zur mobilen Ansicht zurück und prüfen Sie, ob Ihr Inhalt korrekt angezeigt wird, und speichern Sie Ihre Änderungen.

Anwendungsbeispiel

Hier wird diese im alten Editor erstellte E-Mail in eine Email Designer-Vorlage konvertiert.

Abschnitt Ihrer E-Mail identifizieren

Wir können 11 Abschnitte in dieser E-Mail identifizieren.

Um zu ermitteln, welches Element welcher Abschnitt des HTML-Codes ist, können Sie es auswählen.

Um die HTML-Version der E-Mail anzuzeigen, klicken Sie auf Quelle anzeigen.

E-Mail-Vorlage und deren Struktur erstellen

  1. Ziehen Sie Strukturkomponenten in den Arbeitsbereich, die das Layout der E-Mail widerspiegeln.

  2. Wiederholen Sie diese Schritte so oft wie nötig. Für dieses Beispiel müssen elf Strukturkomponenten erstellt werden.

HTML-Inhaltskomponenten einfügen

  1. Fügen Sie in jede Strukturkomponente eine HTML-Komponente ein.

  2. Klicken Sie für jeden Abschnitt auf Quellcode anzeigen.

  3. Fügen Sie den HTML-Abschnitt ein.

  4. Wählen Sie Speichern aus.

Sie können nun das Rendering Ihrer E-Mail überprüfen.

Stile für die Ansicht auf Mobilgeräten verwalten

  1. Fügen Sie CSS-Elemente ein, um sicherzustellen, dass Ihre E-Mail für die Ansicht auf Mobilgeräten geeignet ist.

  2. Wechseln Sie zum Quellcode und kopieren Sie Ihren Stilabschnitt in einen neuen Stilabschnitt.

Weitere Informationen finden Sie unter Stil Ihrer E-Mail verwalten .

Ihre alte E-Mail ist jetzt in Email Designer verfügbar.

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now