Kurzfassung: So fügen Sie Bild-Hotspots in WordPress hinzu
Fügen Sie mit dem integrierten Hotspot-Block von SeedProd interaktive, anklickbare Markierungen zu jedem beliebigen Bild hinzu. Hier die Kurzfassung:
- SeedProd Pro installieren: Für den Hotspot-Block ist eine Pro-Lizenz oder höher erforderlich.
- Wählen Sie eine Vorlage aus: Wählen Sie eine Landingpage-Vorlage aus oder öffnen Sie Ihr Design im SeedProd-Editor.
- Fügen Sie den Hotspot-Block hinzu: Ziehen Sie ihn aus dem Bereich „Erweiterte Blöcke“ in Ihr Layout.
- Laden Sie ein Bild hoch und richten Sie Hotspots ein: Legen Sie den Text für die Tooltips fest, positionieren Sie die einzelnen Markierungen und passen Sie das Aussehen der Symbole an.
- Veröffentlichen: Klicken Sie auf „Speichern“ und anschließend auf „Veröffentlichen“, um Ihr Hotspot-Bild online zu stellen.
Stellen Sie sich ein Foto eines stilvoll eingerichteten Schlafzimmers vor, auf dem jedes Element (die Lampe, das Bettgestell, das Zierkissen) mit einem anklickbaren Tag versehen ist, der zur jeweiligen Produktseite führt. Das ist ein Bild-Hotspot, der ein ganzes Produktraster durch ein einziges Bild ersetzen kann.
Ich habe den Hotspot-Block von SeedProd selbst auf Produktseiten verwendet und die Tooltips waren in etwa 10 Minuten einsatzbereit. In diesem Tutorial zeige ich dir Schritt für Schritt, wie du Bild-Hotspots in WordPress hinzufügen kannst – ganz ohne Programmierkenntnisse.
Was ist ein interaktiver Bild-Hotspot?
Hotspot-Bilder sind statische Bilder, Fotos oder Illustrationen mit anklickbaren Bereichen, die ein Tooltip-Popup anzeigen. Der Tooltip-Inhalt gibt den Nutzern zusätzliche Informationen zu einem bestimmten Aspekt des Bildes.
Hier sind einige Anwendungsbeispiele aus der Praxis:
- Produktpräsentation im E-Commerce: Versehen Sie jeden Gegenstand auf einem Raumfoto (Bettgestell, Lampe, Kissen) mit einem Link zur jeweiligen Produktseite. Ein einziges Bild ersetzt ein ganzes Produktraster.
- eLearning-Diagramme: Beschriften Sie anatomische Darstellungen, historische Karten oder technische Schemata, ohne das Bild mit Text zu überladen.
- Virtuelle Rundgänge durch Immobilien: Fügen Sie den Raumfotos Hotspots hinzu, auf denen Maße, Ausstattungsmerkmale oder Sehenswürdigkeiten in der Nähe vermerkt sind.
- Veranstaltungsfotografie: Identifizieren Sie Personen auf einem Gruppenfoto, indem Sie Namen oder Social-Media-Namen markieren.
Das Hinzufügen von Bild-Hotspots zu Ihrer WordPress-Website ist eine gute Möglichkeit, sie interaktiver zu gestalten. Wenn sich Besucher mit Ihren Image Maps beschäftigen, verbringen sie mehr Zeit auf Ihrer Website, was dazu beiträgt, die Absprungrate zu senken.
Darüber hinaus kann die Erstellung interaktiver Hotspot-Bilder die Nutzererfahrung verbessern, was wiederum Ihre Konversionsraten erhöhen kann.
Jetzt, da Sie wissen, was Bild-Hotspots sind, haben Sie wahrscheinlich ein paar Fragen. Wie erstellt man Hotspot-Bilder, und wie fügt man sie am einfachsten zu seiner WordPress-Website hinzu?
Wir zeigen Ihnen als Nächstes, wie Sie das tun können.
So fügen Sie Bild-Hotspots in WordPress hinzu
Es gibt verschiedene Möglichkeiten, Bild-Hotspots zu Ihrer WordPress-Website hinzuzufügen. Sie können ein WordPress-Bild-Hotspot-Plugin verwenden, ein WordPress-Theme mit Hotspot-Funktionalität wie Divi, oder selbst einen Hotspot mit HTML und benutzerdefiniertem CSS programmieren.
Der einfachste Weg, Bild-Hotspots zu Ihrer WordPress-Website hinzuzufügen, ist ein Website-Baukasten mit Drag-and-Drop-Funktion wie SeedProd.
Hinweis: Für den Hotspot-Block ist SeedProd Pro oder eine höhere Version erforderlich. Wenn Sie den kostenlosen Tarif nutzen, finden Sie auf WordPress.org kostenlose Bild-Hotspot-Plugins, die bis zu 6 Hotspots pro Bild kostenlos unterstützen.
Der Hotspot-Block von SeedProd ermöglicht die Positionierung, Tooltips und Animationen per Drag & Drop. Es sind weder Shortcodes noch CSS erforderlich.
In dieser Anleitung verwende ich SeedProd, um Bild-Hotspots zu WordPress hinzuzufügen. Folgen Sie den nachstehenden Schritten, um loszulegen.
- Schritt 1. Installieren und Aktivieren von SeedProd
- Schritt 2. Wählen Sie ein WordPress-Theme oder eine Landing Page-Vorlage
- Schritt 3. Hinzufügen des Hotspot-WordPress-Blocks
- Schritt 4. Konfigurieren Sie Ihre Einstellungen
- Schritt 5. Veröffentlichen Sie Ihr Hotspot-Bild in WordPress
- FAQs zum Hinzufügen von Bild-Hotspots in WordPress
Schritt 1. Installieren und Aktivieren von SeedProd
Rufen Sie zunächst die SeedProd-Website auf und laden Sie das Plugin herunter. Während SeedProd eine kostenlose Version hat, werden wir für dieses Tutorial SeedPod Pro verwenden, weil es den Hotspot Image Block enthält.
Sobald Sie Ihren Preisplan ausgewählt und die Zip-Datei des Plugins heruntergeladen haben, müssen Sie es auf Ihrer WordPress-Website installieren und aktivieren. Sie können diese Anleitung zur Installation eines WordPress-Plugins lesen, wenn Sie Hilfe bei diesem Schritt benötigen.
Nachdem Sie SeedProd zu Ihrer WordPress-Website hinzugefügt haben, navigieren Sie zur Seite SeedProd " Einstellungen und geben Ihren Produktlizenzschlüssel ein.
Sie finden den Schlüssel im Download-Bereich Ihres SeedProd-Kontos.
Sobald Sie Ihren Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche Schlüssel überprüfen , um Ihre Premium-Funktionen freizuschalten.
Schritt 2. Wählen Sie ein WordPress-Theme oder eine Landing Page-Vorlage
Nachdem Sie nun Ihre Lizenzeinstellungen bestätigt haben, können Sie mit der Erstellung von SeedProd beginnen. Dazu müssen Sie zunächst entscheiden, welche Art von Layout Sie erstellen möchten.
In SeedProd können Sie entweder einzelne Landing Pages oder komplette WordPress-Websites mit dem Theme Builder erstellen. Von dort aus können Sie sie mit demselben Drag-and-Drop-Editor anpassen.
In dieser Anleitung werden wir eine eigenständige Landing Page erstellen. Sie können jedoch dieser Anleitung zur Erstellung eines benutzerdefinierten WordPress-Themes folgen, wenn Sie diesen Ansatz bevorzugen, und dann zu Schritt 3 dieses Tutorials zurückkehren, um zu lernen, wie Sie Bild-Hotspots hinzufügen.
Da wir ein Landing Page-Layout erstellen, gehen wir zu SeedProd " Landing Pages, scrollen über den Abschnitt Landing Page Modes und klicken auf die Schaltfläche Add New Landing Page.
So gelangen Sie zur Bibliothek mit vorgefertigten Landing Page-Vorlagen, aus denen Sie ein Design auswählen können, das am besten zu Ihren Geschäftsanforderungen passt. Jede Vorlage ist zu 100 % mobilfähig und bietet Designs für verschiedene Anwendungsfälle, darunter Fitness, Immobilien, digitales Marketing und mehr.
Machen Sie sich keine Sorgen, wenn Sie nichts Passendes finden können. Sie können jeden Zentimeter der Vorlage anpassen, bis sie so aussieht, wie Sie es wünschen. Wählen Sie also eine Vorlage aus, indem Sie mit dem Mauszeiger über eine Vorlage fahren und auf das Häkchen klicken.
Auf dem nächsten Bildschirm können Sie Ihrer Seite einen Namen und eine URL geben und dann auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen klicken, um sie im visuellen Editor von SeedProd zu starten.
Schritt 3. Hinzufügen des Hotspot-WordPress-Blocks
Der Seitenersteller von SeedProd ist sehr einfach zu navigieren. Auf der linken Seite sehen Sie verschiedene Abschnitte und Blöcke und auf der rechten Seite eine Live-Seitenvorschau.
Klicken Sie auf eine beliebige Stelle in der Vorschau, um den Inhalt eines beliebigen Elements zu ändern. Wenn Sie zum Beispiel auf den Textblock klicken, öffnet sich ein Fenster, in das Sie Ihre eigene Begrüßung oder Beschreibung eingeben können.
Und im Opt-in-Formularblock können Sie Ihre Formularfelder anpassen, die Hintergrundfarbe der Schaltfläche "Senden" ändern und vieles mehr.
Bevor Sie das Bild-Hotspot-Widget zu Ihrer Seite hinzufügen, müssen Sie die perfekte Stelle finden, z. B. das erste Bild auf der Seite.
Sie müssen diesen Block zuerst entfernen, um Platz für das Hotspot-Bild zu schaffen. Bewegen Sie also den Mauszeiger darüber, bis Sie einen orangefarbenen Rahmen sehen, und klicken Sie dann auf das Mülleimer-Symbol, um ihn zu löschen.
Jetzt können Sie den Hotspot-Block im Bedienfeld Erweiterte Blöcke finden und ihn in den Bereich auf Ihrer Seite ziehen.
Öffnen Sie dann die Blockeinstellungen und fügen Sie ein Bild an der Stelle hinzu, an der Sie Hotspot-Symbole hinzufügen möchten.
Sie können entweder ein Foto von Ihrem Computer oder aus Ihrer WordPress-Mediathek hochladen oder aus Tausenden von Stock-Bildern wählen (verfügbar in SeedProd plus-Plänen und mehr).
Nachdem Sie ein Bild hinzugefügt haben, können Sie Ihren ersten Hotspot erstellen.
Erweitern Sie einfach den Hotspot-Platzhalter und geben Sie Ihre Hotspot-Beschreibung ein. Diese wird angezeigt, wenn Nutzer auf das Hotspot-Symbol klicken oder mit dem Mauszeiger darüber fahren.
Sie können die Position des runden Hotspot-Symbols ändern, indem Sie die Schieberegler für die vertikale und horizontale Ausrichtung verschieben. Außerdem können Sie die Farbe und die Animation des Symbols ändern, um es besser hervorzuheben.
Wenn Sie die erweiterten Einstellungen aktivieren, können Sie außerdem eine Beschriftung auswählen, einen Link eingeben und benutzerdefinierte Symbole und Größen aus der Font Awesome-Bibliothek auswählen.
Um Ihre Hotspots auffälliger zu gestalten, können Sie den Bereich Tooltips öffnen und Einstellungen für Auslöser und Animation wählen.
Wenn Sie dann auf die Registerkarte " Erweitert" klicken, können Sie weitere Formatierungs- und Gestaltungsoptionen auswählen, darunter Typografie, Textfarben, Abstände und vieles mehr.
Um Ihrem Bild weitere Hotspots hinzuzufügen, wiederholen Sie diesen Schritt so oft Sie möchten. Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Änderungen zu speichern.
Ich habe den Hotspot-Block auf einer Produktseite eingerichtet und die Tooltips waren innerhalb von etwa 10 Minuten einsatzbereit. Die Schieberegler zur Positionierung sind präziser, als ich erwartet hatte.
Passen Sie Ihre Seite nun weiter an, bis sie genau so aussieht, wie Sie es wünschen.
Mit dem Akkordeon-Block können Sie Ihrer Seite beispielsweise einen FAQ-Bereich hinzufügen, mit dem Videoblock können Sie YouTube- oder Vimeo-Videos anzeigen, mit dem Google Maps-Block können Sie Ihren Standort anzeigen und vieles mehr.
Schritt 4. Konfigurieren Sie Ihre Einstellungen
Klicken Sie oben auf die Registerkarte „Verbinden“, um eine Anbindung an Ihren E-Mail-Marketing-Dienst herzustellen, oder auf die Registerkarte „Seiteneinstellungen“, um Optionen für SEO, Analysen und benutzerdefinierte Domains zu konfigurieren. Diese Schritte sind optional, sollten aber vor der Veröffentlichung durchgeführt werden.
Schritt 5. Veröffentlichen Sie Ihr Hotspot-Bild in WordPress
Nachdem Sie Ihre Einstellungen konfiguriert haben, können Sie Ihre Landing Page veröffentlichen und Ihr Hotspot-Bild auf Ihrer Website einbinden.
Klicken Sie dazu auf den Pfeil der Schaltfläche Speichern und wählen Sie Veröffentlichen.
Jetzt können Sie sich Ihre Seite ansehen, um Ihre Bild-Hotspots in Aktion zu sehen!
Und hier ist ein genauerer Blick auf die Hotspot-Tooltip:
FAQs zum Hinzufügen von Bild-Hotspots in WordPress
Wozu kann ich Bild-Hotspots verwenden?
E-Commerce-Shops nutzen sie, um Produkte auf Lifestyle-Fotos zu kennzeichnen und jeden Artikel direkt mit seiner Produktseite zu verknüpfen. Du kannst Hotspots auch in E-Learning-Diagrammen verwenden, um Teile zu beschriften, ohne das Bild überladen zu wirken, auf Immobilienfotos, um Raummerkmale hervorzuheben, oder auf Veranstaltungsfotos, um Personen auf Gruppenfotos zu identifizieren.
Funktionieren Bild-Hotspots auf Mobilgeräten?
Ja. Der Hotspot-Block von SeedProd ist für Mobilgeräte optimiert, und Tooltips lassen sich durch Antippen auf Touchscreens aufrufen. Außerdem kannst du über die Registerkarte „Erweitert“ in den Blockeinstellungen bestimmte Elemente auf dem Desktop oder auf Mobilgeräten ein- oder ausblenden.
Gibt es ein kostenloses Plugin für Bild-Hotspots in WordPress?
Ja, auf WordPress.org gibt es kostenlose Plugins für Bild-Hotspots. Die meisten unterstützen in der kostenlosen Version bis zu sechs Hotspots pro Bild, und bei einigen gibt es Einschränkungen hinsichtlich der Kompatibilität mit bestimmten Themes. Wenn Sie eine unbegrenzte Anzahl von Hotspots benötigen oder die Flexibilität eines vollständigen visuellen Editors bei der Positionierung und Gestaltung wünschen, ist SeedProd Pro eine Überlegung wert.
Kann ich das Design meiner Hotspots individuell gestalten?
Ja. In SeedProd kannst du die Farbe des Symbols, den Animationsstil, die Position und das Aussehen des Tooltips ändern. Über die erweiterten Einstellungen kannst du benutzerdefinierte Symbole aus der Font Awesome-Bibliothek auswählen und Links zu jeder Markierung hinzufügen.
Sie wissen jetzt, wie Sie Hotspot-Bilder zu WordPress hinzufügen können, ohne Shortcodes, benutzerdefiniertes CSS oder unnötige Add-ons zu verwenden. Noch besser ist, dass es nur wenige Minuten dauert, um mit SeedProd interaktive Bild-Hotspots zu erstellen.
Worauf warten Sie also noch?
Wenn Ihnen dieses Tutorial gefallen hat, könnten Ihnen auch die folgenden WordPress-Anleitungen gefallen:
- Hinzufügen einer Schaltfläche zur WordPress-Kopfzeile
- Wie man in WordPress animierte Zählwerke erstellt
- Hinzufügen von Vorher- und Nachher-Foto-Schiebern zu WordPress
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
