Möchten Sie Ihre WordPress-Bilder interaktiver und ansprechender gestalten? Image Hotspots verwandeln statische Bilder in dynamische Inhalte, indem sie klickbare Bereiche hinzufügen, die zusätzliche Informationen preisgeben.
Wir haben sie selbst ausprobiert, um Punkte auf einer Karte anzuzeigen, Teammitglieder auf einem Foto zu markieren und Produktmerkmale hervorzuheben. Aus unserer Recherche haben wir 2 einfache Möglichkeiten gefunden, Bild-Hotspots in WordPress hinzuzufügen.
Sind Sie bereit, das visuelle Erlebnis Ihrer Website zu verbessern? Lassen Sie uns beginnen.
Wann Hotspots zu Ihren Bildern in WordPress hinzufügen?
Bild-Hotspots sind klickbare Bereiche, 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, um Hotspots zu verwenden, ist, wenn Sie verschiedene Teile eines Produktbildes präsentieren möchten.
Nehmen wir an, Sie verkaufen ein neues Telefon. Sie können Hotspots hinzufügen, um auf die Kamera, den Bildschirm und andere Funktionen hinzuweisen. Dies hilft Kunden, das Produkt kennenzulernen, ohne lange Beschreibungen lesen zu müssen.
Viele Websites für Haushaltswaren verwenden auch Bildanmerkungen, um die Produktdetails von Artikeln hervorzuheben, die in inszenierten Fotos angezeigt werden.
Hotspots eignen sich auch hervorragend, um Infografiken und Datenvisualisierungen ansprechender zu gestalten. Anstatt alle Informationen in ein Bild zu quetschen, können Sie zusätzliche Details hinter Hotspots verbergen. Wenn Benutzer auf verschiedene Teile der Infografik klicken, können sie weitere Fakten und Zahlen sehen.
Wenn Sie eine E-Learning-Website betreiben, können Hotspots die Benutzererfahrung verbessern und Ihre Lektionen interaktiver gestalten. Sie könnten beispielsweise Hotspots zu einer Karte hinzufügen, sodass Schüler auf verschiedene Länder oder Sehenswürdigkeiten klicken können, um mehr darüber zu erfahren.
In diesem Sinne sehen wir uns an, wie Sie Ihrer WordPress-Website ganz einfach Bild-Hotspots hinzufügen können. Wir haben 2 Methoden entwickelt, und Sie können die Schnelllinks unten verwenden, um durch den Artikel zu navigieren:
- Methode 1: Bild-Hotspots mit SeedProd hinzufügen (für Landing Pages/benutzerdefinierte Themes)
- Methode 2: Bild-Hotspots mit dem Image Hotspot Plugin hinzufügen (kostenlos, aber eingeschränkt)
- Weitere WordPress-Design-Tipps, die Sie kennen sollten
Methode 1: Bild-Hotspots mit SeedProd hinzufügen (für Landing Pages/benutzerdefinierte Themes)
Diese erste Methode verwendet SeedProd, einen Drag-and-Drop-Page-Builder, um Bild-Hotspots zu Ihrer WordPress-Website hinzuzufügen. Wir empfehlen diese Methode, wenn Sie eine benutzerdefinierte Landingpage oder ein benutzerdefiniertes WordPress-Theme erstellen und eine Plattform mit einem Bild-Hotspot-Block verwenden möchten.
Wir haben in der Vergangenheit andere Page Builder wie Divi und WPBakery getestet, aber SeedProd ist immer die beste Wahl.
Was wir an SeedProd lieben, ist, dass es über 350 Landingpage- Vorlagen und Theme-Kits für verschiedene Branchenkategorien bietet, von Online-Boutiquen und Reinigungsdiensten bis hin zu SaaS-Unternehmen. Es gibt also eine Option für jeden Website-Typ.
Eine Sache, die Sie bedenken sollten, ist, dass diese Methode möglicherweise nicht für Sie geeignet ist, wenn Sie nur eine kostenlose Lösung zum Erstellen von Bild-Hotspots suchen. Dies liegt daran, dass der Hotspot-Block von SeedProd nur in den kostenpflichtigen Versionen von SeedProd verfügbar ist. In diesem Fall empfehlen wir Methode 2.
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 Admin-Bereich herunterladen und installieren. Gehen Sie danach zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein. Diese Informationen finden Sie auf Ihrer SeedProd-Konto-Seite.
Sobald Sie fertig sind, klicken Sie einfach auf „Schlüssel überprüfen“.
Navigieren Sie anschließend 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 Ads-Landingpage, eine „Coming Soon“-Seite und mehr.
Stellen Sie sicher, dass Sie die Optionen durchscrollen und sie einzeln in der Vorschau anzeigen, damit Sie diejenige auswählen können, die Ihren Bedürfnissen am besten entspricht.
Sobald Sie sich für eine Vorlage entschieden haben, fahren Sie einfach mit der Maus über Ihre Auswahl.
Klicken Sie dann auf den orangefarbenen Häkchen-Button.
Nun erscheint ein neues Popup, in dem Sie aufgefordert werden, der Seite einen Namen zu geben und ihre URL-Slug einzugeben.
Nachdem Sie dies getan haben, klicken Sie auf 'Speichern und mit der Bearbeitung der Seite beginnen'.
Dies öffnet den Drag-and-Drop-Editor von SeedProd.
Es funktioniert ähnlich wie der WordPress-Block-Editor, bei dem Sie Blöcke per Drag & Drop auf die Seite ziehen und darauf klicken können, um sie nach Belieben anzupassen.
Um Bild-Hotspots zu erstellen, finden Sie den „Hotspot“-Block in der linken Seitenleiste.
Ziehen Sie es dann einfach per Drag & Drop auf Ihre Seite.
Als Nächstes müssen Sie das WordPress-Bild hochladen, zu dem Sie Hotspots hinzufügen möchten.
Dies können Sie tun, indem Sie auf den „Hotspot“-Block klicken und entweder „Eigenes Bild verwenden“ oder „Stock-Bild verwenden“ wählen, um ein Bild auszuwählen.
Die erste Option öffnet die Mediathek, wo Sie ein vorhandenes Bild auswählen oder ein neues hochladen können. Wenn die Größe ziemlich groß ist, können Sie sich unseren Leitfaden 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 Screenreader zu beschreiben.
Sie können auch die Bildgröße und -ausrichtung anpassen.
Danach können Sie nach unten scrollen, um mit dem Hinzufügen Ihrer Hotspots zu beginnen.
Dies können Sie tun, indem Sie auf die Schaltfläche „+ Hotspot hinzufügen“ klicken.
Ein orangefarbener Punkt erscheint nun auf Ihrem Bild. Sie können seine Position anpassen, indem Sie die horizontalen und vertikalen Orientierungsleisten ziehen.
Zusätzlich können Sie den Text einfügen, der angezeigt werden soll, wenn der Mauszeiger eines Benutzers über den Hotspot fährt.
Weiter unten können Sie die Farbe des Hotspots ändern.
Klicken Sie einfach auf die Einstellungen für die „Farbe“, um eine Farbe auszuwählen, die zu Ihrer Marke und Ihrem Website-Design passt.
Wenn Sie weiter nach unten scrollen, können Sie den Schalter 'Erweiterte Einstellungen' aktivieren.
Hier können Sie einen Link zu Ihrem Hotspot-Tooltip-Text hinzufügen, damit Benutzer auf Ihre gewünschte Seite weitergeleitet werden können.
Außerdem können Sie ein benutzerdefiniertes Symbol wählen, um die standardmäßige Kreisform zu ersetzen.
Um dies zu tun, klicken Sie einfach auf die Schaltfläche 'Symbol auswählen'.
Ein Popup-Fenster wird angezeigt, in dem Sie verschiedene Symbole aus der Bibliothek von SeedProd auswählen können. Sie können auch Symbole von Font Awesome auswählen, wenn Sie weitere Optionen benötigen.
Um ein Symbol zu verwenden, klicken Sie einfach darauf.
Sobald Sie ein Symbol ausgewählt haben, können Sie den Balken „Icon Size“ ziehen, um die Form je nach Ihren Vorlieben kleiner oder größer zu machen.
Sie können dann die Schritte wiederholen, um weitere interaktive Bild-Hotspots zu erstellen.
Unten können Sie Ihrer Bild-Hotspots einen animierten Effekt hinzufügen. Es gibt 2 Optionen: „Soft Beat“ und „Expand“.
Nun gehen wir zum Abschnitt 'Tooltip'.
Hier können Sie die Position des Tooltips (rechts, links, oberhalb oder unterhalb des Hotspots) ändern und den Trigger ändern.
Wenn Sie 'Klicken' auswählen, bedeutet dies, dass der Tooltip angezeigt wird, wenn der Benutzer auf den Hotspot klickt. Auf der anderen Seite bedeutet 'Hover', dass der Tooltip erscheint, wenn der Mauszeiger darüber schwebt.
Als Nächstes können Sie die Dauer des Tooltips ändern.
Dies bezieht sich lediglich darauf, wie lange es dauert, bis der Tooltip erscheint, nachdem der Benutzer mit der Maus über den Hotspot fährt oder darauf klickt. Wenn Sie möchten, dass der Text sofort angezeigt wird, stellen Sie ihn einfach auf 0.
Sie können auch den Pfeil des Tooltips deaktivieren, je nach Ihren Vorlieben.
Wenn Sie nun zum Tab 'Erweitert' wechseln, können Sie das Erscheinungsbild des Bildes noch weiter anpassen.
Sie können zum Beispiel einen Schatten für die Box hinzufügen oder den Innenabstand und den Außenabstand 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 live zu schalten.
Und das war's! Stellen Sie sicher, dass Sie die Seite auf Mobilgeräten, Desktops und Tablets anzeigen, um zu sehen, ob sie auf allen Geräten gut aussieht.
So sieht unser interaktiver Bild-Hotspot aus:
Methode 2: Bild-Hotspots mit dem Image Hotspot Plugin hinzufügen (kostenlos, aber eingeschränkt)
Wenn Sie einen Page Builder verwenden und Ihr Theme wechseln möchten, können Sie stattdessen das kostenlose WordPress-Plugin Image Hotspot verwenden. Es ist eines der besten Image-Hotspot-Plugins, die wir ausprobiert haben, und eine großartige Alternative zu Methode 1.
Beachten Sie jedoch, dass die kostenlose Version nur das Hinzufügen von bis zu 6 Hotspots zu einem einzelnen Bild erlaubt.
Um Image Hotspot zu verwenden, können Sie das WordPress-Plugin installieren und aktivieren in Ihrem Admin-Bereich. Gehen Sie dann zu Image Map Hotspot » All Image Map Hotspot und klicken Sie auf die Schaltfläche „Neu hinzufügen“.
Geben Sie nun Ihrer neuen Bildkarten-Hotspot einen Namen. Wählen Sie dann einen der Tooltip-Anzeigetypen aus. Sie können entweder festlegen, dass die Tooltips des interaktiven Hotspots beim Hovern oder Klicken angezeigt werden.
Wenn Sie fertig sind, klicken Sie auf „Speichern“.
Wenn das erledigt ist, fügen wir Ihr Bild hinzu.
Klicken Sie dazu einfach auf die Schaltfläche „Bild hochladen“.
Dies öffnet die Mediathek, wo Sie ein neues Bild hochladen oder ein vorhandenes auswählen können.
Als Nächstes können Sie Ihrer Bildkarte Hotspots hinzufügen. Klicken Sie dazu einfach auf die Schaltfläche „Punkt hinzufügen“.
Ein Popup-Fenster wird nun angezeigt, in dem Sie Ihren interaktiven Bild-Hotspot konfigurieren können.
Navigieren Sie zunächst zum Tab „Marker“. Hier können Sie anpassen, wie das Hotspot-Bild aussieht. 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 der Maus darüber gefahren wird. „Hover Icons“ ist das Symbol, das erscheint, wenn der Benutzer auf den Hotspot klickt oder mit der Maus darüber fährt.
Wählen Sie nun ein Symbol aus, um die aktuelle Standardoption zu ersetzen. Das Plugin bietet eine große Auswahl.
Sobald Sie Ihre Wahl getroffen haben, klicken Sie einfach darauf und auf die Schaltfläche „Schließen“.
Mit Ihren eingerichteten Hotspot-Bildern können Sie die Farben der Symbole ändern.
Das Plugin ermöglicht es Ihnen, die Standardfarbe des Hotspot-Symbols von der Farbe beim Hovern über das Symbol zu unterscheiden. Auf diese Weise können Benutzer leicht erkennen, ob ein Hotspot aktiv ist, wenn sie darauf klicken oder mit der Maus darüber fahren.
Um die Farbe zu ändern, klicken Sie einfach auf die quadratische Farbauswahl und wählen Sie die gewünschte Farbe aus.
Sie können dann irgendwo auf der Seite klicken, um zu einer anderen Einstellung zu gelangen.
Sie können auch die Symbolgröße des Hotspots auf dem Desktop anpassen. Je höher die Zahl, desto größer wird das Symbol.
Sobald Sie mit dem Aussehen des Symbols zufrieden sind, klicken Sie einfach auf 'Speichern'.
Scrollen Sie nun nach oben und wechseln Sie zum Tab „Inhalt“. Hier können Sie den Text und das Erscheinungsbild des Tooltips anpassen.
Das Plugin bietet 4 Vorlagen zur Auswahl, sodass Sie diejenige auswählen können, die am besten zu Ihrem Website-Design passt.
Stellen Sie ansonsten sicher, dass Sie den Standardtitelinhalt durch Ihren eigenen Text ersetzen.
Und je nach Ihrem Website-Design möchten Sie vielleicht die Schriftgröße erhöhen und die Textfarbe ändern, um die Lesbarkeit zu verbessern.
Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie einfach auf 'Speichern'.
Der letzte Tab ist „Link“. Hier haben Sie die Möglichkeit, Ihren Tooltip-Text zu hyperverlinken, sodass Benutzer auf eine andere Seite weitergeleitet werden können.
Wenn Sie dies tun möchten, wählen Sie im Einstellungsfeld „Do you Link Title?“ die Option „Yes“ aus.
Fügen Sie danach Ihre Titel-Link-URL 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 Bildzuordnung 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.
Fügen Sie anschließend einfach den Shortcode in einen Shortcode-Block auf Ihrem Widget, Ihrer Seite oder Ihrem Beitrag im Block-Editor ein. Mehr dazu erfahren Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Hinzufügen und Verwenden von Shortcodes in WordPress.
So sieht unser interaktiver Bild-Hotspot aus:
Weitere WordPress-Design-Tipps, die Sie kennen sollten
Neben der Erstellung interaktiver Bild-Hotspots gibt es noch viele weitere Möglichkeiten, Ihr Website-Design ansprechend zu gestalten. Hier sind einige Anleitungen, die Ihnen helfen:
- Schlüsselelemente für ein effektives WordPress-Website-Design
- So fügen Sie unendliches Scrollen zu Ihrer WordPress-Website hinzu (Schritt für Schritt)
- So fügen Sie unendliches Scrollen zu Ihrer WordPress-Website hinzu (Schritt für Schritt)
- So erstellen Sie eine visuelle Sitemap in WordPress (Schritt für Schritt)
- So erstellen Sie eine Sticky Floating Footer Bar in WordPress
- Wie man einen Schriftgrößen-Änderer in WordPress für Barrierefreiheit hinzufügt
- So fügen Sie eine Click-to-Call-Schaltfläche in WordPress hinzu (Schritt für Schritt)
- So fügen Sie eine benutzerdefinierte Scrollleiste in WordPress hinzu
- So fügen Sie eine Fortschrittsleiste in Ihre WordPress-Beiträge ein
- So erstellen Sie einen benutzerdefinierten Form-Teiler in WordPress
- So fügen Sie einen scrollenden Nachrichtenticker in WordPress hinzu
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einfach Bild-Hotspots in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren ultimativen Leitfaden für WordPress-Seitenleisten-Tricks für maximale Ergebnisse und unsere Expertenauswahl der besten WordPress-Theme-Builder lesen.
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.
Haben Sie eine Frage oder einen Vorschlag? Hinterlassen Sie bitte einen Kommentar, um die Diskussion zu beginnen.