Mit dem Drag & Drop-Editor wird die Erstellung von professionellen E-Mails zum Kinderspiel. Er bietet mehr Optionen, um Ihre E-Mail zu personalisieren, und stellt sicher, dass die Nachricht auf allen E-Mail-Clients und Geräten korrekt angezeigt wird.

In diesem Artikel erklären wir Ihnen, wie Sie die Inhaltsblöcke in Ihren E-Mails verwenden und wie Sie deren Einstellungen ändern.

Wir haben die Artikel zum Drag & Drop-Editor in mehrere Teile aufgeteilt:

• Teil 1: Übersicht über den Editor
• Teil 2: Stil- vs. Inhaltsblöcke
• Teil 3: Inhaltsblöcke verwenden – SIE SIND HIER
• Teil 4: Design-Stil Ihrer E-Mail festlegen
• Teil 5: Blöcke speichern und in Ihren Kampagnen wiederverwenden
• Teil 6: E-Mails in der mobilen Ansicht bearbeiten
• Teil 7: Das Kampagnen-Design wiederherstellen, eine Vorschau anzeigen, testen und speichern

Erste Schritte

Richten Sie Ihre Markenbibliothek so ein, dass jedes neue Template, das Sie auswählen, die Eigenschaften Ihrer Marke übernimmt, beispielsweise das Logo, die Farben, die Schriftarten und Social-Media-Links. --Mit der Markenbibliothek sparen Sie nicht nur Zeit, sondern sorgen auch für ein einheitliches E-Mail Branding. Weitere Informationen finden Sie im entsprechenden Artikel Ihre E-Mails mithilfe der Markenbibliothek automatisch mit Ihren Marken-Assets gestalten.

Titel und Text

Symbolleiste zur Textformatierung

Wählen Sie im Designer den Inhaltsblock Text oder Titel aus, um die Symbolleiste zur Textformatierung oben im Block mit den folgenden Optionen anzuzeigen:

Farben Personalisierung hinzufügen Links einfügen

Die Farben, die Sie in Ihrem Template verwenden, werden jetzt in der Farbauswahl gespeichert. Sie können eine gespeicherte Farbe jederzeit entfernen, indem Sie einen Text mit dieser Farbe auswählen, auf die Farbauswahl klicken und dann Remove color (Farbe entfernen) auswählen. Es kann einige Minuten dauern, bis sie nicht mehr angezeigt wird.

Klicken Sie auf 👤, um eine Personalisierung in Ihren Text einzufügen, beispielsweise den Vornamen Ihrer Empfänger:innen.
Weitere Informationen finden Sie im Artikel zur Personalisierung von Text mithilfe von Kontaktattributen.

Um einen Link in Ihren Text einzufügen, wählen Sie den Text aus, klicken Sie auf das Link-Symbol oder drücken Sie ⌘ oder Strg + K und geben Sie die Details im Fenster Insert/edit link (Link einfügen/bearbeiten) ein. Der Titel des Links wird in einem Popup angezeigt, wenn Sie den Mauszeiger über den Link bewegen.

Sie können verschiedene Arten von Links auswählen:

Externe Links

• Absolute link (URL) (Absoluter Link (URL))
  Dies ist die grundlegende Option für Links. Wählen Sie diese aus, um eine URL hinzuzufügen.
• Email Link (mailto) (E-Mail-Link (mailto))
  Fügen Sie einen Link zu einer E-Mail-Adresse hinzu.
• Click to call phone number (Klicken zum Anrufen einer Telefonnummer)
  Fügen Sie einen Link zu einer Telefonnummer hinzu.

Standard-Links

• Abmeldelink (global)
  Der Abmeldelink wird automatisch der Fußzeile deiner Kampagnen hinzugefügt. Dabei handelt es sich um einen Link, auf den die Empfänger:innen klicken können, um deine Brevo-Abmeldeseite zu öffnen und sich von deinen E-Mails abzumelden. Das Vorhandensein eines Abmeldelinks in deinen Kampagnen ist obligatorisch, da er für deine Kontakte und für das ordnungsgemäße Funktionieren deiner Kampagnen unerlässlich ist.
  ➡️ Mehr darüber erfährst du in unserem diesbezüglichen Artikel über Abmeldelinks.
• Double-Opt-in-Link 
  Füge einen Double-Opt-in-Link in dein E-Mail-Template ein, wenn du möchtest, dass deine Empfänger:innen das Abonnement für deine E-Mails bestätigen, nachdem du dein Abonnement-Formular ausgefüllt hast. 
  ➡️ Weitere Informationen finden du in unserem speziellen Artikel zum Erstellen eines Templates für die Double-Opt-in-Bestätigung.
• Im Browser anzeigen
  Der Mirror-Link kann der Kopfzeile deiner Kampagnen hinzugefügt werden. Es handelt sich um einen Link, auf den Empfänger:innen klicken können, wenn du Probleme beim Anzeigen deiner E-Mail in deinem Postfach hast und eine Webversion deiner E-Mail öffnen möchtest. Ein Mirror-Link in deinen Kampagnen ist nicht zwingend erforderlich.
  ➡️ Mehr dazu erfährst du in unserem entsprechenden Artikel über Mirror-Links.
• Deine Präferenzen aktualisieren
  Brevo bietet ein Profilaktualisierungsformular, um dir zu helfen, aktualisierte Informationen über deine Abonnenten zu sammeln, beispielsweise deine Details, deine Präferenzen und sogar die Listen, die du abonnieren möchten. Wir empfehlen, in der Fußzeile aller E-Mails einen Link zu diesem Formular zu integrieren, damit deine Abonnenten dir ihre Präferenzen mitteilen können. 
  ➡️ Mehr dazu erfahren du in unserem diesbezüglichen Artikel über Links zur Profilaktualisierung.
  
  💡 Gut zu wissen

  Dein Profilaktualisierungsformular wird automatisch zu den zusätzlichen Einstellungen deiner E-Mail-Kampagne hinzugefügt, wie hier beschrieben.
  Wenn du ein E-Mail-Template erstellst, musst du den Link zum Formular Aktualisieren deiner Einstellungen manuell hinzufügen.

Brevo-Links

• Zahlungen
  Wähle einen deiner in Zahlungen erstellten Zahlungslinks aus. 
  ➡️ Weitere Informationen findest du in unseren speziellen Artikeln zu Zahlungen. 

Anker-Links

• Anchor for relative links (Anker für relative Links)
  Erstellen Sie an einer beliebigen Stelle Ihrer Kampagne einen Anker und verwenden Sie dann die Option für relative Links, um eine Verknüpfung mit diesem Anker herzustellen. 
• Relativer Link (für Anker)
  Sobald du einen Anker in deiner Kampagne erstellt hast, verwendest du diese Option, um eine Verknüpfung mit dem Anker herzustellen.
  Beispielsweise, um zu einem bestimmten Teil des Newsletters weiter oben auf der Seite zurückzugehen.

Um einen Link zu entfernen oder zu aktualisieren, platzieren Sie den Cursor auf dem Link und klicken Sie auf das Link-Symbol, um die Schaltflächen Remove (Entfernen) und Update (Aktualisieren) anzuzeigen.

Sehen Sie sich das Video an, um mehr über das Hinzufügen eines Links, einer Hintergrundfarbe oder eines Bildes und das Ändern von Textblockeinstellungen zu erfahren:

Einstellungen im linken Menü

Gleicher Block, andere Formatierung

Klicken Sie auf den Textblock, um auf der linken Seite ein Menü mit zusätzlichen Einstellungen anzuzeigen, die denen ähneln, die auf der Registerkarte Design verfügbar sind. 
Weitere Informationen zur Verwendung dieser Einstellungen finden Sie unter Design-Stil Ihrer E-Mail festlegen.

Mit diesem Editor können Sie innerhalb desselben Textblocks unterschiedliche Formatierungen auswählen. Sie können beispielsweise einen Titel gefolgt von einem Absatz und Aufzählungszeichen verwenden. Sie können auch verschiedene Farben innerhalb desselben Blocks verwenden. 

Ränder

Sie können Ihrem Textblock sowie Ihren Bildern auch Ränder hinzufügen, indem Sie die Einstellung Borders (Ränder) im linken Menü verwenden. Sie können für jeden Rand eine andere Größe und Farbe festlegen oder die Schaltfläche Apply on all sides (Auf alle Seiten anwenden) aktivieren, um eine einzige Größe und Farbe für alle Ränder anzuwenden. 

Bild

Sie können ein Bild über die Registerkarte Content (Inhalt) hinzufügen, indem Sie den Bildblock verwenden. Sie können das Bild Ihrer Wahl per Drag & Drop aus Ihrem System oder Ihrer Inhaltsbibliothek hinzufügen oder den Link zu Ihrem Bild in das Feld Insert image from URL (Bild von URL einfügen) einfügen. Sie können Ihr Bild direkt im Editor skalieren oder bearbeiten.

Das linke Menü enthält zusätzliche Einstellungen, die denen ähneln, die auf der Registerkarte Design verfügbar sind. 
Weitere Informationen zur Verwendung dieser Einstellungen finden Sie unter Design-Stil Ihrer E-Mail festlegen.

Ein Bild hinzufügen

Ein Bild skalieren

Um ein Bild zu skalieren, klicken Sie darauf, um es auszuwählen, und platzieren Sie Ihren Cursor in der unteren rechten Ecke des Bildes. Sobald der Doppelpfeil angezeigt wird, ziehen Sie an der Ecke, bis Sie die perfekte Größe gefunden haben. Die Größe Ihres Bildes wird oben angezeigt und wird automatisch aktualisiert, während Sie die Größe des Bildes ändern.
Sie können auch das Feld Width (Breite) im linken Menü verwenden, um die Größe Ihres Bildes zu skalieren.

Ein Bild bearbeiten

Unser Drag & Drop-Editor umfasst einen Fotoeditor, mit dem Sie Ihr Bild zuschneiden, Filter, Text oder Textdesign hinzufügen können. Um auf den Fotoeditor zuzugreifen, klicken Sie auf Ihr Bild und dann in den Image Settings (Bildeinstellungen) auf die Schaltfläche Edit (Bearbeiten).

Sie können auch:

• Ein Foto aus der Inhaltsbibliothek bearbeiten
• Dank der Funktion Create image (Bild erstellen) können Sie auch Ihr eigenes Bild entwerfen und es in der Inhaltsbibliothek speichern. Weitere Informationen finden Sie im entsprechenden Artikel Entwerfen Sie einen professionellen Newsletter mit unserer Funktion Bild erstellen.

Einen Link zu einem Bild hinzufügen

Durch das Hinzufügen eines Links zu einem Bild können Sie Ihre Empfänger:innen umleiten. Sie können sie auf eine Seite oder zu einer Datei umleiten.

Einen Alt-Text zu Ihren Bildern hinzufügen

Ein Alt-Text ist eine kurze Beschreibung des Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann oder wenn der/die Empfänger:in einen Bildschirmleser verwendet. Alt-Text erhöht die Zugänglichkeit, verbessert die Erfahrung der Benutzerin bzw. des Benutzers und vermittelt die Botschaft auch dann, wenn Bilder gesperrt sind oder nicht angezeigt werden können.

So fügen Sie einen Alt-Text zu Ihren Bildern hinzu:

1. Wählen Sie das Bild, das Sie mit einem Alt-Text versehen möchten. Es öffnet sich das linke Fenster mit Ihren Inhaltseinstellungen. 
2. Suchen Sie das Feld Alt-Text im Abschnitt Image settings (Bildeinstellungen).
3. Geben Sie eine kurze Beschreibung für Ihr Bild ein. Wir empfehlen, eine kurze und präzise Beschreibung des Bildinhalts zu verfassen, die nur die wichtigsten Informationen enthält. Vermeiden Sie es, Bild von zu schreiben und konzentrieren Sie sich bei der Beschreibung auf den Zweck des Bildes. 
   

Schaltfläche

Fügen Sie Schaltflächen hinzu, um einen Call-to-action in Ihren E-Mails zu erstellen:

1. Ziehen Sie den Schaltflächenblock per Drag & Drop in Ihre Kampagne.
2. Ersetzen Sie den Call-to-action-Text durch einen Text, der dem Inhalt entspricht, zu dem Sie Ihre Empfänger:innen weiterleiten möchten. 
   Sie können den Text mit Kontakt-Attributen personalisieren. 
3. Optional: Verwenden Sie die Menüleiste zur Textformatierung und die Schaltflächeneinstellungen im linken Menü, um Ihre Schaltfläche zu personalisieren. 
4. Fügen Sie einen Link hinzu, um Ihre Empfänger:innen umzuleiten.
   Auf eine Seite umleiten Zu einer Datei umleiten

   So leiten Sie Ihre Empfänger:innen auf die Seite Ihrer Wahl um:

   1. Wählen Sie die Schaltfläche aus und klicken Sie auf Add link (Link hinzufügen).
   2. Wählen Sie die Art des Links aus, den Sie einfügen möchten, und geben Sie die entsprechende URL in das Feld Link target (Ziel des Links) ein.
   3. Optional: Fügen Sie einen Linktitel hinzu, der als Tooltip angezeigt wird, wenn Sie den Mauszeiger darüber bewegen.
   4. Klicken Sie auf Insert (Einfügen).
      

   So leiten Sie Ihre Empfänger:innen zu einer Datei um, die sie herunterladen sollen:

   1. Laden Sie Ihre Datei bei einem Drittanbieter wie WeTransfer oder Dropbox hoch und stellen Sie sicher, dass Ihre Datei öffentlich zugänglich ist.
   2. Wählen Sie das Bild aus und klicken Sie auf  Add link (Link hinzufügen).
   3. Wählen Sie im Feld Type of link (Art des Links) die Option Absolute link (URL) (Absoluter Link (URL)) aus.
   4. Geben Sie die URL Ihrer Datei im Feld Link target (Ziel des Links) ein.
   5. Optional: Fügen Sie einen Linktitel hinzu, der als Tooltip angezeigt wird, wenn Sie den Mauszeiger darüber bewegen.
   6. Klicken Sie auf Insert (Einfügen).
      

Sehen Sie sich das Video an, um mehr über das Ändern von Einstellungen wie Breite, Randradius, Linienstärke und Hintergrundfarbe für den Schaltflächenblock zu erfahren.

Logo

Mit diesem Inhaltsblock können Sie Ihr Markenlogo an einer beliebigen Stelle in Ihr E-Mail-Design einfügen. Fügen Sie Ihr Logo zu Ihrer Markenbibliothek hinzu, damit Sie es nicht jedes Mal neu hochladen müssen. 

Social

Mit dem Social-Block können Sie die Empfänger:innen auf Ihre Social-Media-Seiten umleiten, wenn sie auf die Symbole klicken.

Wir empfehlen Ihnen, Ihre Markenbibliothek einzurichten, um Ihre Social Media-Links dauerhaft in den Assets Ihrer Marke zu speichern. Wenn Sie den Social Content-Block per Drag & Drop in Ihr E-Mail-Design ziehen, werden die Links automatisch in die Einstellungsfelder für die Icons eingefügt. 

Wie Sie den Social Content-Block verwenden können, erfahren Sie in unserem Artikel Einfügen von Social Media-Links und -Symbolen in Ihr E-Mail-Design.

HTML

Mithilfe des HTML-Blocks können Sie eigenen Code hinzufügen. Sie können entweder Code eingeben oder kopieren und einfügen. Um eine Vorschau des Codes anzuzeigen, verlassen Sie einfach den HTML-Block.

Einige E-Mail-Clients unterstützen nicht alle HTML-Inhalte, da E-Mail-HTML nicht als Web-HTML entwickelt wird. Um Probleme mit Ihrem Code im HTML-Editor und -Block zu vermeiden, lesen Sie unseren diesbezüglichen Artikel zur Verwendung von HTML in E-Mail-Kampagnen.

Trennlinie

Der Trennlinien-Block fügt eine horizontale Linie hinzu, um Blöcke zu trennen.

Sehen Sie sich das Video an, um mehr über das Ändern von Einstellungen wie Dicke, Farbe, Form, Breite, Hintergrundfarbe für den Trennlinien-Block zu erfahren.

Produkt

Ziehen Sie den Produkt-Inhaltsblock per Drag & Drop in Ihren Newsletter. Sie sehen das Produktbild, den Produkttitel, die Produktbeschreibung und den Produktpreis. Das Produktbild und die Schaltfläche sind automatisch mit der Produkt-URL verlinkt, solange Ihr Shop veröffentlicht ist.

Abstandshalter 

Mit dem Abstandshalter-Inhaltsblock können Sie einen Leerraumblock in Ihr E-Mail-Design einfügen. Sie können die Breite oder Höhe Ihres Abstandshalter-Inhaltsblocks bearbeiten, um einen mehr oder weniger großen Leerraum zu erhalten. Die maximale Breite beträgt 100 % und die minimale Höhe beträgt 30 Pixel. Sie können auch die Farbe Ihres Abstandsblocks ändern, um einen Farbblock zu erstellen.

Video 

Mit unserem Video-Inhaltsblock können Sie ganz einfach einen Videolink in Ihre E-Mail-Kampagnen einfügen:

Weitere Informationen finden Sie im entsprechenden Artikel zum Thema Videos in E-Mail-Kampagnen einfügen.

Abschnitte

Bei den vordefinierten Abschnitten handelt es sich um vordefinierte Layouts von Inhaltsblöcken, die Sie nach Bedarf ausfüllen und anpassen können. Sie können vorgefertigte Text- und Bildabschnitte verwenden, aber auch vorgefertigte Kopf- und Fußzeilen. 

Weitere Informationen finden Sie in unserem speziellen Artikel Sparen Sie Zeit beim Gestalten Ihrer E-Mails mit vordefinierten Abschnitten.

Kopf-und Fußzeile

Verwenden Sie den Header (Kopfzeilen)-Block, um Ihr Firmenlogo oder relevante Links, beispielsweise Links zu Ihrer Website oder zu sozialen Medien, hinzuzufügen.

Der Fußzeilen-Block ist wichtig, da er Ihren Empfängern mehr Informationen über Ihr Unternehmen bietet und es ihnen ermöglicht, sich abzumelden oder ihre Präferenzen zu ändern. Er kann Folgendes enthalten:

⏩ Nächste Schritte

• Teil 4: Design-Stil Ihrer E-Mail festlegen
• Teil 5: Blöcke speichern und in Ihren Kampagnen wiederverwenden
• Teil 6: E-Mails in der mobilen Ansicht bearbeiten
• Teil 7: Vorschau anzeigen und Test-E-Mail senden

🤔 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 dem richtigen zertifizierten Brevo-Expertenpartner zusammenbringen.