Wie man Bild-Hotspots in WordPress hinzufügt (Der einfache Weg)

Manchmal reicht das Hinzufügen von Bildern und visuellen Elementen allein nicht aus, um die Aufmerksamkeit der Besucher zu wecken.

An dieser Stelle können Bild-Hotspots Abhilfe schaffen. Diese anklickbaren Bereiche können ein einfaches Bild in ein fesselndes, informatives Erlebnis für Ihre Besucher verwandeln. Wir haben selbst mit ihnen experimentiert, um Punkte auf einer Karte zu zeigen, Teammitglieder auf einem Foto zu markieren und Produkteigenschaften hervorzuheben.

Wenn Sie sich fragen, wie Sie das Gleiche tun können, sind Sie hier richtig. Diese Anleitung zeigt Ihnen 2 einfache Methoden, um einen Bild-Hotspot für Ihre WordPress-Website ohne Code zu erstellen.

Wann Sie Hotspots zu Ihren Bildern in WordPress hinzufügen sollten

Bild-Hotspots sind anklickbare Punkte, die einfache Bilder in interaktive Inhalte verwandeln können, die Besucher erkunden können. Aber wann sollten Sie darüber nachdenken, Hotspots zu Ihren Bildern hinzuzufügen?

Ein guter Zeitpunkt für die Verwendung von Hotspots ist, wenn Sie verschiedene Teile eines Produktbildes hervorheben möchten.

Angenommen, Sie verkaufen ein neues Telefon. Sie können Hotspots hinzufügen, um die Kamera, den Bildschirm und andere Funktionen hervorzuheben. So können Kunden das Produkt kennenlernen, ohne lange Beschreibungen lesen zu müssen.

Viele Websites für Haushaltswaren verwenden auch Bild-Hotspots, um die Produktdetails der in inszenierten Fotos dargestellten Artikel hervorzuheben.

Hotspots eignen sich auch hervorragend, um Infografiken und Datenvisualisierungen ansprechender zu gestalten. Anstatt alle Informationen in ein Bild zu packen, können Sie zusätzliche Details hinter Hotspots verstecken. Wenn Menschen auf verschiedene Teile der Infografik klicken, können sie weitere Fakten und Zahlen sehen.

Wenn Sie eine eLearning-Website betreiben, können Hotspots das Benutzererlebnis verbessern und Ihren Unterricht interaktiver gestalten. Sie können zum Beispiel Hotspots in eine Karte einfügen, so dass die Schüler durch Anklicken etwas über verschiedene Länder oder Sehenswürdigkeiten erfahren.

In diesem Sinne schauen wir uns an, wie Sie Ihrer WordPress-Website ganz einfach Bild-Hotspots hinzufügen können. Wir haben uns 2 Methoden ausgedacht, und Sie können die Quicklinks unten verwenden, um durch den Artikel zu navigieren:

Methode 1: Hinzufügen von Bild-Hotspots mit SeedProd (für Landing Pages/Benutzerdefinierte Themes)

Diese erste Methode verwendet SeedProd, einen Drag-and-Drop-Seitenersteller, um Ihrer WordPress-Website Bild-Hotspots hinzuzufügen. Wir empfehlen diese Methode, wenn Sie eine benutzerdefinierte Landing Page oder ein benutzerdefiniertes WordPress-Theme erstellen und eine Plattform mit einem Bild-Hotspot-Block verwenden möchten.

Was uns an SeedProd gefällt, ist, dass es über 350 Landing Page-Vorlagen und Themen-Kits für verschiedene Branchen anbietet, von Online-Boutiquen über Reinigungsdienste bis hin zu SaaS-Unternehmen. Es gibt also eine Option für jede Art von Website.

Eine Sache, die Sie bedenken sollten, ist, dass, wenn Sie nur eine kostenlose Lösung zur Erstellung von Bild-Hotspots suchen, diese Methode möglicherweise nicht für Sie geeignet ist. Das liegt daran, dass der Hotspot-Block von SeedProd nur in den kostenpflichtigen SeedProd-Versionen verfügbar ist. In diesem Fall empfehlen wir Ihnen, Methode 2 zu verwenden.

Weitere Informationen zu den Funktionen und Preisen des Plugins finden Sie in unserem SeedProd Testbericht.

Sobald Sie einen SeedProd-Plan erworben haben, können Sie das WordPress-Plugin in Ihrem Verwaltungsbereich herunterladen und installieren. Danach gehen Sie zu SeedProd „ Einstellungen und geben Ihren Lizenzschlüssel ein. Sie finden diese Informationen auf Ihrer SeedProd Kontoseite.

Klicken Sie dann einfach auf „Schlüssel überprüfen“.

Navigieren Sie danach zu SeedProd “ Landing Pages.

Klicken Sie dann auf „Neue Landing Page hinzufügen“.

Sie sehen nun alle Vorlagen, die SeedProd anbietet. Es gibt Optionen für eine virale Wartelisten-Landingpage, eine Google-Anzeigen-Landingpage, eine Coming Soon-Seite und mehr.

Blättern Sie durch die Optionen und sehen Sie sie sich einzeln an, damit Sie diejenige auswählen können, die Ihren Bedürfnissen am besten entspricht.

Wenn Sie sich für eine Vorlage entschieden haben, bewegen Sie einfach den Mauszeiger über Ihre Auswahl.

Klicken Sie dann auf die orangefarbene Schaltfläche mit dem Häkchen.

Nun erscheint ein neues Popup-Fenster, in dem Sie aufgefordert werden, die Seite zu benennen und den URL-Slug einzugeben.

Klicken Sie anschließend auf „Speichern und mit der Bearbeitung der Seite beginnen“.

Dadurch wird der SeedProd-Editor für das Ziehen und Ablegen geöffnet.

Er funktioniert ähnlich wie der WordPress-Block-Editor, in dem Sie Blöcke per Drag & Drop auf die Seite ziehen und anklicken können, um sie nach Belieben anzupassen.

Um Bild-Hotspots zu erstellen, finden Sie in der linken Seitenleiste den Block „Hotspot“.

Ziehen Sie sie dann einfach per Drag & Drop direkt auf Ihre Seite.

Als nächstes müssen Sie das WordPress-Bild hochladen, dem Sie Hotspots hinzufügen möchten.

Klicken Sie dazu auf den Block „Hotspot“ und wählen Sie entweder „Eigenes Bild verwenden“ oder „Archivbild verwenden“, um ein Bild auszuwählen.

Die erste Option öffnet die Mediathek, in der Sie ein vorhandenes Bild auswählen oder ein neues hochladen können. Wenn das Bild ziemlich groß ist, können Sie sich unsere Anleitung zum Hochladen großer Bilder in WordPress ansehen.

Sobald Sie ein Bild hochgeladen haben, können Sie einen Alt-Text eingeben, um das Bild für Suchmaschinen und Bildschirmleseprogramme zu beschreiben.

Sie können auch die Bildgröße und -ausrichtung anpassen.

Danach können Sie einen Bildlauf nach unten durchführen, um mit dem Hinzufügen Ihrer Hotspots zu beginnen.

Klicken Sie dazu auf die Schaltfläche „+ Hotspot hinzufügen“.

Ein orangefarbener Punkt erscheint nun auf Ihrem Bild. Sie können seine Position durch Ziehen der horizontalen und vertikalen Ausrichtungsleisten anpassen.

Außerdem können Sie den Text einfügen, der erscheinen soll, wenn der Benutzer mit dem Mauszeiger über den Hotspot fährt.

Wenn Sie nach unten gehen, können Sie die Farbe des Hotspots ändern.

Klicken Sie einfach auf die Einstellungen für „Farbe“, um eine Farbe auszuwählen, die zu Ihrer Marke und Ihrem Website-Design passt.

Wenn Sie weiter nach unten scrollen, können Sie die Option „Erweiterte Einstellungen“ aktivieren.

Hier können Sie einen Link in den Tooltip-Text Ihres Hotspots einfügen, so dass die Nutzer auf die gewünschte Seite weitergeleitet werden können.

Außerdem können Sie ein benutzerdefiniertes Symbol wählen, das die Standardkreisform ersetzt.

Klicken Sie dazu einfach auf die Schaltfläche „Symbol auswählen“.

Es erscheint ein Popup-Fenster, in dem Sie verschiedene Icons aus der Bibliothek von SeedProd auswählen können. Sie können auch Icons von Font Awesome wählen, wenn Sie mehr Optionen benötigen.

Um ein Symbol zu verwenden, klicken Sie es einfach an.

Wenn Sie ein Symbol ausgewählt haben, können Sie die Leiste „Symbolgröße“ ziehen, um die Form je nach Ihren Wünschen zu verkleinern oder zu vergrößern.

Sie können dann die Schritte wiederholen, um weitere interaktive Bild-Hotspots zu erstellen.

Unten können Sie einen animierten Effekt zu Ihren Bild-Hotspots hinzufügen. Es gibt 2 Optionen: ‚Soft Beat‘ und ‚Expandieren‘.

Gehen wir nun zum Abschnitt „Tooltip“.

Hier können Sie die Position des Tooltips ändern (rechts, links, über oder unter dem Hotspot) und den Auslöser ändern.

Wenn Sie „Klicken“ auswählen, wird die QuickInfo angezeigt, wenn der Benutzer auf den Hotspot klickt. Andererseits bedeutet „Hover“, dass die QuickInfo angezeigt wird, wenn der Mauszeiger über den Hotspot bewegt wird.

Als Nächstes können Sie die Dauer des Tooltips ändern.

Dieser Wert gibt an, wie lange es dauert, bis die QuickInfo erscheint, nachdem der Benutzer den Mauszeiger über den Hotspot bewegt oder darauf geklickt hat. Wenn Sie möchten, dass der Text sofort erscheint, setzen Sie ihn einfach auf 0.

Sie können den Pfeil der QuickInfo auch deaktivieren, je nach Ihren Vorlieben.

Wenn Sie nun auf die Registerkarte „Erweitert“ wechseln, können Sie das Aussehen des Bildes noch weiter anpassen.

Sie können zum Beispiel einen Rahmenschatten hinzufügen oder die Auffüllung und den Rand anpassen.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern“ in der oberen rechten Ecke.

Klicken Sie dann auf „Veröffentlichen“, um die Seite zu aktivieren.

Und das war’s! Stellen Sie sicher, dass Sie die Seite auf dem Handy, dem Desktop und dem Tablet ansehen, um zu sehen, ob sie auf allen Geräten gut aussieht.

So sieht unser interaktiver Bild-Hotspot aus:

Methode 2: Hinzufügen von Bild-Hotspots mit dem Bild-Hotspot-Plugin (kostenlos, aber eingeschränkt)

Wenn Ihnen die Verwendung eines Page Builders und der Wechsel Ihres Themes zu viel ist, können Sie stattdessen das kostenlose WordPress Image Hotspot Plugin verwenden. Dieses Plugin ist eine gute Alternative zu Methode 1, aber beachten Sie, dass die kostenlose Version nur das Hinzufügen von bis zu 6 Hotspots für ein einzelnes Bild erlaubt.

Um Image Hotspot zu verwenden, können Sie das WordPress-Plugin in Ihrem Verwaltungsbereich installieren und aktivieren. Gehen Sie dann zu Image Map Hotspot “ All Image Map Hotspot und klicken Sie auf die Schaltfläche „Add New“.

Geben Sie Ihrem neuen Bildkarten-Hotspot nun einen Namen. Wählen Sie dann einen der Anzeigetypen für die QuickInfos aus. Sie können die Tooltips des Hotspots entweder durch Schweben oder Klicken anzeigen lassen.

Klicken Sie anschließend auf „Speichern“.

Wenn das erledigt ist, fügen wir Ihr Bild hinzu.

Klicken Sie dazu einfach auf die Schaltfläche „Bild hochladen“.

Daraufhin öffnet sich die Mediathek, in die Sie ein neues Bild hochladen oder ein vorhandenes auswählen können.

Als nächstes können Sie Hotspots zu Ihrer Image Map hinzufügen. Klicken Sie dazu einfach auf die Schaltfläche „Punkt hinzufügen“.

Es erscheint nun ein Popup-Fenster, in dem Sie Ihren interaktiven Bild-Hotspot konfigurieren können.

Navigieren Sie zunächst zur Registerkarte „Markierung“. Hier können Sie das Aussehen des Hotspot-Bildes anpassen. Um die Symbole zu ändern, können Sie auf das „+“-Zeichen neben den Feldern „Symbole“ und/oder „Hover-Symbole“ klicken.

Icons“ bezieht sich auf das Standard-Hotspot-Symbol, wenn es nicht angeklickt oder mit dem Mauszeiger darüber gehalten wird. Hover Icons“ ist das Symbol, das erscheint, wenn der Benutzer auf den Hotspot klickt oder den Mauszeiger darüber bewegt.

Wählen Sie nun ein Symbol aus, das die aktuelle Standardoption ersetzen soll. Das Plugin bietet Ihnen eine große Auswahl.

Wenn Sie Ihre Wahl getroffen haben, klicken Sie einfach darauf und drücken Sie auf die Schaltfläche „Schließen“.

Wenn Ihre Hotspot-Bilder eingerichtet sind, können Sie die Farben der Symbole ändern.

Mit dem Plugin können Sie die Standardfarbe des Hotspot-Symbols von der Farbe des Hover-Symbols unterscheiden. Auf diese Weise können Benutzer leicht erkennen, ob ein Hotspot aktiv ist, wenn sie darauf klicken oder den Mauszeiger darüber bewegen.

Um die Farbe zu ändern, klicken Sie einfach auf die Schaltfläche für die quadratische Farbauswahl und wählen Sie die gewünschte Farbe aus.

Sie können dann auf eine beliebige Stelle der Seite klicken, um zu einer anderen Einstellung zu gelangen.

Sie können auch die Größe des Hotspot-Symbols auf dem Desktop anpassen. Je höher die Zahl, desto größer ist das Symbol.

Wenn Sie mit dem Aussehen des Symbols zufrieden sind, klicken Sie einfach auf „Speichern“.

Scrollen Sie nun nach oben und wechseln Sie zur Registerkarte „Inhalt“. Hier können Sie den Text und das Aussehen der QuickInfo anpassen.

Das Plugin bietet Ihnen 4 Vorlagen zur Auswahl, so dass Sie diejenige auswählen können, die am besten zu Ihrem Website-Design passt.

Ansonsten sollten Sie den Standardtitel durch Ihren eigenen Text ersetzen.

Und je nach Design Ihrer Website können Sie die Schriftgröße vergrößern und die Textfarbe ändern, um die Lesbarkeit zu verbessern.

Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie einfach auf „Speichern“.

Die letzte Registerkarte ist „Link“. Hier haben Sie die Möglichkeit, Ihren Tooltip-Text mit einem Hyperlink zu versehen, so dass die Nutzer zu einer anderen Seite weitergeleitet werden können.

Wenn Sie dies tun möchten, wählen Sie in der Einstellung „Verknüpfen Sie Titel?“ die Option „Ja“.

Geben Sie dann die URL des Titellinks in das entsprechende Feld ein und wählen Sie, ob der Link in einem neuen Tab geöffnet werden soll oder nicht.

Klicken Sie abschließend auf „Speichern“.

Nun sollte ein neuer Hotspot auf Ihrem Bild erscheinen, den Sie an die gewünschte Position ziehen können.

Sie können auch die gleichen Schritte wie zuvor wiederholen, um weitere Bild-Hotspots zu erstellen.

Sobald Sie Ihre Image Map konfiguriert haben, können Sie erneut auf die Schaltfläche „Speichern“ klicken.

Um den Bild-Hotspot zu einer Ihrer Seiten, Beiträge und/oder Widgets hinzuzufügen, können Sie den Shortcode über dem Bild kopieren.

Danach fügen Sie den Shortcode einfach in einen Shortcode-Block in Ihrem Widget, Ihrer Seite oder Ihrem Beitrag im Block-Editor ein. Mehr dazu erfahren Sie in unserer Schritt-für-Schritt-Anleitung zum Hinzufügen und Verwenden von Shortcodes in WordPress.

So sieht unser interaktiver Bild-Hotspot aus:

Entdecken Sie weitere aufregende Designfunktionen für Ihre WordPress-Website

Neben der Erstellung interaktiver Bild-Hotspots gibt es noch viele weitere Möglichkeiten, Ihre Website ansprechend zu gestalten. Hier sind einige Anleitungen, die Ihnen dabei helfen:

• Hinzufügen von Infinite Scroll zu Ihrer WordPress-Site (Schritt für Schritt)
• Wie man eine visuelle Sitemap in WordPress erstellt (Schritt für Schritt)
• Wie man eine schwebende Fußleiste in WordPress erstellt
• Hinzufügen einer Schriftgrößenanpassung in WordPress für Barrierefreiheit
• Hinzufügen eines Click-to-Call-Buttons in WordPress (Schritt für Schritt)
• Hinzufügen einer benutzerdefinierten Bildlaufleiste in WordPress
• So fügen Sie einen Fortschrittsbalken in Ihre WordPress-Beiträge ein
• So erstellen Sie einen benutzerdefinierten Shape Divider in WordPress
• Hinzufügen eines scrollenden Nachrichtentickers in WordPress

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ganz einfach Bild-Hotspots in WordPress hinzufügen können. Vielleicht möchten Sie auch unseren ultimativen Leitfaden für WordPress-Seitenleisten-Tricks lesen, um maximale Ergebnisse zu erzielen, und unsere Expertenauswahl der besten WordPress-Theme-Builder.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.