So fügen Sie interaktive Bilder in WordPress hinzu

Um ansprechende Websites zu erstellen, die von Benutzern nicht im Handumdrehen gedankenverloren sind, bedarf es einer sorgfältigen Planung und der Verwendung hochwertiger visueller Inhalte. In den meisten Fällen reichen Worte allein nicht aus, um Besucher auf einer Seite zu halten, denn:

Eine besonders gute Möglichkeit, mit Ihrem Publikum in Kontakt zu treten, ist die Verwendung interaktiver visueller Inhalte, da sie Geschichten anschaulicher erzählen können als statische Grafiken.

Warum sind interaktive Bilder wichtig

Interaktive Bilder ermöglichen es Ihnen, die Benutzerfreundlichkeit zu verbessern. Sie können beispielsweise ein Wildtierbild hochladen und Benutzern dann ermöglichen, auf jedes Tier zu tippen, um mehr darüber zu erfahren. Oder, wenn Sie einen Online-Shop betreiben, könnten die Leute auf jedes Produkt klicken, um Benutzerbewertungen zu lesen und mehr Bilder davon zu sehen.

Die Sache ist, Indem Sie Hotspots auf Bildern platzieren und diese dann mit Text-, Audio-, Video- oder anderen Inhalten verknüpfen, können Sie Seiten zum Leben erwecken und Ihre Website einprägsamer machen. Sie können sie auch mit Highlights, zusätzlichen Informationen, Beschreibungen, Links zu anderen Webseiten und einem Spiel mit Farben aufladen, um die Benutzer zum Handeln und zur Beteiligung an Ihrer Marke einzuladen.

So fügen Sie interaktive Bilder in WordPress hinzu

Wenn WordPress etwas nicht sofort tun kann, rücken Plugins ins Rampenlicht. Diesmal ist es nicht anders.

Der schnellste Weg, interaktive Bilder in WordPress hinzuzufügen, ist die Verwendung eines Plugins. Während mehrere Premium-Plugins auf dem Markt Ihnen bei der Arbeit helfen könnten, einschließlich Imagemap Pro für WordPress, Werbung, und WooMapper, wir mochten die Funktionen, die die Aufmerksamkeit erregen Plugin-Pakete. Sie erhalten viel Wert, ohne Geld ausgeben zu müssen, da das Plugin kostenlos aus dem offiziellen WordPress-Plugin-Repository heruntergeladen werden kann.

Der erste Schritt besteht darin, das Plugin zu installieren und auf Ihrer Website zu aktivieren. Um ein interaktives Bild zu erstellen, suchen Sie nach dem Aufmerksamkeit erregen Option in Ihrem Menü und klicken Sie auf Bild bearbeiten.

Zuerst können Sie den Bildtitel hinzufügen, der sichtbar ist, sobald das Bild angezeigt wird.

Fügen Sie dann auf der rechten Seite des Bildschirms das neue Bild hinzu, das Sie bearbeiten möchten, oder wählen Sie eines aus der Medienbibliothek aus.

Sobald das Bild hochgeladen ist, können Sie zahlreiche Styling-Optionen anpassen und Farben ändern, geben Sie die Standardeinstellung ein Mehr Info Texte usw.

Wenn Sie die Seite etwas nach unten scrollen, gelangen Sie zum Hotspot-Bereiche Sektion. Hier können Sie Hotspot-Bereiche zu Ihrem Bild hinzufügen.

Klicken Sie für den Anfang auf Anklickbarer Bereich #1. Ihr Bild erscheint jetzt unter Koordinaten.

Klicken Sie nun einfach auf den Teil des Bildes, an dem Sie den ersten Punkt hinzufügen möchten. Sie können verschiedene Hotspot-Formen zeichnen, indem Sie weitere Punkte hinzufügen, die dann einen Hotspot-Bereich bilden.

Unter dem Bild finden Sie eine Reihe zusätzlicher Optionen, mit denen Sie Fügen Sie einen Titel für Ihren Hotspot-Bereich hinzu, wählen Sie aus, was passiert, wenn ein Benutzer auf einen Hotspot klickt (Sie können weitere Informationen einfügen oder einen Link hinzufügen, der sie zu einer anderen Webseite führt), Geben Sie eine Beschreibung ein und laden Sie ein Bild hoch, das angezeigt wird, sobald der Benutzer auf den Hotspot klickt.

Wenn Sie mit dem Endergebnis zufrieden sind, drücken Sie die Aktualisieren Taste.

Um nun Ihr interaktives Bild zu einer Seite oder einem Beitrag hinzuzufügen, Kopieren Sie den Shortcode, der auf der rechten Seite des Bildschirms angezeigt wird.

Gehen Sie dann zu der Seite, auf der Sie das interaktive Bild anzeigen möchten. Falls Sie noch den Classic Editor verwenden, fügen Sie den Code in das Texteditor. Fügen Sie in Gutenberg das hinzu Kurzcode Blockieren Sie zuerst und fügen Sie Ihren Code ein. Wenn Elementor Ihr bevorzugter Seitenersteller ist, fügen Sie den Code zum Kurzcode Widget und das interaktive Bild wird auf Ihrer Seite angezeigt.

Interaktive Bilder importieren/exportieren

Das Draw Attention Plugin bietet eine weitere praktische Option, die praktisch ist, wenn Sie auf mehreren Sites arbeiten und interaktive Bilder von einer Site zur nächsten importieren und exportieren möchten.

In diesem Fall sollten Sie zuerst das Plugin auf beiden Websites installieren. Gehen Sie auf der Website, von der Sie das Bild exportieren möchten, zu Aufmerksamkeit erregen > Importieren / Exportieren, wählen Sie die gewünschten Bilder aus und drücken Sie die Exportcode generieren Taste.

Kopieren Sie nun den gesamten Code.

Gehen Sie als Nächstes zu der anderen Website, auf der Sie das Bild importieren möchten, und klicken Sie erneut auf Aufmerksamkeit erregen > Importieren / Exportieren, fügen Sie Ihren Code in die Importieren Feld und drücken Sie die Importieren Taste.

Der Nachteil der kostenlosen Version dieses Plugins besteht darin, dass Sie Ihrer Website nur ein interaktives Bild hinzufügen können. Wenn Sie sich für ein Upgrade auf eines von ihnen entscheiden Premium-Pläne Sie haben jedoch die Möglichkeit, beliebig viele interaktive Bilder hinzuzufügen und eine unbegrenzte Anzahl von Hotspots festzulegen, ein bevorzugtes Layout und eine der 20 vordefinierten Farbpaletten auszuwählen, ein Jahr Support und Updates zu erhalten und mehr.

Abschließende Gedanken

Die Verwendung interaktiver Bilder kann Ihnen zweifellos helfen, die Besucher auf Ihrer Website zu halten und möglicherweise Ihre Konversionsraten zu erhöhen. Je interessanter und ansprechender der von Ihnen angebotene Inhalt ist, desto mehr Leute werden mit Ihnen Geschäfte machen wollen. The Draw Attention ist ein großartiges Plugin, wenn Sie eine Lösung benötigen, mit der Sie problemlos ein interaktives Bild zu Ihren Seiten hinzufügen können. Vergessen Sie nur nicht, Bilder vor dem Hochladen zu optimieren, um die Leistung und UX der Website nicht zu gefährden.