Überblick über den Drag & Drop-E-Mail-Editor

Mit dem Drag-and-Drop-E-Mail-Editor von Brevo ist es ganz einfach, professionelle E-Mails zu erstellen – ganz ohne Programmierkenntnisse! Dabei spielt es keine Rolle, ob du bei Null anfängst oder ein vorgefertigtes Template auswählst. Wenn du Kampagnen oder Templates erstellst, kannst du die Designs ganz einfach im Schritt Design anpassen. Personalisiere E-Mails mit dynamischen Inhalten wie Kontaktdaten oder Kaufverläufen für ein maßgeschneidertes Empfängererlebnis!

Schau dir den Drag & Drop-E-Mail-Editor an und erfahre mehr über die verschiedenen Bereiche:

🎨 E-Mail-Canvas

⬅️ Linkes Navigationsmenü

🗄️ Inhalt

🖌️ Stil

⬆️ Oberes Navigationsmenü
DDE_email-editor_en-us.png

🧑‍💻 Zugriff auf den Drag & Drop-E-Mail-Editor

So beginnst du mit dem Drag & Drop-E-Mail-Editor mit der Gestaltung:

  1. Erstelle eine E-Mail-Kampagne oder ein E-Mail-Template und richte es ein. 
  2. Im Schritt Design kannst du ein E-Mail-Template auswählen, mit dem du beginnen möchtest.
  3. Je nachdem, ob du ein E-Mail-Template oder eine Kampagne erstellst, ist die Vorgehensweise unterschiedlich:
    E-Mail-KampagneE-Mail-Template
    Klicke auf Start designing (Entwurf starten) und:
    1. Durchsuche die Kategorien Your emails (Meine E-Mails) und Pre-built templates (Vordefinierte Templates), um ein vorgefertigtes E-Mail Template auszuwählen, mit dem du beginnen möchtest, oder
    2. Klicke auf Start from scratch > Drag and drop editor (Von Grund auf neu beginnen > Drag & Drop-Editor), um mit einem leeren Entwurf zu beginnen.

    email_choose-template-modal_en-us.png

Es öffnet sich der Drag & Drop-E-Mail-Editor, in dem du deine E-Mail mit einer benutzerfreundlichen und codefreien Oberfläche gestalten kannst! Beim nächsten Mal kannst du auf derselben Seite deine eigenen E-Mail-Templates und frühere E-Mail-Kampagnen auswählen, um damit zu starten. Verwende deine mit dem Drag & Drop-E-Mail-Editor gestalteten E-Mails in deinen E-Mail-Kampagnen, Automatisierungen und Unterhaltungen! 

🎨 E-Mail-Canvas

Der E-Mail-Canvas ist der wichtigste Arbeitsbereich, in dem du dein E-Mail-Layout gestaltest und mit Inhalten füllst. Ziehe einfach Elemente aus dem linken Navigationsbereich und konfiguriere sie, um deine E-Mail zum Leben zu erwecken und sie ohne Code anzupassen. Betrachte deine E-Mail in Echtzeit, während du sie erstellst – was du siehst, ist das, was du bekommst!

dde_canvas_en-us.png

➡️ Weitere Informationen zum Ausfüllen deines E-Mail Canvas findest du in unserem speziellen Bereich Drag & Drop-E-Mail-Editor.

⬅️ Linkes Navigationsmenü

Die linke Seitenleiste ist die Schaltzentrale für die Erstellung und das Styling deiner E-Mail. Sie ist in drei wichtige Registerkarten unterteilt – Content (Inhalt), Style (Stil) und Aura AI –, die dich jeweils durch einen bestimmten Teil deiner E-Mail-Erstellung leiten sollen. Vom Einfügen von Inhaltsblöcken über das Anwenden globaler Stile bis hin zum Erstellen von Text mit AI – alles beginnt hier.

dde_left-side-bar_en-us.png

➡️ Weitere Informationen über die verschiedenen Registerkarten findest du in den speziellen Bereichen unten für Inhalt, Stil und Aura AI.

🗄️ Content (Inhalt)

Auf der Registerkarte Content (Inhalt) findest du alle Bausteine für deine E-Mail. Du kannst Elemente wie Text, Bilder, Schaltflächen, Links zu sozialen Netzwerken, Trennlinien und ganze Bereiche per Drag & Drop direkt in den E-Mail-Canvas ziehen. Diese Elemente bilden die Grundlage für die Struktur und den Inhalt deiner E-Mail.

💡 Gut zu wissen
Ein Bereich definiert die Struktur (Zeilen- oder Spaltenlayout), während ein Inhaltsblock den eigentlichen Inhalt (Text oder Medien) enthält.
🧱 Blöcke🧑‍🎨 Bereiche💾 Gespeichert
DDE_blocks_en-us.png Inhaltsblöcke sind verschiedene Inhaltstypen, die du deiner E-Mail hinzufügen kannst. Du kannst die Inhaltsblöcke per Drag & Drop in die Stilblöcke ziehen.

Die verfügbaren Inhaltsblöcke sind: 

🔡 Titel und Text

DDE_title-content-block_EN-US.jpg

Titel

DDE_text-content-block_EN-US.jpg

Text

Mit den Blöcken Titel und Text kannst du deiner E-Mail schriftliche Inhalte hinzufügen:

  • Titel für aussagekräftige Überschriften, die dein Layout gliedern.
  • Text für Textkörper, wie Beschreibungen oder Werbetexte.

Beide verfügen über Formatierungsoptionen. Dazu gehören Schriftart, -größe, -farbe, -ausrichtung und Links, um eine klare, markengerechte Botschaft zu vermitteln.

➡️ Weitere Informationen zu den Inhaltsblöcken Titel und Text findest du in unserem Artikel Über die Inhaltsblöcke Titel und Text

🏞️ Bild

DDE_image-content-block_EN-US.jpg

Bild

Mit dem Bildblock kannst du deiner E-Mail visuelle Elemente wie Fotos von Ereignissen, Symbole und Illustrationen hinzufügen. Du kannst deine eigenen Bilder einfügen, sie aus unserer integrierten Stock- und GIF-Bildergalerie auswählen oder direkt im Editor eigene Bilder erstellen. Passe Ausrichtung, Größe und Alt-Text an und füge Links hinzu, um dein Bildmaterial attraktiv und funktional in Szene zu setzen.

➡️ Weitere Informationen über den Inhaltsblock Image (Bild) findest du in unseren Artikeln Einfügen und Bearbeiten von Bildern in deinen E-Mail-Designs und Hinzufügen und Verwalten von Bildern in der Content-Bibliothek.

🎥 Video

DDE_video-content-block_en-us.png

Video

Mit dem Videoblock kannst du eine Videominiatur hinzufügen, die mit einem gehosteten Video (z. B. auf YouTube oder Vimeo) verknüpft ist. Da die meisten E-Mail-Clients keine eingebettete Videowiedergabe unterstützen, leitet das Klicken auf das Thumbnail den Empfänger auf das Video auf seiner ursprünglichen Plattform weiter. Du kannst das Thumbnail-Bild, den Spielbutton-Stil und die Link-URL anpassen, um Engagement zu steigern.

➡️ Weitere Informationen über den Inhaltsblock Video findest du in unserem Artikel Videos in meine E-Mail-Kampagne einfügen

🖱️ Button (Schaltfläche)

DDE_button-content-block_EN-US.jpg

Button (Schaltfläche)

Mit dem Block Button (Schaltfläche) kannst du deiner E-Mail eine eindeutige Handlungsaufforderung (CTA) hinzufügen, wie z. B. Jetzt kaufen, Anmelden oder Mehr erfahren. Sie können Text, Farben, Größe, Ausrichtung und Link-Ziel individuell anpassen, um an Ihr Design anzupassen und angklickt zu fahren.

➡️ Weitere Informationen über den Inhaltsblock Button (Schaltfläche) findest du in unserem Artikel Einfügen einer effektiven Calls-to-Action (CTA) in deine E-Mails (Schaltfläche)

🛢️ Dynamische Inhalte

dde_dynamic-content-block_en-us.png

Dynamische Inhalte

Mit dem Block für dynamische Inhalte kannst du ein einziges E-Mail-Layout verwenden, um mehrere personalisierte E-Mails für jede:n Empfänger:in zu erstellen. Dadurch wird der Eindruck einer persönlichen Unterhaltung vermittelt. Erstellen Sie beispielsweise ein einziges E-Mail-Layout für Ihre Auftragsbestätigungs-E-Mails, die zum Zeitpunkt des Versands automatisch mit den Informationen Ihrer Empfänger:innen gefüllt werden, wie z. B. der Gesamtsumme der Bestellung und der Liste der gekauften Artikel.

➡️ Weitere Informationen über die Verwendung des Blocks für dynamische Inhalte findest du in unserem Artikel Verstehen des Blocks für dynamische Inhalte (Datenfeeds und Ereignisdaten)

🎨 Logo

DDE_logo-content-block_EN-US.jpg

Logo

Mit dem Logoblock kannst du dein Markenlogo in die E-Mail einfügen – typischerweise im oberen Bereich der E-Mail. So können Ihre Empfänger sofort erkennen, von wem die Botschaft stammt, was Ihre Markenidentität stärkt und das Vertrauen stärkt. Du kannst die Größe und Ausrichtung des Logos an dein Layout anpassen.

➡️ Weitere Informationen zur Verwendung des Inhaltsblocks Logo findest du in unserem Artikel Speichern der Marken-Assets in der Content-Bibliothek

📱 Social (Soziale Medien)

DDE_social-content-block_EN-US.jpg

Social

Mit dem Social-Block kannst du anklickbare Symbole hinzufügen, die zu den Social Media-Seiten deines Unternehmens führen (z. B. Facebook, Instagram, LinkedIn, Twitter usw.). Passe ihren Stil, ihre Größe, Ausrichtung und Farbe an deine Marke an und fördere plattformübergreifende Interaktion. 

➡️ Weitere Informationen zur Verwendung des Inhaltsblocks für soziale Medien findest du in unserem Artikel Speichern der Marken-Assets in der Content-Bibliothek

</> HTML [Fortgeschritten]

DDE_html-content-block_EN-US.jpg

HTML

Mit dem HTML-Block kannst du über Drag-and-Drop-Elemente hinausgehen und benutzerdefinierten HTML-Code direkt in dein E-Mail-Design einbetten. Das ist perfekt, um benutzerdefinierte Layouts, eingebettete Widgets, Countdown-Timer oder die Integration mit Drittanbieter-Tools zu ermöglichen, die Einbettungscode bereitstellen. Einige E-Mail-Clients unterstützen nicht alle HTML Elemente.

➡️ Weitere Informationen zum HTML-Inhaltsblock findest du in unserem Artikel Einschränkungen bei der Verwendung von HTML für deine E-Mail-Kampagnen

➗ Divider (Trennlinie)

DDE_divider-content-block_EN-US.jpg

Divider (Trennlinie)

Mit dem Trennlinien-Block kannst du eine horizontale Linie einfügen, um den Inhalt deiner E-Mail optisch abzugrenzen. Das hilft, Abschnitte zu organisieren, Platz zu schaffen und Ihre Nachricht leichter zu scannen. Sie können die Dicke, den Stil, die Farbe und die Breite der Linie individuell anpassen.

➡️ Weitere Informationen über den Inhaltsblock Divider (Trennlinie) findest du in unserem speziellen Bereich Visuelle Trennung von Bereichen durch eine Linie

🛒 Artikel

DDE_button-content-block_EN-US.jpg

Artikel

Der Artikelblock ermöglicht es dir, Artikel aus deinem Shop zu präsentieren – ganz ohne Kopieren. Erstelle E-Mails mit deiner Marke, die deine Artikel genau so zeigen, wie sie auf deiner Website erscheinen.

➡️ Weitere Informationen zum Artikelblock findest du in unserem Artikel Hinzufügen von Artikeln aus deinem Shop in deine E-Mails mit dem Artikelblock

⛵️ Navigation (Anker und relative Links)

DDE_navigation-content-block_EN-US.jpg

Navigation

Mit dem Navigationsblock kannst du Ankerlinks erstellen, mit denen die Empfänger:innen innerhalb einer ausführlichen E-Mail zu bestimmten Bereichen springen können. Dies ist besonders nützlich für E-Mails mit viel Inhalt, wie z. B. Newsletter, Menüs oder Artikelkataloge. Du kannst die Links wie eine Navigationsleiste einer Website gestalten. 

➡️ Weitere Informationen zum Inhaltsblock Navigation findest du in unseren speziellen Artikeln Einfügen eines Inhaltsverzeichnis und von Ankerlinks in deiner E-Mail

↔️ Spacer (Abstandhalter)

DDE_spacer-content-block_EN-US.jpg

Spacer (Abstandhalter)

Mit dem Spacer-Block kannst du freie Flächen zwischen Inhaltsblöcken einfügen, um das Layout und den visuellen Aufbau deiner E-Mail zu verbessern. Nutze ihn, um Bereiche zu trennen, zu verhindern, dass Elemente überladen wirken, oder um Inhalte präzise auszurichten. Du kannst die Höhe des Abstandshalters anpassen, um den gewünschten Platz zu schaffen.

🖌️ Style (Stil)

dde_style_en-us.png

Auf der Registerkarte Style (Stil) kannst du das allgemeine Aussehen und Layout deiner E-Mail festlegen. Von der Einstellung von Schriftarten und Hintergrundfarben bis hin zur Anpassung von Abständen, Zwischenräumen und Spaltenstrukturen - diese Registerkarte legt fest, wie sich deine E-Mail optisch darstellt und sorgt für ein einheitliches Design.

➡️ Weitere Informationen über die Registerkarte Style (Stil) findest du in unserem Artikel Festlegen des Designstils für deine gesamte E-Mail.

⬆️ Oberes Navigationsmenü

Über die obere Navigationsleiste kannst du schnell auf wichtige Tools zugreifen, die dir bei der Verwaltung, Vorschau und Feinabstimmung deines E-Mail-Designs helfen. Von hier aus kannst du zurück zu deinem Template oder deinen Kampagneneinstellungen navigieren, Änderungen rückgängig machen, zwischen Geräteansichten wechseln, deine E-Mail testen und vieles mehr – alles an einem Ort!

dde_top-bar_en-us.png

  1. Brevo-Symbol 
    Bewege den Mauszeiger über das Brevo-Symbol und klicke darauf, um zur Erstellung deiner E-Mail-Kampagne oder deines Templates zurückzukehren.
  2. Name des E-Mail-Designs 
    Klicke auf den Namen deines E-Mail-Designs, um es umzubenennen. 
  3. Abbrechen oder Wiederherstellen von Aktionen und zuletzt gespeichert
    Abbrechen (Strg oder ⌘ + Z) oder Wiederherstellen ( + Strg oder ⌘ + Z) einer Aktion, die du gerade an deinem E-Mail Entwurf durchgeführt hast. Du kannst auch auf die vorherige Version deines Entwurfs zugreifen und sie wiederherstellen, indem du auf zuletzt gespeichert klickst. 
  4. Vorschau für Desktop und Handy 
    Wechsle von der Desktop- zur Mobilansicht, um dein E-Mail-Design an alle Bildschirmgrößen anzupassen. 
    ➡️ Weitere Informationen über die mobile Ansicht findest du in unserem Artikel Optimierung deines E-Mail-Designs für mobile Geräte (mobile-responsive). 
  5. Vorschau & Test 
    Du kannst eine Vorschau deines E-Mail-Designs als Empfänger:in oder auf verschiedenen E-Mail-Clients anzeigen. Du kannst auch eine Test-E-Mail versenden, um sicherzustellen, dass deine E-Mail in den Postfächern deiner Empfänger:innen wie erwartet angezeigt wird. ➡️ Weitere Informationen zur Vorschau und zum Testen deiner E-Mail findest du in unserem speziellen Artikel Vorschau und Test deiner E-Mail-Kampagne.
  6. Speichern und Beenden 
    Speichere deinen Entwurf und kehre zur Erstellung deiner E-Mail-Kampagne oder deines Templates zurück. 
  7. Weitere Aktionen 
    Markenbibliothek

    Spare Zeit bei der Erstellung deiner E-Mails, indem du deine Marken-Assets in der Markenbibliothek speicherst. Einmal eingerichtet, übernimmt jedes neue Template, das du auswählst, deine Markeneigenschaften, wie Logo, Farben, Schriftarten und Social Media-Links.

    ➡️ Weitere Informationen über die Markenbibliothek findest du in unserem speziellen Artikel Automatische Gestaltung deiner E-Mails mit den Marken-Assets in der Markenbibliothek.

    Entwickler-Modus
    ❗️ Wichtig
    Diese Option ist nur verfügbar, wenn du dich an das Support-Team wendest, um den Entwicklermodus im Drag & Drop-Editor zu aktivieren.

    Nutze diese Funktion, um dein E-Mail-Design mit Hilfe von Codes weiter zu personalisieren. 

    ➡️ Weitere Informationen zum Entwicklermodus findest du in unserem Artikel Verwenden des Entwicklermodus für erweiterte Anpassungen von E-Mail-Designs.

    Tastatürkürzel

    Lerne die Tastenkombinationen kennen, die im Editor verwendet werden können, um beim Entwerfen deiner E-Mail-Kampagnen intuitiv zu arbeiten und Zeit zu sparen.

    Speichern

    Klicke auf Save (Speichern), um deine Änderungen manuell zu speichern. Brevo speichert dein Design automatisch jede Minute.

    Als Template speichern

    Speichere dein E-Mail Design als Template, um es in zukünftigen E-Mails wiederzuverwenden. Dein gespeichertes Template findest du unter Marketing > Vorlagen > E-Mail. Von dort aus kannst du die Einstellungen festlegen, sie bei Bedarf bearbeiten sowie aktivieren.

    ➡️ Weitere Informationen zu E-Mail-Templates findest du in unserem speziellen Artikel Wo kann ich mein E-Mail Template verwenden? (Kampagnen, Automatisierung und Transaktional).

    Als PDF speichern

    Speichere den Entwurf deiner E-Mail-Kampagne als PDF-Datei, um ihn auszudrucken oder mit anderen zu teilen.

⏭️ Nächste Schritte 

🤔 Sie haben eine Frage?

Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.

Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit der richtigen zertifizierten Brevo-Partneragentur verbinden.

💬 War dieser Beitrag hilfreich?

17 von 59 fanden dies hilfreich