Elementor-Bild-Hotspot-Widget mit Tooltips (Pro)
Image Hotspot ist ein Master Addons Pro Widget, das Markierungen auf ein Bild pinnt Ein Marker kann ein einfacher Punkt, ein Kurztextetikett, ein Font Awesome-Symbol oder ein kleines Bild sein, und jeder öffnet einen Tooltip, wenn ein Besucher mit dem Mauszeiger fährt, oder tippt darauf, sobald Sie auf Auslösen klicken Es passt zu Shop-the-Look-Fotos, Produkt-Callouts, Grundrissen, Campus-Karten und beschrifteten Diagrammen Wenn Sie einen Hover-Hinweis auf einer Schaltfläche oder einer Überschrift wünschen, ist der Tooltip-widget (keine Master Addons Pro erforderlich) oder die Tooltips-Erweiterung (Pro) Ist die engere Passform.
So fügen Sie einen Bild-Hotspot in Elementor hinzu
Um einen Bild-Hotspot in Elementor hinzuzufügen, aktivieren Sie Master Addons Pro, bearbeiten Sie die Seite mit Elementor und durchsuchen Sie das Widget-Panel nach Image Hotspot Ziehen Sie es hinein, wählen Sie Ihr Bild unter Bild, öffnen Sie dann Hotspots und klicken Sie auf Element für jeden Marker hinzufügen Legen Sie den Typ, den Tooltip-Inhalt und die Position jedes Markers fest und veröffentlichen Sie es dann.
Durchsuchen Sie das Panel nach “Hotspot” und zwei Ergebnisse kommen zurück. Das mit dem Label MA ist dieses Widget. Das mit einem Vorhängeschloss versehene daneben ist Elementors eigener Hotspot, der eine Elementor Pro-Lizenz benötigt. Es lohnt sich also zu prüfen, welches Sie bereits besitzen, bevor Sie es bauen.
Geben Sie das Widget ein, wählen Sie Ihr Bild aus und stellen Sie es ein Bildauflösung to Full, wenn das Bild feine Details trägt Markierungen sitzen auf dem gerenderten Bild, so dass eine verkleinerte Quelle jeden Pin ungefähr aussehen lässt Öffnen HotspotsDrücken Sie auf Element hinzufügen und wiederholen Sie es einmal pro Markierung. Jedes Element trägt seine eigenen Inhalts-, Stil- und Positionsregisterkarten.
Zwei Dinge bringen die Leute beim ersten Build zum Stolpern Markierungen landen in der oberen linken Ecke, bis Sie die Position-Slider berühren, also stapeln sich drei frische Gegenstände in etwas, das wie eines aussieht Und die Tooltip Content-Box ist ein voller Editor, was es verlockend macht, einen Absatz einzufügen Es gibt einen Grund, sich dagegen zu wehren, weiter unten abgedeckt.
Gearbeitete Beispiele mit Produktfotos, Karten und Diagrammen live in So fügen Sie Bild-Hotspots in Elementor hinzu. Jede Steuerung ist in der aufgeführt Leitfaden für die Einstellungen des Bild-Hotspot-Widgets.
Bild Hotspot auf einen Blick
Was das Widget macht, lesen Sie aus dem Master Addons Pro-Code.
| Artikel | Bild Hotspot Widget |
|---|---|
| Markierungstypen | Keine, Text, Symbol oder Bild |
| Markierungen pro Bild | So viele, wie Sie zur Hotspots-Liste hinzufügen |
| Positionierung | Horizontale und vertikale Schieberegler in Prozent des Bildes, eine Position für jede Bildschirmgröße, kein Widerstand |
| Per-marker-einstellungen | Link, Text für den Tooltip, Seite für den Tooltip, Standard - und Hover-Farben, Deckkraft |
| Tooltip-inhalt | Klartext (HTML wird beim Rendern entfernt) |
| Werkzeugspitzenseite | Oben, unten, links oder rechts |
| Tooltip-animation | Schicht-Weg, Schicht-Weg, Fade, Maßstab, Perspektive |
| Auslösen | Bewegen Sie den Mauszeiger oder klicken Sie mit Auslöser auf Klicken |
| Pfeil, Versatz und Abstand | Ja |
| Pulseffekt | Standardmäßig wird es von einem Schalter für das Widget ausgeschaltet |
| Markierungslink | Gefolgt, wenn sich Tooltips im Hover öffnen |
| Stil | Markierungsgröße, Polsterung, Radius, Standard- und Hover-Farben; Tooltip-Padding, Radius, Farben, Pfeilfarbe, Typografie |
| Bedürfnisse | Elementor und Master Addons Pro |
Erstellen Sie ein interaktives Bild in Elementor
Ein interaktives Bild ist ein Foto, das Fragen beantwortet, wenn ein Besucher darauf zeigt In Elementor baut man in drei Schritten eines mit Image Hotspot auf.
- Geben Sie den Bild-Hotspot in einen Behälter und wählen Sie das Foto unter Bild aus.
- Fügen Sie in Hotspots ein Element pro Stelle hinzu. Wählen Sie Text, Symbol oder Bild als Markierung, geben Sie einen einzeiligen Tooltip ein und legen Sie die horizontale und vertikale Position in Prozent fest.
- Öffnen Sie Tooltips, wählen Sie die Seite und die Animation aus und schalten Sie Trigger ein. Klicken Sie, wenn die meisten Besucher auf Telefonen sind.
Für eine vollständige Komplettlösung mit Screenshots lesen Sie So fügen Sie Bild-Hotspots in Elementor hinzu.
Vier nummerierte Markierungen auf einem Bürofoto, wobei der Tooltip für den Besprechungstisch geöffnet ist.
Verwenden Sie den Bild-Hotspot als einfache Bildkarte
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, die funktioniert, wenn sich Tooltips im Schwebeflug öffnen Es zeichnet keine anklickbaren Formen oder Bereiche, wie es ein SVG-Image-Map-Plugin wie Image Map Pro tut, sodass ein Grundriss, bei dem jede Raumumrisslinie anklickbar sein muss, ein spezielles Imagemap-Plugin benötigt.
Bei Pins auf einer Campuskarte, einem Ladenlayout oder einem Produktdiagramm reichen Markierungen aus und lassen sich schneller einrichten Die Fitnessbereich Karte Demo Funktioniert so.
Vier Markierungstypen auf einem Bild
Die Typ Mit der Steuerung auf der Inhaltsregisterkarte eines Markers erhalten Sie vier Formen und können alle vier in einem einzigen Bild mischen.
Keine Hinterlässt einen nackten Punkt. Es ist die sauberste Option für dichte Diagramme, in denen Etiketten miteinander kollidieren würden.
Text Druckt eine kurze Saite im Inneren des Markers Zahlen funktionieren hier gut, denn 01, 02 und 03 quer über eine Produktaufnahme als Führung gelesen ohne Legende zu schreiben Längere Saiten verwandeln den Punkt in eine Pille, das ist der Look, den man sich für so etwas wie “Köln Nr. 5” wünscht.
Symbol Nimmt jedes Font Awesome-Symbol aus der Bibliothek, sodass ein Blatt für Zutaten und ein Stern für eine Bewertung einspringen kann.
Bild Tauscht den Marker gegen ein Bild aus Ihrer Mediathek aus Produkt-Thumbnails und Avatare lesen sich am besten; alles Beschäftigte wird bei Markergröße zu Brei.
Jeder Marker akzeptiert auch a zusammenfügen. Dieser Link wird ausgelöst, wenn sich Tooltips im Hover öffnen, oder an Haltepunkten, an denen Sie Tooltips ausgeschaltet haben Er wird nicht ausgelöst, während Trigger on Click eingeschaltet ist, da der Tipp bereits ausgeführt wurde.
Platzieren Sie jeden Marker prozentual
Die Position Tab hält zwei Schieberegler, Horizontale Position und Vertikale Position, beide gemessen in Prozent des Bildes, Einstellung 50 und 24 setzt eine Markierung ein Viertel der Strecke in der Mitte Es gibt keine Drag-on-Canvas-Platzierung, also stupst du die Zahlen und schaust dir die Vorschau an.
Prozent ist das, was die Marker auf einem Telefon ehrlich hält Das Grundbild skaliert mit seinem Behälter und jeder Marker behält seinen relativen Platz, sodass ein an einem Flaschenverschluss befestigtes Etikett immer noch auf dem Flaschenverschluss mit einer Breite von 390 px angebracht ist, wo ein Pixelversatz abgedriftet wäre.
Die gleiche Registerkarte trägt einen Per-Marker Zeigen, die die globale Tooltip-Seite für diesen einen Marker überschreibt. Das hilft, wenn ein Marker am rechten Rand sitzt und sein Tooltip vom Bild abläuft: Stellen Sie diesen auf Links und lassen Sie den Rest oben.
Markierungen pulsieren standardmäßig Die Pulseffekt deaktivieren Schalter am unteren Rand des Hotspots-Bereichs schaltet die Animation für jeden Marker auf einmal aus, was normalerweise ein Grundriss mit fünfzehn Pins braucht.
Tooltip-Position, Animation und mobiles Verhalten
Die Tooltipps Abschnitt treibt jeden Tooltip im Widget gemeinsam an: Position anzeigen (oben, unten, links oder rechts), Animation (Shift-Away, Shift-Toward, Fade, Scale oder Perspektive), einen Pfeil-Knebel sowie Offset und Distanz für feines Anstoßen.
Tooltips öffnen sich im Hover Telefone haben keinen Hover, also schalten Sie ein Auf Klicken auslösen Und ein Tipp öffnet den Tooltip Markierungspositionen werden einmal in Prozent eingestellt und gelten für jede Bildschirmgröße, ohne separate Tablet - oder Mobilposition Markierungen behalten ihre Größe auf einem Telefon, so decken sie auf einem schmalen Bildschirm mehr vom Foto ab Halten Sie die Anzahl niedrig oder senken Sie die Markierung Größe in Stil, Hotspots.
Eine Einschränkung beim Planen. Tooltip Content ist ein WYSIWYG-Feld, aber das Widget entfernt das Markup, bevor es rendert, also fett, Links, Bilder und Shortcodes verschwinden alle und der Tooltip zeigt Klartext Halten Sie jedes einzelne auf einer einzigen kurzen Zeile fest Wenn Sie formatierte Tooltip-Inhalte benötigen, verarbeitet das Hotspot-Widget von Elementor Pro Rich Text und dieses Widget nicht.
Das Styling des Tooltips selbst ist der vollständige Satz: Ausrichtung, Polsterung, Radius, Hintergrund, Textfarbe, Rand, Pfeilfarbe, Typografie und Kastenschatten Das Basisbild erhält Opazität, Rand, Radius, Kastenschatten und CSS-Filter.
Stilmarkierungen für Standard und Hover
Das Marker-Styling sitzt an zwei Stellen, was einfacher ist, als es klingt, wenn man den Split kennt.
Die des Widgets Stil Die Registerkarte deckt jede Markierung gleichzeitig ab: Textauffüllung, Randradius, Typografie, eine Übergangsgruppe und dann Standard- und Hover-Registerkarten mit Opazität, Größe, Farbe, Hintergrundfarbe, Randtyp und Kastenschatten. Die Größe ist ein Skalenmultiplikator von 0,5 bis 2, sodass die Einstellung des Hovers auf 1,15 den Markierungen einen leichten Auftrieb unter den Cursor verleiht, ohne etwas anderes auf der Seite zu verschieben.
Die Style-Registerkarte in einer einzelnen Markierung überschreibt standardmäßig die Farbe, den Hintergrund und die Deckkraft dieser Markierung und schweben Sie. Auf diese Weise machen Sie eine Markierung rot an einer violetten Wand, um ein ausverkauftes Element zu markieren oder den Hotspot zu markieren, der zuerst bemerkt werden soll.
Border Radius bei 100 gibt dir Kreise und Pillen Lass es auf 6 fallen und Textmarkierungen werden zu quadratischen Tags, was sich auf einer Architekturzeichnung besser liest als eine Reihe von Blasen.
Elementor Pro Hotspot vs. Master Addons Image Hotspot
Elementor Pro versendet ein eigenes Hotspot-Widget, wenn Sie bereits für Elementor Pro bezahlen, überprüfen Sie zuerst das, da Sie dieses möglicherweise überhaupt nicht benötigen.
| Merkmal | Elementor Pro-Hotspot | Master Addons Bild Hotspot |
|---|---|---|
| Preis | Benötigt Elementor Pro | Benötigt Master Addons Pro |
| Markierungstypen | Beschriften Sie Text und ein Symbol mit benutzerdefinierter Größe | Keine, Text, Symbol oder Bild |
| Markeranimation | Soft Beat, Expand oder Overlay, mit sequenzierter Animation | An - oder auspulsen |
| Tooltip-inhalt | Reichhaltiger Text mit Formatierung | Nur einfacher Text |
| Tooltip-trigger | Bewegen Sie den Mauszeiger, klicken Sie oder keine | Bewegen Sie den Mauszeiger oder klicken Sie mit Auslöser auf Klicken |
| Tooltip-animation | Fade- und Slide-Stile mit einer Dauereinstellung | Wegschaltung, Wegschaltung, Verblassen, Skala, Perspektive sowie Pfeil, Versatz und Abstand |
| Positionierung | Pro Gerätepositionen | Horizontale und vertikale Prozentschieber, eine Position für jeden Bildschirm, kein Ziehen auf der Leinwand |
| Markierungslink | Link pro Hotspot | Link pro Markierung, gefolgt, wenn sich die Tooltips im Schwebeflug öffnen |
| Benötigt Elementor Pro | Ja | Nein |
Elementor Pro gewinnt bei Rich-Tooltip-Text - und Marker-Animationen Master-Addons ist die Wahl, wenn Sie Bildmarkierungen wünschen oder bereits Master-Addons Pro ohne Elementor Pro verwenden. Verwandt: die Tooltip-widget, die Tooltips-Erweiterung (Pro), Bildvergleich und Bild-Hover-Effekte.
Wo ein Bild-Hotspot seinen Platz einnimmt
Shop-the-Look-Fotografie ist die naheliegende Eine einzelne Lifestyle-Aufnahme, eine Bildmarkierung pro Produkt, ein Tooltip, der jeden Artikel benennt und ein Link bis zu seiner Produktseite Es funktioniert besser als ein Raster von Miniaturansichten, weil der Besucher die zusammengestylten Stücke sieht, bevor er sie preislich sieht.
Specs ohne Spec-Tabelle ist der leisere Einsatz Auf Kameragehäusen, Uhren und Maschinen führen nummerierte Marker ein Lesegerät in der von Ihnen gewählten Reihenfolge um das Objekt herum, und niemand muss Zeile 4 einer Tabelle wieder auf das Foto abbilden.
Dann gibt es Grundrisse, Campuskarten und beschriftete Diagramme. Punkte mit deaktiviertem Pulseffekt auf, ein einzeiliger Tooltip auf jedem und ein Link auf jeder Markierung, der auf die ganze Seite zeigt, mit Tooltips, die im Schwebezustand belassen werden, sodass der Link immer noch feuert Fünfzehn Pins bleiben auf diese Weise lesbar; Fünfzehn pulsierende Pillen nicht.
Passt gut zu: dem Tooltip-widget, die Tooltips-erweiterung (Pro), Bild-Hover-Effekte, Erweitertes Bild und Bildvergleich.
Bilder-Hotspot-Beispiele
Vierzehn mit dem Widget erstellte Live-Demos, die jeweils unterschiedlich für einen Bild-Hotspot verwendet werden.
- Kaufen Sie den Look: nummerierte Markierungen auf einem Wohnzimmer, wobei jeder Tooltip ein Stück und seinen Preis benennt.
- Restaurantgericht: Symbolmarkierungen, die den Lieferanten jedes Teils der Platte benennen.
- Immobilienliste: Etikettenmarkierungen auf einer Villa für Dachterrasse, Suite und Pool.
- Autoauflistung: Symbolmarkierungen an Lichtern, Rädern und Parkkameras.
- Mode-lookbook: Marker auf einer Tasche, einer Uhr und einem Mantel mit Preisen.
- Karte der Fitnessstudio-Zone: ein Marker pro Trainingsbereich.
- Anatomie beobachten: kleine Symbolmarkierungen auf Zifferblatt, Uhrwerk und Krone.
- Coworking Tour: schlichte Punkte auf einer Büroetage.
- Telefonhardware: Markierungen an den Kameras, Power-Button und Ladeanschluss.
- Kopfhörerfunktionen: Ausrufe bei einem Produktschuss.
- VR-Headset: Funktions- und Garantieausrufe.
- Outfit-aufschlüsselung: Jacke, Sonnenbrille und Jeans.
- Produkt-promo: Markierungen auf einem Tote-Bag-Foto.
- Landingpage-Callouts: Markierungen auf einem Seiten-Screenshot.
Häufig gestellte Fragen für Image Hotspot
Was passiert auf Mobiltelefonen, wo es keinen Schwebeflug gibt?
Schalten Sie Trigger ein. Klicken Sie auf den Abschnitt Tooltips, damit Besucher auf eine Markierung tippen, um den Tooltip zu öffnen. Markierungen behalten auf jedem Bildschirm die gleiche Prozentposition bei, also sehen Sie sich die Seite in Telefonbreite an und verringern Sie die Markierungsgröße, wenn Sie das Bild vergrößern.
Kann ich ein benutzerdefiniertes Bild anstelle eines Symbols für den Hotspot-Marker verwenden?
Ja. Stellen Sie den Hotspot Type auf Image ein und wählen Sie ein Bild aus der Mediathek aus Ein kleines, einfaches Bild wie ein Produkt-Miniaturbild oder ein Avatar liest sich am besten bei der Markierungsgröße.
Kann ich Markierungen im Editor einziehen?
Nr. Jeder Marker hat in seiner Registerkarte Position horizontale Position und vertikale Positionsschieber, gemessen in Prozent des Bildes Bewegen Sie den Schieberegler und schauen Sie sich die Vorschau an Prozent hält den Marker an derselben Stelle, wenn sich die Bildgröße ändert.
Kann ich Image Hotspot als Imagemap verwenden?
Für Punktlinks ja: Setzen Sie an jeder Stelle eine Markierung auf und geben Sie ihr einen Link, mit den im Schwebezustand belassenen Tooltips. Es zeichnet keine anklickbaren Formen oder Bereiche, also verwenden Sie für Raumumrisse auf einem Grundriss ein Imagemap-Plugin wie Image Map Pro.
Gibt es ein Hotspot-Widget in free Elementor?
Das Hotspot-Widget von No. Elementor ist Teil von Elementor Pro, und Image Hotspot benötigt Master Addons Pro. Einige andere Addon-Pakete enthalten in ihren kostenlosen Versionen ein Hotspot-Widget.
Ist das Basisbild selbst responsive?
Ja. Das Bild skaliert mit seiner Spalte, und Markierungspositionen werden in Prozent eingestellt, so dass jede Markierung über Bildschirmgrößen hinweg auf dem gleichen Teil des Bildes bleibt Schalten Sie bei Telefonen Trigger auf Klicken Sie, damit ein Tippen den Tooltip öffnet.
Ist das Image Hotspot Widget kostenlos?
Nr. Image Hotspot ist Teil von Master Add-dons Pro. Ohne Pro können Sie die Tooltip-widget, die einem einzelnen Element einen Hover-Hinweis hinzufügt, aber keine Markierungen auf einem Bild feststeckt Elementor Pro-Benutzer können auch das eigene Hotspot-Widget von Elementor verwenden.
Kann ich die Pulsanimation ausschalten?
Ja. Deaktivieren Pulse Effect sitzt am unteren Rand des Hotspots-Abschnitts und schaltet den Puls für jeden Marker in diesem Widget aus Es gibt keinen Puls-Toggle pro Marker, also verwenden Sie ein zweites Image Hotspot-Widget, wenn Sie beide Looks auf einer Seite benötigen.
Warum verschwindet die Formatierung in meinem Tooltip?
Das Widget entfernt HTML aus Tooltip Content, bevor es rendert, sodass fett gedruckter Text, Links, Bilder und Shortcodes weggelassen werden und der Tooltip Klartext anzeigt Behalten Sie jeden Tooltip in einer kurzen Zeile bei Für formatierte Tooltips unterstützt das Hotspot-Widget von Elementor Pro Rich Text.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
