Bild mit Hotspots

Ein Bild interaktiv machen – Produkte oder Inhalte mit klickbaren Hotspots markieren

Mit dem Element Bild mit Hotspots verwandelst du ein einzelnes Bild in eine interaktive Fläche. An frei positionierbaren Punkten – den Hotspots – blenden sich beim Klick kleine Info-Karten mit Titel, Text und optional einem Button ein.

So lässt sich beispielsweise ein „Shop the Look" umsetzen: ein Wohn- oder Lifestyle-Bild, in dem einzelne Produkte markiert und direkt verlinkt werden. Ebenso eignet sich das Element für Erklärgrafiken, Karten oder Feature-Übersichten.

Beispiel im Storefront: ein Bild mit vier Hotspots, ein Tooltip ist geöffnet

Tipp für ein sauberes Ergebnis

Wähle ein Motiv mit genügend ruhigen Flächen, damit die Hotspots nicht auf wichtigen Bildinhalten liegen. Für ein responsives Verhalten positionierst du die Punkte am besten in Prozent.

Media / Upload

Im ersten Reiter legst du das Bild fest, auf dem die Hotspots platziert werden.

Funktion	Beschreibung
Medium hochladen (1)	Lade hier das Hintergrundbild hoch oder weise ein vorhandenes Medium aus der Mediathek zu. Ohne Bild zeigt das Element einen Hinweis an.

Hotspots

Lege beliebig viele Hotspots an und klappe einen Eintrag auf, um ihn zu bearbeiten. Jeder Hotspot besitzt die Unterreiter Inhalt (Titel und Text der Info-Karte) und Verlinkung (optionales Ziel). Sobald eine Verlinkung gesetzt ist, erscheint zusätzlich der Reiter Button.

Funktion	Beschreibung
Titel des Hotspots (1)	Überschrift der Info-Karte, die beim Klick auf den Punkt erscheint.
Inhalt des Hotspots (2)	Beschreibungstext der Info-Karte unterhalb des Titels.
Verlinkung (3)	Optionales Ziel des Hotspots (Produkt, Kategorie, URL u. a.). Erst wenn ein Linktyp gewählt ist, erscheint der Reiter Button.

Über die Symbole rechts an jedem Eintrag kannst du einen Hotspot duplizieren oder löschen. Mit „Neuen Hotspot hinzufügen" legst du einen weiteren an.

Die Gestaltung des optionalen Buttons erfolgt über den gemeinsamen Baustein:

Button

Positionierung

Hier bestimmst du, wo jeder Hotspot auf dem Bild sitzt. Du kannst die Werte exakt eingeben oder den Punkt direkt in der Vorschau mit der Maus an die gewünschte Stelle ziehen.

Funktion	Beschreibung
Oben (1)	Vertikale Position des Hotspots, gemessen von der oberen Bildkante.
Links (2)	Horizontale Position des Hotspots, gemessen von der linken Bildkante.
Vorschau mit Ziehpunkten (3)	Verschiebe die nummerierten Punkte direkt im Bild – die Werte „Oben / Links" aktualisieren sich automatisch.

Layout

Zum Schluss bestimmst du das Erscheinungsbild der Punkte und ihrer Info-Karten – passend zum Stil deines Shops.

Funktion	Beschreibung
Größe der Hotspots (1)	Durchmesser der Punkte in Prozent oder Pixeln.
Rahmenrundung der Hotspots (2)	Form der Punkte: 100 % ergibt einen Kreis, kleinere Werte abgerundete Quadrate.
Mindestbreite des Hotspot-Inhalts (3)	Mindestbreite der eingeblendeten Info-Karte – wichtig für saubere Zeilenumbrüche.