So fügen Sie Bild-Hover-Effekte in WordPress hinzu (Schritt für Schritt)
Möchten Sie lernen, wie Sie Bild-Hover-Effekte in WordPress hinzufügen können? Bild-Hover-Effekte können Ihre Website interaktiver und ansprechender machen. Dies schafft einen besseren ersten Eindruck und verbessert die Verweildauer auf Ihrer Website.
In diesem Artikel zeigen wir Ihnen, wie Sie Bild-Hover-Effekte in WordPress hinzufügen, Schritt für Schritt.
Was sind Bild-Hover-Effekte?
Mit Bild-Hover-Effekten können Sie interaktive Elemente zu Ihren statischen Bildern hinzufügen, wie z.B. Animationen, Zoom-Effekt, Popup und mehr. Sie könnten zum Beispiel Bilder haben, die umklappen, um Ihre Preise oder Links zu Ihrem Portfolio zu zeigen. Bildschwebeeffekte bieten Ihnen auch eine kreative Möglichkeit, Ihre Fotos, Galerien und Miniaturansichten anzuzeigen.
Interaktive Bilder und Hover-Elemente können Ihre Website in vielerlei Hinsicht unterstützen:
- Verbessern Sie die Zeit, die Ihre Besucher auf Ihrer Website verbringen
- Sie bieten kreative Möglichkeiten, Ihren Besuchern Inhalte zu präsentieren
- Zeigen Sie Ihren Nutzern, dass ein Site-Element anklickbar ist
Wie man Bild-Hover-Effekte in WordPress erstellt
Der beste Weg, um Bild-Hover-Effekte zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung eines WordPress-Plugins
Mit einem Plugin müssen Sie keine Zeit mit dem Bearbeiten, Formatieren und Hinzufügen von CSS verbringen, um Bildeffekte zu erstellen. Es funktioniert einfach. Es gibt alle Arten von Plugins, die Sie verwenden können, um einzigartige Bild-Hover-Effekte und Animationen zu erstellen.
In diesem Tutorial zeigen wir Ihnen die vier verschiedenen Möglichkeiten, um die benötigten Hover-Effekte hinzuzufügen.
1. Hinzufügen von Bild-Hover-Flipbox-Effekten in WordPress
Eine Flipbox ist eine Box, die sich umdreht, wenn Sie mit der Maus darüber fahren. Sie können diese Animation zu Ihren Bildern hinzufügen, um Text zu enthüllen oder sogar das Bild beim Hovern zu ändern.
Sie können steuern, wie das Bild gespiegelt wird, zusammen mit dem Design des Bildes auf beiden Seiten.
Wenn Sie ein Fotograf sind, können Sie dies verwenden, um Ihre Arbeit zu präsentieren und Ihre Portfolios zu trennen. Der einfachste Weg, Bild-Flipbox-Effekte hinzuzufügen, ist mit einem WordPress-Plugin. Mit einem Plugin können Sie diese Effekte schnell erstellen und anpassen.
Wir empfehlen die Verwendung des Plugins Flipbox - Awesomes Flip Boxes Image Overlay. Es ist das beste Flipbox- und Image-Hover-Plugin für WordPress. Mit diesem Plugin können Sie einfach benutzerdefinierte Flipbox-Effekte zu Ihren WordPress-Bildern hinzufügen.
Es kommt mit Dutzenden von verschiedenen Animationseffekten und vorgefertigten Vorlagen.
Sie können sogar die Farben steuern und Ihr eigenes benutzerdefiniertes CSS hinzufügen.
2. Hinzufügen von Bildzoom- und Vergrößerungseffekten in WordPress
Mit Bildzoom-Effekten können Ihre Benutzer Details sehen, die sie in einem Bild in normaler Größe nicht sehen könnten Dies ist ein großartiger Effekt für Produkttutorials und Bilder mit hohem Detailgrad.
Sie können ihn auch in Ihrem Online-Shop verwenden, um einen Zoom-Effekt wie bei Amazon hinzuzufügen. 
Der einfachste Weg, Bildzoom- und Vergrößerungseffekte zu Ihren Bildern hinzuzufügen, ist die Verwendung eines WordPress-Plugins. Wir empfehlen die Verwendung des WP Image Zoom-Plugins. Mit diesem Plugin können Sie einfach Zoom- und Vergrößerungseffekte zu Ihren Bildern hinzufügen.
Es ist außerdem mit Funktionen ausgestattet, mit denen Sie die Form der Zoom-Linse, den Grad des Zooms und vieles mehr auswählen können. Weitere Details finden Sie in unserer Anleitung zum Hinzufügen von Lupenzoom für Bilder in WordPress.
3. Hinzufügen von Bildanimationseffekten in WordPress
Es gibt alle Arten von zusätzlichen Hover-Effekten, die Sie in WordPress hinzufügen können Zum Beispiel gibt es animierte Bildergalerien, Lightbox-Bilder, Vergleichsbilder, Text-Overlays und mehr.
Um Hover-Effekte wie diese hinzuzufügen, empfehlen wir das Plugin Image Hover Effects Ultimate. Dieses Plugin ist sehr leichtgewichtig, so dass es keinen Einfluss auf die Leistung und Ladegeschwindigkeit Ihrer Website hat. Außerdem ist es sehr einfach zu bedienen.
Sie können einzigartige Bildeffekte mit ein paar Klicks hinzufügen. Das erste, was Sie tun müssen, ist das Image Hover Effects Ultimate Plugin zu installieren und zu aktivieren.
Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Sobald Sie das Plugin installiert und aktiviert haben, müssen Sie in Ihrem WordPress-Admin auf "Image Hover" klicken. Daraufhin werden acht verschiedene Bild-Hover-Effekte angezeigt, aus denen Sie wählen können.
Für dieses Tutorial werden wir den Effekt "Caption Effects" verwenden.
Dieser fügt animierten Text über Ihrem Bild ein, wenn Sie mit der Maus darüber fahren. Klicken Sie zunächst auf das Feld "Beschriftungseffekte". Daraufhin wird ein Menü mit verschiedenen Animationsoptionen angezeigt, zwischen denen Sie wählen können.
Wenn Sie den Bildeffekt gefunden haben, der Ihnen gefällt, klicken Sie auf "Stil erstellen".
Benennen Sie im Popup-Feld Ihren Hover-Effekt und wählen Sie das Layout. Die von Ihnen gewählte Layoutnummer entspricht der geordneten Reihenfolge der Bilder. Vergessen Sie nicht, auf "Speichern" zu klicken.
Auf dem nächsten Bildschirm haben Sie eine Reihe von Optionen zum Anpassen des Schwebeeffekts.
Wir werden jedoch die Standard-Animationsoptionen beibehalten.
Wenn Sie Änderungen vornehmen, werden diese im Feld "Vorschau" angezeigt.
Um das Standardbild zu ändern, bewegen Sie den Mauszeiger über das Bild und klicken Sie auf die Option "Bearbeiten".
In diesem Popup-Fenster können Sie den Titel und die Beschreibung ändern, die beim Verweilen angezeigt werden.Um Ihr Bild hochzuladen, klicken Sie auf das Feld unter dem Titel "Bild" und laden Sie ein Bild hoch oder wählen Sie ein Bild aus Ihrer Medienbibliothek aus.
Sie können auch einen Link und einen Schaltflächentext hinzufügen, wenn Sie möchten, dass Ihr Bild Benutzer zu einer anderen Seite auf Ihrer Website führt. Wenn Sie fertig sind, klicken Sie auf "Senden".
Um das Bild zu Ihrer Website hinzuzufügen, kopieren Sie den Shortcode in das Feld "Shortcode". Öffnen Sie dann eine beliebige Seite, einen Beitrag oder ein Widget, auf dem das Bild erscheinen soll, und fügen Sie den Shortcode ein.
Stellen Sie sicher, dass Sie auf "Veröffentlichen" oder "Aktualisieren" klicken, um Ihre Änderungen zu speichern und den Bild-Hover-Effekt zu aktivieren.
4. Hinzufügen von Bild-Hover-Popup-Effekten in WordPress
Die oben genannten Plugins helfen Ihnen, Funktionen wie Flipboxen, Hover-Effekte, Animationen und mehr hinzuzufügen
Was, wenn Sie einen anderen Bild-Hover-Effekt hinzufügen möchten, der nicht von den oben genannten Plugins abgedeckt wird? Der beste Weg, dies zu tun, ist mit einem WordPress Custom CSS Plugin. Damit können Sie visuelle Änderungen an Ihren Bildern vornehmen, ohne Code bearbeiten zu müssen.
Sie können Ihre CSS-Dateien manuell bearbeiten oder CSS über den WordPress-Customizer hinzufügen, aber die Verwendung eines Plugins ist die einfachste Option. Wir empfehlen die Verwendung des CSS Hero-Plugins. Mit diesem Plugin können Sie fast jeden einzelnen CSS-Stil auf Ihrer WordPress-Seite bearbeiten, ohne eine Zeile Code zu schreiben.
Es gibt alle Arten von eingebauten CSS-Effekten speziell für Bilder. Weitere Details zur Installation eines Plugins finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Sobald das Plugin installiert ist, müssen Sie auf die Schaltfläche "Proceed to Product Activation" klicken.
Dies wird Sie durch den Aktivierungsprozess des Plugins leiten.
Nachdem das Plugin aktiviert ist, können Sie mit der Anpassung Ihrer Bilder beginnen.
Öffnen Sie eine Seite oder einen Beitrag mit dem Bild oder den Bildern, die Sie animieren möchten, und klicken Sie oben auf der Seite auf "CSS Hero".
Dadurch öffnet sich das Editor-Menü, in dem Sie alle Arten von verschiedenen CSS-Effekten hinzufügen können. Wir werden einen Bild-Popup-Effekt beim Hovern hinzufügen. Zuerst müssen Sie auf das Bild klicken, das Sie bearbeiten möchten, und dann auf "Snippets".
Danach klicken Sie auf "Hover-Effekte".
Daraufhin wird ein Menü mit verschiedenen CSS-Effekten angezeigt.
Wählen Sie als Nächstes den Effekt ".hvr-pop" und klicken Sie auf "Anwenden". Klicken Sie auf "Speichern und veröffentlichen" und der CSS-Effekt wird automatisch auf Ihre Bilder angewendet.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Bild-Hover-Effekte in WordPress hinzufügen können.