Lukas G.
WordPress ist in hohem Maße anpassbar und eine Möglichkeit, die visuelle Attraktivität Ihrer Website zu verbessern, besteht darin, Hover-Effekte hinzuzufügen. Dabei handelt es sich um kleine Animationen, die abgespielt werden, wenn ein Besucher mit der Maus über ein bestimmtes Element fährt.
Diese eignen sich hervorragend, um die Aufmerksamkeit des Lesers zu fesseln, während er durch die Seite scrollt. Daher eignen sie sich ideal für Elemente wie Schaltflächen oder Bilder im Zusammenhang mit Verkäufen oder besonderen Funktionen, die Sie hervorheben möchten.
Heute zeige ich, wie man mit dem Hover-Effekt-Plugin jedem Element in WordPress eine Hover-Animation hinzufügt.
Warum Hover-Effekte zu WordPress hinzufügen?
Hover-Effekte heben wichtige Elemente auf einer Seite wie Schaltflächen, Banner und mehr hervor. Noch wichtiger ist, dass sie ein klares Zeichen dafür liefern, was auf Ihrer Website anklickbar ist, was sie zu einer hervorragenden Ergänzung für alle überfüllten Seiten macht.
Natürlich kann ein Hover-Effekt manchmal tatsächlich zusätzliche Details liefern.
Wenn Sie beispielsweise mit der Maus über einen Link auf einer Seite oder einem Beitrag fahren, wird auf den meisten Websites die URL angezeigt. Obwohl dies nicht auffällig ist, handelt es sich dennoch um ein Beispiel für einen Schwebeeffekt. Eine andere Möglichkeit wäre die Anzeige von Alternativtext oder einer Bildunterschrift.
Daher sind Hover-Effekte nützlich, egal ob Sie nur nach ästhetischen Höflichkeiten suchen oder wichtige Informationen anzeigen möchten.
So fügen Sie Hover-Effekte in WordPress hinzu
Schritt 1: Hover-Effekte installieren
Während Sie CSS problemlos zum Hinzufügen von Hover-Effekten in WordPress verwenden könnten, könnten viele Anfänger damit Schwierigkeiten haben. Stattdessen empfehle ich die Verwendung von Hover-Effekte Plugin. Dieses Plugin stellt den gesamten CSS-Code bereit, den Sie verwenden werden.
Sie müssen also lediglich die Kopie kopieren und in den zusätzlichen CSS-Abschnitt des gewünschten Blocks einfügen. Es ist wirklich einfach zu verwenden und bietet Ihnen Zugriff auf vierzig verschiedene Hover-Effekte, die in jedem WordPress-Block oder Menü verwendet werden können.
Klicken wir zunächst auf „Plugins“ und wählen Sie im linken Admin-Bereich die Option „Neu hinzufügen“.
Suchen Sie im verfügbaren Suchfeld nach Hover-Effekten. Dadurch werden zusätzliche Plugins aufgerufen, die für Sie hilfreich sein könnten.
Scrollen Sie nach unten, bis Sie das Hover Effects-Plugin finden, klicken Sie auf die Schaltfläche „Jetzt installieren“ und aktivieren Sie das Plugin zur Verwendung.
Schritt 2: Einen Effekt kopieren
Wie gesagt, das Einzige, was Sie tun müssen, ist, CSS-Code zu kopieren und einzufügen, was extrem einfach ist. Das Plugin fügt eine spezielle Seite hinzu, auf der Sie sehen können, was jeder Effekt bewirkt, und den erforderlichen Code kopieren können.
Klicken Sie im linken Admin-Bereich auf Wow-Company und wählen Sie die Option Hover-Effekte.
Oben sehen Sie einige Optionen. Sie befinden sich derzeit auf der Registerkarte „Beispiele“. Die anderen enthalten eine FAQ, einen Link zu den Support-Foren, einen Link zur Bewertungsseite und deren Facebook-Seite.
Sie benötigen lediglich die Registerkarten Beispiele und FAQ.
Hier können Sie alle Hover-Stile anzeigen. Es gibt drei Stile: 2D-Übergänge, Schatten- und Glühübergänge und Locken. Sie müssen lediglich mit der Maus über den Effekt fahren, um ihn in Aktion zu sehen.
Und denken Sie daran, dass diese Effekte auf jeden Block in Gutenberg angewendet werden können. Klicken Sie auf den Effekt, um das CSS zu kopieren.
Notiz: Wenn Sie mehrere Hover-Effekte verwenden möchten, empfehle ich, diese Seite in einem neuen Tab zu öffnen. Auf diese Weise können Sie einfach die Registerkarten austauschen, um einen neuen Hover-Effekt zum Hinzufügen zu finden. Es ist eine große Zeitersparnis.
Schritt 3: Hover-Effekte zu Blöcken hinzufügen
Gehen Sie zu einem beliebigen Beitrag oder einer Seite auf Ihrer Website, zu der Sie einen Hover-Effekt hinzufügen möchten, oder erstellen Sie zu Testzwecken einen neuen. Klicken Sie dort auf einen beliebigen Block im Editor und erweitern Sie das Einstellungsrad.
Notiz: Dieser Vorgang ist für Widgets in WordPress identisch. Schließlich sind alle Widgets nur Blöcke.
Klicken Sie auf die erweiterten Einstellungen.
Zu diesen Einstellungen gehören das Titelattribut, der HTML-Anker und zusätzliche CSS-Klassen. Fügen Sie den Hover-Effekt in das Textfeld „Zusätzliche CSS-Klassen“ ein.
Sie können den Hover-Effekt nicht im Editor sehen. Stattdessen können Sie entweder auf die Schaltfläche „Vorschau“ klicken, um es anzuzeigen, oder die Änderungen speichern und auf einer Live-Seite anzeigen. Auch diese Effekte wirken auf jeden Block.
Daher ist es derselbe Vorgang, unabhängig davon, ob Sie Hover-Effekte zu einem Bild oder einer Schaltfläche hinzufügen. Denken Sie daran, wenn Sie mehrere Hover-Effekte für eine einzelne Schaltfläche haben, dass Sie jede CSS-Zeile durch ein Komma trennen.
Diese Schaltflächeneffekte sind nicht nur auf Blöcke in WordPress beschränkt, sie können auch auf Menüs angewendet werden, um sie hervorzuheben. Allerdings sind CSS-Klassen standardmäßig nicht aktiviert, daher müssen wir sie zuerst aktivieren.
Klicken Sie auf „Darstellung“ und wählen Sie die Option „Menüs“.
Klicken Sie oben rechts auf Bildschirmoptionen.
Aktivieren Sie das Kontrollkästchen „CSS-Klassen“, um CSS für Menüelemente zu aktivieren.
Auf diese Weise können Sie jedem Menüelement benutzerdefiniertes CSS hinzufügen. Der Schlüssel ist jedoch, dass es sich um einzelne Elemente handelt. Sie können den Effekt nicht jedem Element gleichzeitig hinzufügen. Wenn das also Ihr Ziel war, müssen Sie den Hover-Effekt jedem Menüpunkt einzeln hinzufügen.
Erweitern Sie einen beliebigen Menüpunkt und fügen Sie den Hover-Effekt in das Feld „CSS-Klassen“ ein.
Speichern Sie die Änderungen und Ihr Menü hat nun den Hover-Effekt. Herzlichen Glückwunsch zum Einrichten des Hover Effects-Plugins in WordPress.
Beeinflussen Hover-Effekte die Leistung der Website?
In den meisten Fällen haben Hover-Effekte keinen Einfluss auf die Leistung der Website. Wenn Sie jedoch Hover-Animationen zu bestimmten Elementen hinzufügen, kann dies manchmal die Seiten für den Benutzer verlangsamen.
Nehmen wir zum Beispiel an, Sie haben ein sehr großes Bild. Wenn Sie sich entschieden haben, einen rotierenden Hover-Effekt hinzuzufügen, kann das chaotisch werden. Das Verschieben einer großen Datei auf diese Weise wird nicht empfohlen.
Und ehrlich gesagt ist es schlechtes Design. Eine weitere zu berücksichtigende Sache sind mobile Benutzer.
Obwohl Smartphones sehr leistungsstark geworden sind, nutzt nicht jeder das neueste Modell. Diese Animationen können auf Geräten, die nicht den Anforderungen entsprechen, Probleme verursachen. Aus diesem Grund deaktivieren viele Websites Hover-Effekte für mobile Geräte.
Übertreiben Sie es nicht mit Ihren Hover-Effekten
Das Hinzufügen einer CSS-Animation beim Hover in WordPress ist eine großartige Möglichkeit, Ihrer Website ein wenig Schwung zu verleihen. Doch genau wie es im wirklichen Leben zu viel Glitzer gibt, können auch zu viele Animationseffekte vorhanden sein.
Für manche Besucher kann das kitschig oder amateurhaft wirken. Benutzen Sie nur wenige Effekte und versuchen Sie, sie auf den gleichen Objekttyp anzuwenden. Versuchen Sie vor allem, die ausgefalleneren zu meiden. Niemand möchte, dass ein „Jetzt kaufen“-Button ins Wanken gerät.
Welche Arten von Hover-Animationen verwenden Sie auf Ihrer Website? Zu welchen Seitenelementen fügen Sie Hover-Effekte hinzu?
