So erstellen und verwenden Sie einen Bild-Hotspot auf Ihrer WordPress-Website

Bilder und Videos machen Websites immer ansprechender. Ein Hotspot-Bild auf Ihrer WordPress-Website kann jedoch alle bisherigen Rekorde bei der Verwendung normaler Bilder brechen. Hotspot-Bilder enthalten anklickbare Bereiche, die den Besuchern Ihrer Website weitere Informationen bieten. Vorher war das Erstellen eines Image-Hotspots gar nicht so einfach. 

Glücklicherweise ist es jetzt mit Hilfe großartiger WordPress-Add-Ons super einfach geworden, einen Bild-Hotspot zu erstellen. Es ist sogar noch einfacher geworden, weil ElementsKit hinzufügen Auf.

ElementsKit ist ein All-in-One-Addon für Elementor das bietet 85+ Widgets, 500+ Blöcke, 25+ fertige Homepages und vieles mehr. Darüber hinaus bietet es kostenlose Widgets, Pro-Widgets und erweiterte Module, die die Anpassung Ihrer Website auf ein Niveau bringen, das Sie sich nicht vorstellen können. Sie können sogar in wenigen Minuten interaktive Hotspot-Bilder erstellen.

In diesem Artikel zeigen wir Ihnen, wie einfach Sie mit ElementsKit Hotspot-Bilder erstellen können. Außerdem erfahren Sie, wie Sie interaktive Imagemaps erstellen. Nach dem Lesen dieses Artikels können Sie nicht nur Imagemaps, sondern auch beliebige Hotspot-Bilder erstellen.

Was ist ein interaktiver Bild-Hotspot auf Ihrer WordPress-Website?

Hotspot-Bilder sind interaktive Bilder die Hotspot-Symbole auf dem Bild enthalten. Diese Hotspot-Symbole enthalten Popup-Fenster oder Tooltips, die Texte, Bilder, Links usw. enthalten. 

Die Erstellung interaktiver Bilder wird Ihnen bei der Bereitstellung helfen Mehr Info durch anklickbare Bereiche. Wenn Sie einfach ein Hotspot-Symbol zu einem WordPress-Hotspot-Bild hinzufügen, wird es die Aufmerksamkeit Ihrer Besucher auf sich ziehen. 

Außerdem werden Ihre Benutzer oder Besucher aufgrund auffälliger und informativer Fotos mehr Zeit auf Ihrer Website verbringen wollen. Als Ergebnis werden Sie eine beeindruckende Verbesserung in Ihrem Absprungrate Und Wechselkurs wegen WordPress-Hotspot-Bildern. 

Warum sollten Sie interaktive Hotspot-Bilder erstellen?

Interaktive Hotspot-Bilder auf Ihrer WordPress-Site ziehen die Aufmerksamkeit Ihrer Besucher auf sich und reduzieren die Anzahl der Besucher Absprungrate. Auch diese Bilder können effektiver sein als Videos. Sie finden auch viele Beispiele für leistungsstarke Hotspot-Bilder.

Aber Sie möchten sicher genau wissen, welchen Nutzen diese Bilder für Sie haben. Warum sollten Sie sich bei der Erstellung dieser Bilder besonders viel Mühe geben? 

Wenn Sie sich diese Fragen stellen, sind Sie sicherlich nicht allein. Ich bin beim Erstellen eines Elementor-Hotspot-Bildes auch auf diese Fragen gestoßen. Hier sind die Antworten auf Ihre Fragen, warum Sie sich beim Erstellen von Bild-Hotspots besonders viel Mühe geben sollten:

1. Die interaktiven Hotspot-Bilder helfen Ihnen dabei interagieren mit Ihren Benutzern mehr. Die Verwendung eines Bildes auf Ihrer Website ist immer von Vorteil. Aber es wird noch vorteilhafter, wenn Sie ein Hotspot-Bild verwenden.

2. Es wird Ihnen bei der Bereitstellung helfen Mehr Info für Ihren Besucher. Als Hotspot enthalten Bilder anklickbare Bereiche, die Tooltips oder Fenster enthalten. Diese Fenster enthalten Fotos, Texte, Links usw., um zusätzliche Informationen bereitzustellen.

3. Hotspot-Bilder sind mobil ansprechbar. 

Im Jahr 2021 Statista hat in einer Studie herausgefunden, dass „mehr als 47 Prozent Website-Besucher mobile Geräte verwenden, um Websites in den Vereinigten Staaten zu besuchen“. 

Sie können also die Notwendigkeit eines auf Mobilgeräte reagierenden Bildes nicht ignorieren.

4. Wenn Sie mehr mit Ihren Benutzern interagieren können, können Sie sie auch auf Ihrer WordPress-Site halten. Infolgedessen ist die Absprungrate Die Anzahl der Zugriffe auf Ihrer Website wird ebenfalls sinken.
5. Wenn Sie Hotspots hinzufügen, um interaktive Bilder zu erstellen, erhöht dies das Benutzererlebnis und Wechselkurs Ihrer Website. Sie werden eine sichtbare Verbesserung beim Hinzufügen von Hotspot-Bildern feststellen.

Nachdem Sie all diese Vorteile kennengelernt haben, haben Sie möglicherweise Fragen. 

Wie erstelle ich Hotspot-Bilder? Was ist der einfachste Weg, einen Bild-Hotspot für Ihre Site zu erstellen? 

Rechts?

Lesen Sie weiter, um Ihre Lösung zu finden. 

Erstellen Sie mit ElementsKit interaktive Hotspot-Bilder auf Ihrer WordPress-Website

Durch das Hinzufügen von Hotspot-Bildern zu Ihrer Website können Sie mehr als je zuvor mit Ihren Besuchern interagieren. Außerdem wird es Ihren Kunden nie langweilig, sich mit den Inhalten Ihrer Website zu beschäftigen. 

Glücklicherweise können Sie jetzt mit ElementsKit interaktive Bilder für Ihre WordPress-Website erstellen, ohne viel Zeit zu verschwenden. Außerdem können Sie einen Image-Hotspot erstellen Elementor-Off-Canvas-Menü, Bildaustauscheffekt in WordPress, usw. ohne Codierung.

Möchten Sie mehr über ElementsKit erfahren?

Dann lies ElementsKit: Das beste Add-on für Elementor Artikel.

Mit dem ElementsKit-Widget können Sie in acht einfachen Schritten interaktive Bild-Hotspots erstellen. Sind Sie gespannt darauf, wie Sie dies tun können? 

Lass uns eintauchen.

Schritt 1: Bearbeiten Sie eine neue Seite mit Elementor, um interaktive Bilder zu erstellen.

Zuerst müssen Sie ElementsKit installieren und aktivieren. Gehen Sie dann zu Ihrem WordPress-Dashboard und besuchen Sie Seiten>>Neu hinzufügen, um einen interaktiven Bild-Hotspot zu erstellen.

Klicken Sie anschließend auf die Schaltfläche „Mit Elementor bearbeiten“, um ein neues Hotspot-Bild zu erstellen.

Schritt 2: Suchen Sie das Hotspot-Widget und wählen Sie es aus.

In diesem Schritt müssen Sie im Widget-Suchfeld nach einem Hotspot-Widget suchen.

Ziehen Sie nun das Hotspot-Widget und fügen Sie es wie im Bild zum neuen Abschnitt hinzu.

Schritt 3: Bearbeiten Sie den Inhalt Ihrer Bild-Hotspots.

Nachdem Sie das Hotspot-Widget hinzugefügt haben, ist es nun an der Zeit, den Inhalt des Widgets zu bearbeiten. Wählen Sie dafür den Stil und das Hintergrundbild aus Ihrer WordPress-Medienbibliothek oder Ihrem Computer. Ich verwende hier ein Google Maps-Bild. Laden Sie es jetzt hoch.

Sie können mit dem ElementsKit-Hotspot-Widget auch Folgendes bearbeiten:

• Glanz zeigen: Sie können das Leuchten, das um den Zeiger herum erscheint, ein- und ausblenden.
• Klicken oder bewegen Sie den Mauszeiger: Diese Option hilft Ihnen bei der Entscheidung, ob Ihre Tooltips beim Klicken oder Hovern angezeigt werden sollen. Wenn Sie Hover wählen, werden Ihre Tooltips beim Hover oder beim Klicken angezeigt, wenn ein Benutzer auf die Hotspots klickt.
• Aktiv oder nicht: Mit dieser Option können Sie auch alle Tooltips ein- oder ausblenden.

Nachdem Sie die oben genannten Dinge bearbeitet haben, fügen Sie einen Tooltip für Ihre Hotspot-Imagemap hinzu. Klicken Sie dazu auf das im Bild markierte Kästchen.

Jetzt müssen Sie einen Titel und eine Beschreibung für Ihren Tooltip hinzufügen. Fügen Sie dazu einen Titel und eine Beschreibung für Ihren Tooltip ein. 

Fügen Sie anschließend ein passendes Bild für Ihren Tooltip hinzu. Es kann ein beliebiges Bild sein. 

Jetzt müssen Sie die Tooltip-Position anpassen. Mit der folgenden Option können Sie Ihren Zeiger von links nach rechts oder von oben nach unten bewegen. Stellen Sie den Zeiger ein. Sie können auch weitere Hotspots hinzufügen, indem Sie auf die Schaltfläche „Element hinzufügen“ klicken.

Schritt 4: Passen Sie den Stil des Inhalts des Bild-Hotspots WordPress an.

In diesem Schritt müssen Sie den Stil Ihres Hotspot-Inhalts bearbeiten. Wählen Sie eine geeignete Hintergrundfarbe und ein geeignetes Bild, um den Standardinhaltsstil Ihres Elementor-Hotspot-Bildes zu ändern. Legen Sie nun Abstand, Breite und Ausrichtung für Ihren Standardinhalt fest.

Schritt 5: Passen Sie den Stil des Zeigers an, um interaktive Bilder zu erstellen.

In diesem Schritt müssen Sie den Zeiger anpassen. Hier können Sie folgende Bereiche anpassen:

• Hintergrundfarbe: Wählen Sie die Hintergrundfarbe für Ihren Zeiger.
• Zeigergröße: Legen Sie die Größe Ihres Zeigers fest. Sie können es vergrößern, indem Sie den Kreis nach rechts ziehen.
• Randradius: Mit dieser Option können Sie bei Bedarf den Radius Ihres Zeigers ändern.
• Box Schatten: Mit dieser Option können Sie mit dem Zeiger Schatten hinzufügen.
• Randtyp: Wählen Sie den Rahmentyp aus, den Sie für Ihren Zeiger wünschen.
• Punktfarbe: Passen Sie die Farbe des Punktes an, der sich im Zeiger befindet.
• Leuchtfarbe: Ändern Sie bei Bedarf die standardmäßige Leuchtfarbe, die um den Zeiger herum angezeigt wird.

Schritt 6: Ändern Sie den Stil des Titels Ihres Hotspot-Bildes.

Für die Gestaltung des Titels müssen Sie die richtige Typografie für Ihren Titel auswählen. Im Bereich Typografie können Sie folgende Bereiche ändern:

• Familie.
• Größe.
• Gewicht.
• Verwandeln.
• Stil.
• Dekoration.
• Zeilenhöhe.
• Buchstaben-Abstand.

Sie müssen außerdem die Textfarbe auswählen und den erforderlichen Rand für Ihren Titel festlegen.

Schritt 7: Passen Sie den Stil der Beschreibung und des Bildes an.

Hier müssen Sie die Beschreibung des Tooltip-Inhalts bearbeiten. Dies entspricht der Titelanpassung. Legen Sie nun die Bildposition fest, an der es in Ihrem Tooltip erscheinen soll. 

Ändern Sie abschließend den Rand und die Breite Ihres Bildes nach Ihren Wünschen.

Schritt 8: Veröffentlichen Sie die vorgenommenen Änderungen zu Ihrem Hotspot-Bild.

Nachdem wir alle Änderungen vorgenommen haben, ist es nun Zeit für die Veröffentlichung. Klicken Sie auf die Schaltfläche „Veröffentlichen“ und Sie sind bereit für Ihr Hotspot-Bild.

Hier ist die Ausgabe meiner interaktiven Hotspot-Bildkarte:

Notiz:
Sie können Ihr Hotspot-Bild auch weiter anpassen. Sie können beispielsweise einige Teile Ihres Hotspot-Bildes anheften. Sie können auch Bedingungen und Effekte für Ihre Bilder festlegen. Darüber hinaus steht Ihnen die Möglichkeit offen, einen erweiterten Tooltip hinzuzufügen. Sie können Änderungen auch überwachen, indem Sie auf die Schaltfläche „Responsive“ klicken. Ihre Bearbeitung wird auf einer neuen Registerkarte angezeigt, wenn Sie auf die Schaltfläche „Responsive“ klicken.

Immer noch verwirrt?

Sehen Sie sich das Demovideo zur Verwendung des Hotspot-Widgets an:

Warum sollten Sie sich für ElementsKit entscheiden, um interaktive Hotspot-Bilder zu erstellen?

Es gibt viele Add-ons in WordPress, die ein Hotspot-Widget zum Erstellen von Hotspot-Bildern bieten. 

Aber warum sollten Sie alle anderen Add-Ons meiden? Warum sollten Sie sich für die Erstellung qualitativ hochwertiger interaktiver Hotspot-Bilder nur für ElementsKit entscheiden?

Warum gilt es als großartiges Tool für Elementor?

Die ElementsKit Pro-Version bietet ein Hotspot-Widget an. Es ist also normal, dass Sie diese Fragen haben. Den Leuten ist es egal, wenn sie eine kostenlose Version eines Plugins verwenden. Aber sie interessieren sich nicht besonders dafür, wenn sie eine kostenpflichtige Version verwenden. Denn die Leute möchten das beste Produkt kaufen, wenn sie dafür bezahlen. Bei Ihnen ist das nicht anders.

Hier sind die Gründe, warum Sie sich für ElementsKit statt für andere Add-ons entscheiden sollten:

• ElementsKit bietet Ihnen hervorragende Unterstützung. Das Support-Team ist immer bereit, Lösungen für alle Probleme zu finden, die bei der Verwendung dieses Add-ons auftreten. Außerdem erhalten Sie die schnellste Antwort auf alle Ihre Fragen. Diesen Support werden Sie bei anderen Add-ons kaum finden.
• Wegen seiner benutzerfreundlich Funktionen haben selbst Einsteiger keine Probleme mit der Bedienung. 

• Sie können Hotspot-Bilder nach Belieben erstellen. Auch erweiterte Anpassungen stehen Ihnen offen. Sie können nicht nur Hotspot-Bilder, sondern auch benutzerdefinierte erstellen. Header, Fusszeile, Dropdown-Menü usw. mit ElementsKit.

• ElementsKit hat nicht nur eine hervorragende Benutzererfahrung geboten. Es wird kontinuierlich aktualisiert, um Ihren Anforderungen gerecht zu werden. Darüber hinaus ist es so Vollständig kompatibel mit Elementor. Dieses Benutzererlebnis erhalten Sie jedoch nicht, wenn Sie andere Add-ons und Plugins installieren oder verwenden.

• Ob Sie Eigentümer eines sind große oder kleine WebsiteSie können dieses Add-on problemlos verwenden. Einige Add-ons werden Ihren Anforderungen jedoch nicht gerecht.
• Einige Add-ons können Ihre Website beschädigen. Dieses Problem tritt nicht auf, wenn Sie Benutzer von ElementsKit werden.

Dies sind die wichtigsten Gründe, die Sie dazu veranlassen, das zu installieren und zu verwenden ElementsKit hinzufügen Auf. Aufgrund der oben genannten Vorteile verlassen viele Benutzer andere Add-ons und entscheiden sich für ElementsKit. Zum Zeitpunkt des Schreibens dieses Blogs beträgt der Download von ElementsKit pro Woche 117,238+. Das beweist, dass Benutzer ElementsKit lieben.

Möchten Sie mehr über die Reise von ElementsKit erfahren? Dann lies Die Reise von ElementsKit: All-in-One-Add-on für Elementor.

Beginnen Sie mit Ihrem Hotspot-Image

Die Verwendung von Bildern auf Ihrer WordPress-Site kann der effektivste Weg sein, um eine emotionale Verbindung zu Ihren Besuchern aufzubauen. Aber Hotspot-Bilder auf Ihrer WordPress-Site können das Ganze noch auf eine andere Ebene bringen. Zum Glück wissen Sie jetzt, wie Sie Hotspot-Bilder in wenigen Minuten erstellen können mit ElementsKit. 

Wenn Sie beim Erstellen von Hotspot-Bildern immer noch unsicher sind, teilen Sie uns dies bitte im Kommentarbereich mit oder posten Sie Ihre Fragen auf Wpmet-Community. Wir werden versuchen, Ihr Problem zu lösen. Teilen Sie uns auch mit, ob dieser Inhalt hilfreich ist.