Möchten Sie erfahren, wie Sie Bild-Hover-Effekte in WordPress hinzufügen?
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 Schritt für Schritt, wie Sie Bild-Hover-Effekte in WordPress hinzufügen.
Was sind Bild-Hover-Effekte?
Mit Bild-Hover-Effekten können Sie Ihren statischen Bildern interaktive Elemente hinzufügen, z. B. Animationen, Zoom-Effekte, Popups und mehr.
Zum Beispiel könnten Sie Bilder haben, die sich umdrehen, um Ihre Preise oder Links zu Ihrem Portfolio anzuzeigen.
Schwebende Bilder bieten Ihnen auch eine kreative Möglichkeit, Ihre Fotos, Galerien und Miniaturansichten anzuzeigen.
Interaktive Bilder und Hover-Elemente können Ihrer Website in vielerlei Hinsicht helfen:
- Verbessern Sie die Verweildauer Ihrer Besucher auf Ihrer Website
- Geben Sie Ihren Besuchern kreative Möglichkeiten, Inhalte zu präsentieren.
- Teilen Sie Ihren Benutzern mit, dass ein Element auf Ihrer Website anklickbar ist.
So erstellen Sie Bild-Hover-Effekte in WordPress
Der beste Weg, 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 verschwenden, um Bildeffekte zu erstellen. Es funktioniert einfach.
Es gibt alle Arten von Plugins, mit denen Sie einzigartige Bild-Hover-Effekte und -Animationen erstellen können.
In diesem Tutorial zeigen wir Ihnen die vier verschiedenen Möglichkeiten, die benötigten Hover-Effekte hinzuzufügen.
- Fügen Sie Bild-Hover-Flipbox-Effekte in WordPress hinzu
- Bildzoom und Vergrößerungseffekte in WordPress hinzufügen
- Fügen Sie Bildanimationseffekte in WordPress hinzu
- Fügen Sie Bild-Hover-Popup-Effekte in WordPress hinzu
1. Fügen Sie Bild-Hover-Flipbox-Effekte in WordPress hinzu
Eine zusammenklappbare Box ist eine Box, die sich umdreht, wenn die Maus darüber fährt.
Sie können diese Animation zu Ihren Bildern hinzufügen, um Text anzuzeigen oder sogar das Bild beim Hover zu ändern.
Sie können steuern, wie das Bild gespiegelt wird, zusammen mit dem Layout des Bildes auf beiden Seiten.
Wenn Sie ein Fotograf sind, können Sie dies verwenden, um Ihre Arbeit anzuzeigen 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 Bild-Hover- und Flipbox-Plugin für WordPress.
Mit diesem Plugin können Sie Ihren WordPress-Bildern einfach benutzerdefinierte Flipbox-Effekte hinzufügen.
Es enthält Dutzende verschiedener Animationseffekte und vorgefertigte Vorlagen. Sie können sogar die Farben steuern und Ihr eigenes benutzerdefiniertes CSS hinzufügen.
Weitere Einzelheiten finden Sie in unserem Leitfaden zum Erstellen von Flipbox-Overlays und -Scrolls in WordPress.
2. Fügen Sie Bildzoom und Vergrößerungseffekte in WordPress hinzu
Bild-Zoom-Effekte ermöglichen es Benutzern, Details zu sehen, die sie in einem Bild in normaler Größe nicht sehen könnten.
Dies ist ein großartiger Effekt für Produkt-Tutorials und Bilder mit hohem Detailgrad.
Sie können es auch in Ihrem Online-Shop verwenden, um einen Zoom-Effekt wie bei Amazon hinzuzufügen.
Der einfachste Weg, Ihren Bildern Zoom- und Vergrößerungseffekte hinzuzufügen, ist die Verwendung eines WordPress-Plugins.
Wir empfehlen die Verwendung des Plugins WP Image Zoom. Mit diesem Plugin können Sie Ihren Bildern einfach Zoom- und Vergrößerungseffekte hinzufügen.
Es ist auch vollgepackt mit Funktionen, mit denen Sie die Form des Zoomobjektivs, die Zoomstufe und mehr auswählen können.
Weitere Informationen finden Sie in unserer Anleitung zum Hinzufügen von Vergrößerungen für Bilder in WordPress.
3. Fügen Sie Bildanimationseffekte in WordPress hinzu
Es gibt alle möglichen zusätzlichen Hover-Effekte, die Sie zu WordPress hinzufügen können.
Zum Beispiel hat es animierte Bildergalerien, Lightbox-Bilder, Vergleichsbilder, Textüberlagerungen und mehr.
Um solche Hover-Effekte hinzuzufügen, empfehlen wir die Verwendung des Image Hover Effects Ultimate-Plugins.
Dieses Plugin ist sehr leichtgewichtig, sodass es die Leistung und Ladegeschwindigkeit Ihrer Website nicht beeinträchtigt. Es ist auch sehr einfach zu bedienen. Sie können einzigartige Bildeffekte mit ein paar Klicks hinzufügen.
Als erstes müssen Sie das Plugin Image Hover Effects Ultimate installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nachdem Sie das Plugin installiert und aktiviert haben, müssen Sie in Ihrem WordPress-Adminbereich auf „Image Hover“ klicken. Dadurch werden acht verschiedene Bild-Hover-Effekte angezeigt, aus denen Sie auswählen können.
Für dieses Tutorial verwenden wir den Effekt „Untertiteleffekte“. Dadurch wird beim Hover animierter Text über Ihrem Bild hinzugefügt.
Klicken Sie zunächst auf das Feld „Untertiteleffekte“. Dies öffnet ein Menü mit verschiedenen Animationsoptionen zur Auswahl.
Wenn Sie den gewünschten Bildeffekt gefunden haben, klicken Sie auf „Stil erstellen“.
Benennen Sie im Popup-Feld Ihren Hover-Effekt und wählen Sie das Layout aus. Die ausgewählte Layoutnummer entspricht der bestellten Bildfolge.
Denken Sie daran, auf „Speichern“ zu klicken.
Auf dem nächsten Bildschirm haben Sie eine Vielzahl von Optionen, um Ihren Hover-Effekt anzupassen.
Wir belassen jedoch die Standardanimationsoptionen.
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 können Sie den Titel und die Beschreibung ändern, die beim Hover angezeigt werden.
Um Ihr Bild hochzuladen, klicken Sie auf das Kästchen unter der Überschrift „Bild“ und laden Sie ein Bild hoch oder wählen Sie ein Bild aus Ihrer Medienbibliothek aus.
Sie können auch einen Link und Schaltflächentext hinzufügen, wenn Sie möchten, dass Ihr Bild Benutzer zu einer anderen Seite 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 der bzw. dem Ihr Bild erscheinen soll, und fügen Sie den Shortcode ein.
Achten Sie darauf, auf „Veröffentlichen“ oder „Aktualisieren“ zu klicken, um Ihre Änderungen zu speichern und den Bild-Hover-Effekt zu aktivieren.
Die oben genannten Plugins helfen Ihnen, Funktionen wie Spinnerboxen, Hover-Effekte, Animationen und mehr hinzuzufügen.
Was ist, 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 benutzerdefinierten CSS-Plugin für WordPress. Auf diese Weise 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, die Verwendung eines Plugins ist jedoch die einfachste Option.
Wir empfehlen die Verwendung des CSS Hero-Plugins. Mit diesem Plugin können Sie fast alle CSS-Stile auf Ihrer WordPress-Seite bearbeiten, ohne eine Codezeile schreiben zu müssen.
Es gibt alle Arten von CSS-Effekten, die speziell für Bilder eingebaut sind.
Weitere Einzelheiten 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 „Weiter zur Produktaktivierung“ klicken.
Dies führt Sie durch den Plugin-Aktivierungsprozess.
Sobald das Plugin aktiviert ist, können Sie mit der Anpassung Ihrer Bilder beginnen.
Öffnen Sie eine Seite oder einen Beitrag mit den Bildern, die Sie animieren möchten, und klicken Sie oben auf der Seite auf „CSS Hero“.
Dadurch wird das Editor-Menü geöffnet, in dem Sie alle möglichen CSS-Effekte hinzufügen können.
Fügen wir dem Hover-Effekt ein Popup-Bild hinzu. Zuerst müssen Sie auf das Bild klicken, das Sie bearbeiten möchten, und dann auf „Snippets“ klicken.
Klicken Sie danach auf „Hover-Effekte“.
Dadurch wird ein Menü mit verschiedenen CSS-Effekten angezeigt. Wählen Sie dann 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 man Bild-Hover-Effekte in WordPress hinzufügt. Vielleicht möchten Sie auch unseren Leitfaden zur Optimierung von Bildern für das Web und unseren Anfängerleitfaden zur Bild-SEO lesen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch unter Twitter Y Facebook.
