Hotspots sind kleine Punkte auf einem Bild, die beim Überfahren oder Anklicken etwas erklären: der Monitor, die Tastatur, ein Bauteil auf einem Foto. Wer Divi 4 kennt, sucht dafür vermutlich ein Modul. Das gibt es in Divi 5 nicht. Ich habe nach „Hotspot“, „Marker“, „Pin“ und „Tooltip“ gesucht, ohne Treffer.
Es geht trotzdem, und zwar mit Bausteinen, die Divi 5 mitbringt: eine Gruppe als Rahmen, das Bild, darauf ein Icon als Punkt und dazu ein Modul namens „Kurzinfo“, das den Text der Sprechblase liefert. Das ist heute der Weg, und er ist weniger kompliziert, als er klingt. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Das Prinzip
Zuerst die Struktur, damit die Schritte nicht wie Zauberei wirken:
- Eine äußere Gruppe enthält das Bild und pro Hotspot eine innere Gruppe. Die äußere Gruppe ist ab Werk auf „Relativ“ gestellt, deshalb beziehen sich die Positionen der inneren Gruppen auf sie, also auf das Bild.
- Jede innere Gruppe enthält ein Icon (den sichtbaren Punkt) und eine Kurzinfo.
- Die innere Gruppe bekommt die Position „Absolut“ und wird mit Prozentwerten an die richtige Stelle des Bildes geschoben.
Die „Kurzinfo“ ist ein Tooltip-Modul. Ihr Trick: Sie hängt am übergeordneten Element, hier also an der inneren Gruppe. Fährst du mit der Maus über die Gruppe, also über das Icon, erscheint der Text. Darum gehören Icon und Kurzinfo zusammen in eine eigene Gruppe, sonst würde der Tooltip an der ganzen Spalte hängen.
Eine Einschränkung vorweg: Das Verschachteln der Gruppen habe ich in meinem Test als fertige Struktur angelegt, weil das Einfügen per Klick hakelig war. Beim Modul „Gruppe“ blieb der Auswahldialog nach dem Klick offen, ein einfacher Klick wirkte nicht, erst ein Doppelklick, und der Dialog ließ sich dann mit dem Kreuz schließen. Alles danach habe ich im Builder bedient.
Die Elemente einer Gruppe
Wähl die äußere Gruppe, Reiter Inhalt, Gruppe „Elemente“. Dort steht die Liste der Inhalte, hier „Bild“ und „Gruppe“. Mit „Element Hinzufügen“ kommt etwas dazu, das Stift-Symbol öffnet ein Element, der Pfeil neben dem Titel führt eine Ebene zurück.
Die äußere Gruppe: ein Bild und eine innere GruppeDie innere Gruppe enthält zwei Elemente: ein „Icon“ und eine „Kurzinfo“.
Die innere Gruppe: Icon und KurzinfoText der Sprechblase
Öffne die „Kurzinfo“ über das Stift-Symbol. In der Gruppe „Text“ steht der „Fließtext“, ab Werk „Dein Inhalt kommt hier hin.“ Tausch ihn gegen deinen Text, etwa „Der Monitor: Bildschirm mit Standfuß.“ Im Builder blendet Divi den Tooltip dauerhaft über dem Punkt ein, damit du siehst, was du tust. Im Frontend erscheint er erst bei Berührung.
Der „Fließtext“ der Kurzinfo ist der Tooltip-Text.Im Reiter Design liegt die Gruppe „Kurzinfo“. Wichtig ist „Tooltip Anzeigen Bei“ mit den Optionen Hover, Klick und Immer. Auf dem Handy gibt es kein Hover, nimm dafür „Klick“ (ich habe das nicht auf einem echten Gerät geprüft). Dazu kommen die „Tooltip-Position“ als kleines Raster (über, unter, neben dem Punkt), „Tooltip-Versatz“, „Tooltip-Abstand“ und eine „Tooltip-Öffnungsverzögerung“.
Auslöser und Position des TooltipsDen Punkt gestalten
Öffne das „Icon“ und such im Feld „Suchsymbole“ nach einem passenden Symbol. Mit „plus“ bekommst du mehrere Plus-Varianten, ich habe das ausgefüllte Plus im Kreis genommen.
Symbol über „Suchsymbole“ findenEine Falle: Unter „Größe Einstellen“ habe ich „Breite“ und „Höhe“ auf 44 px gestellt. Das Symbol selbst blieb trotzdem groß, auf meiner Testseite etwa 90 px. Wenn dir die Punkte zu groß sind, musst du eine andere Stellschraube suchen. Ich habe sie nicht gefunden.
Auf dem Bild positionieren
Jetzt der entscheidende Schritt. Wähl die innere Gruppe, Reiter Erweitert, Gruppe „Arbeitsstelle“. Dort stellst du „Position“ von „Relativ“ auf „Absolut“ (zur Wahl stehen Standard, Relativ, Absolut und Fest). Sofort springt der Punkt auf das Bild. Darunter legst du fest, wo er sitzt:
- „Vertikaler Versatz“: Abstand von oben, zum Beispiel
12%. - „Horizontaler Versatz“: Abstand von links, zum Beispiel
46%. - Der „Versatz-Ursprung“ bestimmt, von welcher Ecke aus gemessen wird. Er steht ab Werk links oben.
Mit Prozentwerten bleibt der Punkt auf dem richtigen Bildteil, auch wenn das Bild kleiner wird. Tipp: Gib die Einheit mit ein, also 12% und nicht nur 12.
„Absolut“ mit Versatz in ProzentWeitere Hotspots
Für den zweiten und dritten Punkt duplizierst du die innere Gruppe über das Duplizieren-Symbol der Hover-Leiste, änderst die beiden Versätze und den Tooltip-Text. Ich habe die Kopien in meinem Test aus dem gespeicherten Seiteninhalt erzeugt, das Ergebnis ist dasselbe.
Stolperfalle: Bei mir wirkten die Positionen der kopierten Gruppen im Frontend zunächst nicht, sie standen unter dem Bild. Erst nachdem ich den Divi-Cache geleert hatte, stimmten sie. Wenn dir das nach dem Speichern im Builder passiert, leere den Cache (in den Divi-Theme-Optionen gibt es dafür „CSS-Cache leeren“).
Ergebnis
Drei Hotspots auf dem Bild
Beim Überfahren erscheint der Text.Hotspots ersetzen keine Bildbeschreibung. Wichtige Informationen stehen besser zusätzlich im normalen Text.
Häufige Fragen
Gibt es in Divi 5 ein Hotspot-Modul?
Ich habe keins gefunden. Du baust Hotspots aus Gruppe, Bild, Icon und Kurzinfo.
Wofür ist das Modul „Kurzinfo“?
Es ist ein Tooltip, der am übergeordneten Element hängt und beim Überfahren, Anklicken oder dauerhaft einen Text anzeigt.
Wie viele Hotspots gehen?
So viele, wie du innere Gruppen anlegst. Mehr als ein paar werden aber schnell unübersichtlich.
Divi und seine Module gibt es bei Elegant Themes (Werbung).
