Drag & Drop-Editor - Teil 4: Design-Elemente (Titel, Text, Bild, Schaltfläche und Abstand)

Bei Design-Elementen handelt es sich um einzelne Elemente, die zu Ihrem Newsletter hinzugefügt werden können. Wir haben zudem komplexere Elemente erstellt, die Bilder, Titel, Text und Schaltfläche in Content-Elementen vereinen. In diesem Artikel erfahren Sie, wie Sie die Design-Elemente (Titel, Text, Bild, Schaltfläche und Abstand) zu Ihrem Newsletter hinzufügen und ihre Einstellungen ändern können. 

In diesem Artikel befassen wir uns mit den folgenden Elementen:

Titel und Text

Mit den Elementen Titel und Text können Sie ganz einfach schriftliche Informationen zu Ihrer E-Mail-Kampagne hinzufügen und anschließend verschiedene Schriftarten und Einstellungen anwenden. 

Title_and_Text.gif

Titel und Text mit der Menüleiste formatieren

Sie können das Textformat (fett, kursiv, unterstrichen, durchgestrichen usw.) ändern, indem Sie auf den Text klicken und die Formatierungsmenüleiste verwenden:

Toolbox2.png

Die Element-Einstellungen ändern

Die Element-Einstellungen sind für jedes Element unterschiedlich. Sie können darauf zugreifen, indem Sie auf Ihr Element klicken (in diesem Fall Titel oder Text). Rechts werden die Element-Einstellungen angezeigt und Sie können die folgenden Optionen ändern:

Element_settings.png
  1. Schriftart-Familie
  2. Ausrichtung des Titels (für den Text kann die Ausrichtung über die Formatierungsmenüleiste geändert werden)
  3. Farbe der Links
  4. Falls die Links unterstrichen sind

💡 Gut zu wissen: Falls Sie Ihre eigene Schriftart hinzufügen möchten, lesen Sie bitte unseren Artikel Importieren von Schriftarten in den Responsive Design Newsletter Editor.

Einen Link zu Ihrem Text hinzufügen

Das Hinzufügen von Links zu Ihrem Text ist ein Kinderspiel! Verwenden Sie die Formatierungsmenüleiste in einem Textelement, um einen beliebigen Textteil in Ihrer E-Mail-Kampagne in einen Link zu verwandeln.

  1. Fügen Sie das Text- oder Titelelement zu Ihrem Design hinzu.
  2. Ersetzen Sie den Platzhaltertext Lorem ipsum durch Ihren eigenen Text.
  3. Wählen Sie den Text, zu dem Sie einen Link hinzufügen möchten.
  4. Klicken Sie auf das Link-Icon in der Formatierungsmenüleiste.
  5. Behalten Sie für den Link-Typ "URL" bei und geben Sie die URL in das Feld ein.
  6. Klicken Sie auf OK.

add_a_link_EN.png

Im Tab Ziel können Sie das Ziel Ihres Links auswählen (ein neues Fenster öffnen, gleiches Fenster usw.).

Um den Link zu entfernen, wählen Sie den Text aus und klicken Sie auf das Icon Link entfernen rechts neben dem Link-Icon.

Ein mailto hinzufügen 

Neben einem Link können Sie auch ein mailto zu Ihren E-Mails hinzufügen, falls Sie Antworten erhalten möchten, wenn Abonnenten den Link anklicken. 

  1. Fügen Sie das Text- oder Titelelement zu Ihrem Design hinzu.
  2. Ersetzten Sie den Platzhaltertext Lorem Ipsum durch Ihren eigenen Text.
  3. Wählen Sie die E-Mail-Adresse, zu der ein Link hinzugefügt werden soll.
  4. Wählen Sie E-Mail als Link-Typ.
  5. Geben Sie die E-Mail-Adresse (obligatorisch) und den Betreff/Inhalt der Nachricht (optional) ein.
    Füllen Sie die Felder "Betreff der Nachricht" und "Nachrichteninhalt" aus, wenn die Betreffzeile und der Inhalt der E-Mail automatisch ausgefüllt werden sollen, wenn jemand auf den Link klickt, um eine E-Mail zu senden.
  6. Klicken Sie auf OK.

add_mailto_EN.png

 

Gut zu wissen
Um ein mailto zu einer Schaltfläche hinzuzufügen, geben Sie mailto:contact@mycompany.com in das Feld Link in den Optionen der Schaltfläche ein.

Eine Hintergrundfarbe oder ein Hintergrundbild hinzufügen

Wenn Sie eine Hintergrundfarbe oder ein Bild zu Titel-/Text-Elementen hinzufügen möchten, müssen Sie die Block-Optionen aufrufen, indem Sie auf das Stift-Icon klicken. Überprüfen Sie das Vorgehen im Abschnitt Hintergrundfarbe oder Bild im Artikel Drag-and-Drop-Editor: Optionen für Blöcke und Elemente.

Bild

Mit Sendinblue können Sie schnell Bilder in Ihre E-Mail-Kampagne hochladen, hinzufügen und bearbeiten. So können Sie das Design Ihrer E-Mails anpassen und ansprechender gestalten.

Sie haben zwei Möglichkeiten, um Bilder zu Ihren E-Mails hinzuzufügen:

Nachstehend werden beide Optionen erklärt.

Ein Bild über die Bildergalerie hinzufügen

  1. Ziehen Sie das Bild-Element in Ihre E-Mail.
  2. Klicken Sie auf das Bild.
    Im linken Menü wird die Bildergalerie angezeigt.
  3. Um ein Bild zur Bildergalerie hinzuzufügen:
    • Klicken Sie auf + Ein Bild hinzufügen oben rechts.
    • Oder verschieben Sie ein Bild im Menü per Drag & Drop.
  4. Wenn es fertig geladen wurde, verschieben Sie Ihr Bild in das Bild-Element.

Add_image_from_gallery.gif

💡 Gut zu wissenUm die absolute URL Ihres Bildes zu erhalten, gehen Sie zur Bildergalerie im linken Menü, rechtsklicken Sie auf das Bild und kopieren Sie die Adresse/URL oder das Bild.

Ein Bild über eine URL hinzufügen

  1. Ziehen Sie das Bild-Element in Ihre E-Mail.
  2. Klicken Sie auf das Bild.
    Die Bildeinstellungen werden rechts angezeigt.
  3. Aktivieren Sie unten in der Bildquelle Aus URL.
  4. Kopieren Sie Ihre Bild-URL in das Feld.

Ihr Bild wird nicht im Editor angezeigt, aber Sie können eine Vorschau ansehen, indem Sie eine Test-E-Mail senden.

Add_image_from_URL.gif

Die Bildeinstellungen bearbeiten

Im linken Menü können Sie auf mehrere Einstellungen für Ihr Bild zugreifen. Klicken Sie auf das Bild, um dieses Feld zu öffnen:

param_image_FR.png
  1. Link: Wenn Sie möchten, dass Ihr Bild anklickbar ist, können Sie einen Link in dieses Feld einfügen.
  2. Alternativer Text: Dieser Text wird anstelle des Bildes angezeigt, wenn die Anzeige vom Benutzer deaktiviert ist, oder standardmäßig auf der Benutzeroberfläche zum Lesen von E-Mails.
  3. Rand: Fügen Sie einen Rand zu Ihrem Bild hinzu und wählen Sie die Farbe und die Dicke.
  4. Runde Ecken: Mit dieser Einstellung können Sie die Ecken jedes Elements abrunden.
  5. Ausrichtung: Richten Sie Ihr Bild rechts, zentriert oder links aus.
  6. Bildquelle:
    • Galerie: Wählen Sie Ihr Bild links aus der Galerie.
    • URL: Fügen Sie eine Bild-URL ein.

Image_element_settings.gif

Fotoeditor

Unser Drag-and-Drop-Editor umfasst einen Fotoeditor, in dem Sie Ihr Bild zuschneiden und Filter, Text oder Textdesign hinzufügen können. Klicken Sie auf Ihr Bild und dann auf die Schaltfläche "Bearbeiten" oben links in Ihrem Bild.

photo_editor.png

Die Bildgröße anpassen

  1. Klicken Sie auf Bearbeiten oben links im Bild.
  2. Gehen Sie zu Ändern oben links im Fotoeditor.
  3. Wählen Sie dann Benutzerdefiniert.
  4. Aktivieren Sie das Kontrollkästchen neben Auflösung sperren.
  5. Ändern Sie die Breite oder die Höhe des Bildes, der andere Wert wird automatisch angepasst, um dasselbe Verhältnis zu bewahren.
  6. Klicken Sie auf Speichern.
  7. Das angepasste Bild wird zur Galerie hinzugefügt und Sie können es per Drag and Drop ins Bild-Element verschieben.

how_to_resize_an_image_gif_2.gif

Schaltfläche

Sie können unser Schaltfläche-Element verwenden, um eine Website oder eine herunterladbare Datei zu verlinken. Das Hinzufügen von Schaltflächen zu Ihren E-Mail-Kampagnen ist eine tolle Möglichkeit, um spezifische Links hervorzuheben, die die Leser anklicken sollen. 

Button_settings.png
  1. Link: Geben Sie hier Ihre URL ein. Um ein mailto hinzuzufügen, geben Sie mailto:contact@mycompany.com ein.
  2. Schriftart-Familie: Schriftart des Texts in der Schaltfläche
  3. Farbe der Schaltfläche: Wählen Sie die Farbe Ihrer Schaltfläche.
  4. Farbe in der Schaltfläche: Wählen Sie die Farbe des Texts Ihrer Schaltfläche.
  5. Höhe der Schaltfläche: Ändern Sie die Höhe der Schaltfläche.
  6. Schriftgröße der Schaltfläche: Ändern Sie die Größe des Texts Ihrer Schaltfläche.
  7. Abrundung der Schaltflächen: Runden Sie die Ecken Ihrer Schaltflächen ab.
  8. Ausrichtung der Schaltfläche: Wählen Sie die Ausrichtung Ihrer Schaltfläche (links, zentriert, rechts).
  9. Rand: Fügen Sie einen Rand zu Ihrem Bild hinzu und wählen Sie die Farbe und die Dicke.

Button.gif

Abstand

Indem Sie Abstände zu Ihrem Design hinzufügen, verbessern Sie die Lesbarkeit Ihres Newsletters. Das Abstand-Element übernimmt automatisch die Hintergrundfarbe der Seite, Sie können nur die Höhe des Elements ändern. 

Sie können außerdem alle Abstände direkt mit den Elementen (Text, Schaltfläche, Bild usw.) in den Optionen der Blöcke verwalten, indem Sie auf das Stift-Icon oben rechts im Element klicken. Um mehr über Abstände zu erfahren, lesen Sie den Artikel Drag-and-Drop-Editor: Optionen für Blöcke und Elemente.

⏭️ Nächste Schritte

⏭️ Sie haben eine Frage?

Wenden Sie sich bei Fragen an unser Support-Team, indem Sie ein Ticket über Ihr Konto erstellen. Falls Sie noch kein Konto haben, erreichen Sie uns hier.