So fügen Sie Bild-Hover-Effekte in WordPress hinzu (5 einfache Wege)

Das Hinzufügen eines Hover-Effekts zu Ihrer Website mag wie ein kleines Detail erscheinen, kann aber das Erscheinungsbild und die Benutzerfreundlichkeit der Seite deutlich verbessern. Wenn Besucher mit der Maus über ein Bild oder einen Button fahren und eine leichte Veränderung feststellen, signalisiert dies, dass das Element interaktiv ist. 

Diese subtile Bewegung steigert die Interaktion und senkt die Absprungrate. Hover-Effekte sind besonders im E-Commerce nützlich. Sie ermöglichen es Käufern, Produkte genauer zu betrachten und regen sie so zum weiteren Stöbern und zum Kaufabschluss an.

In WordPress gibt es viele Möglichkeiten, Bild-Hover-Effekte einzubinden – von einfachen Überblendungen bis hin zu auffälligen Flip-Animationen. Im Folgenden finden Sie einige Methoden für den Einstieg!

So fügen Sie Bild-Hover-Effekte in WordPress hinzu

In diesem Artikel stellen wir Ihnen fünf einfache Möglichkeiten vor, wie Sie Hover-Effekte auf Ihrer Website einbinden können. Wählen Sie die Methode, die am besten zu Ihnen passt!

Methode 1: Verwendung eines Plugins

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

Wenn Sie beispielsweise mehrere Bildergalerien haben, können Sie jeder Galerie unterschiedliche Animationen zuweisen, etwa einen einfachen Zoom für Blog-Thumbnails oder einen Spiegeleffekt für Produktbilder.

Die Verwendung eines Plugins wie Image Hover Effects Ultimate vereinfacht diesen Prozess erheblich. Dieses Plugin ist kostenlos und bietet eine Vielzahl von Effekten für jedes Element. Um loszulegen, installieren Sie es einfach gemäß der unten stehenden Anleitung: 

Installation eines Plugins

• Öffnen Sie Ihren WordPress-Adminbereich.
• Klicken Sie auf „Plugin hinzufügen“ im „Plugins“ .

• 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“ , um das Plugin zu verwenden.

Verwendung des WordPress-Plugins „Image Hover Effects“

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

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

• Wählen Sie die gewünschten Effekte aus. In diesem Tutorial experimentieren wir mit der Bildlupe .
• Nach Auswahl des Effekts werden Ihnen verschiedene Animationsstile angezeigt.

Wenn Sie einen passenden Stil gefunden haben, klicken Sie auf „Stil erstellen“ .

• Es erscheint ein Pop-up-Fenster. Geben Sie im „Name“ und wählen Sie einen Effekt aus dem Layout (1., 2. oder 3.). Klicken Sie anschließend auf „Speichern“ , um fortzufahren.
• Sie werden auf eine neue Seite weitergeleitet, auf der Sie die Einstellungen wie Höhe, Breite und Deckkraft anpassen können. Probieren Sie verschiedene Optionen aus, um die beste Darstellung zu finden.

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

• Es erscheint ein weiteres Pop-up-Fenster. Hier können Sie die Vergrößerungsposition anpassen. 

• Sie können das Bild auch über die „Bild auswählen“ .
• Nachdem Sie alles eingerichtet haben, klicken Sie auf „Absenden“ , um Ihren Hover-Effekt zu speichern.

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

• Ihr einfacher Bild-Hover-Effekt ist nun bereit, an jeder Stelle Ihrer Website verwendet zu werden. 

Methode 2: Verwendung von CSS

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

Wir beginnen mit etwas Einfachem, wie einem Unterstreichungs-Hover-Effekt. Wenn Sie diesen Effekt zu Ihrem Theme hinzufügen möchten, folgen Sie einfach den unten stehenden Schritten:

• Navigieren Sie zu dem Beitrag, dem Sie einen Hover-Effekt hinzufügen möchten.
• Fügen Sie ein Bild hinzu, indem Sie auf den Titelbild -Block unter dem Pluszeichen .

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

• Schriftart und Stil können Sie nach Ihren Wünschen einstellen.
• Seite als Entwurf speichern.
• Als Nächstes öffnen Sie das „Darstellung“ in Ihrem Dashboard.

• Klicken Sie anschließend auf „Anpassen“ und gehen Sie zu „Zusätzliches CSS“ . Fügen Sie folgenden Code hinzu:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: 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 den Unterstreichungseffekt anwenden möchten.
• Öffnen Sie den „Erweitert“ in der Block-Seitenleiste und geben Sie im „Zusätzliche CSS-Klasse(n)“ „underline-hover“ .

• Speichern Sie die Seite und sehen Sie sich eine Vorschau an, um den Effekt zu sehen. 

Es gibt unzählige Hover-Effekte zur Auswahl – such dir einfach den aus, der am besten zu deinem Stil passt. Du kannst entweder selbst CSS lernen oder dir Beispiele in der WordPress-Community ansehen. Alles ist verfügbar!

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

Mit einem Page-Builder wie Elementor können Sie Ihre Website kreativ gestalten. Er verfügt über integrierte Hover-Effekte, die Sie sofort einsetzen können, um Ihre Website ohne Programmierkenntnisse aufzuwerten.

Sie können es auch verwenden, um Bild-Hover-Effekte in WordPress zu erstellen. In diesem Abschnitt werden wir mit den integrierten Hover-Effekten im Page-Builder selbst experimentieren.

So richten Sie die Effekte ein:

• Öffnen Sie den Elementor- Editor über das Admin-Dashboard.
• Fügen Sie Ihr Bild hinzu.

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

• Im „Hover-Animation“ finden Sie eine Vielzahl von sofort einsatzbereiten Effekten.

• Hier haben wir den Wachstumseffekt als Beispiel gewählt . Sie können dann die Übergangsdauer, die Deckkraft und andere Einstellungen an das Design Ihrer Website anpassen.

• Nach Abschluss des Vorgangs 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 eine Abkürzung suchen, können Sie das Flipbox-Plugin installieren. Ein Flipbox-Effekt bewirkt, dass sich ein Bild umdreht und beim Überfahren mit der Maus den Inhalt auf der Vorder- oder Rückseite freigibt.

Dieser Effekt eignet sich hervorragend für Fotos, da man das Foto auf der Vorderseite und die Kameradetails auf der Rückseite anzeigen kann. Die Möglichkeiten sind aber endlos.

• Klicken Sie in Ihrem WordPress-Dashboard auf das „Plugins“ . Wählen Sie anschließend „Plugin hinzufügen“ .
• Geben Sie „Flipbox - Awesome Flip Boxes Image Overlay“ in die Suchleiste ein.

• Klicken Sie auf „Jetzt installieren aktivieren Sie anschließend das Plugin.

• Um eine Flipbox zu erstellen, gehen Sie zum „Flipbox“ und klicken Sie auf „Neu erstellen“ .
• Wählen Sie eine beliebige Animation aus. Sobald Sie eine gefunden haben, klicken Sie auf „Stil erstellen“ .

• Es erscheint ein Pop-up-Fenster. 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 gelangen Sie zum Anpassungsmenü, wo Sie die Effekte einstellen und Ihre Inhalte hinzufügen können.

• Scrollen Sie nach unten, um den „Vorschau“ . 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 Ihre Eingabe zu speichern.

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

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

Methode 5: Verwendung von Gutenberg-Blöcken

Gutenberg ist der standardmäßige WordPress-Blockeditor, mit dem Sie Hover-Effekte direkt im Editor hinzufügen können.

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

Nehmen wir als Beispiel einen einfachen Überblendeffekt beim Überfahren mit der Maus. Hier ist die Schritt-für-Schritt-Anleitung:

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

• innerhalb des Deckblatt -Blocks einen Absatz- Block ein.

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

• Wählen Sie anschließend den Cover- Block aus, um eine benutzerdefinierte CSS-Klasse hinzuzufügen.
• Öffnen Sie den „Erweitert“ in der rechten Seitenleiste.
• fade-hover-effect im Feld „Zusätzliche CSS-Klasse“ ein .

• Speichern Sie die Seite anschließend als Entwurf.

• Gehen Sie zum „Plugins“ und wählen Sie Ihr Code-Snippet-Plugin aus. In diesem Beispiel verwenden wir WPCode .
• Erstellen Sie einen neuen CSS-Codeausschnitt 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 den Codeausschnitt und aktivieren Sie ihn.
• Sehen Sie sich nun eine Vorschau Ihrer Seite an, um den Hover-Fade-Effekt in Aktion zu erleben.

Diesen Effekt können Sie wiederverwenden, indem Sie die Klasse `fade-hover-effect` zu einem beliebigen Block oder Bild hinzufügen. Wenn Sie jedoch mit vielen Bildern arbeiten, empfiehlt sich die Verwendung eines Plugins wie WP Media Folder , um Ihre Mediathek in Ordnern zu organisieren. Dadurch lassen sich verwandte Inhalte leichter finden und wiederverwenden.

Beeinträchtigt die Verwendung zu vieler Effekte die Leistung?

Ja, zu viele Hover-Effekte auf Ihrer Website können die Performance beeinträchtigen, insbesondere wenn sie nicht optimal optimiert sind. Das liegt daran, dass einige Hover-Effekte zusätzliches CSS benötigen. Die Größe des CSS-Codes Ihrer Website kann sich summieren und die Ladezeiten der Seiten verlangsamen.

Es empfiehlt sich, nur die wichtigsten Hover-Effekte zu verwenden, um das Benutzererlebnis zu verbessern, ohne die Website zu überladen.

Zusammenfassung

Wenn Sie lernen, wie Sie in WordPress Bild-Hover-Effekte hinzufügen, können Sie die Leistung Ihrer Website steigern, indem Sie die Benutzerinteraktion verbessern und die Benutzerbindung erhöhen.

Dank zahlreicher Möglichkeiten, Hover-Effekte hinzuzufügen – ob über Plugins, benutzerdefiniertes CSS oder Page-Builder – haben Sie die Freiheit, die für Sie beste Lösung zu wählen. Experimentieren Sie mit verschiedenen Stilen, um denjenigen zu finden, der am besten zu Ihrer Website passt!