Wie verwende ich die Option Benutzerdefiniertes CSS im E-Mail-Editor?
Die Option Benutzerdefiniertes CSS im GetResponse E-Mail-Editor ermöglicht es dir, eigenen CSS-Code hinzuzufügen, um das Erscheinungsbild deiner Nachrichten über die standardmäßigen Design-Tools hinaus anzupassen. Sie bietet dir mehr Flexibilität, um Stile, Abstände und visuelle Effekte fein abzustimmen und an die Identität deiner Marke anzupassen.
Die Option Benutzerdefiniertes CSS ist in den Tarifen Marketer, Creator und MAX (Enterprise) verfügbar. Wenn du diese Option in deinem Konto nicht siehst, solltest du ein Upgrade in Betracht ziehen, um Zugriff auf erweiterte Anpassungsfunktionen zu erhalten.
Was ist benutzerdefiniertes CSS und wie funktioniert es
Benutzerdefiniertes CSS ermöglicht es dir, eigene Stilregeln zu definieren, die auf die gesamte Nachricht oder auf einzelne Nachrichtenelemente angewendet werden. Der in diesem Bereich hinzugefügte Code wird nach den Standardstilen des Editors geladen und hat somit Vorrang vor ihnen.
Du kannst es verwenden, um:
- Farben, Schriftarten und Abstände anzupassen.
- Standardstile von Blöcken oder Buttons zu überschreiben.
- Einfache visuelle Effekte hinzuzufügen, z. B. Hover-Zustände für Links oder abgerundete Ecken bei Bildern.
E-Mail-Clients (z. B. Gmail, Outlook oder Apple Mail) interpretieren CSS unterschiedlich. Einige CSS-Eigenschaften werden möglicherweise nicht wie erwartet dargestellt.
Durch benutzerdefiniertes CSS erzeugte Stile sind in der Nachrichten-Vorschau nicht sichtbar.
So fügst du benutzerdefiniertes CSS zur gesamten Nachricht hinzu
So fügst du benutzerdefiniertes CSS zur gesamten Nachricht hinzu:
- Öffne deine E-Mail im Nachrichten-Editor.
- Klicke im rechten Bereich auf Nachrichtenstil.
- Klappe den Bereich Benutzerdefiniertes CSS auf.
- Füge im angezeigten Editorfenster deinen CSS-Code ein oder tippe ihn ein.
- Klicke auf das Augen-Symbol neben dem Code, um eine Vorschau deiner benutzerdefinierten CSS-Stile anzuzeigen.
So fügst du benutzerdefiniertes CSS zu Nachrichtenelementen hinzu
Du kannst jedes Element im Nachrichten-Editor auswählen (z. B. Abschnitt, Button, Textblock oder Bild) und benutzerdefiniertes CSS nur auf dieses Element anwenden.
- Öffne deine E-Mail im Nachrichten-Editor.
- Klicke auf ein beliebiges Element in deiner Nachricht.
- Aktiviere im rechten Panel den Schieberegler Benutzerdefiniertes CSS hinzufügen.
- Füge deinen CSS-Code ein oder tippe ihn ein.
- Klicke auf das Augen-Symbol, um die Vorschau anzuzeigen.
Wenn du im Editor klickst und einen Punkt (.) eingibst, wird dir die eindeutige ID des Elements angezeigt, z. B.: .elem-image-abcdef1234 { }.
Diese ID kannst du verwenden, um deine benutzerdefinierten Stile gezielt anzuwenden.
Beachte, dass verschiedene Elemente unterschiedliche Selektoren erfordern können. Wenn du z. B. den Text eines Buttons ändern möchtest, solltest du gezielt das Textelement ansprechen:
.elem-text-216196qwerty span { }
Tipps
- Verwende inline-sichere CSS-Eigenschaften (z. B. Farben, Rahmen, Padding) für eine bessere Kompatibilität.
- Füge keinen JavaScript-Code oder externe Dateien ein – diese werden in E-Mails nicht unterstützt.
Support und Einschränkungen
Die Option Benutzerdefiniertes CSS richtet sich an Nutzer mit Kenntnissen in HTML und CSS. Das GetResponse Customer Success Team kann keine Unterstützung beim Schreiben oder Debuggen von benutzerdefiniertem Code leisten.
Wir empfehlen, deine Nachricht in mehreren E-Mail-Clients und auf verschiedenen Geräten zu testen, um sicherzustellen, dass die Styles korrekt dargestellt werden.
Unterschied zwischen benutzerdefiniertem CSS und dem Custom-Code-Block
| Funktion | Benutzerdefiniertes CSS | Custom-Code-Block |
|---|---|---|
| Zweck | Fügt CSS-Stile zur gesamten Nachricht oder zu einzelnen Elementen hinzu | Fügt benutzerdefiniertes HTML direkt in das Nachrichtenlayout ein |
| Geltungsbereich | Gilt für die gesamte Nachricht oder ausgewählte Elemente | Betrifft nur den ausgewählten Block |
| Erlaubter Inhalt | Nur CSS | HTML und Inline-CSS |
| Anwendungsfall | Design- und Stil-Anpassungen | Einbindung benutzerdefinierter Elemente (z. B. Countdown-Timer, Tracking-Pixel) |
