Drag & Drop Editor - Teil 3: Verwenden Sie Inhaltsblöcke (Text & Links, Bild, Schaltfläche, etc.)

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:

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:

  • Stile (Absätze, Überschriften, Links, Schaltflächen)
  • Schriftart
  • Größe
  • Textfarbe
  • Textformatierung (fett, kursiv, unterstrichen, durchgestrichen, hochgestellt und tiefgestellt)

DEE_formatting-toolbar-text_EN-US.gif

❗️ Wichtig
Wenn Sie Inhalte aus einer anderen Kampagne oder einem anderen Editor einfügen, werden Ihre Formatierungen, Tabellen und Bilder nicht im Drag & Drop-Editor angezeigt, um zu verhindern, dass Ihre Inhalte durch versteckte Formatierungen beschädigt werden. Wir empfehlen, dass Sie Ihren Inhaltsblock duplizieren oder speichern, um ihn im Drag & Drop-Editor wiederzuverwenden
Farben Personalisierung hinzufügen Links einfügen
DDE_colors_EN.png

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.

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. 

DEE_text-block_EN-US.gif

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. 

DDE_borders_EN-US.gif

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.

💡 Gut zu wissen
Die unterstützten Bildformate sind .png, .jpeg, .jpg, und .gif mit einer maximalen Größe von 5 MB.

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

Drag & Drop Über die Inhaltsbibliothek Von einer URL
Fügen Sie Ihrem E-Mail-Design ganz einfach Bilder hinzu, indem Sie sie per Drag & Drop direkt aus Ihrem System in Ihren Inhaltsblock für Bilder ziehen.
Ihre Bilder werden automatisch zu Ihrem E-Mail-Design hinzugefügt und in Ihrer Inhaltsbibliothek gespeichert.

dde_drag-drop-image_EN-US.gif

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.

2022-02-11_16-24-57__1_.gif

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).

mceclip1.png

Sie können auch:

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.

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 das Bild aus und klicken Sie auf icon-add-link.png Add link (Link hinzufügen) oder drücken Sie ⌘ oder STRG + K.
    image-add-link.png
  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).

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 icon-add-link.png 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).
      mceclip1.png

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. 

logo_EN-US.png

Social

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

social-content-block_EN-US.png

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.

divider-block_EN-US.png

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

❗️ Wichtig
Die Produkt-Block-Funktion ist nur verfügbar, wenn Sie unsere Plug-Ins Shopify, Shopware 5, Shopware 6 oder PrestaShop [1.7 und höher] verwenden. Weitere Informationen finden Sie im entsprechenden Artikel Einen Produktblock in den Drag & Drop-Editor einfügen.

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.

spacer-block-example_EN-US.gif

Video 

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

DDE_insert-video-block_EN-US.gif

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:

Unternehmensinformationen

Diese Zeile enthält Ihren Unternehmensnamen und Ihre Kontaktinformationen.

Social-Media-Symbole
Sie können in der Fußzeile Ihrer Kampagne Social-Media-Links hinzufügen. Weitere Informationen finden Sie im Abschnitt über den Social-Inhaltsblock.
Link zum Anzeigen im Browser
Dieser Link wird auch als Mirror-Link bezeichnet. Empfänger:innen können darauf klicken, wenn sie Probleme beim Anzeigen einer E-Mail in ihrem E-Mail-Client haben und eine Webversion der E-Mail anzeigen möchten.Bei den meisten E-Mail-Templates ist diese Option nicht erforderlich, wenn die Templates reaktionsfähig sind. Sie können sie jedoch bei Bedarf jederzeit hinzufügen. Weitere Informationen finden Sie im entsprechenden Artikel Einen Mirror-Link in Ihre Kampagnen einfügen.
Diese E-Mail wurde gesendet an

Diese Zeile teilt Ihren Empfängern mit, dass diese E-Mail für sie bestimmt war. Sie erklärt auch, warum sie diese E-Mail erhalten haben.

Abmeldelink

Dieser Link ist obligatorisch. Er ermöglicht es Empfängern, Ihren Newsletter gemäß der DSGVO abzubestellen. Weitere Informationen dazu erhalten Sie in dem Artikel Einen Abmeldelink in Ihre Kampagnen einfügen.

Brevo-Logo

Dies wird standardmäßig in der Fußzeile von E-Mails angezeigt.

  • Wenn Sie ein kostenloses Paket nutzen, wird das Logo immer in Ihrer Fußzeile angezeigt.
  • Wenn Sie ein kostenpflichtiges Paket nutzen, können Sie das Logo manuell aus allen Templates entfernen: Wählen Sie das Logo aus und klicken Sie auf das Papierkorbsymbol. Um das Logo nicht jedes Mal von Hand entfernen zu müssen, können Sie Templates ohne Logo erstellen und diese wiederverwenden. 
    DDE_delete-logo-new_EN-US.gif

⏩ 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.

💬 War dieser Beitrag hilfreich?

6 von 74 fanden dies hilfreich