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.

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.

Ressourcen für Business.Adobe.com