Hover-Zustände anpassen

Der Hover-Zustand ist der Zustand, in dem sich ein Button, Text oder Bild ä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 von Button-, Text- und Bild-Elementen anpassen. Wählen Sie hierfür das Element in Ihrer E-Mail aus, und 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.

Für Bilder

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

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

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

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.

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.

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

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!