So fügen Sie einen Vergrößerungszoom für Bilder in WordPress hinzu

Möchten Sie einen lupenähnlichen Zoom für Bilder in WordPress hinzufügen? Ein Lupenzoom ist mehr als nur ein schickes Feature, er ist ein nützliches Werkzeug, mit dem Ihre Besucher kleine Details in Bildern sehen können, die sie normalerweise nicht sehen können. 

Wir empfehlen dringend, eine Zoomfunktion für Online-Shops hinzuzufügen, bei denen Kunden die Textur und Qualität der Artikel sehen möchten. Dies ist auch für Fotografie-Websites hilfreich, auf denen Betrachter jedes Detail eines Bildes sehen möchten.

Durch das Hinzufügen eines Vergrößerungszooms zu Ihren Bildern können Sie die Benutzererfahrung verbessern, Benutzer länger interessieren und sogar den Umsatz steigern.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine vergrößernde Zoomfunktion für Bilder in WordPress hinzufügen.

Warum eine Vergrößerungs-Zoomfunktion für Bilder hinzufügen?

Das Hinzufügen einer Lupenfunktion auf Ihrer WordPress-Website ermöglicht es Besuchern, die komplexen Details der Bilder klar zu erkennen.

Wenn Sie eine Fotografie-Website haben, können Sie mit einer Vergrößerungsfunktion Benutzern ermöglichen, Ihre Fotografien zu vergrößern, um die feineren Details zu betrachten.

Wenn Sie ähnlich einen Online-Shop betreiben, können Ihre Kunden Produktbilder vergrößern.

Viele große E-Commerce-Websites verwenden bereits Lupenzoom für Produktbilder. Dies ermöglicht es Kunden, das Produkt zu untersuchen und schafft ein besseres Einkaufserlebnis in Ihrem Geschäft.

Das gesagt, wir zeigen Ihnen, wie Sie mit drei verschiedenen Methoden ganz einfach einen Vergrößerungs-Zoom für Bilder in WordPress hinzufügen können. Sie können die Links unten verwenden, um zur bevorzugten Methode zu springen.

• Methode 1: Vergrößerungszoom für Bilder in WordPress mit Envira Gallery hinzufügen (empfohlen)
• Methode 2: Lupenzoom für WordPress-Bilder mit WP Image Zoom hinzufügen
• Method 3: Add a Magnifying Zoom for Images in WordPress with WPCode

Methode 1: Lupenzoom für Bilder in WordPress mit Envira Gallery hinzufügen (empfohlen)

Envira Gallery ist das beste Galerie-Plugin für WordPress. Sie können es verwenden, um ganz einfach schöne Bildergalerien für Ihre WordPress-Website zu erstellen. Es wird auch mit einem Zoom-Addon geliefert, mit dem Sie Ihren Galeriebildern eine Zoom-Funktionalität hinzufügen können.

Weitere leistungsstarke Envira-Funktionen sind ein Drag-and-Drop-Builder, vorgefertigte Galerie-Designs, Lightbox-Popups, Bildkomprimierung, Bildschutz und mehr.

Um zu beginnen, müssen Sie das Plugin Envira Gallery installieren und aktivieren. Weitere Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie zur Seite Envira Gallery » Settings navigieren und Ihren Lizenzschlüssel eingeben. Sie finden den Lizenzschlüssel in Ihrem Envira Gallery-Konto.

Danach klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Gehen Sie als Nächstes zu Envira Gallery » Addons. Scrollen Sie von hier aus nach unten, um das Zoom-Addon zu finden, und klicken Sie auf die Schaltfläche „Installieren“.

Sobald das Zoom-Addon installiert ist, müssen Sie es auch aktivieren, indem Sie den Schalter umlegen.

Der nächste Schritt ist das Hinzufügen einer neuen Galerie. Gehen Sie dazu im WordPress-Dashboard zu Envira Gallery » Neu hinzufügen.

Von hier aus können Sie Ihrer Galerie einen Namen geben und auf die Schaltfläche „Dateien von Ihrem Computer auswählen“ klicken, um Bilder in Ihre Galerie hochzuladen.

Sie können auch auf die Schaltfläche „Dateien aus anderen Quellen auswählen“ klicken, um Bilder aus der WordPress-Mediathek zu Ihrer Galerie hinzuzufügen.

Sobald Sie Bilder zu Ihrer Galerie hochgeladen haben, können Sie diese neu anordnen, indem Sie die Thumbnails per Drag & Drop an die richtige Stelle ziehen.

Es gibt auch andere Optionen zur Anpassung Ihrer Bildergalerie. Sie können beispielsweise ein Galerie-Layout auswählen, Bildtitel und Alt-Texte hinzufügen, die Galerie-Lightbox aktivieren, Bildunterschriften anzeigen, Bildabmessungen bearbeiten und vieles mehr.

Weitere Details finden Sie in unserem Leitfaden zum Erstellen responsiver Bildergalerien mit Envira.

Einstellungen für den Bildzoom konfigurieren

Um Ihren Galeriebildern einen Vergrößerungszoom hinzuzufügen, klicken Sie auf die Registerkarte „Zoom“. Aktivieren Sie dann das Kontrollkästchen, um die Zoom-Funktionalität zu aktivieren.

Sobald die Zoom-Funktionalität aktiviert ist, werden die Einstellungen zum Hinzufügen von Zoom zu Ihren Bildern angezeigt.

Sie können Einstellungen wie Zoom beim Überfahren mit der Maus, Zoom-Effekt, Zoom-Typ, Position des Zoom-Fensters, Größe des Zoom-Fensters, Tönungsfarbe und mehr konfigurieren.

Wenn Sie mit den Zoom-Einstellungen zufrieden sind, klicken Sie auf die Schaltfläche „Veröffentlichen“, um Ihre Änderungen zu speichern und diese Galerie verfügbar zu machen.

Einbetten Ihrer Bildergalerie mit Vergrößerungszoom

Jetzt, da Ihre Galerie fertig ist, können Sie sie direkt zu jeder Seite oder jedem Beitrag in WordPress hinzufügen.

Klicken Sie im WordPress-Inhaltseditor einfach auf die Schaltfläche „+“, um den Envira Gallery-Block hinzuzufügen. Klicken Sie dann auf das Dropdown-Menü innerhalb des Envira Gallery-Blocks, um auszuwählen, welche Galerie angezeigt werden soll.

Als Nächstes sehen Sie eine Vorschau Ihrer Bildergalerie im WordPress-Blockeditor. Wenn Sie mit dem Aussehen zufrieden sind, können Sie den Beitrag oder die Seite veröffentlichen.

Jetzt können Sie Ihre Website besuchen, um die Lupenzoomfunktion in Aktion zu sehen.

Envira Gallery ist ein großartiges Plugin, um Fotografie-Websites mit Zoom-Funktionalität zu versehen. Es funktioniert aber auch perfekt für Online-Shops.

Weitere Informationen finden Sie in unserem Leitfaden zur Erstellung einer WooCommerce-Produktbildergalerie.

Methode 2: Wie man mit WP Image Zoom einen Vergrößerungszoom für Bilder in WordPress hinzufügt

WP Image Zoom ist ein kostenloses WordPress-Plugin, mit dem Sie ganz einfach eine Lupe für Ihre Bilder erstellen können.

Installieren und aktivieren Sie zuerst das Plugin WP Image Zoom. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Wir werden in diesem Tutorial die kostenlose Version verwenden, aber wenn Sie mehr Anpassungsoptionen wünschen, sollten Sie sich WP Image Zoom Pro ansehen. Mehr über das Plugin erfahren Sie in unserem WP Image Zoom Testbericht.

Nach der Aktivierung müssen Sie zur Seite WP Image Zoom » Zoom Settings in der WordPress-Admin-Seitenleiste navigieren.

Als Nächstes müssen Sie die Einstellungen für den Zoomeffekt konfigurieren, indem Sie zum Tab „Zoom-Einstellungen“ wechseln und eine Linsenform auswählen, die Sie verwenden möchten.

Sie können zwischen runden, quadratischen und Zoom-Fenster-Linsenformen wählen. Sie können sogar die Option „Keine Linse“ (⨯) wählen, wenn Sie keine Form für den Vergrößerungseffekt verwenden möchten.

Nachdem Sie Ihre bevorzugte Linse ausgewählt haben, müssen Sie zum nächsten Schritt scrollen, wo Sie eine Vorschau eines Bildes mit der ausgewählten Linse anzeigen können, um zu sehen, wie sie funktioniert. Das Plugin verfügt über ein Vorschaubild, mit dem Sie Ihre Änderungen testen können.

Als Nächstes müssen Sie zum Reiter „Allgemein“ wechseln.

Von hier aus können Sie einen Cursor-Typ auswählen, einen Animationseffekt einstellen, den Zoom beim Mouse-Hover oder Mouse-Click aktivieren und eine Zoomstufe definieren.

Wenn Sie noch mehr Optionen wünschen, sind einige der Funktionen nur für die Pro-Version des WP Image Zoom Plugins verfügbar.

Nachdem Sie Ihre Entscheidungen entsprechend getroffen haben, gehen Sie einfach zum Reiter 'Lens' von oben.

Sie können nun Einstellungen wie Objektivgröße, Objektivfarbe, Objektivrandoptionen und mehr konfigurieren, wenn Sie im Schritt 1 das Objektiv „Kreis“ oder „Quadrat“ ausgewählt haben.

Wenn Sie das Zoomfenster-Objektiv ausgewählt haben, müssen Sie zur Konfigurationseinstellung „Zoomfenster“ wechseln.

Von hier aus können Sie die Breite und Höhe des Zoomfensters, die Positionierung, den Abstand zum Hauptbild, die Rahmenfarben und mehr ändern.

Als Nächstes müssen Sie einfach auf „Änderungen speichern“ klicken, um Ihre Einstellungen zu speichern.

Danach müssen Sie nur noch einige allgemeine Einstellungen konfigurieren.

Allgemeine Plugin-Einstellungen konfigurieren

Als Nächstes müssen Sie unter den Plugin-Einstellungen zum Tab „Allgemeine Einstellungen“ wechseln.

Von hier aus können Sie nun Funktionen wie Zoom für WooCommerce-Produktbilder, Thumbnails, mobile Geräte, Anhangsseiten, Produktkategorieseiten und mehr aktivieren.

Alles, was Sie tun müssen, ist einfach die Kontrollkästchen neben diesen Optionen zu aktivieren.

Sie können auch den Lightbox-Effekt entfernen, damit Benutzer Bilder reibungslos zoomen können.

Für diese Funktion benötigen Sie jedoch die Pro-Version des Plugins.

Wenn Sie die Lightbox für Bilder nicht entfernen möchten, müssen Sie nach unten zu der Option 'Enable inside a Lightbox' scrollen und das Kontrollkästchen daneben aktivieren.

Hinweis: Sie können unterstützte Lightboxen einsehen, um sicherzustellen, dass der Zoom innerhalb einer Lightbox auf Ihrer Website einwandfrei funktioniert.

Wenn Sie die Einstellungen angepasst haben, vergessen Sie nicht, auf die Schaltfläche 'Änderungen speichern' zu klicken, um Ihre Einstellungen zu speichern.

Der Lupenzoom wird nun für WooCommerce-Produkte aktiviert.

Sie können Ihren Online-Shop besuchen, um unsere Zoomfunktion zu testen.

Wenn Sie jedoch die Zoomfunktion für Bilder in WordPress-Beiträgen und -Seiten aktivieren möchten, müssen Sie den folgenden Schritt ausführen.

Lupenzoom für Bilder im Block-Editor aktivieren

Standardmäßig ist der Vergrößerungszoom für Bilder in Ihren Beiträgen und Seiten nicht aktiviert. Sie müssen dies manuell tun, nachdem Sie ein Bild zu Ihrem Inhalt hinzugefügt haben.

Zuerst müssen Sie einen Beitrag öffnen, den Sie bearbeiten möchten, im Block-Editor.

Als Nächstes müssen Sie ein Bild von der Mediathek oder Ihrem Computer in diesen Beitrag hochladen.

Sobald Sie das getan haben, klicken Sie einfach auf das Bild, um dessen Block-Einstellungen-Panel in der rechten Ecke des Bildschirms zu öffnen.

Gehen Sie von hier aus einfach zum Tab „Stile“ und klicken Sie auf die Schaltfläche „Mit Zoom“, um den Lupenzoom auf Ihr Bild anzuwenden.

Danach klicken Sie einfach auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“ oben, um Ihre Einstellungen zu speichern.

Die Zoomfunktion wird auf Ihrer Website wie folgt aussehen:

Hinweis: Sie müssen diesen Schritt jedes Mal wiederholen, wenn Sie den Zoomeffekt zu einem einzelnen Bild hinzufügen möchten.

Methode 3: So fügen Sie einen Vergrößerungszoom für Bilder in WordPress mit WPCode hinzu

Sie können auch eine Vergrößerungszoomfunktion zu Ihren Bildern in WordPress hinzufügen, indem Sie das kostenlose WPCode Plugin verwenden.

WPCode ist das beste Code-Snippet-Plugin auf dem Markt, mit dem Sie sicher und einfach benutzerdefinierten Code zu Ihrer Website hinzufügen können. Es enthält über 393 vorgefertigte Code-Snippets, die Sie mit nur wenigen Klicks hinzufügen können, darunter eine Lupe für Bilder.

Um zu beginnen, müssen Sie das kostenlose WPCode Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, sehen Sie sich unser Tutorial zur Installation eines WordPress-Plugins an.

Gehen Sie nach der Aktivierung in Ihrem WordPress-Dashboard zu Code-Snippets » Bibliothek.

Dies bringt Sie zur Snippet-Bibliothek, wo Sie alle verschiedenen Snippets sehen können, die Sie zu Ihrer Website hinzufügen können.

Von hier aus suchen Sie einfach im Katalog nach dem Snippet „Lupe für Bilder“.

Sobald Sie ihn gefunden haben, fahren Sie mit der Maus darüber und klicken Sie auf die Schaltfläche „Snippet verwenden“.

WPCode fügt den Code dann automatisch für Sie hinzu und wählt die richtige Einfügungsmethode aus.

Jetzt müssen Sie nur noch den Schalter von „Inaktiv“ auf „Aktiv“ umlegen und dann auf die Schaltfläche „Aktualisieren“ klicken.

Das ist alles! Wenn Sie Ihre WordPress-Website besuchen, werden Sie sehen, dass alle Ihre Bilder ein Lupensymbol haben, das erscheint, wenn Sie mit der Maus darüber fahren.

Hinweis: Wir empfehlen die Verwendung von hochwertigen Bildern, damit die Zoomfunktion gut aussieht. Hochwertige Bilder sind normalerweise größer in der Dateigröße und laden länger, was sich auf die Geschwindigkeit und Leistung Ihrer Website auswirkt.

Um dieses Problem zu lösen, müssen Sie Ihre Bilder für das Web optimieren, bevor Sie sie in WordPress hochladen.

Video-Tutorial

Wenn Sie kein Fan von schriftlichen Tutorials sind, können Sie stattdessen unser Video-Tutorial ansehen:

WPBeginner abonnieren

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Vergrößerungszoom für Bilder in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Optimieren von Bildern für Suchmaschinen und unsere Top-Auswahl für die besten Bildkomprimierungs-Plugins sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.