Hover-Zustände anpassen

Der Hover-Zustand ist der Zustand, in dem sich ein Button, Text oder Bild verändert, wenn es mit der Maus überfahren wird. Zum Beispiel kann ein Button mit dunkelblauem Hintergrund hellblau werden, wenn die Maus darüber fährt.

Dieser Zustand ist nur in einer Desktop-Umgebung sichtbar: Per Definition kann ein Touchscreen keinen Hover-Zustand anzeigen.

Sie können den Hover-Zustand folgender Elemente ändern:

  • Buttons,
  • Texte,
  • Bilder.

Um diesen Zustand anzupassen, wählen Sie das Element in Ihrer E-Mail aus. Gehen Sie im Reiter "Stile" zur Kategorie "Hover-Zustand".

Für Buttons und Texte

Sie können die Hintergrundfarbe, Textfarbe, Rahmenfarbe und Deckkraft dieser Elemente ändern.

Wenn Sie die Rahmenfarbe beim Hover ändern möchten, müssen die Rahmen zuerst in der Kategorie "Rahmen" eingestellt werden.

Für Bilder

Sie können die Deckkraft, Rahmenfarbe und Hintergrundfarbe (nur sichtbar, wenn das Bild nicht geladen ist) dieser Elemente ändern.

Ein zweites Bild beim Hovern über einem Bild anzeigen

Sie können das Hintergrund-Element verwenden, um das Erscheinen eines zweiten Bildes beim Überfahren mit der Maus zu simulieren.

Schritt 1: Hintergrundbild hinzufügen

Ziehen Sie aus dem Reiter "Elemente" einen Hintergrund per Drag & Drop hinein.

Schritt 2: Ein Bild überlagern

Nach einem Doppelklick auf den Hintergrund ziehen Sie ein Bild darüber. Stellen Sie Höhe und Breite so ein, dass sie exakt mit Ihrem Hintergrundbild übereinstimmen.

Schritt 3: Hover-Zustand konfigurieren (0% Deckkraft)

Wählen Sie dieses überlagerte Bild aus. Stellen Sie in der Kategorie "Hover-Zustand" die Deckkraft auf 0%.

Ergebnis: Beim Hover macht das überlagerte Bild das Hintergrundbild sichtbar.

Wie kompatibel ist der Hover-Zustand in E-Mails?

Der Hover-Zustand existiert nicht für mobile Geräte, wird aber von den meisten Desktop-E-Mail-Clients unterstützt.

Anwendungsfälle

Obwohl der Kreativität keine Grenzen gesetzt sind, hier einige Anwendungsfälle, die bei Email-Builder-Anwendern beobachtet wurden:

  • Leichte Deckkraft auf Buttons anwenden,
  • Eine etwas dunklere oder hellere Button-Farbe anwenden,
  • Kontrastierende Farben anwenden (z.B. kann ein schwarzer Button mit weißem Text zu weiß mit schwarzem Text und Rahmen wechseln),
  • Deckkraft bei Bildern verwenden, die über einem Hintergrund liegen, um ein zweites Bild anzuzeigen.

Bonus: Lernen Sie einige Anwendungsfälle unserer Kunden kennen!