Ein Produktfoto mit einem Absatz von specs darunter wird selten gelesen Ein Grundriss mit einer Legende nebenbei wird ignoriert Das Problem ist immer das gleiche: Das Bild und die Informationen leben an zwei verschiedenen Orten, und die meisten Besucher scrollen nie weit genug, um sie zu verbinden.
Ein Bild-hotspot Behebt das Man pinnt kleine Markierungen direkt auf das Foto, und jeder offenbart ein kurzes Etikett, wenn jemand schwebt oder tippt Die Bild Hotspot Widget Von Master Addons macht das im Inneren des Elementor-Editors Laden Sie ein Bild hoch, lassen Sie Markierungen dort fallen, wo Sie sie haben möchten, schreiben Sie für jeden eine Beschriftung, und Sie sind fertig Kein CSS, kein benutzerdefinierter Code.
Was ist ein Bild-Hotspot in Elementor?
Ein Bild-Hotspot ist ein kleiner interaktiver Marker, der an einer bestimmten Position auf einem Bild angeheftet ist Jeder Marker hat sein eigenes Label, Symbol oder Link. Auf dem Desktop zeigt das Überfahren des Markers ein schwebendes Panel mit dem Inhalt. Auf Mobilgeräten macht das Tippen dasselbe.
Ein Produktfoto kann auf jedem Feature eine Markierung haben Ein Grundriss kann einzelne Räume markieren Ein Screenshot kann mit einer kurzen Erklärung auf Knöpfe oder Einstellungen hinweisen Das Bild selbst ändert sich nicht Die Markierungen geben den Besuchern nur eine Möglichkeit, es zu erkunden.
Elementor hat kein integriertes Hotspot-Widget Die Master Addons-Version verarbeitet alles vom Widget-Panel aus: Markierungsplatzierung, Beschriftungsinhalte, Symbole, Animationen und Styling. Sie konfigurieren jeden Hotspot einzeln über den Repeater, und das Widget kümmert sich um Positionierung und Reaktionsfähigkeit.
Warum Bild-Hotspots auf Ihrer Website verwenden?
Statische Bilder schaffen eine Lücke zwischen dem, was der Besucher sieht und dem, was er wissen muss Hotspots schließen diese Lücke.
Auf einem Produktfoto an jedem Feature eine Markierung anheften, damit Besucher Specs sehen, ohne zu einer separaten Liste zu scrollen Auf einem Grundriss markieren Sie Räume oder Kabinen, damit sich jeder Standort mit seinem Namen und seinen Details öffnet Auf einer Infografik halten Sie das Visual sauber und lassen Sie Markierungen den zusätzlichen Kontext tragen Auf einem Screenshot zeigen Sie bestimmte Schaltflächen oder Einstellungen für ein Tutorial oder einen Onboarding-Fluss an Auf einem Teamfoto beschriften Sie Personen oder Abteilungen.
Der Aufbau ist immer derselbe: Ein Bild, mehrere Marker, jeder offenbart bei Interaktion Inhalte Der Besucher bleibt auf dem Bild, anstatt zwischen dem Bild und einem Textblock darunter zu hüpfen.
So fügen Sie einen Bild-Hotspot in Elementor hinzu (Schritt für Schritt)
Das ganze Setup dauert etwa fünf Minuten.
Schritt 1: Master-Addons installieren und Pro aktivieren
Gehe zu Plugins, Add New in deinem WordPress Dashboard und suche nach “Master Addons” Installiere und aktiviere das kostenlose Plugin, wenn du ein Pro Lizenz, geben Sie es unter Master Addons, Lizenz ein Das Image Hotspot Widget erscheint erst, nachdem Pro aktiv ist.
Schritt 2: Ziehen Sie das Bild-Hotspot-Widget in Ihre Seite
Öffnen Sie eine beliebige Seite im Elementor-Editor Im Elements-Panel links suchen Sie nach Image Hotspot oder scrollen Sie zum Abschnitt Master-Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es auf die Seite Es lädt mit einem Beispielbild und einigen Platzhaltermarkierungen, die Sie bearbeiten können.
Schritt 3: Laden Sie Ihr Bild hoch
Öffnen Sie im Reiter Inhalt den Abschnitt Bild Klicken Sie auf Bild wählen und wählen Sie ein Bild aus der Mediathek Bildauflösung für ein scharfes Rendering auf Voll oder Groß einstellenDie Option Ausrichten positioniert das Bild innerhalb seiner Spalte: links, in der Mitte oder rechts.
Schritt 4: Hotspots zum Bild hinzufügen
Öffnen Sie den Hotspots-Bereich Jedes Element im Repeater ist eine Markierung Klicken Sie auf Element hinzufügen, um ein neues zu erstellen Sie können so viele hinzufügen, wie das Bild benötigt Ziehen Sie jede Markierung auf dem Bild, um es zu positionieren, oder legen Sie genaue horizontale und vertikale Koordinaten für eine genaue Platzierung fest.
Es gibt einen Disable Pulse Effect-Umschalter, wenn Sie statische Markierungen anstelle der standardmäßigen pulsierenden Animation wünschen.
Schritt 5: Legen Sie den Markierungstyp und den Etiketteninhalt fest
Klicken Sie auf ein Hotspot-Element, um seine Einstellungen zu öffnen Wählen Sie unter Typ aus, was innerhalb der Markierung erscheint: nichts (nur ein Punkt), ein Symbol oder ein kleines Bild Das Textfeld enthält die kurze Beschriftung, die im Floating-Panel angezeigt wird Das Link-Feld fügt eine URL hinzu, sodass die Markierung auch irgendwo auf Klick navigiert.
Der Tooltip Content Editor ist eine WYSIWYG Box für den vollständigen Label-Text, Sie können dort Formatierungen, Bilder oder Shortcodes verwenden.
Schritt 6: Markierungsverhalten konfigurieren
Zurück in der Hauptregisterkarte Inhalt steuert der Abschnitt Tooltips, wie sich Beschriftungen über alle Markierungen hinweg verhalten:
- Position anzeigen: auf welcher Seite der Markierung sich das Etikett öffnet (oben, unten, links, rechts).
- Pfeil: Schalten Sie einen Zeiger zwischen der Markierung und dem Etikett um.
- Animation: der Enthüllungseffekt, wenn das Etikett erscheint, z. B. Shift-Toward.
- Auf Klicken auslösen: wechselt von Hover-to-Reveal zu Click-to-Reveal Dies ist das, was Sie für Mobilgeräte wünschen, da Touchscreens keinen Hover haben.
Optionen für das Styling von Markern
Jeder Hotspot verfügt über eine eigene Style-Registerkarte für das Erscheinungsbild des Markers:
- Standardfarbe und Standardhintergrund: der Marker in Ruhe.
- Hover-farbe und Hover-hintergrund: wie es sich beim Hover ändert.
- Opazität: wie solide der Marker gegen das Bild wirkt Niedrigere Werte machen es subtiler.
Wählen Sie eine Markierungsfarbe, die sich von dem Bild dahinter abhebt. Ein vielbeschäftigtes Foto verschluckt einen kontrastarmen Marker und Besucher werden die Hotspots nicht bemerken.
Styling des Bildes und der Etiketten
Die Hauptkarte Stil des Widgets besteht aus drei Abschnitten.
Bildfeld
Steuert das Bild selbst: Opazität, Randradius, Kastenschatten und CSS-Filter. Ein Randradius oder Schatten hilft dem Bild, in einem Kartenlayout zu sitzen. Mit CSS-Filtern können Sie Helligkeit, Kontrast oder Sättigung optimieren, ohne das Bild erneut zu exportieren.
Markierungspanel
Globale Einstellungen für alle Marker: Größe und Standardfarbe Einzelne Hotspot-Stile überschreiben diese.
Etikettentafel
Steuert das Floating-Panel, das erscheint, wenn mit einer Markierung interagiert wird: Hintergrundfarbe, Textfarbe, Typografie, Polsterung, Randradius und Schatten.
Responsives Verhalten auf Mobilgeräten
Marker verwenden eine prozentuale Positionierung, sodass sie unabhängig von der Bildschirmgröße an derselben Stelle im Bild festgehalten werden. Die Größe und Neupositionierung der Etiketten wird geändert, um im Ansichtsfenster zu bleiben.
Touch-Geräte haben keinen Hover, daher schaltet der Trigger auf Klick-Umschalter im Abschnitt Tooltips das ganze Widget auf Tippen-zu-Entdecken um Besucher tippen auf einen Marker, um das Label zu öffnen, und tippen an anderer Stelle, um es zu schließen Wenn Ihre Zielgruppe hauptsächlich mobil ist, schalten Sie dies von Anfang an ein.
Auf sehr kleinen Bildschirmen, auf denen sich Beschriftungen zu überlappen beginnen, können Sie diese unterhalb eines bestimmten Haltepunkts deaktivieren und stattdessen die Markierungslinks die Arbeit erledigen lassen. Jeder Marker navigiert weiterhin zum Tippen zu seiner URL.
Bild-Hotspot vs Tooltip Widget: Was ist der Unterschied?
Master Addons verfügt über zwei Funktionen, die Hover-Labels erzeugen, und die Leute verwechseln sie:
| Merkmal | Was es tut | Am besten für |
|---|---|---|
| Bild Hotspot Widget | Pins interaktive Markierungen an bestimmten x/y-Positionen auf einem Bild Jeder Marker öffnet eine Beschriftung beim Hover oder Klicken. | Kommentierte Fotos, Produktaufrufe, Grundrisse, interaktive Karten. |
| Tooltip-Widget und Tooltips-Erweiterung | Das Tooltip-Widget ist ein eigenständiger Hinweis mit eigenem Trigger Die Tooltips-Erweiterung fügt ein Hover-Label an ein vorhandenes Elementorelement an, beispielsweise an eine Schaltfläche, ein Symbol, einen Textblock oder einen Abschnitt. | Hover Hinweise auf Schaltflächen, Hilfetext auf Formularfeldern, zusätzlicher Kontext auf jedem Seitenelement. |
Image Hotspot ist für Bilder gebaut und platziert Markierungen nach Position, wenn Sie Markierungen auf einem Foto benötigen, verwenden Sie Image Hotspot Für eine Hover-Beschriftung auf einem Button oder Textblock, der bereits vorhanden ist, verwenden Sie die Tooltips-erweiterung. Wenn Sie stattdessen einen eigenständigen Hinweis wünschen, wird die Tooltip-widget Macht das.
Image Hotspot und die Tooltips-Erweiterung benötigen Master Addons Pro, während das Tooltip-Widget im kostenlosen Plugin enthalten ist. Sie teilen keine Selektoren oder Event-Handler, sodass Sie sie auf derselben Seite verwenden können.
Tipps für die Arbeit mit Image Hotspots
- Raummarkierungen aus. Überlappende Marker erschweren die Verwendung des Bildes. Wenn zwei Hotspots dicht beieinander liegen, drücken Sie ihre Etiketten auf gegenüberliegende Seiten oder lassen Sie einen davon fallen.
- Beschriftungen kurz halten. Ein oder zwei Zeilen lesen sich besser als ein Absatz innerhalb eines Floating Panels Verwenden Sie das Etikett für eine kurze Zusammenfassung und verlinken Sie für die vollständigen Details.
- Aktivieren Sie Trigger auf Klicken Sie für Mobilgeräte. Auch wenn Hover auf dem Desktop funktioniert, benötigen Touch-Benutzer ein Tippziel Das Widget verwaltet beide Modi gleichzeitig.
- Testen Sie auf verschiedenen Bildschirmen. Markierungen, die auf einem Desktop gut verteilt aussehen, können sich auf einem Telefon zusammenballen. Überprüfen Sie vor der Veröffentlichung ein Telefon, ein Tablet und einen breiten Monitor.
- Vergleichen Sie die Markierungen mit dem Bild. Ein heller Marker auf einem dunklen Foto funktioniert Ein gedämpfter Marker auf einem belebten Hintergrund verschwindet Verwenden Sie den Hover-Zustand, um die Betonung hinzuzufügen, wenn jemand auf einen Marker fokussiert.
- Verwenden Sie die Registerkarte Position, wenn es auf die Ausrichtung ankommt. Das Ziehen ist schnell für eine grobe Platzierung Die Registerkarte Position mit genauen Prozentwerten ist besser, wenn Sie Markierungen benötigen, um sich mit bestimmten Teilen eines Diagramms oder Screenshots auszurichten.
Kostenlos vs. Pro: Was Sie bekommen
| Planen | Bild Hotspot | Andere Widgets |
|---|---|---|
| Kostenlos | Nicht enthalten | 40+ Widgets, einschließlich Überschrift, Schaltfläche, Infobox, Akkordeon und mehr. |
| Pro | Inbegriffen | Alle kostenlosen Widgets plus Image Hotspot, die Tooltips-Erweiterung, Anzeigebedingungen und die restlichen 80+ Widgets und Erweiterungen. |
Das Basis-Plugin kann kostenlos von der WordPress-repository. Das Image Hotspot Widget benötigt speziell eine Pro Lizenz.
Was ist ein Bild-Hotspot in Elementor?
Ein Bild-Hotspot ist ein kleiner interaktiver Marker, der auf einem Bild platziert wird, wenn ein Besucher mit dem Mauszeiger fährt oder darauf tippt, erscheint eine Beschriftung mit Text, einer Beschreibung oder einem Link für diesen speziellen Bereich des Fotos Elementor enthält kein eingebautes Hotspot-Widget, sodass Sie ein Addon wie Master Addons benötigen, um diese Funktion hinzuzufügen.
Wie viele Hotspots kann ich zu einem einzelnen Bild hinzufügen?
Es gibt keine harte Grenze Praktischerweise halten 5 bis 7 Hotspots pro Bild die Dinge lesbar Darüber hinaus beginnen sich Marker zu überlappen, wenn Sie mehr Bereiche annotieren müssen, teilen Sie den Inhalt auf mehrere Bilder auf.
Funktionieren Image-Hotspots mobil?
Ja. Auf Touch-Geräten wechselt das Widget von Hover zu Tap-to-Reveal. Sie können Trigger on Click aktivieren, sodass mobile Besucher auf einen Marker tippen, um sein Label zu öffnen. Durch die prozentuale Positionierung bleiben Hotspots über Bildschirmgrößen hinweg korrekt angeheftet.
Kann ich einen Hotspot mit einer anderen Seite verlinken?
Ja. Jeder Hotspot hat ein Link-Feld Der Link feuert auf Klick, so kann ein Marker sowohl Informationen in seinem Label anzeigen als auch den Besucher zu einer Produktseite, Dokumentationsbereich oder externen URL navigieren.
Ist das Image Hotspot Widget kostenlos oder Pro?
Das Image Hotspot Widget ist ein Pro Feature Das Basis-Plugin Master Addons ist kostenlos und beinhaltet über 40 Widgets, aber das Hotspot Widget benötigt ein Pro Lizenz.
Was ist der Unterschied zwischen dem Image Hotspot Widget und dem Tooltip Widget?
Das Image Hotspot Widget pins interaktive Markierungen an bestimmten Positionen eines Bildes, die jeweils eine Beschriftung beim Hover oder Klick zeigen Die Tooltip-widget Ist ein eigenständiger Hinweis mit eigenem Auslöser, und die Tooltips-Erweiterung fügt ein Hover-Label an ein vorhandenes Element wie eine Schaltfläche, einen Text oder ein Symbol an Verwenden Sie Bild-Hotspot für kommentierte Fotos und die Tooltip-Optionen für Hover-Hinweise auf anderen Seitenelementen.
Einwickelnd
Das Image Hotspot Widget nimmt ein flaches Bild und fügt Markierungen hinzu, die Informationen im Hover oder Klick preisgeben Laden Sie das Bild hoch, lassen Sie Markierungen auf den Bereichen fallen, die einer Erklärung bedürfen, schreiben Sie für jeden eine kurze Beschriftung und gestalten Sie die Markierungen passend zu Ihrem Design Alles passiert im Elementor Editor.
Weitere Informationen zu Bildern in Elementor finden Sie im Bildvergleichs-Widget und die Widget für Bild-Hover-Effekte. Wenn Sie anstelle von Bildern Hover-Etiketten auf Schaltflächen oder Text benötigen, muss die Tooltip-Widget-Tutorial Deckt das ab Und die vollständige Liste von Master Addons Widgets und Erweiterungen Stöbern lohnt, wenn man sehen will, was es sonst noch gibt.
Holen Sie sich Master Addons Pro Bild-Hotspot-Widget und den Rest der 80+ Widgets und Erweiterungen für Elementor freizuschalten.
