Interaktive Bilder in WordPress erstellen

Das perfekte Bild für Ihren WordPress-Beitrag zu finden, ist ein guter Anfang, aber oft ist es eine Einbahnstraße. Ihre Besucher sehen ein statisches Bild und verpassen möglicherweise die wichtigsten Details, die Sie hervorheben möchten.

Das kann frustrierend sein, besonders wenn Sie Produktmerkmale hervorheben oder Benutzer durch einen Prozess führen möchten. Was wäre, wenn Ihre Bilder mehr könnten und Ihr Publikum aktiv einbinden würden?

Genau das tun interaktive Bilder. Nachdem wir hier bei WPBeginner mehrere Plugins getestet haben, haben wir eine unkomplizierte Methode gefunden, mit der jeder klickbare Hotspots zu seinen Bildern hinzufügen kann, ohne Code zu benötigen.

In diesem Leitfaden zeigen wir Ihnen, wie Sie Ihre statischen Bilder ganz einfach in ansprechende, interaktive Erlebnisse für Ihre Besucher verwandeln können.

In dieser Anleitung führen wir Sie durch den gesamten Prozess. Hier ist ein kurzer Überblick darüber, was Sie lernen werden.

1. Was ist ein interaktives Bild?
2. So fügen Sie interaktive Bilder zu Ihren WordPress-Inhalten hinzu
3. Wie importiert/exportiert man interaktive Bilder auf andere WordPress-Websites
4. Häufig gestellte Fragen zu interaktiven Bildern

Was ist ein interaktives Bild?

Ein interaktives Bild kann Hotspot-Bereiche, Hervorhebungen, Links, klickbare Schaltflächen, Farben, audiovisuellen Inhalt und mehr enthalten.

Dies ist sofort viel ansprechender als ein einfaches, standardmäßiges Bild, das Sie auf Ihre WordPress-Website hochladen.

Interaktive Bilder können die Aufmerksamkeit des Besuchers auf bestimmte Funktionen und Inhalte lenken und dann zusätzliche Informationen anzeigen.

Zum Beispiel könnten Sie ein Popup anzeigen, wenn der Besucher mit der Maus über einen bestimmten Balken in einem Diagramm fährt.

Diese Interaktion kann Besucher dazu anregen, Ihre Bilder detaillierter zu erkunden, wodurch sie länger auf der Seite bleiben. Sie kann auch ein interaktiveres und interessanteres Erlebnis schaffen, das Ihre Seitenaufrufe erhöht und die Absprungrate in WordPress reduziert.

Interaktive Bilder können den Besuchern auch die nächsten Schritte anzeigen. Sie könnten zum Beispiel Links zu anderen Teilen Ihrer Website hinzufügen oder eine Schaltfläche für einen Handlungsaufruf anzeigen.

Mit diesem Wissen sehen wir uns an, wie Sie interaktive Bilder für Ihre WordPress-Website erstellen können.

Hinweis: Wenn Sie stattdessen animierte Bilder zu Ihrer Website hinzufügen möchten, folgen Sie unserer Schritt-für-Schritt-Anleitung zum Hinzufügen von animierten GIFs in WordPress.

So fügen Sie interaktive Bilder zu Ihren WordPress-Inhalten hinzu

Der einfachste und anfängerfreundlichste Weg, klickbare Bereiche oder interaktive Hotspots hinzuzufügen, ist die Verwendung von Draw Attention. Dieses Plugin ermöglicht es Ihnen, entweder ein 'Mehr Infos'-Popup anzuzeigen oder eine neue URL zu öffnen, wenn der Benutzer mit einem Bild interagiert.

Das erste, was Sie tun müssen, ist das Draw Attention Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung im WordPress-Dashboard zu Aufmerksamkeit erregen » Bild bearbeiten. Dies führt Sie zu einem Bildschirm, auf dem Sie verschiedene Interaktionen erstellen und sie dann als klickbare Bereiche zu einem Bild hinzufügen können.

Geben Sie zunächst einen Titel für das interaktive Bild ein.

Dies wird neben dem Bild auf Ihrer WordPress-Website angezeigt. Im folgenden Bild verwenden wir beispielsweise den Titel „OptinMonster Features“.

Nachdem Sie einen Titel eingegeben haben, scrollen Sie zum Abschnitt 'Bild' und wählen Sie das Bild aus, das Sie verwenden möchten.

Sie können entweder ein Bild aus der Mediathek auswählen oder ein neues Bild hochladen.

Nachdem Sie ein Bild ausgewählt haben, können Sie Farben und Links hinzufügen, klickbare Bereiche erstellen und mehr, indem Sie nach unten zum Abschnitt „Hotspot-Bereiche“ scrollen.

Das Plugin erstellt standardmäßig einen klickbaren Bereich 1. Klicken Sie also, um diesen Abschnitt zu erweitern.

Zuerst müssen Sie den Bereich hervorheben, den Sie interaktiv gestalten möchten.

Draw Attention bietet verschiedene Formen, die Sie für die Hervorhebung verwenden können. Klicken Sie einfach auf die Form, die Sie verwenden möchten. Im folgenden Bild haben wir ein Rechteck ausgewählt.

Klicken und ziehen Sie nun einfach, um den Bereich hervorzuheben, den Sie als Hotspot für das Bild verwenden möchten.

Draw Attention zeigt nun einige neue Einstellungen für diesen klickbaren Bereich an. Geben Sie zunächst einen Namen in das Feld 'Titel' ein.

Dies wird als Tooltip angezeigt, wenn der Besucher mit der Maus über den Hotspot fährt. Es ist daher ratsam, etwas Beschreibendes zu verwenden.

Im folgenden Bild haben wir den Countdown-Bereich in einen Hotspot verwandelt und den Bildtitel „Countdown-Timer“ hinzugefügt.

Sobald Sie das getan haben, öffnen Sie das Dropdown-Menü 'Aktion' und wählen Sie aus, was passieren soll, wenn ein Besucher diesen Bereich anklickt. 'Aufmerksamkeit erregen' kann entweder einen Link öffnen oder eine 'Mehr Info'-Box anzeigen.

Sie sehen unterschiedliche Einstellungen, je nachdem, welche Optionen Sie auswählen. Wenn Sie beispielsweise „Zur URL gehen“ wählen, müssen Sie einen Link hinzufügen und angeben, ob dieser in einem neuen Tab geöffnet werden soll.

Wenn Sie 'Show More Info' auswählen, müssen Sie die Informationen eingeben, die angezeigt werden, wenn der Besucher auf den Hotspot klickt.

Sie können auch ein optionales Detailbild oder eine URL hinzufügen, die in der Infobox enthalten sein wird.

Im folgenden Bild haben wir dem Infobox-Bereich Text hinzugefügt.

Wir haben auch das OptinMonster-Logo als Detailbild hinzugefügt.

Wenn Sie mit dem Aussehen des Hotspots zufrieden sind, klicken Sie auf die Schaltfläche 'Weiteren Bereich hinzufügen'.

Sie können nun den klickbaren Bereich nach demselben oben beschriebenen Verfahren konfigurieren.

Wiederholen Sie einfach diese Schritte, um alle klickbaren Bereiche zum Bild hinzuzufügen.

Wenn Sie dies getan haben, möchten Sie vielleicht anpassen, wie die Highlights und die Infobox aussehen. Sie können zum Beispiel die Farbe ändern, die Draw Attention anzeigt, wenn Besucher mit der Maus über einen klickbaren Bereich fahren, indem Sie die Einstellungen für die 'Highlight-Farbe' verwenden.

Sie können auch die Hervorhebungsdeckkraft und die Rahmenbreite ändern, einen Rahmen hinzufügen und mehr mit den Einstellungen im Abschnitt „Hervorhebungsgestaltung“.

Danach können Sie zu 'More Info Box Styling' scrollen und das Aussehen der Box feinabstimmen. Sie können zum Beispiel die Hintergrundfarbe, Textfarbe und mehr ändern.

Draw Attention bietet auch verschiedene Themes, die Sie auf Ihr interaktives Bild anwenden können.

Um sich diese Themes anzusehen, scrollen Sie einfach zum Feld „Farbschema anwenden“ und öffnen Sie das Dropdown-Menü. Sie können zwischen Hell, Dunkel und Aufmerksamkeit erregen wählen.

All diese Optionen sind ziemlich unkompliziert, daher lohnt es sich, verschiedene Einstellungen auszuprobieren, um zu sehen, was auf Ihrer Website am besten aussieht.

Während Sie die verschiedenen Optionen ausprobieren, können Sie durch Klicken auf „Änderungen vorschauen“ sehen, wie sie auf Ihrer WordPress-Website aussehen werden.

Wenn Sie mit dem Aussehen und Verhalten des interaktiven Bildes zufrieden sind, stellen Sie sicher, dass Sie auf 'Aktualisieren' klicken, um Ihre Änderungen zu speichern.

Sie können das interaktive Bild jetzt mit dem Shortcode im Block 'Shortcode kopieren' zu jeder Seite, jedem Beitrag oder jedem widget-fähigen Bereich hinzufügen.

Weitere Informationen zum Platzieren des Shortcodes finden Sie in unserem Leitfaden zum Hinzufügen eines Shortcodes in WordPress.

Wie importiert/exportiert man interaktive Bilder auf andere WordPress-Websites

Manchmal möchten Sie dasselbe interaktive Bild auf mehreren Websites wiederverwenden.

Wenn Sie beispielsweise ein Affiliate-Vermarkter sind, könnten Sie ein interaktives Bild erstellen, das eines Ihrer Produkte bewirbt. Sie können dann dasselbe interaktive Bild in all Ihren Amazon-Affiliate-Stores und anderen Affiliate-Marketing-Websites verwenden.

Das Hochladen desselben Bildes und die anschließende manuelle Neuerstellung aller Interaktionen kann viel Zeit und Mühe kosten.

Stattdessen empfehlen wir, das interaktive Bild einmal zu erstellen und dann die Import-/Exportfunktion von Draw Attention zu verwenden. Dies ermöglicht es Ihnen, dasselbe Bild auf unzähligen Websites oder in Online-Shops wiederzuverwenden.

Dazu müssen Sie das Draw Attention Plugin auf der Originalseite installieren, auf der sich das interaktive Bild befindet, und auf allen anderen Websites, auf denen Sie dieses Bild verwenden möchten.

Gehen Sie auf Ihrer ursprünglichen Website zu Aufmerksamkeit erregen » Importieren / Exportieren und aktivieren Sie das Kontrollkästchen neben jedem Bild, das Sie exportieren möchten.

Klicken Sie dann auf die Schaltfläche „Exportcode generieren“. Nach einigen Momenten generiert Draw Attention einen Code.

Melden Sie sich in einem anderen Tab in Ihrem anderen WordPress-Blog oder Ihrer Website an und gehen Sie zu Draw Attention » Import / Export.

Kopieren Sie hier den Exportcode in das Feld 'Importieren' und klicken Sie auf die Schaltfläche 'Importieren'.

Draw Attention importiert nun das Bild und alle seine Interaktionen, bereit für Ihre Verwendung.

Wiederholen Sie einfach diese Schritte auf allen Websites, auf denen Sie das interaktive Bild verwenden möchten.

Häufig gestellte Fragen zu interaktiven Bildern

Hier sind die Antworten auf einige der häufigsten Fragen, die wir zum Hinzufügen interaktiver Bilder in WordPress erhalten.

Was ist das beste Plugin zum Erstellen interaktiver Bilder in WordPress?

Für Anfänger empfehlen wir das Plugin 'Draw Attention', da es einfach zu bedienen ist und eine übersichtliche Oberfläche hat. Die kostenlose Version bietet alle grundlegenden Funktionen, die Sie benötigen, während die Pro-Version erweiterte Optionen wie mehrere Bildkarten und zusätzliche Styling-Optionen für Tooltips freischaltet.

Sind interaktive Bilder mobilfreundlich?

Ja, das Draw Attention Plugin ist vollständig responsiv. Das bedeutet, dass sich Ihre interaktiven Hotspots und Infoboxen automatisch an jede Bildschirmgröße anpassen und so ein großartiges Benutzererlebnis auf Mobilgeräten bieten.

Kann ich Videos oder Animationen zu interaktiven Hotspots hinzufügen?

Sie können die Aktion „URL aufrufen“ verwenden, um einen Hotspot mit einem Video auf einer Plattform wie YouTube oder Vimeo zu verknüpfen. Während die direkte Einbettung von Videos im Popup möglicherweise die Pro-Version erfordert, ist die Verlinkung eine einfache Umgehungslösung. Für animierte Bilder empfehlen wir, unserer Anleitung zum Hinzufügen von animierten GIFs zu WordPress zu folgen.

Verlangsamen interaktive Bilder meine Website?

Wie jedes Medium erhöhen interaktive Bilder das Gewicht Ihrer Seite. Das Draw Attention-Plugin ist jedoch leichtgewichtig und gut programmiert. Der größte Faktor ist die Größe der ursprünglichen Bilddatei, daher empfehlen wir immer, Ihre Bilder für das Web zu optimieren, bevor Sie sie hochladen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie interaktive Bilder in WordPress erstellen. Möglicherweise möchten Sie auch unseren Leitfaden zum Erstellen von Flipbox-Overlays und Hover-Effekten in WordPress und unsere Expertenauswahl der besten WordPress-Slider-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.