Das Hinzufügen eines subtilen Hover-Effekts zu Ihren Produktbildern ist eines der besten Dinge, die Sie für Ihre WooCommerce-Website tun können.
Es wird Ihr Geschäft interaktiver machen, Ihre verbessern Verweilzeithinterlassen Sie einen guten Eindruck bei Ihren Besuchern und helfen Sie, sie in Kunden umzuwandeln.
In diesem Tutorial zeige ich, wie Sie Ihren Produkten in Ihrem WooCommerce-Shop einen Bildaustauscheffekt hinzufügen können.
Was ist ein Bild-Hover-Effekt?
Ein Bild-Hover-Effekt ist eine Animation, die ausgelöst wird, wenn der Mauszeiger über ein Bild bewegt wird.
Dabei kann es sich um Effekte wie das Vergrößern, Verkleinern, Drehen, Spiegeln oder Austauschen eines Bildes handeln; seine Farben ändern; oder Call-to-Action-Buttons hinzufügen.
Ein gut gewählter Bild-Hover-Effekt, wie beispielsweise eine stylische Produktbild-Tauschanimation, hat viele Vorteile. Zum Beispiel ist es:
- macht einen tollen ersten eindruck
- baut Vertrauen auf
- macht sofort auf die Produkte aufmerksam
- lässt Besucher wissen, dass die Bilder anklickbar sind
- hilft Kunden, schnellere Kaufentscheidungen zu treffen
- verbessert Verweilzeiten und Suchmaschinen-Rankings
- können Produktvideos ersetzen
- …und mehr
Sehen wir uns nun an, wie Sie Ihren WooCommerce-Produkten einen Bildaustauscheffekt hinzufügen können.
1. Finden Sie ein geeignetes WooCommerce-Thema
Der einfachste Weg, Ihren Produktbildern einen Hover-Effekt hinzuzufügen, besteht darin, ein WooCommerce-Theme zu installieren, das diese Funktion standardmäßig bereitstellt.
In diesem Tutorial verwende ich unser Botiga-Design, mit dem Sie erweiterte Anpassungen an Ihrem WooCommerce-Shop vornehmen können, ohne eine einzige Codezeile schreiben zu müssen. Sie können jedoch jedes andere WooCommerce-Design verwenden, das diese Funktionalität enthält.
2. Installieren Sie das Botiga-Design
Laden Sie zunächst das kostenlose Botiga-Design von unserer Website herunter.
Öffnen Sie dann Ihr WordPress-Dashboard und gehen Sie zu Darstellung > Designs > Neu hinzufügen > Design hochladen.
Hochladen das Thema, und drücken Sie die Jetzt installieren und aktivieren Sie Schaltflächen zum Installieren und Aktivieren des Designs auf Ihrer Website.
3. Installieren Sie das Botiga Pro-Plugin
Botiga Pro ist ein Premium-Plugin, das das kostenlose Theme um erweiterte Funktionen und zusätzliche Starterseiten erweitert. Um Ihren WooCommerce-Produktbildern einen Hover-Effekt hinzuzufügen, benötigen Sie sowohl das Design als auch das Plugin.
Laden Sie nach dem Kauf der Lizenz herunter Botiga Pro von Ihrem Themelocal-Konto aus und gehen Sie dann zu Plugins > Neu hinzufügen > Plugin hochladen.
Hochladen das Plugin, und drücken Sie die Jetzt installieren Taste.
Als nächstes aktivieren Sie Ihre Lizenz, indem Sie zu gehen Plugins > Botiga Pro-Lizenz und Eingabe Ihrer Lizenzschlüssel. Sie können Ihren Schlüssel von Ihrem Themelocal-Konto erhalten.
Fertig? Kommen wir zum nächsten Schritt.
4. Importieren Sie eine Starter-Site
Botiga-Startseiten (oder Demos) sind vorgefertigte WooCommerce-Shops mit Beispielprodukten, die Sie mit wenigen Klicks importieren können. Sobald Botiga auf Ihrer Website aktiviert ist, sehen Sie ein Banner in Ihrer Themen-Dashboard Sie werden aufgefordert, die Starter-Sites zu überprüfen.
Sie können auf die Starter-Site-Bibliothek zugreifen, indem Sie entweder auf klicken Starterseiten Schaltfläche im Banner oder der Darstellung > Starterseiten Menü in der linken Seitenleiste.
Die Bibliothek besteht derzeit aus fünf Einstiegsseiten: Schönheit, Bekleidung, Möbel, Schmuck und Einzelprodukt.
Bevor Sie eine auswählen, können Sie auf klicken Vorschau-Demo Schaltfläche, um zu überprüfen, wie Ihre Website aussehen würde. Als nächstes drücken Sie die Importieren Schaltfläche Ihrer bevorzugten Starter-Site und warten Sie, bis der Importvorgang abgeschlossen ist.
5. Öffnen Sie das Produktkatalog-Menü im Customizer
Jetzt ist es an der Zeit, den Hover-Effekt zu Ihren WooCommerce-Produktbildern hinzuzufügen. Folgendes müssen Sie tun:
Gehe zu Aussehen > Anpassen um den Customizer zu öffnen.
Gehen Sie im Customizer zu WooCommerce > Produktkatalog Menü, und erweitern Sie das Produktkarte Möglichkeit.
Hier können Sie den Bild-Hover-Effekt anwenden.
6. Aktivieren Sie den Produktbild-Austauscheffekt
Einmal die Produktkarte Wenn die Registerkarte erweitert ist, sollten Sie a sehen Produktbildtausch Möglichkeit.
Schalten Sie es ein und drücken Sie dann die Veröffentlichen Schaltfläche, um Ihre Änderungen zu speichern.
Immer wenn der Mauszeiger nun über ein Produktbild auf einer Archivseite fährt, wird es mit einem anderen Bild von der Produktseite ausgetauscht. Dies bedeutet, dass Sie haben müssen mindestens zwei Bilder für jedes Produkt.
Öffnen Sie eine Ihrer Archivseiten, z. B. Ihre Shop- oder Kategorieseiten, und überprüfen Sie, wie der Bildertausch auf Ihrer Website funktioniert.
So sah zum Beispiel die Shop-Seite auf meiner Demoseite vorher aus:
Und so funktioniert es nach dem Aktivieren von Produktbildtausch Besonderheit:
7. Fügen Sie Ihre eigenen Produkte hinzu
Inzwischen haben Sie eine funktionierende WooCommerce-Site und Sie haben Ihren Produktbildern einen Hover-Effekt hinzugefügt.
Die Starter-Site, die Sie von Botiga importiert haben, enthält jedoch Dummy-Produkte. Lassen Sie uns also schnell sehen, wie Sie Ihren Shop mit Ihren eigenen Produkten in WooCommerce füllen können.
Sie können Ihre Produkte aus dem hochladen Produkte > Neu hinzufügen Menü in Ihrem WordPress-Adminbereich.
Auf der Neues Produkt hinzufügen Seite gibt es einen Editor, in dem Sie die Details Ihres Produkts wie Titel und Beschreibung eingeben können.
Sobald sie ausgefüllt sind, scrollen Sie nach unten zu Produktdaten Wählen Sie einen Produkttyp aus und füllen Sie alle relevanten Felder aus, z. B. Inventar, Versand, verknüpfte Produkte und andere.
Weitere Informationen zu den Produktdatenoptionen finden Sie unter diese WooCommerce-Dokumentationsseite.
Als Nächstes sehen Sie in der rechten Seitenleiste zwei Optionen:
- Produktbild – das ist das vorgestellte Bild auf der Produktseite
- Produktgalerie – dazu gehören auch alle anderen Produktbilder
Wie ich oben erwähnt habe, müssen Sie mindestens zwei Bilder hochladen (eines als Produktbild und eine in die Produktgalerie), um Botigas zu machen Produktbildtausch Feature-Arbeit.
Sie können auch hinzufügen Produktkategorien und Produkt Tags aus der Seitenleiste.
Zeigen Sie eine Vorschau der Produktseite an, indem Sie auf klicken Vorschau Taste, und wenn Sie bereit sind, drücken Sie die Veröffentlichen Taste.
Fazit
Das Hinzufügen eines Produktbild-Hover-Effekts zu Ihrer WooCommerce-Website ist eine großartige Möglichkeit, sie interaktiv und ansprechend zu gestalten.
Obwohl es viele Möglichkeiten gibt, Hover-Effekte zu implementieren, empfehle ich die Verwendung subtiler Animationen wie Bildwechsel, da dies nicht zu ablenkend ist und eine bessere Benutzernavigation bietet – insbesondere in einem WooCommerce-Shop.
Botiga Pro hilft Ihnen dabei, Ihren Produktbildern auf Ihrer WooCommerce-Website ganz einfach einen Hover-Swap-Effekt hinzuzufügen – alles, was Sie tun müssen, ist auf den WordPress Customizer zuzugreifen, um den Effekt zu aktivieren und mindestens zwei Bilder zu jedem Ihrer Produkte hinzuzufügen.
Ich hoffe, Sie fanden dieses Tutorial hilfreich. Wenn Sie Fragen haben, hinterlassen Sie uns unten einen Kommentar.