Ein Produktfoto, das beim Überfahren ein zweites Bild zeigt: die Rückseite, ein Detail oder das Produkt in Benutzung. Das war in Divi 4 mit Tricks verbunden. In Divi 5 ist es eine Einstellung des normalen Bildmoduls.
Der Grund ist, dass Divi 5 bei fast jedem Feld einen Zustand wählen lässt: Desktop, Tablet, Telefon, Hover und mehr. Du setzt also das normale Bild und stellst dann auf „Hover“ um, um das andere zu hinterlegen. Ich zeige dir, wo das sitzt und worüber ich gestolpert bin. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Normales Bild einsetzen
Füg ein Bildmodul ein und wähl das normale Bild aus der Mediathek, wie im Artikel zum Bildmodul in Divi 5 beschrieben. Öffne dann im Reiter Inhalt die Gruppe „Bild“.
Auf den Zustand „Hover“ umschalten
Oben rechts im Einstellungsfeld, rechts neben den Reitern „Inhalt“, „Design“ und „Erweitert“, steht ein kleines Gerätesymbol mit Pfeil. Ein Klick darauf öffnet ein Menü mit diesen Zuständen: Desktop (der gerade aktive, mit Häkchen), Tablet, Telefon, Hover, Fokus, Aktiviert und Aktiv. Darunter liegt „Einstellungen“.
Das Zustandsmenü sitzt oben rechts im Einstellungsfeld.Wähl „Hover“. Das Symbol oben rechts wird zum Mauszeiger, und das Feld „Bild“ zeigt zunächst dasselbe Bild wie vorher. Das ist normal: Solange du im Hover-Zustand nichts änderst, bleibt alles beim Alten.
Das zweite Bild festlegen
Klick im Hover-Zustand auf die Vorschau im Feld „Bild“. Es öffnet sich der Dialog „Bild auswählen“. Wähl im Reiter „Mediathek“ das zweite Bild und bestätige mit dem blauen Knopf unten rechts. Er heißt „Ein Bild hochladen“, auch wenn das Bild schon in der Mediathek liegt. Danach zeigt das Feld im Hover-Zustand das neue Bild.
Im Zustand „Hover“ liegt ein eigenes Bild.Speichere die Seite. Im Seiteninhalt legt Divi das zweite Bild als eigenen Hover-Wert ab, das normale Bild bleibt unangetastet. Du kannst jederzeit zurück auf „Desktop“ schalten, um das normale Bild zu sehen oder zu ändern.
Im Frontend prüfen
Ich habe die Seite im Browser geöffnet und die Maus über das Bild bewegt: Sobald der Mauszeiger auf dem Bild lag, tauschte Divi die Bildquelle gegen das Hover-Bild.
Ohne Maus: das normale Bild
Mit Maus auf dem Bild: das Hover-BildStolperfallen
- Alternativtext: Trägst du im Auswahldialog des Hover-Bildes einen „Alternativtext“ ein, stand er im Frontend auch am normalen Bild. Bei mir bekam das Schreibtisch-Foto den Alt-Text „Zwei Hände halten grüne Blätter“. Wähl deshalb einen Text, der zu beiden Bildern passt, oder prüf das Ergebnis im Quelltext.
- Touchgeräte: Ein Handy kennt kein Überfahren. Prüf das Verhalten auf einem echten Gerät, ich habe es nicht getestet.
Ebenfalls im Zustandsmenü: „Fokus“, „Aktiviert“ und „Aktiv“. Ich habe sie nicht ausprobiert.
Häufige Fragen
Brauche ich zwei Module für den Bildwechsel?
Nein. Ein Bildmodul genügt, das zweite Bild liegt im Zustand „Hover“.
Kann ich das auch für andere Felder nutzen?
Das Zustandsmenü sitzt oben im Einstellungsfeld des Moduls. Welche Felder einen Hover-Wert annehmen, siehst du, wenn du den Zustand umschaltest. Beim Bild funktioniert es.
Mehr zu Divi gibt es bei Elegant Themes (Werbung).
