Tutorial: Hover Effekts bei Elementor
Möchtest du deine Elementor-Website leicht und schnell interaktiver für deine Websitenbesucher gestalten? Setze Hover-Effekte für deine Website ein. Hover-Effekte sind kleine Animationen, die durch Mausberührung entstehen. So können sich Farbe, Größe, Deckkraft oder Lage der Elemente ändern.
Möchtest du noch weitere Ideen für Animationen bei Elementor sehen, schau dir mein Tutorial zu Hover-Effekten für Bilder an.
7 Ideen für Hover-Effekte für Elementor
Ich habe für dich eine Übersicht der Hover-Effekte, die du leicht bei deiner Elementor-Website umsetzen kannst, vorbereitet. Bevor du irgendwelche Animation davon einsetzt, überlege dir, ob diese sinnvoll sind. Wenn du zu viele davon auf deiner Website nutzt, überforderst deine Websitenbesucher damit.
Hover-Effekt: Farbe ändern
Wende diesen Hover-Effekt an, um einen Link, Button, Navigationspunkt oder eine Spalte/einen Container hervorzuheben. Er passt perfekt, um die Navigation durch die Website zu erleichtern oder Aufmerksamkeit der Besucher auf bestimmte Elemente zu lenken.
Bei Buttons wird es häufig Farbe auf Hoher geändert. So erkennen deine Webseitenbesucher sofort, dass man drauf klicken darf.
Gehe einfach zu Stil und wähle bei Hintergrund Hover aus. Jetzt kannst du eine andere Farbe für Hover auswählen. Außerdem kannst du auch die Länge des Übergangs bei Bildern wählen. Eine Erhöhung des Übergangs lässt die Animation sanfter wirken.
Wenn du oben gezeigten Hover-Effekt auf deiner Website anwenden möchtest, platziere diesen Code unter „Eigenes CSS“ im Bereich „Erweitert“ bei deinem Button:
selector a {
box-shadow: inset 0 0 0 0 #3D3F63;
transition: ease-out 0.7s;
}
selector a:hover {
box-shadow: inset 400px 0 0 0 #3D3F63;
transition: ease-in 0.7s;
}
Für deine Bilder kannst du auch Hover-Effekt anwenden: Du gehst zu Stil, zu Hintergrund und reduzierst zunächst beim CSS Filter die Sättigung auf 0. Bei Hover hingegen behältst du die ursprüngliche Sättigung.
Auf diese Weise erscheinen auf deiner Website schwarz-weiße Bilder. Wenn du aber mit der Maus darüber gehst, werden sie farbig.
Hover Text over Image
Diese Variante ist zwar ein bisschen tricky, bietet aber eine perfekte Möglichkeit um bei der Mausberührung auf ein Bild, einen Text erscheinen zu lassen. Auf diese Weise kannst du Gutscheincodes verstecken oder zusätzlichen Informationen zu einem Bild liefern.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Als erstes füge zu einer Spalte oder einem Container den Text hinzu, der bei Mouseover auftauchen soll. Als Hintergrundbild setze das Bild, das zu sehen wird. Pass die Höhe der Spalte so an, dass das Bild komplett zu sehen sein wird. Anschließend füge einfach diesen Code zu CSS deines Textes:
*Content Show/Hide on Hover*
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
} Hover-Effekt: Rahmen um Elemente
Falls du auf deiner Website etwas hervorheben möchtest und deine Website Designlösungen mit Linien nutzt, setze diese Animation bei Mausberührung ein.
Achte darauf, dass es genug Abstand zwischen deinem Text und einem Rahmen gibt.
Du gehst zu Still und wählst Rahmen aus. Bei Rahmentyp entscheidest du dich für durchgezogen. Die Breite der Rahmen soll im Idealfall mit der Breite der restlichen Linien auf deiner Website übereinstimmen.
Deckkraft (Opacity) auf Hover
Du hast die Wahl zwischen zwei Varianten:
Bei der ersten gehst du zu Stil und anschließend zu Deckkraft. Setze die Deckraft bei normalem Zustand auf 0,6 und bei Hover auf 1. Bei der zweiten Variante kehrst du das Ganz zum: Bei normalem Zustand setze Deckkraft auf 1 und bei Hover auf 0,6.
Hiermit erzeugst du zwei unterschiedliche Effekte für deine Bilder. Probiere aus, was für deine Zweck und dein Design am besten passt.
Zoom on Hover
Wenn du dein Element größer oder kleiner auf Hover machen möchtest, wende folgende Vorgehensweise an:
Bei Buttons gehe am besten zu Stil, bei Animation Mausberührung wähle grow aus.
Bei Bildern und anderen Elementen musst du zu erweitert gehen und transformieren auswählen. Anschließend entscheide dich für Hover und bei Maßstab wähle für dich passende Werte aus. Zahlen unter 1 machen dein Objekt kleiner. Die Zahlen über 1 lassen dein Objekt größer werden.
Hier ist ein gutes Beispiel davon, wie so eine kleine Animation Aufmerksamkeit weckt. Bei Bildern hilft es, Platz zu sparen und trotzdem eine Möglichkeit zu bieten, das Bild genauer anzuschauen.
Hiermit erzeugst du zwei unterschiedliche Effekte für deine Bilder. Probiere aus, was für deine Zweck und dein Design am besten passt.
Borderradius auf Hover
Bei Bildern ist es eine interessante Variante, den Borderradius auf Hover zu verändern. Dies ist nur möglich, wenn wir zu einer Spalte oder zu einem Container das benötigte Bild als Hintergrundbild setzen. Wir passen die Größe des Bilders an. Ich setze häufig die Größe des Bilders als Cover ein.
Bei Stil wähle ich Rahmen aus und setze den Wert beim Rahmenradius auf 5em.
Drehen auf Hover
Du kannst bei Elementor ein beliebigen Element zum Drehen bringen. Gehe einfach bei ausgewähltem Bild zu Erweitert und wähle transformieren aus. Bei Hover entscheide dich für Drehung und setze die passenden Werte.
Die wichtigste Regel bei Hover-Effekten, ist es nicht zu übertreiben. Achte darauf, dass deine Website durch Einsetzen der Effekte an Qualität gewinnt. Wenn du dir nicht sicher bist, verzichte lieber darauf. Bei Buttons und Links sind Hover-Effekte meist zu empfehlen.
Ziele der Hover-Effekte für deine Elementor-Website
Deine Website benutzerfreundlicher zu machen. Wir haben bestimmte Verhaltensmuster und es ist davon auszugehen, dass deine Websitenbesucher schon mehrere Websites vor deiner Website besucht haben. Wir sind gewöhnt, dass Buttons und Links auf Hover sich verändern. Diese Veränderung sendet uns ein Signal, dass wir darauf klicken können. Am häufigsten ändert sich die Farbe von Elementen, wenn man mit der Maus darüber geht.
Deine Websitenbesucher zu informieren – einen Hinweis geben, helfen etwas zu klären. Wenn ich ein Element mit der Maus berühre, erscheinen zusätzliche Informationen.
Die Websitenbesucher motivieren, länger auf der Website zu bleiben – wenn du kleine interessante Überraschungen vorbereitest, weckst du mehr Interesse für deine Website. Deine Websitenbesucher bleiben länger, Google findet deine Website relevanter und somit tauchst du weiter oben in den Suchergebnissen auf. Dafür brauchst du mehr Phantasie und Zeit, aber aus langfristiger Perspektive lohnt es sich.
Dein Design lebendiger zu machen – wenn du gar keine Animationen, GIFs oder Videos auf deiner Website hast, kannst du mit Hover-Effekten deine Website zum Leben erwecken. Einer der letzen Trends der letzen Jahren ist, Websites so zu gestalten, dass unsere Webnutzer damit interagieren können. Hover-Effekten eignen sich zu diesem Zweck hervorragend.
Die Website besser zu strukturieren und Aufmerksamkeit zu lenken- Hover-Effekte bei Elementor helfen dir, bestimmte Elemente hervorzuheben. Wir können auf diese Weise unsere Kunden auf bestimmte Angebote aufmerksam machen, indem wir beispielsweise den Hintergrund einer Spalte ändern.
