Show Menu
THEMEN×

Kurzanleitung zum Erstellen von E-Mail-Inhalten

Email Designer bietet vier Möglichkeiten zum Erstellen von E-Mails.
Sie können eine E-Mail von Grund auf neu erstellen:
  • Sie können die E-Mail von Grund auf neu von einer leeren Arbeitsfläche erstellen. Hierzu fügen Sie Struktur- und Inhaltskomponenten hinzu und personalisieren deren Inhalt. Die E-Mail ist dann rasch versendet. Die Stilelemente können Sie auch vollständig verwalten. Weitere Informationen finden Sie in der Kurzanleitung oder in der vollständigen Dokumentation .
  • Sie können eine E-Mail aus einer vordefinierten Vorlage erstellen. Hierzu wählen Sie die Vorlage aus und erstellen daraus Ihren neuen E-Mail-Inhalt. Mehr dazu
Sie können eine E-Mail auch aus vorhandenem Inhalt erstellen.
  • Hierzu konvertieren Sie bestehenden HTML-Inhalt, der extern oder im Legacy-Editor erstellt wurde. Mehr dazu
  • Im Kompatibilitätsmodus können Sie vorhandenen HTML-Inhalt sofort importieren. Mehr dazu

Ohne vorhandenen Inhalt

E-Mail neu erstellen

Sie können eine E-Mail problemlos neu erstellen, ihr Komponenten hinzufügen und deren Inhalt personalisieren. Die E-Mail ist dann rasch versendet. Bei Bedarf können Sie die Stiloptionen an den Inhalt anpassen. Weiterführende Informationen zur Verwaltung von Stileinstellungen und Inline-Attributen finden Sie im Abschnitt E-Mail-Stile bearbeiten .

Hinzufügen einer Betreffzeile

Die Betreffzeile ist in einer E-Mail obligatorisch. Weitere Informationen finden Sie unter Definieren der Betreffzeile einer E-Mail .
  1. Erstellen Sie eine E-Mail.
  2. Schließen Sie die Startseite.
  3. Klicken Sie auf der Startseite von Email Designer, die über das Home-Symbol aufgerufen wird, auf die Registerkarte Eigenschaften und füllen Sie den Bereich Betreff aus.

Hinzufügen von Strukturkomponenten

Strukturkomponenten definieren das Layout Ihrer E-Mail. Weitere Informationen finden Sie unter Definieren der E-Mail-Struktur .
Ziehen Sie die Strukturkomponenten, die Sie für Ihr Layout wünschen, auf die Arbeitsfläche.
Sie können für Ihre E-Mail verschiedene Inhaltslayouts auswählen.

Hinzufügen von Inhaltskomponenten

Sie können Ihrer E-Mail verschiedene Inhaltskomponenten wie Bild, Text und Schaltflächen hinzufügen. Weitere Informationen finden Sie unter Inhaltskomponenten .
  • Bild
  1. Ziehen Sie aus Inhaltskomponenten die Bildkomponente in eine Ihrer Strukturkomponenten.
  2. Klicken Sie auf Durchsuchen .
  3. Wählen Sie die gewünschte Bilddatei aus Ihrem Dateisystem aus.
  • Text mit Personalisierung
  1. Ziehen Sie aus Inhaltskomponenten die Textkomponente in eine Ihrer Strukturkomponenten.
  2. Klicken Sie auf die Komponente und geben Sie den gewünschten Text ein.
  3. Zum Hinzufügen eines Personalisierungsfelds klicken Sie in der Symbolleiste auf Personalisierungsfeld einfügen .
  4. Wählen Sie das gewünschte Feld aus, zum Beispiel „Vorname“.
  • HTML
  1. Ziehen Sie aus Inhaltskomponenten die HTML-Komponente in eine Ihrer Strukturkomponenten.
  2. Klicken Sie auf Quellcode anzeigen .
  3. Geben Sie den gewünschten HTML-Inhalt ein.
  4. Wählen Sie Speichern aus.
Wenn Sie HTML-Kenntnisse haben, können Sie den HTML-Code mit der HTML -Inhaltskomponente aus der Original-Fußzeile kopieren und einfügen. Weiterführende Informationen dazu finden Sie im Abschnitt Über Inhaltskomponenten .

Gestalten Ihrer E-Mail-Komponente

Sie können das Design Ihrer E-Mail anpassen, beispielsweise den Abstand einer Komponente ändern. Weiterführende Informationen zur Verwaltung von Stileinstellungen und Inline-Attributen finden Sie im Abschnitt E-Mail-Stile bearbeiten .
  1. Klicken Sie auf die Textkomponente .
  2. Navigieren Sie rechts in der Palette zu Abstand .
  3. Klicken Sie auf das Sperrsymbol, um die Synchronisierung zwischen den Parametern oben und unten oder rechts und links aufzuheben.
  4. Passen Sie den Abstand nach Bedarf an.
  5. Wählen Sie Speichern aus.
Sie können Ihre E-Mail nun speichern und senden.

Erstellen von Inhalt aus einer vordefinierten Vorlage

Ihre E-Mails können Sie auch aus vordefinierten Vorlagen erstellen und diese personalisieren. Hier bieten sich zum Beispiel Willkommensnachrichten für Neukunden, Newsletter und Wiedereinstellungs-E-Mails an.
  1. Erstellen Sie eine E-Mail und öffnen Sie ihren Inhalt. Weiterführende Informationen dazu finden Sie im Abschnitt E-Mails erstellen .
  2. Wählen Sie das Startseiten-Symbol aus, um die Startseite von Email Designer zu öffnen.
  3. Wählen Sie den Tab Vorlagen aus.
  4. Wählen Sie eine native HTML-Vorlage aus. Die unterschiedlichen Vorlagen bestehen aus Kombinationen verschiedener Typen von Elementen. Beispielsweise haben die Vorlagen vom Typ "Feather" Ränder, die Vorlagen vom Typ "Astro" haben dagegen keine. Weiterführende Informationen dazu finden Sie im Abschnitt Inhaltsvorlagen .
  5. Klicken Sie auf der Startseite von Email Designer, die über das Home-Symbol aufgerufen wird, auf die Registerkarte Eigenschaften und füllen Sie den Bereich Betreff aus.
  6. Sie können diese Elemente zu mehreren E-Mail-Varianten kombinieren. Beispielsweise können Sie einen Teil einer E-Mail duplizieren, indem Sie eine Strukturkomponente markieren und in der dedizierten Symbolleiste Duplizieren auswählen.
  7. Sie können die Elemente mit den blauen Pfeilen auf der linken Seite verschieben, indem Sie eine Strukturkomponente unter oder über eine andere ziehen. Weiterführende Informationen dazu finden Sie im Abschnitt zum Bearbeiten des E-Mail-Aufbaus .
  8. Sie können Komponenten auch verschieben und so die Anordnung in jedem Strukturelement ändern. Weiterführende Informationen dazu finden Sie im Abschnitt Fragmente und Inhaltskomponenten hinzufügen .
  9. Sie können den Inhalt jedes Elements nach Bedarf ändern: Bilder, Text, Links.
  10. Sie können auch die Stiloptionen beliebig auf Ihren Inhalt anpassen. Weiterführende Informationen dazu finden Sie im Abschnitt E-Mail-Stile bearbeiten .

Aus vorhandenem Inhalt

Wenn Sie sich selbst ein Rahmenwerk aus modularen Vorlagen und Fragmenten erstellen möchten, um sie in künftigen E-Mails wiederzuverwenden und zu kombinieren, sollten Sie Ihre E-Mail-HTML-Inhalte in Email Designer-Vorlagen konvertieren.

Konvertieren von HTML-Inhalt

In diesem Anwendungsbeispiel erfahren Sie, wie Sie eine HTML-E-Mail rasch in Email Designer-Komponenten konvertieren können.
Dieser Abschnitt richtet sich insbesondere an Benutzer, die mit HTML-Code vertraut sind.
Wie im Kompatibilitätsmodus ist eine HTML-Komponente nur beschränkt bearbeitbar: Sie kann nur an Ort und Stelle bearbeitet werden.
Achten Sie darauf, dass der ursprüngliche HTML-Code außerhalb von Email Designer in wiederverwendbare Bereiche unterteilt ist.
  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 .
Ist dies nicht der Fall, schneiden Sie die unterschiedlichen Bestandteile aus Ihrem HTML-Code aus. Dies hier ist zum Beispiel ein eindeutig identifizierbarer Abschnitt:
<!-- 3 COLUMN w/CTA (SCALED) -->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:680px;">
<tbody>
<tr>
<td class="padh10" align="center" valign="top" style="padding:0 5px 20px 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- //3 COLUMN w/CTA (SCALED) -->

Sobald Sie alle Bestandteile identifiziert haben, wiederholen Sie in Email Designer folgenden Vorgang für jeden Teil Ihrer vorhandenen E-Mail:
  1. Fügen Sie eine Strukturkomponente hinzu. Weiterführende Informationen dazu finden Sie im Abschnitt zum Bearbeiten des E-Mail-Aufbaus .
  2. Fügen Sie eine HTML-Komponente hinzu. Weiterführende Informationen dazu finden Sie im Abschnitt Fragmente und Inhaltskomponenten hinzufügen .
  3. Fügen Sie Ihren HTML-Code mit Copy & Paste in diese Komponente ein.
  4. Zur Mobile-Ansicht wechseln. Weiterführende Informationen hierzu finden Sie in diesem Abschnitt .
    Die responsive Ansicht ist fehlerhaft, da Ihr CSS fehlt.
  5. 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>
    
    
    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>
  6. Kehren Sie zur mobilen Ansicht zurück und prüfen Sie, ob Ihr Inhalt korrekt angezeigt wird, und speichern Sie Ihre Änderungen.

Importieren und Bearbeiten einer HTML-E-Mail

Beim Hochladen von Inhalt muss dieser ein bestimmtes Tagging aufweisen, um vollständig kompatibel und im WYSIWYG-Editor von Email Designer bearbeitbar zu sein.
Wenn die hochgeladenen HTML-Datei oder Teile davon nicht mit dem Tagging kompatibel ist, wird der Inhalt im so genannten Kompatibilitätsmodus geladen, in dem die Bearbeitungsmöglichkeiten über die Benutzeroberfläche eingeschränkt sind.
Im Kompatibilitätsmodus können Sie die folgenden Änderungen über die Benutzeroberfläche vornehmen (nicht verfügbare Aktionen sind verborgen):
  • Ändern des Textes oder eines Bildes
  • Einfügen von Links und Personalisierungsfeldern
  • Bearbeiten einiger Stiloptionen im ausgewählten HTML-Baustein
  • Definieren von bedingten Inhalten
Sonstige Änderungen, wie etwa das Hinzufügen neuer Bereiche zu Ihrer E-Mail oder deren zusätzliche Gestaltung, müssen direkt im Quellcode der E-Mail im HTML-Modus vorgenommen werden. Im Kompatibilitätsmodus ist die Verwendung von Drag & Drop zwar nicht möglich, jedoch bietet dieser Modus die gleichen Funktionen wie der Legacy-Editor.
Weiterführende Informationen zur Konvertierung einer vorhandenen E-Mail in eine mit Email Designer kompatible E-Mail finden Sie in diesem Abschnitt .