Zum Inhalt springen

E-Mail-Inhalte mit dem Drag & Drop-Editor erstellen

Erstellen Sie E-Mail-Inhalte im integrierten Editor von Pushwoosh, ohne Code zu schreiben. Sie erhalten ein wiederverwendbares Layout mit Inhaltsblöcken, Bildern, Schaltflächen, personalisiertem Text und einem konformen Footer, das Sie in einer Customer Journey oder einer einmaligen E-Mail verwenden können.

Neuen E-Mail-Inhalt erstellen

Anchor link to
  1. Gehen Sie zu InhaltE-Mail-Inhalt.
  2. Wählen Sie, wie Sie beginnen möchten:
    • Klicken Sie auf E-Mail-Inhalt erstellen, um den Drag & Drop-Editor zu öffnen und eine E-Mail von Grund auf neu zu erstellen.
    • Klicken Sie auf den Pfeil neben E-Mail-Inhalt erstellen und wählen Sie dann Vorlage verwenden, um mit einem vorgefertigten Layout aus der Galerie zu beginnen.
    • Klicken Sie auf den Pfeil neben E-Mail-Inhalt erstellen und wählen Sie dann HTML-Code, um den HTML-Code-Editor zu verwenden. Mehr erfahren
Schaltfläche 'E-Mail-Inhalt erstellen' mit einem Menü, das 'Vorlage verwenden' und 'HTML-Code' anzeigt

Das Editor-Layout erkunden

Anchor link to

Sobald Sie eine E-Mail öffnen, verfügt der integrierte Editor über diese Bereiche:

Obere Leiste

Benennen Sie die E-Mail um, machen Sie Änderungen rückgängig oder wiederholen Sie sie, speichern Sie Ihre Arbeit oder senden Sie eine Test-E-Mail.

Obere Leiste des E-Mail-Editors mit Vorlagennamen, Rückgängig, Wiederholen, Test-E-Mail und Speichern

Sprache / Betreff / Preheader-Leiste

Über der Arbeitsfläche können Sie die Bearbeitungssprache wechseln und die Betreffzeile sowie den Preheader für die E-Mail festlegen. Erfahren Sie, wie Sie diese einrichten.

Sprach-, Betreff- und Preheader-Leiste über der Arbeitsfläche mit einem Sprachumschalter und Textfeldern

Arbeitsfläche

Sehen Sie die E-Mail so, wie sie die Empfänger sehen werden, und bearbeiten Sie Text, Bilder und Schaltflächen direkt im Layout. Eine leere E-Mail zeigt Mit einem Block beginnen.

Leere Arbeitsfläche im E-Mail-Editor mit der Aufforderung 'Mit einem Block beginnen'

Ebenen-Panel

Listet jeden Block in Ihrer E-Mail als Baumstruktur auf, in der gleichen Reihenfolge wie auf der Arbeitsfläche. Öffnen Sie es vom linken Rand aus, um einen verschachtelten Block auszuwählen oder Zeilen per Drag & Drop neu anzuordnen.

Ebenen-Panel, das Karte, Bild, Überschrift, Text und Footer in einer Baumstruktur auflistet

Rechtes Panel

Verwenden Sie Blöcke, um Inhalte zur E-Mail hinzuzufügen, und Einstellungen für das Styling, das auf die gesamte E-Mail gleichzeitig angewendet wird. Siehe E-Mail-weites Styling konfigurieren.

Registerkarte 'Blöcke' im rechten Panel mit Überschrift, Text, Schaltfläche, Bild und anderen Inhaltsblöcken

Beginnen Sie mit dem Erstellen Ihrer E-Mail

Anchor link to
  1. Ziehen Sie einen Block aus dem Blöcke-Panel auf die Arbeitsfläche oder klicken Sie auf einen Block im Panel, um ihn hinzuzufügen.
  2. Fügen Sie auf die gleiche Weise weitere Blöcke hinzu, bis das Layout fertig ist.
  3. Öffnen Sie die Registerkarte Einstellungen, wenn Sie ein E-Mail-weites Styling benötigen.

Inhaltsblöcke hinzufügen

Anchor link to

Öffnen Sie die Registerkarte Blöcke und ziehen Sie einen Block auf die Arbeitsfläche oder klicken Sie auf einen Block, um ihn hinzuzufügen. Verfügbare Blöcke:

  • Überschrift: Titel und kurze Schlagzeilen in der E-Mail
  • Text: Fließtext und längere Beschreibungen
  • Schaltfläche: ein klickbarer Call-to-Action
  • Bild: Bilder aus dem Medienspeicher, Upload oder URL
  • Trennlinie: eine Linie, die Abschnitte visuell trennt
  • 2 Spalten: zwei gleich große Spalten nebeneinander
  • 3 Spalten: drei gleich große Spalten nebeneinander
  • 4 Spalten: vier gleich große Spalten nebeneinander
  • 33 / 67: zwei Spalten, bei denen die linke etwa 33 % der Breite und die rechte etwa 67 % einnimmt
  • 67 / 33: zwei Spalten, bei denen die linke etwa 67 % der Breite und die rechte etwa 33 % einnimmt
  • Timer: ein Countdown für Angebote und Fristen
  • Menü: eine Zeile oder Spalte mit Links, wie z. B. Navigation oder Kontakte
  • Soziale Netzwerke: Symbole, die auf Ihre sozialen Profile verlinken
  • HTML: benutzerdefiniertes HTML, wie z. B. ein Formular, eine Umfrage oder ein eingebettetes Video

Überschrift und Text

Anchor link to

Überschrift- und Text-Blöcke enthalten den Text, den die Empfänger in der E-Mail lesen. Bearbeiten Sie den Text auf der Arbeitsfläche und formatieren Sie ihn mit der Symbolleiste.

Klicken Sie auf einen Überschrift- oder Text-Block, um dessen Text auf der Arbeitsfläche zu bearbeiten. Wählen Sie einen Text aus, um die Formatierungssymbolleiste aufzurufen: Fett, Kursiv, Unterstrichen, Ausrichtung, eine Link-Schaltfläche und ein Dropdown-Menü für den Textstil.

Überschriftenblock auf der Arbeitsfläche ausgewählt mit der Textformatierungssymbolleiste, die Stil- und Formatierungsoptionen anzeigt

Merge-Tags sind Platzhalter, die einen Tag-Wert aus dem Profil des Empfängers in die E-Mail einfügen, sodass jeder Abonnent personalisierten Text sieht. Um einen hinzuzufügen, wählen Sie den Text aus, klicken Sie in der Symbolleiste auf Merge-Tags und wählen Sie einen Tag aus Ihrem Konto.

Ein Bild-Block zeigt ein Bild in der E-Mail an. Wählen Sie ihn auf der Arbeitsfläche aus, um die Bild-Einstellungen im rechten Panel zu öffnen.

  • Bild hinzufügen / Bild ersetzen: Klicken Sie auf Bild hinzufügen, wenn der Block leer ist, oder auf Bild ersetzen, wenn bereits ein Bild festgelegt ist. Sie können eine Datei hochladen oder eine aus Ihrem Medienspeicher auswählen.
  • Bild-URL: Fügen Sie einen gehosteten Link zum Bild ein.
  • Alt-Text: Beschreiben Sie das Bild für die Barrierefreiheit.
  • Link-URL: Öffnet einen Link, wenn auf das Bild geklickt wird. Siehe Links hinzufügen für die verfügbaren Link-Typen.
  • Link-Ziel: Öffnet den Link im selben oder in einem neuen Tab.
  • Datei: Nachdem Sie ein Bild hinzugefügt haben, wird der Pfad der verwendeten Datei angezeigt.

Unter Abstand aktivieren Sie Innenabstand, um Platz um das Bild hinzuzufügen. Verwenden Sie Alle Seiten für den gleichen Abstand auf jeder Seite oder aktivieren Sie Weitere Optionen, um jede Seite separat einzustellen.

Panel für Bildeinstellungen mit Bild ersetzen, Bild-URL, Alt-Text, Link-URL, Link-Ziel, Datei und Innenabstand

Schaltfläche

Anchor link to

Eine Schaltfläche ist ein klickbarer Call-to-Action in der E-Mail.

Klicken Sie auf einen Schaltflächen-Block, um dessen Beschriftung auf der Arbeitsfläche zu bearbeiten. Verwenden Sie die Symbolleiste, um Schriftgröße, Textfarbe, Fett, Kursiv, Unterstrichen und Ausrichtung zu ändern.

Um festzulegen, was passiert, wenn der Empfänger auf die Schaltfläche klickt:

  • Klicken Sie auf das Link-Symbol in der Symbolleiste, um Link einfügen/bearbeiten zu öffnen.
  • Oder verwenden Sie Aktionstyp und URL im Abschnitt Link des rechten Panels.
Schaltflächenblock auf der Arbeitsfläche mit einer Formatierungssymbolleiste und Link-Einstellungen im rechten Panel

Siehe Links hinzufügen für die verfügbaren Aktionstypen.

Im rechten Panel unter Stile:

  • Ausrichtung: links, zentriert oder rechts.
  • Hintergrund, Textfarbe, Schriftgröße und Schriftfamilie: Aktivieren Sie jede Option, um das Standardaussehen zu überschreiben.
  • Randradius, Randfarbe und Randbreite: Form und Umriss der Schaltfläche.
  • Breite: Legen Sie eine feste Breite für die Schaltfläche fest oder lassen Sie sie automatisch.
  • Innenabstand: Fügen Sie Platz innerhalb der Schaltfläche hinzu. Verwenden Sie Alle Seiten für einen einheitlichen Abstand oder aktivieren Sie Weitere Optionen, um jede Seite separat einzustellen.
Einstellungen für Schaltflächenstile im rechten Panel mit Ausrichtung, Hintergrund, Textfarbe, Schriftgröße, Randradius und Innenabstand

Trennlinie

Anchor link to

Eine Trennlinie ist eine horizontale Linie zwischen Inhaltsblöcken. Verwenden Sie sie, um Abschnitte in der E-Mail visuell zu trennen.

Konfigurieren Sie Linienstil (Durchgezogen, Gestrichelt, Gepunktet), Farbe, Dicke und Breite im Einstellungs-Panel.

Einstellungen für den Trennlinienblock mit Optionen für Linienstil, Farbe, Dicke und Breite im rechten Panel

Der HTML-Block ermöglicht es Ihnen, benutzerdefiniertes HTML in Ihre E-Mail einzufügen. Verwenden Sie ihn für ein benutzerdefiniertes Formular, eine Umfrage oder ein eingebettetes Video.

Dieses Lead-Formular sammelt eine E-Mail-Adresse, um einen Promo-Code für den Neujahrsverkauf zu senden.

HTML-Lead-Formular im E-Mail-Editor mit einem E-Mail-Feld und einer Schaltfläche 'Meinen Code erhalten'
HTML-Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
p { font-size: 14px; color: #666; margin-bottom: 20px; }
input {
width: 100%;
padding: 12px;
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 15px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 14px;
background: #CC0000;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>
<div id="form">
<input type="email" placeholder="Your email address" />
<button type="button">Get my code</button>
</div>
</body>
</html>

Der Menü-Block platziert mehrere klickbare Elemente in einer Zeile oder Spalte. Verwenden Sie ihn für eine Navigationsleiste oder eine Liste von Unternehmenskontakten.

Für jedes Menüelement legen Sie fest:

  • Beschriftung: der Text, den die Empfänger sehen
  • URL: wohin das Element führt
  • Ziel: gleicher Tab oder ein neuer Tab

In den Blockeinstellungen können Sie auch festlegen:

  • Richtung: Horizontal oder Vertikal
  • Ausrichtung: Links, Zentriert oder Rechts
  • Trennzeichen: ein optionales Trennzeichen zwischen den Elementen
  • Schriftart, Größe, Gewicht, Buchstabenabstand und Link-/Textfarben
Einstellungen für den Menüblock mit Elementbeschriftungen, URLs, Richtung, Ausrichtung und Trennzeichenoptionen

Soziale Netzwerke

Anchor link to

Der Soziale Netzwerke-Block zeigt eine Reihe von Social-Media-Symbolen an, die auf Ihre Profile verlinken. Verwenden Sie ihn, um Empfänger von der E-Mail aus zu Facebook, Instagram, X und anderen Plattformen zu leiten.

Fügen Sie Plattform-Einträge hinzu und legen Sie dann die Ausrichtung, die Symbolgröße und den Abstand zwischen den Symbolen fest.

Einstellungen für den Social-Block mit Plattform-Links sowie Ausrichtung, Symbolgröße und Abstand

Countdown-Timer

Anchor link to

Der Timer-Block ist ein Countdown in der E-Mail. Verwenden Sie ihn für zeitlich begrenzte Angebote, Blitzverkäufe und Veranstaltungserinnerungen.

So richten Sie ihn ein:

  1. Unter Countdown legen Sie Enddatum und Endzeit fest, wählen dann die Zeitzone und Sprache für die Timer-Beschriftungen.
  2. Schalten Sie Beschriftungen ein, um “Tage / Stunden / Minuten / Sekunden”-Untertitel unter den Ziffern anzuzeigen, oder aus für nur Zahlen.
  3. Unter Erscheinungsbild legen Sie Hintergrund, Ziffernfarbe, Beschriftungsfarbe und die Schriftgröße für Ziffern (Standard 40px) und Beschriftungen (Standard 16px) fest.
  4. Passen Sie den Abstand (Innenabstand) nach Bedarf an.
Einstellungen für den Timer-Block mit Countdown-Enddatum und -zeit, Beschriftungen, Erscheinungsbild und Abstandsoptionen

Spalten teilen die Arbeitsfläche in nebeneinander liegende Abschnitte, sodass Sie Inhalte in einer Reihe nebeneinander platzieren können.

Ziehen Sie einen dieser Blöcke auf die Arbeitsfläche:

  • 2 Spalten: zwei gleich große Spalten
  • 3 Spalten: drei gleich große Spalten
  • 4 Spalten: vier gleich große Spalten
  • 33 / 67: linke Spalte ca. 33 % breit, rechte ca. 67 %
  • 67 / 33: linke Spalte ca. 67 % breit, rechte ca. 33 %

Fügen Sie dann Inhalte zu jeder Spalte hinzu. Um den Abstand für alle Spalten in der E-Mail zu ändern, öffnen Sie EinstellungenSpalten-Standardeinstellungen und passen Sie den äußeren Abstand, den Spaltenabstand und den Abstand zwischen den Spalten an.

Anchor link to

Verwenden Sie das Dialogfeld Link einfügen/bearbeiten, um festzulegen, was passiert, wenn ein Empfänger auf eine Schaltfläche oder ausgewählten Text klickt. Wählen Sie einen Aktionstyp und füllen Sie dann die Felder für diese Aktion aus.

Website öffnen

Anchor link to

Öffnet einen Link, wenn der Empfänger klickt. Geben Sie die Adresse in URL ein.

Dialogfeld 'Link einfügen/bearbeiten' mit Aktionstyp 'Website öffnen' und einem URL-Feld
Anchor link to

Fügt einen Link zum Abonnement-Präferenzzentrum hinzu, wo Empfänger auswählen können, welche E-Mail-Kategorien sie erhalten. Der Link wird automatisch eingefügt.

Dialogfeld 'Link einfügen/bearbeiten' mit 'Link zur Verwaltung der Präferenzen' als Aktionstyp ausgewählt
Anchor link to

Ermöglicht es Empfängern, sich gemäß den Vorschriften und ihren Präferenzen abzumelden.

Dialogfeld 'Link einfügen/bearbeiten' mit 'Abmeldelink' als Aktionstyp ausgewählt und einem optionalen Weiterleitungsfeld
Anchor link to
Wenn das Abonnement-Präferenzzentrum aktiviert ist
Anchor link to

Der Empfänger wird nur von der Kategorie abgemeldet, die dieser E-Mail zugewiesen ist (z. B. Newsletter). Der Kategoriename wird zu seinem Tag Abgemeldete E-Mail-Kategorien hinzugefügt.

Ein Bestätigungsbildschirm erscheint mit den Optionen Erneut abonnieren und Präferenzen verwalten. Mehr erfahren.

Wenn das Abonnement-Präferenzzentrum nicht aktiviert ist
Anchor link to

Der Empfänger wird von allen Marketing-E-Mails abgemeldet und der Tag Abgemeldete E-Mails wird auf true gesetzt. Transaktions-E-Mails sind davon nicht betroffen und werden weiterhin zugestellt. Mehr über Nachrichtentypen erfahren.

Klicks werden in der Abmelderate im Nachrichtenverlauf gezählt.

Anchor link to

Gibt Empfängern Zugriff auf eine Webversion der E-Mail, nützlich, wenn sie Probleme haben, sie in ihrem Posteingang anzuzeigen.

Dialogfeld 'Link einfügen/bearbeiten' mit 'Link zur Webversion' als Aktionstyp ausgewählt
Anchor link to

Fügt einen Bestätigungslink für die Übermittlung eines Abonnementformulars ein (z. B. zur Bestätigung eines Double-Opt-In). Mehr über Double-Opt-In erfahren.

Dialogfeld 'Link einfügen/bearbeiten' mit 'Bestätigungslink für das Abonnementformular' als Aktionstyp ausgewählt

E-Mail-weites Styling konfigurieren

Anchor link to

Die E-Mail-Einstellungen steuern das Styling für die gesamte E-Mail: Dokumentgröße und -hintergrund, absenderseitige Optionen und Standardstile für Blöcke.

Öffnen Sie die Registerkarte Einstellungen im rechten Panel.

Registerkarte 'Einstellungen' mit Abschnitten für Dokument, E-Mail-Optionen und Standardstile für Blöcke und Spalten

Verfügbare Abschnitte:

  • Dokument: Größe und Aussehen des gesamten E-Mail-Bereichs: Breite, Innenabstand, Hintergrundfarbe, Hintergrundbild oder -verlauf, Textfarbe, Schriftfamilie und der Abstand zwischen den Blöcken.
  • E-Mail-Optionen: Schalten Sie Im Browser ansehen und Abmeldelink für die E-Mail ein oder aus.
  • Block-Standardeinstellungen: Gemeinsame Anfangsstile für Blöcke, die Sie später hinzufügen, sodass neuer Inhalt zur E-Mail passt, bis Sie einen Block auf der Arbeitsfläche überschreiben.
  • Spalten-Standardeinstellungen: Abstand für jedes Spaltenlayout: äußerer Abstand, Abstand innerhalb jeder Spalte und der Abstand zwischen den Spalten.
  • Karten-Standardeinstellungen: Anfangsaussehen für Karten-Container, die Inhalte im Layout gruppieren, angewendet, bis Sie eine Karte individuell gestalten.
  • Schaltflächengruppen-Standardeinstellungen: Abstand und Ausrichtung, wenn mehrere Schaltflächen als Gruppe zusammenstehen.
  • Schaltflächen-Standardeinstellungen: Anfangsaussehen für neue Schaltflächenblöcke, damit CTAs in der gesamten E-Mail konsistent bleiben, bis Sie eine separat gestalten.
  • Trennlinien-Standardeinstellungen: Anfangslinienstil, -farbe, -dicke und -breite für neue Trennlinienblöcke.

Standardeinstellungen gelten überall dort, wo ein einzelner Block sie nicht überschreibt.

Anchor link to

Jede E-Mail enthält einen Footer-Block für die gesetzlich vorgeschriebenen Absenderinformationen und den Abmeldelink. Wählen Sie Footer im Ebenen-Panel aus, um dessen Einstellungen zu öffnen.

Ebenen-Panel mit ausgewähltem Footer und hervorgehobenem Footer auf der E-Mail-Arbeitsfläche

Verwenden Sie Aus Konto laden, um Ihren gespeicherten Footer auf Kontoebene zu übernehmen, oder Als Kontostandard speichern, um den aktuellen Footer als Ausgangspunkt für zukünftige E-Mails wiederzuverwenden.

  • E-Mail-Typ: Marketing oder Transaktional. Die Sichtbarkeit des Abmeldelinks richtet sich nach dieser Einstellung.
  • Logo: Legen Sie die Logo-URL fest oder wählen Sie eine aus der Galerie, dann legen Sie die Breite in px und einen optionalen Klick-Link fest.
  • Firmenname, Postanschrift und Copyright: Ihre Absenderidentität im Footer.

Unter Links & Badges:

  • Footer-Links: Fügen Sie beschriftete Links hinzu, wie z. B. Datenschutzrichtlinie oder Nutzungsbedingungen.
  • App-Store-Badges: Fügen Sie App Store- oder Google Play-Badges mit Ziel-URLs hinzu.
  • Soziale Links: Fügen Sie Symbole hinzu, die auf Ihre sozialen Profile verlinken.
Footer-Einstellungen mit 'Aus Konto laden', E-Mail-Typ, Logo, Firmenname, Postanschrift, Copyright sowie Links und Badges

Unter Stil:

  • Textfarbe: Legen Sie die Textfarbe des Footers fest.
  • Schriftgröße (px): Legen Sie die Schriftgröße des Footers fest.
  • Ausrichtung: links, zentriert oder rechts.
  • Links unterstreichen: Aktivieren Sie diese Option, um Footer-Links zu unterstreichen.

Unter Optionen:

  • Text für Abmeldelink: die Beschriftung für den verwalteten Abmeldelink bei Marketing-E-Mails. Bei Transaktions-E-Mails wird er weggelassen.

Ihre E-Mail-Inhalte lokalisieren

Anchor link to

Verwenden Sie den Sprachumschalter über der Arbeitsfläche, um Sprachen hinzuzufügen und Inhalte pro Sprache zu bearbeiten. Erfahren Sie, wie Sie Sprachen hinzufügen.

Inhalte, die Sie für die aktuelle Sprache noch nicht übersetzt haben, werden abgeblendet angezeigt. Beginnen Sie zu tippen, um die Übersetzung zu erstellen. Die Standardsprache wird weiterhin angezeigt, bis Sie dies tun.

Sprachumschalter über der Arbeitsfläche mit abgeblendeten, nicht übersetzten Inhalten, die im E-Mail-Editor sichtbar sind

Ihre E-Mail speichern

Anchor link to

Klicken Sie in der oberen Leiste auf Speichern, um Ihre Änderungen zu speichern. Verwenden Sie Rückgängig/Wiederholen in der oberen Leiste, um schrittweise durch Ihre Bearbeitungen zurück- und vorzugehen.

Eine Test-E-Mail senden

Anchor link to

Bevor Sie Ihre E-Mail-Kampagne versenden, können Sie eine Test-E-Mail senden, um eine Vorschau zu erhalten, wie der Inhalt in den Posteingängen der Empfänger aussehen wird.

  1. Klicken Sie in der oberen Leiste auf Test-E-Mail.
Schaltfläche 'Test-E-Mail' in der oberen Leiste
  1. Wählen Sie im sich öffnenden Fenster ein gespeichertes Testgerät aus oder geben Sie eine beliebige E-Mail-Adresse ein.
Dialogfeld 'Test-E-Mail senden' mit einem Feld zur Auswahl eines Testgeräts oder zur Eingabe einer E-Mail-Adresse
  1. Klicken Sie auf Senden, um die Testnachricht an die von Ihnen gewählte Adresse zu senden.

Ihre gespeicherten E-Mail-Inhalte verwenden

Anchor link to

Jetzt, da Ihr E-Mail-Inhalt fertig ist, kann er in E-Mail-Kampagnen verwendet werden. Erfahren Sie mehr darüber, wie Sie ihn verwenden können