Einstellungen des Stripo Drag-and-Drop-E-Mail-Editors

Published: 22. Oktober 2024 · Last updated: 21. Juli 2026 · By Marcus Biel

Auf der rechten Seite des Maildroppa-E-Mail-Editors finden Sie die Spalte „E-Mail-Einstellungen“. Sie bietet Werkzeuge, mit denen Sie den Inhalt und das Erscheinungsbild Ihrer E-Mail strukturieren und anpassen können. Diese Spalte ist in zwei Tabs unterteilt: Inhalt und Erscheinungsbild.

Tab „Inhalt“

Im Tab Inhalt gestalten und organisieren Sie den Inhalt Ihrer E-Mail. Er enthält zwei Hauptbereiche: Strukturen und Blöcke.

1. Strukturen

Strukturen legen das Layout Ihrer E-Mail fest, indem sie Inhalte in Zeilen und Spalten anordnen. Sie können aus verschiedenen vordefinierten Layouts wählen, zum Beispiel:

• Einspaltig
• Zweispaltig
• Mehrspaltig

Sie sind nicht auf diese Optionen beschränkt – Sie können mehrere Blöcke kombinieren und so jedes gewünschte individuelle Layout erstellen. Damit haben Sie vollständige Flexibilität für Ihre Designanforderungen.

• Drag-and-Drop: Ziehen Sie einfach eine Struktur aus diesem Bereich in den Designbereich Ihrer E-Mail, um Inhalte hinzuzufügen.
• Anpassung: Sobald eine Struktur hinzugefügt wurde, können Sie sie mit verschiedenen Inhaltsblöcken wie Bildern, Text oder Schaltflächen füllen.

2. Blöcke

Blöcke sind die Inhaltselemente, die Sie innerhalb der Strukturen platzieren, um Ihre E-Mail aufzubauen.

Die verfügbaren Blocktypen sind:

• Bild: Laden Sie Bilder (PNG, JPG, GIF) hoch und passen Sie ihr Erscheinungsbild an.
• Text: Fügen Sie Text hinzu und formatieren Sie ihn, um Ihre Nachricht zu vermitteln.
• Schaltfläche: Fügen Sie anklickbare Schaltflächen mit anpassbarem Text, Links und Stil hinzu.
• Abstandhalter: Fügen Sie einen Leerraum ein, um das Layout zwischen anderen Blöcken anzupassen.
• Video: Betten Sie Videoinhalte von Plattformen wie YouTube, Vimeo und anderen ein.
• HTML: Fügen Sie benutzerdefinierten HTML- und CSS-Code hinzu, um E-Mail-Inhalte individuell anzupassen.

Jeder Block ist flexibel und anpassbar, sodass Sie eine E-Mail erstellen können, die zum Erscheinungsbild Ihrer Marke passt.

Detaillierte Erklärung der Inhaltsblöcke

Bildblock

Mit dem Bildblock im Drag-and-Drop-E-Mail-Editor von Stripo können Sie Bilder zu Ihrer E-Mail-Kampagne hinzufügen und anpassen.

Bildblock hinzufügen

Sie können einen Bildblock auf zwei Arten zu Ihrer E-Mail hinzufügen:

Option 1

Bewegen Sie den Mauszeiger über den Bereich „Inhalt hier ablegen“ in einer Struktur und klicken Sie anschließend auf das Bildsymbol. Dadurch wird die ausgewählte Struktur sofort in einen Bildblock umgewandelt.

Option 2

Öffnen Sie im Tab „Inhalt“ den Bereich Blöcke. Ziehen Sie den Bildblock in die gewünschte Struktur Ihres E-Mail-Layouts. Mit dieser Methode können Sie genauer festlegen, wo Ihr Bild platziert wird.

Bild hochladen

Nachdem Sie den Bildblock hinzugefügt haben, stehen Ihnen zwei Methoden zum Hochladen eines Bildes zur Verfügung:

Drag-and-Drop

Sie können eine Bilddatei (PNG, JPG, GIF) direkt von Ihrem Computer in das Upload-Feld ziehen, das innerhalb des Bildblocks angezeigt wird.

Vom Computer hochladen

Alternativ können Sie im Bildblock auf das Wolkensymbol klicken, um den Dateibrowser zu öffnen und ein Bild von Ihrem Computer auszuwählen (bis zu 2 MB). Nach der Auswahl wird das Bild sowohl im Block als auch im Tab „Inhalt“ auf der rechten Seite angezeigt.

Bild ändern

Um das Bild zu ersetzen, verwenden Sie die Option Bild ändern im Tab „Inhalt“. Klicken Sie auf das kreisförmige Symbol Bild ändern. Anschließend können Sie ein neues Bild hochladen oder ein Bild über eine externe URL verknüpfen.

Bild bearbeiten

Nach dem Hochladen eines Bildes möchten Sie es möglicherweise direkt in der Plattform weiter bearbeiten. Mit dem integrierten Bildeditor von Stripo können Sie Ihre Bilder optimieren und anpassen, ohne den E-Mail-Editor zu verlassen.

Bildeditor öffnen

1. Klicken Sie nach dem Hochladen eines Bildes auf die Schaltfläche Bild bearbeiten. Dadurch wird die Oberfläche des Bildeditors geöffnet.
2. Der Editor bietet eine große Auswahl an Werkzeugen, die in der oberen Menüleiste angezeigt werden.

Verfügbare Bildbearbeitungswerkzeuge

• Filter Wenden Sie mit einem einzigen Klick verschiedene Filter an, zum Beispiel:

  • Graustufen
  • Schwarz-Weiß
  • Schärfen
  • Invertieren
  • Sepia
  • Helligkeit
  • Farbe

• Größe ändern Passen Sie die Abmessungen Ihres Bildes an. Sie können:

  • Eine bestimmte Breite und Höhe festlegen.
  • Das Seitenverhältnis beibehalten.

• Zuschneiden Wählen Sie den Teil des Bildes aus, den Sie behalten möchten, und entfernen Sie unerwünschte Bereiche.

• Transformieren Drehen oder spiegeln Sie das Bild:

  • Horizontal
  • Vertikal

• Zeichnen Verwenden Sie das Zeichenwerkzeug, um freihändige Elemente wie Linien oder individuelle Formen über Ihrem Bild zu erstellen.

• Text Fügen Sie direkt auf dem Bild Text hinzu. Passen Sie Folgendes an:

  • Schriftart
  • Größe
  • Farbe
  • Ausrichtung

• Formen und Sticker Werten Sie Ihr Bild auf, indem Sie Folgendes darüberlegen:

  • Vorgefertigte Formen
  • Lustige Sticker

• Rahmen Wählen Sie aus verschiedenen Rahmen, um Ihrem Bild einen stilvollen Rand zu geben.

• Ecken Passen Sie den Eckenstil für ein optimiertes Erscheinungsbild an.

• Hintergrund Entfernen oder ersetzen Sie den Hintergrund eines Bildes für ein klareres Erscheinungsbild.

Änderungen speichern

Wenn Sie die gewünschten Änderungen vorgenommen haben, klicken Sie oben links im Editor auf die Schaltfläche Speichern. Das bearbeitete Bild ersetzt automatisch das ursprüngliche Bild in Ihrem E-Mail-Layout.

Bildeinstellungen

Nach dem Hochladen des Bildes können Sie es mithilfe der Bildeinstellungen im Tab „Inhalt“ auf der rechten Seite anpassen.

Link

Fügen Sie dem Bild einen Link hinzu. Sie können aus verschiedenen Linktypen wählen, zum Beispiel:

• Website (HTTP, HTTPS)
• E-Mail (mailto:)
• Datei (ftp)
• Social Sharing (Facebook, X (ehemals Twitter), LinkedIn, Pinterest)

Diese Optionen finden Sie im Dropdown-Menü der Linkeinstellungen.

Alternativtext

Fügen Sie einen Alternativtext hinzu, der angezeigt wird, wenn das Bild nicht geladen werden kann. Dieser Text ist außerdem für die Barrierefreiheit hilfreich, da Screenreader das Bild für Empfänger mit Sehbehinderung beschreiben können.

Ausrichtung

Wählen Sie, wie das Bild innerhalb seines Containers ausgerichtet werden soll. Sie können es Links, Zentriert oder Rechts ausrichten.

Größe

Passen Sie die Breite und Höhe des Bildes manuell mithilfe der Plus-/Minus-Schaltflächen an oder geben Sie die gewünschten Abmessungen ein.

Sie können außerdem die Option „An Breite anpassen“ aktivieren, damit das Bild automatisch die gesamte Breite des Containers ausfüllt.

Responsives Bild

Aktivieren Sie die Option „Responsives Bild“, damit sich das Bild an unterschiedliche Bildschirmgrößen anpasst, insbesondere auf Mobilgeräten.

Innenabstand

Passen Sie den Innenabstand rund um das Bild an, um den Abstand zwischen dem Bild und den umgebenden Inhalten festzulegen. Sie können den Innenabstand einheitlich anwenden oder für jede Seite (Oben, Unten, Links, Rechts) individuell anpassen.

Ankerlinks

Sie können dem Bild einen Ankerlink zuweisen, über den Empfänger beim Klicken auf das Bild zu einem bestimmten Abschnitt innerhalb derselben E-Mail springen können. Beachten Sie jedoch, dass Ankerlinks in bestimmten E-Mail-Clients wie Gmail und Apple Mail möglicherweise nicht funktionieren.

Textblock

Optimieren Sie Ihre Textblöcke, indem Sie ihr Erscheinungsbild und ihre Funktionalität mithilfe der folgenden Einstellungen anpassen. Mit jeder Option können Sie die Darstellung Ihres Textes feinabstimmen und so sicherstellen, dass er genau Ihren Designvorstellungen entspricht.

Textsymbolleiste

Wenn Sie in einen Textblock klicken, wird oberhalb des Inhaltsbereichs die Textsymbolleiste angezeigt. Sie bietet schnellen Zugriff auf viele gängige Textformatierungsoptionen. In der Symbolleiste stehen folgende Funktionen zur Verfügung:

1. Absatzformat

Legen Sie den Absatzstil fest, indem Sie beispielsweise Normal für normalen Text oder verschiedene Überschriftenebenen (Überschrift 1 bis Überschrift 6) auswählen, um eine strukturierte Hierarchie in Ihrer E-Mail zu erstellen. Dadurch wird der Inhalt lesbarer und übersichtlicher.

2. Schriftfamilie

Die Standardschrift ist Arial, Sie können jedoch aus einer Vielzahl von Schriftarten wählen, darunter gängige Optionen wie Georgia, Helvetica und Courier New. Außerdem gibt es eine Suchfunktion, mit der Sie schnell eine bestimmte Schriftart finden.

3. Schriftgröße

Passen Sie die Schriftgröße von 8pt bis 72pt an. Der Standardwert beträgt 14pt, was für den meisten E-Mail-Fließtext gut geeignet ist. Verwenden Sie das Dropdown-Menü, um schnell die gewünschte Schriftgröße festzulegen.

4. Textgestaltung

Gestalten Sie Ihren Text mit den folgenden Optionen:

• Fett (B): Hebt Text hervor, indem er fett dargestellt wird.
• Kursiv (I): Stellt den Text kursiv dar und verleiht ihm ein stilisierteres Erscheinungsbild.
• Unterstrichen (U): Unterstreicht Text, was häufig für Hyperlinks verwendet wird.
• Durchgestrichen (S): Zeichnet eine Linie durch den Text, was für Bearbeitungen oder entfernte Inhalte nützlich ist.

5. Erweiterte Textgestaltung (Drei-Punkte-Menü)

Wenn Sie auf die drei Punkte in der Symbolleiste klicken, werden zusätzliche Optionen eingeblendet:

• Tiefgestellt: Setzt Text unter die Grundlinie (nützlich für Fußnoten oder chemische Formeln).
• Hochgestellt: Setzt Text über die Grundlinie (häufig für Exponenten oder Ordnungszahlen verwendet).
• Formatierung entfernen: Entfernt alle angewendeten Formatierungen und setzt den Text auf seinen Standardstil zurück.

6. Text- und Hintergrundfarbe

• Textfarbe: Klicken Sie auf die Schaltfläche „Textfarbe“, um eine Farbe aus einer Palette auszuwählen oder einen Hex-Code für eine präzise Steuerung der Textfarbe einzugeben.
• Hintergrundfarbe: Wählen Sie eine Hintergrund- bzw. Hervorhebungsfarbe für Ihren Text aus.

7. Textausrichtung

Richten Sie Ihren Text innerhalb des Blocks aus:

• Links ausrichten: Richtet den Text links aus.
• Zentrieren: Zentriert den Text.
• Rechts ausrichten: Richtet den Text rechts aus.
• Blocksatz: Verteilt den Text gleichmäßig über die Breite des Blocks.

8. Listen

Erstellen Sie nummerierte und Aufzählungslisten:

• Aufzählungsliste einfügen/entfernen: Fügt Aufzählungspunkte hinzu oder entfernt sie.
• Nummerierte Liste einfügen/entfernen: Fügt eine nummerierte Liste hinzu oder entfernt sie.

9. Zeilenumbruch

Aktivieren oder deaktivieren Sie den Zeilenumbruch innerhalb des Textblocks. Wenn diese Option aktiviert ist, werden lange Textzeilen automatisch in die nächste Zeile umgebrochen.

10. Einzug

Passen Sie den Einzug Ihres Textes an:
- **Einzug vergrößern**: Verschiebt den Text weiter vom Rand weg, was für Unterpunkte oder Zitate nützlich ist.
- **Einzug verkleinern**: Verringert den Einzug und bringt den Text näher an den linken Rand.
![Texteinzug](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Hyperlink einfügen

Erfahren Sie, wie Sie Hyperlinks in Ihre E-Mail-Inhalte einfügen, bearbeiten und verwalten.

Schritte zum Hinzufügen oder Bearbeiten eines Links

a) Text markieren

Wählen Sie den Text aus, den Sie in einen Hyperlink umwandeln möchten.

b) Auf das Linksymbol klicken

Klicken Sie in der Textsymbolleiste auf das Linksymbol.

c) Link im Einstellungsbereich bearbeiten

Der Einstellungsbereich auf der rechten Seite wird mit Linkoptionen angezeigt:

• Linkfeld: Geben Sie die URL ein oder wählen Sie eine vordefinierte Option aus.
• Tag: Fügen Sie Tags hinzu, um Abonnenten zu kennzeichnen oder Automatisierungen auszulösen.

Links nach dem Versand korrigieren

Es gibt kaum etwas Ärgerlicheres, als eine neue Kampagne an Ihre 2.365 Abonnenten zu senden und anschließend festzustellen, dass einer der Links aufgrund eines einfachen Tippfehlers nicht funktioniert. Auf Wiedersehen, Black-Friday-Verkäufe!

Glücklicherweise können Sie fehlerhafte Links korrigieren – sogar nachdem die E-Mail bereits an Ihre Abonnenten gesendet wurde.

a) Kampagne anzeigen

Suchen Sie die gesendete Kampagne in der Übersicht, klicken Sie auf die drei Punkte und wählen Sie Kampagne anzeigen.

b) Links oder Tags ändern

Scrollen Sie in den Kampagnendetails zur Linkliste, um:

• Linkziele zu aktualisieren: Korrigieren Sie falsche URLs.
• Tags zu verwalten: Fügen Sie Tags für Automatisierungen hinzu oder entfernen Sie sie.

Hinweis: Stellen Sie sicher, dass Klick-Tracking in den Kampagneneinstellungen aktiviert ist, um die Funktion zur Neuausrichtung von Links zu verwenden.

Linkdarstellung anpassen

Im Einstellungsbereich auf der rechten Seite können Sie die Darstellung des Links anpassen:

• Linkfarbe: Wählen Sie eine Farbe aus oder geben Sie einen Hex-Code ein.

• Links unterstreichen: Aktivieren oder deaktivieren Sie Unterstreichungen für ein klareres Erscheinungsbild.

12. Personalisierungs-Tags

Verwenden Sie Personalisierungs-Tags, um dynamische Inhalte wie den Vornamen des Empfängers oder andere benutzerdefinierte Felder hinzuzufügen.

• Öffnen Sie das Dropdown-Menü Personalisierungs-Tags in der Symbolleiste, um gängige Felder wie Vorname, E-Mail oder Land auszuwählen, oder definieren Sie benutzerdefinierte Felder, um E-Mails für jeden Empfänger individuell anzupassen.

13. Emojis

Verleihen Sie Ihrem Text durch Emojis mehr visuelle Wirkung.

• Klicken Sie auf das Emojisymbol in der Symbolleiste, um eine kategorisierte Liste von Emojis zu öffnen und bequem darin zu stöbern.
• Hinweis zur Kompatibilität: Testen Sie E-Mails in bestimmten Clients wie Outlook, da einige Emojis möglicherweise nicht korrekt angezeigt werden.

14. Tabelle und Sonderzeichen

Klicken Sie am Ende der Symbolleiste auf die drei Punkte, um weitere erweiterte Optionen anzuzeigen.

Tabelle einfügen

Erstellen und passen Sie Tabellen an, um Ihr E-Mail-Layout zu verbessern.

• Legen Sie Zeilen, Spalten, Zellabstand, Innenabstand und Rahmenstärke nach Bedarf fest.

Sonderzeichen einfügen

Ergänzen Sie Ihren Text um Symbole, Zeichen mit Akzent und andere nicht standardmäßige Zeichen.

• Öffnen Sie die Option Sonderzeichen, um eine große Auswahl an Zeichen zu durchsuchen.

Zusätzliche Einstellungen für Textblöcke (rechter Bereich)

Der rechte Bereich bietet umfassende Kontrolle über das Erscheinungsbild und die Funktionalität Ihrer Textblöcke. Folgende Einstellungen sind verfügbar:

1. Textfarbe

Legen Sie die Textfarbe mithilfe der Farbauswahl oder durch Eingabe eines Hex-Codes fest.

2. Hintergrundfarbe

Legen Sie eine individuelle Hintergrundfarbe für den Textblock fest. Standardmäßig ist der Hintergrund transparent.

3. Linkspezifische Einstellungen

Wenn der Textblock Links enthält, werden zusätzliche Optionen in den Einstellungen angezeigt:

• Linkfarbe: Passen Sie die Farbe von Links mithilfe der Farbauswahl oder eines Hex-Codes an.

• Links unterstreichen: Schalten Sie die Unterstreichung für Links innerhalb des Textblocks ein oder aus.

• Linkbearbeitung: Wählen Sie im Inhaltsbereich einen Link aus, um seine URL im Einstellungsbereich zu bearbeiten. Über das Dropdown-Menü mit der Bezeichnung „Tags“ können Sie dem Link außerdem Tags zuweisen oder vorhandene Tags aktualisieren.

4. Ausrichtung

Richten Sie den Textblock innerhalb seines Containers aus: Links, Zentriert oder Rechts.

5. Feste Höhe

Legen Sie durch Aktivieren dieser Option eine feste Höhe für den Textblock fest. Sie können auch die vertikale Textausrichtung steuern: Oben, Mitte oder Unten.

6. Zeilenabstand

Steuern Sie den Abstand zwischen Textzeilen. Wählen Sie zwischen Eng, Normal oder Weit.

7. Innenabstand

Passen Sie den Abstand rund um den Textblock an. Wenden Sie einen einheitlichen Innenabstand an oder passen Sie jede Seite individuell an: Oben, Unten, Links und Rechts.

8. Ankerlinks

Erstellen Sie Ankerlinks, damit Leser zu bestimmten Abschnitten Ihrer E-Mail springen können. Beachten Sie, dass einige E-Mail-Clients keine Ankerlinks unterstützen.

Schaltflächenblock

Mit dem Schaltflächenblock können Sie eine anklickbare Schaltfläche zu Ihrer E-Mail hinzufügen und deren Funktion und Stil individuell anpassen.

Linkeinstellungen

Die Option Link bestimmt, welche Aktion ausgelöst wird, wenn ein Empfänger auf die Schaltfläche klickt.

Verfügbare Linktypen

• Normaler Website-Link (HTTP oder HTTPS): Leitet den Nutzer zu einer Webseite weiter.
• E-Mail-Link: Öffnet den E-Mail-Client des Nutzers, um eine neue E-Mail zu verfassen.
• Dateilink (FTP, FTPS): Verweist auf eine Datei auf einem FTP-Server.
• Skype: Startet einen Skype-Anruf oder -Chat.
• Telefon (tel): Startet auf kompatiblen Geräten einen Telefonanruf.
• SMS: Öffnet die Nachrichten-App mit einer vorausgefüllten Empfängernummer.
• Viber: Öffnet die Viber-App für Nachrichten oder Anrufe.
• Anderer Protokolltyp: Geben Sie ein benutzerdefiniertes Protokoll an, das oben nicht aufgeführt ist.

Optionen für Social Sharing

Sie können die Schaltfläche auch für das Teilen in sozialen Netzwerken oder per E-Mail einrichten:

• Facebook
• X (ehemals Twitter)
• LinkedIn
• Pinterest
• E-Mail-Sharing

URL-Feld

Neben dem Linktyp können Sie im URL-Feld (das normalerweise mit https:// beginnt) die konkrete Adresse eingeben, die dem Linktyp entspricht.

Schaltflächenbeschriftung

Passen Sie die Beschriftung der Schaltfläche an Ihren Call-to-Action an. Die Standardbeschriftung lautet „Schaltfläche“, Sie können sie jedoch beispielsweise in „Mehr erfahren“, „Jetzt abonnieren“ oder „Jetzt einkaufen“ ändern.

Textstil

Mit den Einstellungen für den Textstil können Sie das Erscheinungsbild des Schaltflächentextes anpassen.

Schriftart auswählen

Wählen Sie aus einer Vielzahl von Standardschriftarten, darunter:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Für nicht standardmäßige Schriftarten stehen außerdem folgende Optionen zur Verfügung:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

Oben in der Schriftartenliste hilft Ihnen ein Suchfeld, schnell eine bestimmte Schriftart zu finden.

Schriftgröße und Formatierung

• Schriftgröße: Wählen Sie je nach gewünschter Wirkung des Schaltflächentextes einen Wert zwischen 8 und 72.
• Textformatierung: Wenden Sie mithilfe der Symbole „B“ oder „I“ die Formatierungen Fett oder Kursiv an, um den Schaltflächentext hervorzuheben.

Farbeinstellungen

Passen Sie das Erscheinungsbild der Schaltfläche durch Änderung ihrer Farbeinstellungen an.

1. Schaltflächenfarbe: Ändern Sie die Hintergrundfarbe der Schaltfläche. Der Standardwert ist Grün (#31cb4b). Verwenden Sie das Hex-Code-Feld oder die Farbauswahl, um eine neue Farbe festzulegen.

2. Textfarbe: Legen Sie die Textfarbe der Schaltfläche fest. Der Standardwert ist Weiß (#ffffff). Wählen Sie für eine gute Lesbarkeit eine Farbe mit ausreichendem Kontrast zum Hintergrund der Schaltfläche.

3. Hintergrundfarbe: Passen Sie den Hintergrund des Schaltflächencontainers an. Standardmäßig ist er transparent, Sie können ihn jedoch ändern, damit sich die Schaltfläche stärker vom E-Mail-Hintergrund abhebt.

Eckenradius

Steuern Sie die Rundung der Schaltflächenecken mithilfe der Einstellung Eckenradius.

• Standardwert: 30 (mäßig abgerundete Ecken).
• Bereich: 0 (quadratische Ecken) bis 100 (pill-förmige Schaltfläche).

Hinweis: Damit abgerundete Ecken in Microsoft Outlook korrekt angezeigt werden, aktivieren Sie die Option „Outlook-Unterstützung“ im Tab Erscheinungsbild.

Ausrichtung

Positionieren Sie die Schaltfläche innerhalb ihres Inhaltsbereichs mithilfe der Einstellung Ausrichtung.

• Optionen: Links, Zentriert, Rechts.
• Häufige Verwendung: Zentrierte Ausrichtung für mehr Hervorhebung, linke oder rechte Ausrichtung für ein konsistentes Design.

Feste Höhe

Aktivieren Sie die Option Feste Höhe, um gleichbleibende Schaltflächenabmessungen zu gewährleisten.

1. Standard: Deaktiviert.
2. Mindesthöhe: 44 Pixel.
3. Vertikale Inhaltsausrichtung: Wenn die feste Höhe aktiviert ist, können Sie den Inhalt der Schaltfläche für eine präzise Positionierung Oben, in der Mitte oder Unten ausrichten.

Schaltfläche mit Symbol

Mit der Option Schaltfläche mit Symbol können Sie neben dem Schaltflächentext ein Symbol anzeigen. Das verbessert die visuelle Wirkung und unterstützt den Call-to-Action. Diese Funktion ist standardmäßig deaktiviert.

• Unterstützte Formate: Laden Sie Symbole im Format PNG, JPG oder GIF mit einer maximalen Dateigröße von 2 MB hoch.
• Position des Symbols: Wählen Sie, ob das Symbol Links oder Rechts neben dem Schaltflächentext angezeigt werden soll.

Hinweis: Symbole werden in bestimmten Versionen von Microsoft Outlook unter Windows nicht angezeigt, darunter:

• Outlook 2002, 2007, 2010, 2013, 2016 und 2019. Diese Einschränkung ist darauf zurückzuführen, wie diese E-Mail-Clients HTML-E-Mails darstellen. Berücksichtigen Sie dies, wenn ein großer Teil Ihrer Zielgruppe diese Clients verwendet.

Rahmeneinstellungen

Passen Sie die Rahmen der Schaltfläche an, um ihr zusätzlichen Stil und mehr Hervorhebung zu verleihen.

• Rahmenbreite: Legen Sie die Breite für jede Seite (links, rechts, oben und unten) individuell fest, bis zu 40 Pixel.
• Rahmenstil: Wählen Sie zwischen Durchgezogen, Gestrichelt oder Gepunktet.
• Rahmenfarbe: Verwenden Sie die Farbauswahl oder geben Sie einen Hex-Code ein, um die Rahmenfarbe an Ihre Marke oder Ihr Design anzupassen.

Innenabstand

Passen Sie den Abstand innerhalb der Schaltfläche zwischen dem Inhalt (Text und Symbol) und dem Schaltflächenrahmen an.

• Anpassungsoptionen: Legen Sie Werte für den Innenabstand auf der linken, rechten, oberen und unteren Seite fest, bis zu maximal 99 Pixel.
• Auswirkung: Der Innenabstand beeinflusst die Gesamtgröße der Schaltfläche und die Position des Inhalts innerhalb der Schaltfläche.

Außenabstand

Steuern Sie den Abstand außerhalb der Schaltfläche, um ihre Position relativ zu anderen Elementen im E-Mail-Layout anzupassen.

• Anpassungsoptionen: Legen Sie Werte für den Außenabstand auf der linken, rechten, oberen und unteren Seite fest, bis zu maximal 40 Pixel.
• Verwendungszweck: Verhindert, dass die Schaltfläche zu nah an anderen Inhalten oder den Rändern der E-Mail erscheint.

Ankerlink hinzufügen

Verwenden Sie Ankerlinks, um Leser zu bestimmten Abschnitten innerhalb derselben E-Mail zu führen. Das ermöglicht eine schnelle Navigation in längeren Newslettern.

• Ankername: Definieren Sie ein Ziel innerhalb der E-Mail und verknüpfen Sie die Schaltfläche mit diesem Anker. Beim Anklicken scrollt die E-Mail zum angegebenen Abschnitt, was die Navigation verbessert.

Wichtig: Ankerlinks werden von bestimmten E-Mail-Clients nicht unterstützt, darunter:

• Gmail-App für iOS
• Apple Mail für iOS
• Outlook-App für Android
• Outlook-App für macOS
• AMP-E-Mails

Testen Sie Ihre E-Mail gründlich, um die Funktion in verschiedenen E-Mail-Clients sicherzustellen und zu entscheiden, ob diese Funktion für Ihre Zielgruppe geeignet ist.

Abstandhalter-Block

Mit dem Abstandhalter-Block können Sie innerhalb Ihrer E-Mail-Inhalte anpassbaren Abstand hinzufügen und dessen Größe, Ausrichtung, Erscheinungsbild und Innenabstand steuern. Im Folgenden werden die beiden Arten von Abstandhaltern erläutert: Normaler Abstandhalter und Dynamischer Abstandhalter.

1. Normaler Abstandhalter

Der Normale Abstandhalter ist ein Linienelement, das Abschnitte Ihrer E-Mail optisch voneinander trennt.

Wichtige Einstellungen

1. Linienstärke und -stil Passen Sie Stärke, Stil und Farbe der Linie an:

   • Stärke: Passen Sie sie mit den Schaltflächen + und - an (Ausgangswert: 1).
   • Stil: Wählen Sie zwischen durchgezogen, gestrichelt oder gepunktet.
   • Farbe: Legen Sie mithilfe eines Hex-Codes oder der Farbauswahl eine individuelle Farbe fest (Standard: #cccccc).

2. Breite Legen Sie fest, wie weit sich die Abstandhalterlinie über Ihren Inhalt erstreckt. Passen Sie die Breite in Pixeln mit den Schaltflächen + und - an.

3. Ausrichtung Richten Sie die Linie links, zentriert oder rechts aus, passend zu Ihrem Layout.

4. Innenabstand Steuern Sie den Innenabstand rund um den Abstandhalter:

   • Standard: Der Innenabstand ist auf allen Seiten auf 20 gesetzt.
   • Verwenden Sie den Schalter Mehr, um den Innenabstand für einzelne Seiten festzulegen:
     • Oben
     • Rechts
     • Unten
     • Links

Verwendungszweck

Der Normale Abstandhalter eignet sich ideal für klare, optische Trennungen zwischen Abschnitten Ihrer E-Mail und sorgt für ein übersichtliches und professionelles Layout.

2. Dynamischer Abstandhalter

Der Dynamische Abstandhalter ist ein unsichtbarer Block mit Leerraum, der innerhalb Ihres E-Mail-Layouts für mehr Freiraum sorgt.

Wichtige Funktionen

1. Höhe anpassen Passen Sie die Höhe direkt im Inhaltsbereich oder über das Bedienfeld mithilfe der Schaltflächen + und - an. Die Höhe bestimmt, wie viel vertikaler Abstand zwischen den Abschnitten eingefügt wird.

2. Hintergrundfarbe Standardmäßig hat der Abstandhalter einen transparenten Hintergrund, Sie können jedoch mithilfe eines Hex-Codes oder der Farbauswahl eine individuelle Hintergrundfarbe festlegen. Dadurch kann der Abstandhalter bei Bedarf als sichtbarer Block fungieren.

3. Responsives Verhalten Die Option Responsiver Abstandhalter sorgt dafür, dass sich der Abstandhalter dynamisch an unterschiedliche Bildschirmgrößen anpasst und auf allen Geräten ein optimales Layout ermöglicht. Diese Funktion ist standardmäßig aktiviert.

Wichtige Unterschiede zwischen normalen und dynamischen Abstandhaltern

• Dynamischer Abstandhalter: Fügt Leerraum ohne sichtbare Linie hinzu.
• Normaler Abstandhalter: Enthält linienspezifische Einstellungen wie:
  • Linien-breite
  • Ausrichtung
  • Linien-stile
  • Innenabstand

Der Dynamische Abstandhalter unterstützt diese Funktionen nicht und dient ausschließlich der Trennung ohne visuelle Elemente.

3. Ankerlink hinzufügen

Auf beide Abstandhaltertypen können Ankerlinks angewendet werden. Dadurch können Nutzer von einem anderen Teil der E-Mail direkt zur Position des Abstandhalters navigieren. Dies ist besonders nützlich für die Navigation innerhalb längerer Newsletter.

Hinweis: Ankerlinks werden von bestimmten E-Mail-Clients nicht unterstützt, darunter:

• Microsoft Outlook
• Gmail (auf Mobilgeräten)

Videoblock

Mit dem Videoblock können Sie Videos in Ihre E-Mail einbetten und ihr Erscheinungsbild sowie Verhalten anpassen. Er unterstützt Videolinks von Plattformen wie YouTube und Vimeo und bietet Flexibilität und Kontrolle darüber, wie das Video dargestellt wird.

1. Link zum Video

Fügen Sie die Video-URL in das Feld Link zum Video ein. Unterstützte Plattformen sind YouTube, Vimeo und andere einbettbare Dienste.

• Automatisches Verhalten: Wenn eine gültige URL hinzugefügt wird:

  • wird automatisch ein Vorschaubild mithilfe der Miniaturansicht des Videos auf der jeweiligen Plattform erstellt.
  • wird das Feld Alternativtext automatisch mit dem Videotitel oder der Beschreibung (falls verfügbar) ausgefüllt.

• Bearbeitbare Felder: Sie können das generierte Vorschaubild und den Text bei Bedarf manuell bearbeiten oder ersetzen.

2. Alternativtext

Das Feld Alternativtext sorgt für Barrierefreiheit, indem eine Beschreibung des Videos angezeigt wird, wenn es nicht geladen werden kann.

• Wird automatisch ausgefüllt, wenn eine unterstützte Video-URL hinzugefügt wird.
• Kann an Ihre Inhaltsanforderungen angepasst werden.

3. Benutzerdefinierte Miniaturansicht

Laden Sie ein individuelles Bild hoch, um die standardmäßige Videovorschau zu ersetzen.

• So aktivieren Sie die Funktion: Aktivieren Sie die Option Benutzerdefinierte Miniaturansicht.
• Unterstützte Formate: PNG, JPG oder GIF.
• Wann verwenden: Ersetzen Sie die generierte Miniaturansicht, wenn sie nicht zu Ihrem E-Mail-Design passt.

4. Wiedergabeschaltfläche

Passen Sie die eingeblendete Wiedergabeschaltfläche für die Videominiaturansicht an.

• Verfügbare Optionen:
  • Wählen Sie zwischen Wiedergabeschaltflächenstilen von YouTube, Vimeo oder anderen Anbietern.
  • Wählen Sie „Keine“, um die Wiedergabeschaltfläche vollständig auszublenden.

5. Größe

Passen Sie die Abmessungen des Videos an Ihr E-Mail-Design an.

• Breite und Höhe: Verwenden Sie die Schaltflächen + und - oder geben Sie Werte manuell ein, um die Größe festzulegen.
• Responsives Design: Stellen Sie sicher, dass das Video auf verschiedenen Geräten nahtlos dargestellt wird.

6. An Breite anpassen

Aktivieren Sie den Schalter An Breite anpassen, damit das Video automatisch die Breite seines Containers ausfüllt. So bleibt das Video auf verschiedenen Geräten responsiv.

7. Responsives Bild

Der Schalter Responsives Bild sorgt dafür, dass sich die Videominiaturansicht auf Mobilgeräten an die Bildschirmbreite anpasst.

• Hinweis: Die Responsivität hängt von der Unterstützung durch das Gerät und den E-Mail-Client ab.

8. Ausrichtung

Verwenden Sie die Einstellung Ausrichtung, um die horizontale Position des Videos im Block zu steuern:

• Links: Richtet das Video links aus.
• Zentriert: Zentriert das Video.
• Rechts: Richtet das Video rechts aus.

9. Mobilgerätspezifische Optionen

Passen Sie das Verhalten und Erscheinungsbild des Videos auf Mobilgeräten an:

1. Element auf Mobilgeräten ausblenden Blenden Sie den Videoblock bei Bedarf auf Mobilgeräten aus.

   • Hinweis: Diese Funktion setzt die Unterstützung von Media Queries voraus und funktioniert möglicherweise nicht in allen E-Mail-Clients.

2. Mobiler Innenabstand Passen Sie den Abstand rund um das Video für die Darstellung auf Mobilgeräten an.

   • Verwenden Sie den Schalter Mehr, um individuelle Werte für den Innenabstand festzulegen:
     • Oben
     • Rechts
     • Unten
     • Links

10. In AMPHTML oder HTML einschließen

Wählen Sie, in welchen E-Mail-Versionen der Videoblock angezeigt werden soll:

• AMPHTML und HTML
• Nur AMPHTML
• Nur HTML

Mit dieser Option wird sichergestellt, dass das Video abhängig von der zugestellten E-Mail-Version korrekt eingebunden wird.

HTML-Block

Mit dem HTML-Block können Sie benutzerdefinierten HTML- und CSS-Code in Ihre E-Mail einfügen. Er bietet Flexibilität für erweiterte Anpassungen und berücksichtigt gleichzeitig die Kompatibilität mit E-Mail-Clients. Ganz gleich, ob Sie ein einzelnes HTML-Element hinzufügen oder eine vollständige E-Mail gestalten – mit diesem Block können Sie individuelle Designs erstellen.

1. Code-Editor-Oberfläche

Wenn Sie den HTML-Block auswählen, wird im Inhaltsbereich ein schwarzes Code-Editor-Fenster angezeigt. In diesem Editor können Sie benutzerdefinierten Code schreiben, einfügen oder bearbeiten. Der Editor umfasst zwei Bereiche:

• HTML-Bereich: Fügen Sie die HTML-Struktur Ihrer E-Mail hinzu oder bearbeiten Sie sie.
• CSS-Bereich: Öffnen Sie einen separaten CSS-Editor, um Ihre Inhalte zu gestalten.

2. Schriftgröße anpassen

Passen Sie die Schriftgröße des Codes im Editor an, um die Lesbarkeit zu verbessern:

• Verwenden Sie die Schaltfläche A+, um die Schriftgröße zu erhöhen.
• Verwenden Sie die Schaltfläche A-, um die Schriftgröße zu verringern.

3. Größe des Editorfensters anpassen

Ändern Sie die Größe des Code-Editorfensters entsprechend Ihren Arbeitsvorlieben:

• So passen Sie die Größe an:
  • Bewegen Sie den Mauszeiger über die drei Punkte oben in der Mitte des Editorfensters.
  • Ziehen Sie den Schieberegler nach oben oder unten, um die Größe des Editors zu erhöhen oder zu verringern.

Diese Funktion ist besonders nützlich, wenn Sie größere oder detailliertere Codeblöcke verwalten.

4. CSS-Editor

Mit dem CSS-Editor können Sie die Stile für Ihre HTML-Inhalte verwalten. Er ist über eine Schaltfläche oben rechts im Code-Editor erreichbar.

Wichtige Hinweise:

• Eingeschränkte Unterstützung: Viele E-Mail-Clients unterstützen erweiterte CSS-Funktionen wie Flexbox, Grid oder Media Queries nicht.
• Bei den Grundlagen bleiben: Verwenden Sie für maximale Kompatibilität einfaches Inline-CSS.
• Vorkonfigurierte Stile: Vermeiden Sie das Löschen vorkonfigurierter Stile, da diese eine korrekte Darstellung in den wichtigsten E-Mail-Clients gewährleisten.

5. Kompatibilität mit E-Mail-Clients

E-Mail-HTML erfordert besondere Aufmerksamkeit, da viele E-Mail-Clients veraltete Rendering-Engines verwenden.

Wichtige Richtlinien:

• Verwenden Sie für eine bessere Unterstützung tabellenbasierte Layouts statt auf <div> basierender Layouts.
• Vermeiden Sie erweiterte CSS-Funktionen wie Animationen, Flexbox oder Grid.
• Rechnen Sie mit uneinheitlichem Verhalten bei Media Queries und kleineren CSS-Eigenschaften.
• Testen: Testen Sie E-Mails immer in mehreren Clients (z. B. Gmail, Outlook, Apple Mail), um eine korrekte Darstellung sicherzustellen.

6. Innenabstand

Mit der Einstellung Innenabstand wird der Abstand rund um Ihre HTML-Inhalte angepasst:

• Standard-Innenabstand: Standardmäßig auf 0 gesetzt.
• Individueller Innenabstand: Aktivieren Sie den Schalter Mehr, um den Innenabstand für einzelne Seiten anzupassen:
  • Oben
  • Rechts
  • Unten
  • Links

Diese Funktion eignet sich ideal, um HTML-Inhalte innerhalb des E-Mail-Layouts auszurichten.

7. Ankerlink hinzufügen

Mit der Funktion Ankerlink hinzufügen können Sie an anderer Stelle in der E-Mail einen anklickbaren Link erstellen, der zum HTML-Block führt.

So verwenden Sie die Funktion:

• Aktivieren Sie die Option und geben Sie im Feld einen Ankernamen ein.

Einschränkungen:

• Ankerlinks werden von einigen E-Mail-Clients nicht unterstützt, darunter:
  • Gmail-App für iOS
  • Apple Mail für iOS
  • Outlook-App (Android und macOS)
  • AMP-E-Mails

8. Benutzerdefiniertes HTML schreiben

Der HTML-Editor ist zum Schreiben oder Einfügen der benutzerdefinierten HTML-Struktur Ihrer E-Mail vorgesehen.

Bewährte Vorgehensweisen:

• Verwenden Sie einfaches, breit unterstütztes HTML.
• Vermeiden Sie komplexe Layouts oder Elemente wie <div>.
• Halten Sie sich an tabellenbasierte Designs, um eine bessere Kompatibilität sicherzustellen.

9. Tipps für den Erfolg

1. Klein anfangen: Verwenden Sie den HTML-Block für bestimmte Abschnitte, wenn Sie neu in der E-Mail-Entwicklung sind.
2. Code validieren: Stellen Sie sicher, dass Ihr HTML den Anforderungen der E-Mail-Clients entspricht.
3. Gründlich testen: Verwenden Sie Tools, um Ihre E-Mail in mehreren Clients und auf verschiedenen Geräten in der Vorschau anzuzeigen und zu testen.