Interaktive Bilder in Webflow: Native Interactions, Embeds und der saubere Weg zu Hotspots
Webflow gibt dir alle Werkzeuge für visuelle Interaktion an die Hand. Wie du Bilder mit Hotspots versiehst — mit Bordmitteln oder Embed-Code.
Zwei Wege, ein Ergebnis
Webflow steht für visuelles Web-Design ohne Kompromisse — und genau deswegen kannst du Hotspot-Bilder dort auf zwei sehr unterschiedliche Arten lösen. Die eine ist mehr Webflow-Way, die andere mehr Pragmatismus.
Der Webflow-Way: Mit Interactions und absolut positionierten Divs
Im Designer baust du dir die Hotspots selbst, ohne Plugin und ohne externes Tool. Bild als Hintergrund eines Containers setzen oder als img-Element einfügen. Container auf position: relative setzen. Pro Hotspot ein kleines Div anlegen, das absolut positioniert wird. Größe etwa 32×32 Pixel, kreisförmig, halbtransparent.
In den Interactions einen Hover-Trigger anlegen: Beim Hover wird ein verstecktes Tooltip-Div eingeblendet. Pro Hotspot ein eigenes Tooltip-Div mit Inhalt — Text, Bild, Button — erstellen und ausblenden. Klick-Trigger optional: Beim Klick öffnet sich ein Lightbox- oder Modal-Element.
Das ist sauber, vollständig im Webflow-CMS verwaltbar und CSS-mäßig sauber animiert. Der Aufwand ist allerdings nicht zu unterschätzen: Pro Hotspot brauchst du Position, Trigger und Tooltip — bei zehn Hotspots auf einem Bild bist du schnell eine Stunde beschäftigt.
Praktischer Hinweis: Position in Prozent
Wenn du die Hotspots in Pixel positionierst, wandern sie bei kleineren Viewports. Setze stattdessen top und left in Prozent (relativ zum Container). So bleiben die Hotspots an der richtigen Stelle, egal wie groß das Bild gerendert wird.
Die schnellere Variante: Embed-Element
Im Designer kannst du auch das Embed-Element auf die Seite ziehen und dort beliebigen HTML-Code unterbringen. Embed-Element aus der Add-Panel-Leiste auf die Seite ziehen, im Code-Modal HTML-Imagemap-Code oder einen Embed-Code von einem Drittanbieter einfügen, "Save & Close" klicken, Webseite publishen — im Designer wird der Embed nicht live gerendert, erst die publishte Version zeigt das Ergebnis.
Externe Tools wie picpins
Wenn du dir den Aufwand der nativen Lösung sparen willst und gleichzeitig responsive, mehrsprachige oder updatebare Hotspots brauchst, ist ein externes Tool oft die ehrlichere Wahl. picpins erstellt das interaktive Bild bei sich, du kopierst den Embed-Code ins Webflow-Embed-Element. Updates am Bild sind danach möglich, ohne dass du im Webflow-Designer etwas anfassen musst — der Embed lädt immer die aktuelle Version.
Wann was?
Native Webflow-Hotspots: wenn das Bild lange unverändert bleibt, alle Hotspots auf einmal entstehen, das Design pixelgenau zur Marke passen muss und du Webflow-CMS-Daten in den Tooltips zeigen willst.
Embed mit externem Tool: wenn du das Bild später ändern willst, mehrsprachige Versionen brauchst, dasselbe Bild auf mehreren Plattformen einsetzt oder einfach keinen Tag mit Hotspot-Aufbau verbringen willst.
Performance
Native Webflow-Hotspots sind Teil des HTML — kein zusätzlicher HTTP-Request. Embeds laden meist ein eigenes Skript nach (mehr dazu auf der Webflow-Embed-Seite). Bei einem einzelnen Hotspot-Bild auf einer Landingpage fällt das nicht auf. Bei zehn verschiedenen Embeds auf einer Seite merkst du es im Lighthouse-Score. Plane entsprechend.
