Wie füge ich Bild-Hover-Effekte in WordPress 2024 hinzu? [4 beste Schritte zum Befolgen]

Was sind Hover-Effekte in WordPress? Ihre Website sollte einzigartig sein. Es ist schwierig, wenn alle anderen dasselbe denken. Die gute Nachricht ist, dass moderne Technologie das Website-Design vereinfacht.

Das Hinzufügen von Hover-Effekten zu statischen Fotos ist ein Beispiel. Über die Vorteile der Anwendung von Hover-Effekten auf ein Bild in WordPress. Anschließend zeigen wir Ihnen, wie Sie diese auf Ihrer Website einbinden. Lasst uns beginnen!

Wie füge ich Bild-Hover-Effekte in WordPress hinzu? 4 beste Schritte

Nachdem Sie sich mit Hover-Effekten und ihren Vorteilen vertraut gemacht haben, fragen Sie sich vielleicht, wie man sie implementiert. Glücklicherweise haben wir eine umfassende Anleitung dazu zusammengestellt:

Hover-Effekte können durch benutzerdefinierten Code hinzugefügt werden. Wenn Sie jedoch kein erfahrener Programmierer sind, kann dies ein zeitaufwändiges und manchmal gefährliches Unterfangen sein.

Beim Einsatz eines Plugins wird die Sache jedoch merklich unkomplizierter.

Das kostenloses Beaver Builder WordPress-Plugin vereinfacht den Prozess der Erstellung voll funktionsfähiger und ästhetisch ansprechender WordPress-Sites.

Vom modularen CSS zum intuitiven Drag-and-Drop-Seiteneditor, alles ist für den Entwickler konzipiert.

Als zusätzlichen Bonus macht es diese App jedem leicht, Hover-Effekte auf seine Bilder anzuwenden. Mit Beaver Builder können Sie nichts falsch machen, wenn ein Bild ein zusätzliches interaktives Element erfordert.

Es wird auch empfohlen, dass Sie unser Beaver Builder Theme verwenden. Verwenden Sie WordPress-Beitragsvorlagen, um schnell eine Vielzahl von Beitragstypen, einschließlich Seiten, zu erstellen.

Auf diese Weise können Sie sich auf die Erstellung ansprechender Funktionen wie Hover-Effekte konzentrieren, anstatt sich Gedanken über die Entwicklung von Layouts zu machen. Auf der anderen Seite können Sie Beaver Builder mit jedem von Ihnen gewählten WordPress-Theme verwenden.

Schritt 1: Hinzufügen eines Fotomoduls

Bevor Sie beginnen, aktivieren Sie das Beaver Builder-Plugin. Gehen Sie dann zu Seiten im WordPress-Adminbereich. Aktivieren Sie den Editor, indem Sie eine neue Seite erstellen oder eine vorhandene auswählen.

Klicken Sie dann oben rechts auf das Pluszeichen. Sie fügen ein Fotomodul hinzu. Per Drag-and-Drop können Sie dieses Modul schnell positionieren.

Schritt 2: Aktivieren Sie das Fotomodul

Mit diesem Modul können Sie Fotos auf Ihrer Website veröffentlichen. Wählen Sie ein Foto aus Ihrer Bibliothek aus oder geben Sie eine URL ein. Schneiden Sie das Bild in der Medienbibliothek zu.

Sie können auch ein Foto formen. Landschafts-, Panorama-, Hochformat- oder kreisförmige Bilder können alle den Hover-Effekt verwenden. Sie können jetzt einen Bildlink einfügen. Hover-Effekte können verwendet werden, um den Verkehr auf bestimmte URLs zu lenken.

Schritt 3: Fügen Sie eine benutzerdefinierte Klasse hinzu

Wählen Sie nach der Einrichtung des Bildmoduls Erweitert aus. Dies ist das HTML-Element.

Scrollen Sie nach unten zu Klasse. Geben Sie hier die benutzerdefinierten Klasseninformationen des Effekts ein. Also haben wir Hover-Unblur zur Klasse hinzugefügt. Mit Hover-Effekten können Sie die Farbe und Bewegung eines Bildes ändern. Hebeeffekte in Beaver Builder. Je nach Aufprall ist eine Sonderklasse erforderlich.

Schritt 4: Integrieren Sie den CSS-Effekt

Fügen Sie abschließend Hover-CSS zu Ihrer Website hinzu. Unsere Wissensdatenbank verfügt über das Hover-CSS. Die Zeit zwischen Hover-Effekten beträgt 0.3 Sekunden. Oder wenn Sie das CSS übermitteln. Sie können den Übergang beschleunigen oder verlangsamen.

Wählen Sie in der linken Titelleiste Globale Einstellungen aus. Fügen Sie nun den CSS-Code zum CSS-Tag hinzu.

Gehen Sie auf jeder Beaver Builder-Seite zu Tools > Global Settings und speichern Sie sie. Auch Nicht-Beaver Builder-Inhalte unterliegen Ihren CSS-Regeln.

Eine einzelne Seite in LayoutCSS&Jscript. Speichern Sie Ihre CSS-Änderungen. SEHEN SIE DEN ERSTEN HOVER EFF Bewegen Sie die Maus über das Bild, um es zu testen.

Wenden Sie den Effekt auf eine Reihe oder Spalte von Fotos an.

Quick-Links:

• Wie erstelle ich eine Farbpalette für Ihre WordPress-Site?
• Wie erstelle ich eine Wartungsmodus-Seite in WordPress?
• Wie erstelle ich eine benutzerdefinierte 404-Fehlerseite in WordPress?
• Wie verwaltet man die Kundenkommunikation effektiv?

Fazit: Wie füge ich Bild-Hover-Effekte in WordPress hinzu?

Es gibt viele Methoden, um eine Website zu personalisieren, aber eine der einfachsten ist die Verwendung eines Hover-Effekts auf Bildern. Hover-Effekte sind eine unterhaltsame Möglichkeit, die Besucher Ihrer Website zu fesseln und sie länger dort zu halten.

Haben Sie einen bevorzugten Hover-Effekt, den Sie gerne verwenden? Schreib es unten in den Kommentarbereich!