Wichtige Erkenntnisse
- Ein Elementor-Bild-Hotspot ist eine auf einem Foto angebrachte Markierung, die beim Bewegen oder Tippen eine kurze Beschriftung öffnet, und das Master Addons Image Hotspot-Widget fügt für jedes Element in seiner Hotspots-Liste eine Markierung hinzu.
- Das Image Hotspot-Widget benötigt Elementor und Master Addons Pro, da Free Elementor kein Hotspot-Widget hat und Elementor Pro ein eigenes separates Hotspot-Widget liefert.
- Jede Bild-Hotspot-Markierung wird mit horizontalen und vertikalen Positionsschiebern in Prozent des Bildes platziert, und diese eine Position gilt auf Desktop, Tablet und Telefon.
- Bild-Hotspot-Tooltips zeigen nur Klartext, da fettgedruckter Text, Links, Bilder und Kurzcodes, die in das Tooltip-Inhaltsfeld eingegeben wurden, beim Rendern der Seite entfernt werden.
- Auslösen auf Klicken im Abschnitt Bild-Hotspot-Tooltips sorgt dafür, dass Markierungen auf Telefonen funktionieren. Der Link eines Markers wird jedoch nur befolgt, wenn sich die Tooltips im Mauszeiger öffnen.
- Das Image Hotspot-Widget kann als einfache Bildkarte mit verknüpften Punktmarkierungen dienen, kann jedoch keine anklickbaren Formen zeichnen oder Raumumrisse so darstellen, wie es ein SVG-Bildkarten-Plugin kann.
Ein Elementor-Bild-Hotspot ist ein kleiner Marker, der auf einem Foto angebracht ist und ein kurzes Etikett zeigt, wenn ein Besucher mit dem Mauszeiger fährt oder darauf tippt. Free Elementor hat dafür kein Widget, daher verwendet dieser Leitfaden die Master Addons Image Hotspot Widget, die Markierungen zu jedem Bild aus dem Elementor-Panel ohne benutzerdefinierten Code hinzufügt Sie benötigen Master Addons Pro dafür.
Die folgenden Schritte führen Sie von einem leeren Container zu einem veröffentlichten interaktiven Bild: Platzieren von Markierungen in Prozent, Schreiben der Beschriftung für jeden einzelnen und Stylen der Markierungen für Desktop und Telefone. Spätere Abschnitte behandeln die Grenzen, die Sie vor dem Erstellen kennen sollten, wie Sie Hotspots verwenden als einfache Bildkarte und wie das Widget mit dem Hotspot-Widget in Elementor Pro vergleicht.
Inhaltsverzeichnis
Was ein Bild-Hotspot in Elementor ist
Ein Bild-Hotspot ist ein an einem Sollpunkt eines Bildes platzierter Marker, jeder Marker trägt ein eigenes Kurzetikett und, wenn man möchte, einen Link, auf einem Desktop erscheint das Etikett im Hover Auf einem Telefon tippt der Besucher auf den Marker.
Ein Produktfoto kann auf jedem Feature eine Markierung haben Ein Grundriss kann Räume oder Schreibtische markieren Ein Screenshot kann auf die Tasten zeigen, die ein neuer Benutzer benötigt Das Bild bleibt gleich, und die Markierungen lassen die Besucher es erkunden, ohne zu einer separaten Liste von Spezifikationen oder einer Legende herunterzuscrollen.
Free Elementor hat kein Hotspot-Widget Elementor Pro hat eines namens Hotspot, und Master Addons Pro fügt Image Hotspot hinzu, das auch ein kleines Bild als Marker verwenden kann Diese Anleitung behandelt das Master Addons-Widget.
Wenn Sie nur einen Hover-Hinweis auf einem Button oder einer Überschrift haben möchten, ist ein Hotspot das falsche Werkzeug Die Tooltip-widget Handles, die ohne Master Addons Pro, und die Tooltips-erweiterung (Pro) fügt einem Element, das sich bereits auf der Seite befindet, einen Hinweis hinzu.
Möchten Sie sehen, wie es funktioniert, bevor Sie bauen? Die Bild Hotspot Widget Seite Live-Demos, die vollständige Einstellungsliste und einen Side-by-Side mit Elementor Pro Hotspot hat.
So fügen Sie einen Bild-Hotspot in Elementor hinzu
Für ein Bild mit vier oder fünf Markern dauert die Einrichtung etwa fünf Minuten.
Schritt 1: Master Addons installieren und Pro aktivieren
Gehen Sie in Ihrem WordPress Dashboard zu Plugins, Add New und suchen Sie nach “Master Addons” Installieren und aktivieren Sie es, dann geben Sie Ihr Pro Lizenz Unter Master Addons, Lizenz Bild Hotspot erscheint erst im Elementor-Panel, wenn Pro aktiv ist Es funktioniert mit freiem Elementor.
Schritt 2: Ziehen Sie das Widget Image Hotspot auf die Seite
Öffnen Sie die Seite im Elementor-Editor und durchsuchen Sie das Elements-Panel nach “Hotspot” Das Ergebnis mit dem MA-Abzeichen ist Image Hotspot Wenn Sie daneben auch ein vorhängeschloss Hotspot-Widget sehen, gehört dieses zu Elementor Pro. Bild-Hotspot in einen Container ziehen.
Schritt 3: Wählen Sie Ihr Bild
Öffnen Sie im Reiter Inhalt den Bildausschnitt und klicken Sie auf Bild auswählen Bildauflösung auf Voll oder Groß einstellen, wenn das Foto feine Details hat, denn Markierungen sitzen auf dem gerenderten Bild und eine verkleinerte Kopie lässt jeden Pin ungefähr aussehen, Ausrichtung platziert das Bild links, in der Mitte oder rechts in seiner Spalte.
Schritt 4: Hotspots hinzufügen und deren Position festlegen
Öffnen Sie den Hotspots-Bereich Jedes Element in der Liste ist ein Marker, also klicken Sie für jeden Punkt, den Sie markieren möchten, einmal auf Element hinzufügen Es gibt keine Begrenzung für die Anzahl der Elemente.
Jedes Element hat Registerkarten Inhalt, Stil und Position Bewegen Sie auf der Registerkarte Position die Schieberegler Horizontale Position (%) und Vertikale Position (%), um die Markierung zu platzieren Die Werte sind ein Prozent des Bildes, also setzen 50 und 50 die Markierung in die Mitte Man kann keine Markierungen auf der Leinwand ziehen, und neue Elemente beginnen alle in der oberen linken Ecke, bis man sie bewegt, sodass drei frische Elemente wie eins aussehen können.
Auf jeder Bildschirmgröße gilt eine Position. Ein Marker mit 22% Durchmesser und 52% Abstand sitzt auf dem gleichen Teil des Fotos auf einem Laptop und auf einem Telefon.
Unter der Liste, Pulseffekt deaktivieren? schaltet den pulsierenden Ring um jede Markierung im Widget aus.
Schritt 5: Wählen Sie den Markierungstyp aus und schreiben Sie das Etikett
Auf der Registerkarte Inhalt jedes Elements setzt Typ, was innerhalb der Markierung erscheint: Keine (ein einfacher Punkt), Text (ein Pluszeichen standardmäßig oder eine Zahl oder ein Wort, das Sie eingeben), Symbol (ein beliebiges Symbol für Font Awesome) oder Bild (ein kleines Bild). Das Mischen von Typen auf einem Bild funktioniert einwandfrei.
Das Feld Link schickt den Besucher beim Anklicken des Markers auf eine andere Seite, es wird beim Öffnen von Tooltips im Hover befolgt, bei eingeschaltetem Auslöser (Schritt 6) öffnet ein Klick den Tooltip und der Link wird ignoriert.
Tooltip Content ist die Zeile, die im Hotspot-Tooltip erscheint Das Kästchen sieht aus wie ein Volltexteditor, aber der Tooltip zeigt Klartext: Fett, kursiv, Links, Bilder und Shortcodes werden alle entfernt, wenn die Seite rendert Schreiben Sie eine kurze Zeile.
Schritt 6: Wählen Sie, wie sich die Markierungen öffnen
Zurück in der Registerkarte Inhalt steuert der Abschnitt Tooltips jede Markierung im Widget auf einmal.
- Position anzeigen wählt die Seite aus, auf der sich der Tooltip öffnet: oben, unten, links oder rechts. Eine Markierung kann sie mit der Option An anzeigen auf ihrer Registerkarte Position überschreiben.
- Animation setzt den Enthüllungseffekt: Shift-Away, Shift-Toward, Fade, Scale oder Perspective.
- Arrow fügt der Markierung einen Zeiger aus dem Tooltip hinzu.
- Offset und Abstand bewegen die Werkzeugspitze entlang der Markierung und von ihr weg.
- Auslösen auf Klicken öffnet Tooltips auf einem Klick oder Tippen Telefone haben keinen Hover, also schalten Sie diesen ein, wenn viele Besucher ein Telefon benutzen.
Schritt 7: Vorschau und Veröffentlichung
Klicken Sie auf Veröffentlichen und öffnen Sie die Seite in einem neuen Tab Bewegen Sie die Maus über jede Markierung, um den Text und die Seite der Tooltip zu überprüfen, ändern Sie dann die Größe des Fensters auf Telefonbreite und überprüfen Sie, ob sich Markierungen nicht gegenseitig abdecken.
Style die Marker und das Bild
Das Styling erfolgt an zwei Stellen: der eigenen Style-Registerkarte jedes Markers und der Haupt-Style-Registerkarte des Widgets.
Per-marker-stil
Die Registerkarte Stil im Inneren eines Hotspot-Elements verfügt über Standard - und Hover-Einstellungen für Farbe, Hintergrund und Deckkraft Verwenden Sie sie, um einem Marker eine andere Farbe zu geben, beispielsweise einem Verkaufsartikel auf einem Produktfoto.
Wählen Sie eine Markierungsfarbe, die einen Kontrast zum Foto dahinter bildet. Ein gedämpfter Marker auf einem vielbefahrenen Foto geht verloren und Besucher werden nicht bemerken, dass es etwas zu schweben gibt.
Bild
Der Bildabschnitt der Hauptkarte Stil steuert das Foto: Deckkraft, Rand, Randradius, Kastenschatten und CSS-Filter. Ein Radius und ein weicher Schatten helfen dem Bild, innerhalb eines Kartenlayouts zu sitzen.
Hotspots
Die Hotspots-Sektion styles jeden Marker auf einmal: Größe, Polsterung, Randradius, Deckkraft, Farbe und Hintergrund, jeweils mit einer Hover-Version Einstellungen auf einem einzelnen Marker gewinnen diese.
Tooltipps
Der Abschnitt Tooltips gestaltet den Hotspot-Tooltip: Textausrichtung, Auffüllung, Randradius, Hintergrund, Textfarbe, Pfeilfarbe und Typografie.
Erstellen Sie ein interaktives Bild in Elementor
Ein interaktives Bild ist ein Foto, das Fragen beantwortet, wenn ein Besucher darauf zeigt In Elementor bauen Sie eines mit Image Hotspot auf, indem Sie die oben genannten Schritte befolgen: eine Markierung pro Stelle, jeweils ein einzeiliger Tooltip und auf Klicken, wenn Ihr Traffic größtenteils mobil ist.
Das Bild mit einer kurzen Liste daneben zu koppeln funktioniert gut Der Besucher kann mit der Maus über einen Marker fahren oder die Liste lesen, und beide zeigen auf die gleichen Elemente Die Laden Sie diese Zimmerdemo ein Nummerierte Markierungen auf einem Wohnzimmerfoto mit einer Preisliste daneben verwendet.
Zu den weiteren Layouts, die zu einem interaktiven Bild passen, gehören eine Uhr oder ein Gerät mit einer Markierung an jedem Teil, eine Autoauflistung mit Markierungen an den Lichtern und Rädern, ein Immobilienfoto mit Beschriftungen an jedem Merkmal und ein Teamfoto mit einem Namen an jeder Person.
Bild-Hotspots als einfache Imagemap nutzen
Eine Imagemap macht Teile eines Bildes anklickbar Image Hotspot deckt den üblichen Fall ab: eine Markierung an jeder Stelle mit einem Link zu einer anderen Seite, der gefolgt wird, wenn sich Tooltips im Schwebeflug öffnen Es platziert nur Punktmarkierungen Es zeichnet keine anklickbaren Formen, daher benötigt ein Grundriss, bei dem jede Raumumrisslinie anklickbar sein muss, ein spezielles Imagemap-Plugin wie z Imagemap Pro, die Vektorformen auf das Bild zeichnet (Stand November 2026).
Für Pins auf einer Campus-Karte, einer Ladenaufteilung oder einem Fitness-Studio-Boden reichen Markierungen aus und lassen sich schneller einrichten Die Fitnessbereich Karte Demo Markiert fünf Zonen auf einem Foto und jede Markierung verlinkt auf die Buchungsseite dieser Zone.
Bild-Hotspots auf Telefonen und Tablets
Markerpositionen sind ein Prozent des Bildes, somit bleibt jeder Marker bei jeder Bildschirmgröße auf dem gleichen Teil des Fotos, es gibt keine separate Position für Tablet oder Telefon.
Marker behalten ihre Größe, wenn das Bild schrumpft, standardmäßig etwa 40 px. Auf einem Telefon wird ein Bild mit vielen Markierungen überfüllt Verwenden Sie weniger Markierungen, eine geringere Größe unter Stil, Hotspots oder geben Sie Telefonbesuchern ein einfacheres Bild.
Telefone haben keinen Hover, also schalten Sie Trigger ein Klicken Sie im Abschnitt Tooltips Besucher tippen auf einen Marker, um seinen Tooltip zu öffnen Bedenken Sie, dass beim Anklicken des Modus ein Tipp den Tooltip öffnet und der Link des Markers nicht befolgt wird, also wenn die Links wichtiger sind als die Tooltips, lassen Sie Trigger auf Klicken Sie ab.
Was Sie brauchen, um Bild-Hotspots zu verwenden
| Einrichtung | Hotspot Widget erhalten Sie |
|---|---|
| Kostenloser Elementor für sich | Keine. Core Elementor hat kein Hotspot-Widget. |
| Elementor Pro | Elementor-eigenes Hotspot-Widget mit formatiertem Tooltip-Inhalt und eigenen Marker-Animationen. |
| Master Addons ohne Pro | Kein Image Hotspot Viele weitere Widgets sind enthalten. |
| Mit Master Addons Pro | Image Hotspot, die Tooltips-Erweiterung und die restlichen 80+ Widgets und Erweiterungen. |
Master Addons installiert von der WordPress Plugin Verzeichnis. Image Hotspot braucht a Master Addons Pro Lizenz Oben drauf Jede Steuerung ist in der Leitfaden für die Einstellungen von Bild-Hotspots.
Tipps für die Arbeit mit Bild-Hotspots
- Leerzeichen aus. Wenn zwei dicht beieinander sitzen, senden Sie ihre Tooltips mit der Option Anzeigen an die Option auf der Positionsregisterkarte jedes Markers oder lassen Sie eine fallen.
- Behalten Sie jede Beschriftung bei einer Zeile Der Tooltip wird als Klartext wiedergegeben, also legen Sie längere Details auf eine Seite und verwenden Sie den Link des Markers.
- Testen Sie vor der Veröffentlichung auf Telefonbreite. Überall gilt die gleiche Prozentposition und die Markierungen schrumpfen nicht, sodass eine Markierung, die auf einem Desktop gut aussieht, ein kleines Detail auf einem Telefon abdecken kann.
- Verwenden Sie eine Hover-Farbe auf Markern, damit Besucher erkennen können, auf welchem sie sich befinden.
- Markierungen mit exakten Zahlen aufreihen Das Eintippen von Werten in die Prozentfelder ist schneller als das Anstoßen von Schiebereglern, wenn Markierungen auf kleinen Teilen eines Diagramms oder Screenshots sitzen müssen.
Häufig gestellte Fragen
Was ist ein Bild-Hotspot in Elementor?
Ein Bild-Hotspot ist ein kleiner Marker, der auf einem Bild platziert wird, wenn ein Besucher schwebt oder darauf tippt, erscheint für diesen Teil des Fotos eine kurze Beschriftung Elementor Pro hat ein eigenes Hotspot-Widget, und Master Addons Pro fügt ein Image Hotspot-Widget hinzu, das auch kleine Bilder als Marker verwenden kann.
Wie viele Hotspots kann ich zu einem einzelnen Bild hinzufügen?
Es gibt keine feste Grenze Fünf bis sieben Markierungen pro Bild halten die Dinge lesbar, und weniger auf Bildern, die auf Telefonen zu sehen sein werden, weil Markierungen nicht mit dem Bild schrumpfen Wenn Sie mehr benötigen, teilen Sie den Inhalt auf zwei Bilder auf.
Funktionieren Image-Hotspots mobil?
Ja. Telefone haben keinen Hover, also schalten Sie Trigger auf Klicken ein und Besucher tippen auf einen Marker, um seinen Tooltip zu öffnen. Die Positionen sind ein Prozent des Bildes und auf jedem Bildschirm gleich. Überprüfen Sie also, ob sich die Markierungen nicht gegenseitig auf Telefonbreite drängen.
Kann ich einen Hotspot mit einer anderen Seite verlinken?
Ja. Jeder Marker hat ein Link-Feld Dem Link folgt man, wenn sich Tooltips im Hover öffnen, so liest ein Besucher den Tooltip im Hover und geht auf Klick zur Seite Mit Trigger auf Klicken auf öffnet stattdessen ein Klick den Tooltip und der Link wird nicht befolgt.
Kann ich fett gedruckten Text, Links oder Bilder in einen Hotspot-Tooltip einfügen?
Nein. Das Feld mit den Tooltip-Inhalten ist ein umfangreicher Editor, aber fett gedruckter Text, Links, Bilder und Kurzcodes werden beim Rendern der Seite entfernt, sodass der Tooltip Klartext anzeigt. Schreiben Sie eine kurze Zeile und verwenden Sie den Link des Markers für längere Inhalte.
Benötige ich Master Addons Pro für Image Hotspot?
Ja. Image Hotspot ist ein Master Addons Pro Widget, und es funktioniert mit freiem Elementor Es erscheint im Elementor-Panel einmal a Pro Lizenz Aktiv ist.
Wie unterscheidet sich Image Hotspot vom Elementor Pro Hotspot Widget?
Elementor Pro Hotspot erlaubt formatierte Tooltip-Inhalte, verfügt über Soft Beat, Expand - und Overlay-Marker-Animationen, öffnet sich im Hover, auf Klick oder gar nicht Master Addons Image Hotspot verwendet reine Text-Tooltips, einen Pulseffekt auf Markern und fünf Tooltip-Animationen, und es kann ein kleines Bild als Marker verwenden.
Letzte Gedanken
Image Hotspot verwandelt ein flaches Foto in ein interaktives Bild: vier Markierungstypen, in Prozent eingestellte Positionen, eine Klartextzeile pro Markierung und fünf Enthüllungsanimationen, alle aus dem Elementor-Panel Halten Sie Markierungen auf Bildern, die Telefone sehen werden, wenige und schalten Sie den Auslöser ein, wenn der meiste Datenverkehr mobil ist.
Weitere Bild-Widgets finden Sie unter Bildvergleich und Bild-Hover-Effekte. Wenn Sie anstelle von Bildern Hoverhinweise 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 Zeigt, was sonst noch mit dem Plugin kommt.
Holen Sie sich Master Addons Pro Image Hotspot und die restlichen 80+ Widgets und Erweiterungen zu Elementor hinzuzufügen.
