Du möchtest z.b. die Hintergrundfarbe eines Buttons ändern, sobald man mit der Maus darüber fährt oder ähnliche Effekte für andere Elemente nutzen. Dann kannst du das mit dem "Hover" Effekt.
Videoanleitung:
Zeitstempel
Wie man Hover Effekte einstellt
Einige Praxisbeispiele und Anwendungen
Was man bei den Effekten beachten sollte
Textanleitung:
Was kann die Einstellung "Hover"
Durch diese Option lassen sich bei so gut wie allen möglichen Einstellungen (Grössen, Farben, Schatten, Hintergrund etc.) speziell Effekte erzielen. Ein "Hover" Effekt bedeutet, dass etwas mit einem bestimmten Element geschieht, sobald man mit der Maus im Browser darüber fährt. Oftmals sieht man diese Effekte z.b. bei Buttons. Diese vergrössern sich, die Hintergrundfarbe wechselt etc. sobald man mit der Maus über den Button fährt.
Man kann jedoch alles mögliche mit einem solchen Effekt bewirken. Hier unten siehst du paar Beispiele:
(auf Bild klicken, um es zu vergrössern)
Wie stelle ich Hover Effekte ein
Einen Hover Effekt kannst du simpel einstellen
Definiere zuerst das Element, die Zeile oder den Abschnitt, bei welchem du einen Hover Effekt erstellen willst
Klicke auf das ⚙️ um in die Einstellungen zu gelangen
Wenn du den Effekt global über alle Elemente einfügen willst, solltest du in die Preset-Einstellungen wechseln. Falls du den Effekt nur lokal an einer bestimmten Stelle möchtest, bleibst du im Lila Bearbeitungsfenster.
Navigiere zur gewünschte Einstellung (Farbe, Grösse, Schatten etc.).
Hier im Beispiel aktivieren wir den Hover-Effekt bei der Button Hintergrundfarbe.Klicke auf das "Maus/Cursor Icon".
Dort wo du dieses Icon findest, kannst du Hover Effekte aktivieren und nutzen.Nun erscheinen zwei Tabs. Eines nennt sich "Desktop". Das andere "Hover".
Bei Desktop stellst du den Wert so ein, wie das Element standardmässig aussehen soll. Wenn du auf Hover wechselst, kannst du dort den Wert definieren, welcher angezeigt werden soll, sobald man über das Element mit der Maus fährt.Klicke auf speichern. Fertig.
Schritt 5: Hover Effekt aktivieren
(auf Bild klicken, um es zu vergrössern)
Schritt 6: Zwischen "Desktop" und "Hover" wechseln
(auf Bild klicken, um es zu vergrössern)
Was sollte ich bei Hover Effekten beachten
Weniger ist mehr.
Die Effekte sind zwar schön und gut. Zu viele dieser Effekte können aber auch eine Website entsprechend unruhig wirken lassen. Daher sollte man die Effekte gewissenhaft einsetzen. Am meisten Sinn machen die Effekte, z.b. bei Buttons und Call to Action's. Also überall wo man etwas verlinkt hat, kann dieser Effekt Sinn machen. Auch Benefits oder wichtige Features, die dem Besucher ins Auge stechen sollen, kann man mit Hover Effekten zusätzlich hervorheben.