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 kostenlose Tooltip-widget 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.
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, was zwei ehrliche Optionen lässt Einschalten Auf Klicken auslösen und ein Tipp öffnet den Tooltip. Oder setzen Deaktivieren Ein zu Mobile oder Tablet & Mobile, das Tooltips auf diesen Bildschirmen verbirgt und den Auftrag an den Link jedes Markers übergibt.
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 |
| Mobil | Pro Gerätepositionen | Deaktivieren Sie Tooltips auf Tablet & Mobile oder Mobile |
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. Verwandte: die kostenlose 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, Campus-Karten und beschriftete Diagramme Punkte mit deaktiviertem Pulseffekt auf, Tooltips auf Auslösen auf Klicken eingestellt, und ein Link auf jeder Markierung, der auf die ganze Seite zeigt Fünfzehn Pins bleiben so lesbar; fünfzehn pulsierende Pillen nicht.
Häufig gestellte Fragen für Image Hotspot
Was passiert auf Mobiltelefonen, wo es keinen Schwebeflug gibt?
Aktivieren Sie den Auslöser. Klicken Sie im Abschnitt Tooltips, damit Besucher auf eine Markierung tippen, um den Tooltip zu öffnen. Sie können auch die Option auf Mobiltelefon oder Tablet und Mobilgerät deaktivieren, wodurch Tooltips auf diesen Bildschirmen ausgeblendet werden und der Markierungslink die Besucher zu weiteren Informationen führen kann.
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.
Ist das Basisbild selbst responsive?
Ja. Die Bildskalen mit ihrer Spalte, und Markierungspositionen werden in Prozent eingestellt, so bleibt jede Markierung über Bildschirmgrößen hinweg auf dem gleichen Teil des Bildes Tooltips benötigen möglicherweise Trigger on Click oder Deaktivieren On für kleine Bildschirme.
Ist das Image Hotspot Widget kostenlos?
Nr. Image Hotspot ist Teil von Master Add-dons Pro. Das kostenlose Plugin hat 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?
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
