Wie man Hover-Effekte für Bilder in WordPress hinzufügt (5 einfache Wege)

Das Hinzufügen eines Hover-Effekts auf Ihrer Website mag wie ein kleines Detail erscheinen, aber es kann das Erscheinungsbild und die Benutzerfreundlichkeit der Site verbessern. Wenn Besucher mit der Maus über ein Bild oder eine Schaltfläche fahren und sehen, dass es sich leicht ändert, signalisiert dies, dass das Element interaktiv ist. 

Diese subtile Bewegung verbessert die Interaktion und hilft, die Absprungrate zu reduzieren. Hover-Effekte sind besonders nützlich im E-Commerce. Sie ermöglichen es den Kunden, Produkte näher zu betrachten, was sie ermutigt, weiter zu erkunden und zur Kasse zu gehen.

Es gibt viele Möglichkeiten, Bild-Hover-Effekte in WordPress hinzuzufügen, von einfachen Überblendungen bis hin zu auffälligen Flip-Animationen. Unten finden Sie einige Methoden, um loszulegen!

So fügen Sie Hover-Effekte in WordPress hinzu

In diesem Artikel haben wir fünf einfache Möglichkeiten zusammengestellt, um Ihrem Site Hover-Effekte hinzuzufügen. Wählen Sie diejenige, die am besten für Sie geeignet ist!

Methode 1: Verwendung eines Plugins

Ein Plugin spart Ihnen viel Zeit und Mühe, insbesondere wenn Sie mehrere Hover-Effekte auf derselben Seite verwenden möchten.

Wenn Sie beispielsweise mehrere Bildergalerien haben, können Sie verschiedene Animationen auf jede anwenden, wie z.B. einen einfachen Zoom für Blog-Miniaturansichten oder einen Flip-Effekt für Produktbilder.

Die Verwendung eines Plugins wie Image Hover Effects Ultimate erleichtert diesen Prozess erheblich. Dieses Plugin ist für jeden kostenlos und bietet eine breite Palette von Effekten für jedes Element. Um loszulegen, installieren Sie es einfach, indem Sie dem folgenden Tutorial folgen: 

Ein Plugin installieren

• Öffnen Sie Ihren WordPress-Administrationsbereich.
• Klicken Sie Plugin hinzufügen aus dem Plugins-Menü in der Seitenleiste.

• Geben Sie Image Hover Effects Ultimate in die Suchleiste ein.

• Wählen Sie das erste Ergebnis aus und klicken Sie auf Jetzt installieren, um den Download zu starten.
• Sobald die Installation abgeschlossen ist, klicken Sie auf die Aktivieren-Schaltfläche, um das Plugin zu verwenden.

Verwendung des Image Hover Effects WordPress Plugins

• Sobald das Plugin installiert ist, sehen Sie ein neues Bild-Hover-Menü in Ihrem Dashboard.

• Klicken Sie auf das Menü, um die Plugin-Einstellungen zu öffnen. 

• Wählen Sie einen Effekt, den Sie verwenden möchten. Für dieses Tutorial werden wir mit Bildvergrößerer
• Nachdem Sie den Effekt ausgewählt haben, sehen Sie eine Vielzahl von Animationsstilen.

Wenn Sie einen Stil finden, der Ihnen gefällt, klicken Sie auf Stil erstellen.

• Ein Pop-up wird angezeigt. Geben Sie einen Titel in das Name-Feld ein und wählen Sie einen Effekt aus dem Layout (1., 2. oder 3.). Klicken Sie dann auf Speichern, um fortzufahren.
• Sie werden zu einer neuen Seite weitergeleitet, auf der Sie die Einstellungen wie Höhe, Breite und Deckkraft anpassen können. Experimentieren Sie, um zu sehen, was am besten aussieht.

• Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie auf Bearbeiten, um Ihr Bild anzupassen.

• Ein weiteres Pop-up-Fenster wird angezeigt. Hier können Sie die Vergrößerungsposition anpassen. 

• Sie können das Bild auch ersetzen, indem Sie auf die Bild auswählen-Schaltfläche klicken.
• Nachdem Sie alles eingerichtet haben, klicken Sie auf Speichern, um Ihren Hover-Effekt zu speichern.

• Um den Effekt auf Ihrer Seite anzuwenden, kopieren Sie den Shortcode und fügen ihn in Ihren Beitrag oder Ihre Seite ein. 

• Jetzt ist Ihr einfacher Bild-Hover-Effekt bereit, in jedem Teil Ihres Sites verwendet zu werden. 

Methode 2: Verwendung von CSS

Für diese Methode müssen Sie keine Plugins installieren. Durch die Verwendung von benutzerdefiniertem CSS können Sie verschiedene Hover-Effekte zu Ihrem Theme hinzufügen.

Wir beginnen mit etwas Einfachem, wie einem Unterstreichungseffekt beim Überfahren mit der Maus. Wenn Sie diesen Effekt zu Ihrem Theme hinzufügen möchten, folgen Sie den einfachen Schritten unten:

• Navigieren Sie zum Beitrag, bei dem Sie einen Hover-Effekt hinzufügen möchten.
• Fügen Sie ein Bild hinzu, indem Sie auf den Cover Block von + klicken.

• Geben Sie Ihren Inhalt in den Cover-Block ein. Hier fügen wir einen Titel und eine Schaltfläche hinzu.

• Setzen Sie die Schriftart und die Stile nach Ihrem Geschmack.
• Speichern Sie die Seite als Entwurf.
• Weiter gehen Sie zum Erscheinungsbild-Menü in Ihrem Dashboard.

• Klicken Sie dann auf Anpassen und gehen Sie zu Zusätzliches CSS. Fügen Sie den folgenden Code hinzu:

Körper { Anzeige: flex; Ausrichtung: zentriert; Ausrichtung: zentriert; Höhe: 100vh; Hintergrund: #0f0f0f; Rand: 0; Schriftfamilie: Arial, serifenlos; } .hover-underline { Schriftgröße: 2rem; Farbe: #ffffff; Position: relativ; Anzeige: Inline-Block; } .hover-underline::after, .hover-underline::before { Inhalt: ''; Position: absolut; Breite: 100%; Höhe: 2px; Hintergrund: linearer Farbverlauf (nach rechts, #ff0000, #00ffff); unten: -5px; links: 0; Transformation: scaleX(0); Transformationsursprung: rechts; Übergang: Transformation 0,4s ease-out; } .hover-underline::before { oben: -5px; Transformationsursprung: links; } .hover-underline:hover::after, .hover-underline:hover::before { Transformation: scaleX(1); }
 

• Klicken Sie auf Veröffentlichen, um den Code zu speichern.

• Gehen Sie nun zurück zu Ihrem Beitrag und wählen Sie den Text aus, auf den Sie die Unterstreichung anwenden möchten.
• Öffnen Sie den erweiterten-Bereich in der Block-Seitenleiste und geben Sie underline-hover in das Feld Zusätzliche CSS-Klasse(n) ein.

• Speichern Sie die Seite und zeigen Sie sie an, um den Effekt zu sehen. 

Es gibt so viele Hover-Effekte zur Auswahl, also wählen Sie den, der Ihrem Stil am besten entspricht. Sie können entweder lernen, das CSS selbst zu schreiben, oder Beispiele aus der WordPress-Community finden. Es ist alles da!

Methode 3: Verwendung von Page Buildern (z.B. Elementor)

Ein Page-Builder wie Elementor ermöglicht es Ihnen, Ihre Website mit viel Kreativität zu erstellen. Es verfügt über eingebaute Hover-Effekte, die alle einsatzbereit sind, um Ihre Seite ohne Programmierung zu beleben.

Sie können es auch verwenden, um Schwebeeffekte für Bilder in WordPress zu erstellen. In diesem Abschnitt werden wir mit den integrierten Schwebeeffekten innerhalb des Seiteneditors selbst experimentieren.

So richten Sie die Effekte ein:

• Öffnen Sie den Elementor-Editor im Administrations-Dashboard.
• Fügen Sie Ihr Bild hinzu.

• Wählen Sie Ihr Bild aus und wechseln Sie dann zur Stil Registerkarte.
• Scrollen Sie nach unten und klicken Sie auf Hover.

• Im Hover-Animation-Dropdown-Menü finden Sie eine Vielzahl von vorgefertigten Effekten.

• Wir haben uns für den Grow-Effekt als Beispiel entschieden. Sie können dann die Übergangszeit, Deckkraft und andere Einstellungen an das Design Ihrer Website anpassen.

• Nachdem Sie fertig sind, können Sie den Effekt sofort sehen, ohne ihn vorher in der Vorschau anzeigen zu müssen. 

Methode 4: Verwendung von Flipbox-Plugins

Wenn Sie nach einer Abkürzung suchen, können Sie das Flipbox-Plugin installieren. Ein Flipbox-Effekt ist, wenn ein Bild umgedreht wird, um Inhalte auf der Vorder- oder Rückseite anzuzeigen, wenn Sie mit der Maus darüber fahren.

Dieser Effekt eignet sich hervorragend für Fotobilder, bei denen Sie das Foto auf der Vorderseite und Kameradetails auf der Rückseite anzeigen können. Aber die Möglichkeiten sind endlos.

• Gehen Sie von Ihrem WordPress-Dashboard aus auf den Plugins-Menüpunkt. Wählen Sie dann Plugin hinzufügen aus.
• Geben Sie Flipbox - Awesome Flip Boxes Image Overlay in die Suchleiste ein.

• Klicken Sie Jetzt installieren, dann Aktivieren Sie das Plugin.

• Um eine Flipbox zu erstellen, gehen Sie zum Flip Box-Menü und klicken Sie auf Neu erstellen.
• Wählen Sie eine beliebige Animation, die Ihnen gefällt. Wenn Sie eine gefunden haben, klicken Sie auf Stil erstellen.

• Ein Pop-up-Fenster wird angezeigt. Wählen Sie das gewünschte Layout (1., 2. oder 3.) und geben Sie einen Titel ein. 

• Klicken Sie auf Speichern, um fortzufahren.
• Als Nächstes werden Sie zum Anpassungsmenü weitergeleitet, wo Sie die Effekte einstellen und Ihren Inhalt hinzufügen können.

• Scrollen Sie nach unten, um die Vorschau Registerkarte zu finden. Klicken Sie auf Bearbeiten, um den Inhalt für die Vorder- und Rückseite der Flipbox anzupassen.

• Wenn Sie fertig sind, klicken Sie auf Absenden, um es zu speichern.

• Um diesen Flipbox zu Ihrer Seite hinzuzufügen, kopieren Sie einfach den generierten Shortcode und fügen ihn in einen beliebigen Abschnitt Ihrer Website ein. 

• Und das ist's, hier ist das fertige Produkt! 

Methode 5: Verwendung von Gutenberg-Blöcken

Gutenberg ist der Standard-WordPress-Blockeditor, der es ermöglicht, Hover-Effekte direkt im Editor hinzuzufügen.

Obwohl es möglicherweise keine erweiterten Hover-Effekte bietet, können Sie die Animationen mithilfe von benutzerdefiniertem CSS verbessern.

Als Beispiel erstellen wir einen einfachen Fade-Effekt beim Hovern. Hier ist das Schritt-für-Schritt-Tutorial:

• Navigieren Sie zu dem Beitrag oder der Seite, auf der Sie den Hover-Effekt hinzufügen möchten.
• Klicken Sie auf +, um einen neuen Block hinzuzufügen, und wählen Sie dann den Cover-Block.

• Innerhalb des Cover-Blocks fügen Sie einen Absatz-Block hinzu.

• Geben Sie Ihren Titel und eine kurze Beschreibung ein.
• Passen Sie die Schriftgröße, Deckkraft, Ausrichtung und Farbe nach Bedarf an.

• Wählen Sie dann den Cover-Block, um eine benutzerdefinierte CSS-Klasse hinzuzufügen.
• Öffnen Sie den Erweitert-Bereich in der rechten Seitenleiste.
• Geben Sie fade-hover-effect in das Zusätzliche CSS-Klasse Feld ein.

• Speichern Sie danach die Seite als Entwurf.

• Gehen Sie zum Plugins-Menü und wählen Sie Ihr Code-Snippet-Plugin. In diesem Beispiel verwenden wir WPCode.
• Erstellen Sie ein neues CSS-Snippet und fügen Sie dann den folgenden Code ein:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Speichern Sie das Snippet und aktivieren Sie es.
• Sehen Sie sich nun Ihre Seite an, um den Hover-Effekt in Aktion zu sehen.

Sie können diesen Effekt wiederverwenden, indem Sie die Klasse fade-hover-effect zu einem beliebigen Block oder Bild hinzufügen. Wenn Sie jedoch mit vielen Bildern arbeiten, sollten Sie ein Plugin wie WP Media Folder verwenden, um Ihre Mediathek in Ordner zu organisieren. Dies erleichtert das Finden und Wiederverwenden von verwandten Inhalten.

Beeinträchtigt die Verwendung von zu vielen Effekten die Leistung?

Ja, die Verwendung von zu vielen Hover-Effekten auf Ihrer Site kann die Leistung beeinträchtigen, insbesondere wenn sie nicht richtig optimiert sind. Dies liegt daran, dass einige Hover-Effekte zusätzliches CSS erfordern. Die Größe des CSS Ihrer Site kann sich summieren und die Ladezeiten der Seite verlangsamen.

Es ist am besten, nur wesentliche Hover-Effekte zu verwenden, um die Benutzererfahrung zu verbessern, ohne Ihre Seite zu überlasten.

Zusammenfassung

Zu lernen, wie man Hover-Effekte in WordPress hinzufügt, kann dazu beitragen, Ihre Website zu verbessern, indem die Benutzerinteraktion verbessert und die Nutzer bei der Stange gehalten werden.

Mit mehreren Möglichkeiten, Schwebeeffekte hinzuzufügen, ob durch Plugins, benutzerdefiniertes CSS oder Seiteneditoren, haben Sie die Freiheit, das zu wählen, was am besten für Sie funktioniert. Experimentieren Sie mit verschiedenen Stilen, um den zu finden, der am besten zu Ihrer Seite passt!