Ein Off-Canvas-Menü ist ein Seitenmenü, das erst beim Klick auf ein Hamburger-Icon von der Seite hereingleitet. Früher brauchtest du dafür in Divi ein Plugin oder eigenen Code. Mit Divi 5 geht das mit Bordmitteln: Du baust das Menü auf einem eigenen Canvas und öffnest es über eine Interaktion.
Klingt nach viel Neuem? Ist es auch, aber jeder Schritt ist überschaubar. Ich zeige dir, was Canvases sind, und baue damit ein Seitenmenü für den Header, inklusive der Stellen, an denen ich beim Durchklicken hängen geblieben bin. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand November 2026.
Was sind Canvases in Divi 5?
Elegant Themes hat die Canvases am 23. Dezember 2025 offiziell vorgestellt (Ankündigung im Blog von Elegant Themes). Ein Canvas ist eine eigene Arbeitsfläche neben dem eigentlichen Seiteninhalt. Der normale Inhalt liegt auf dem „Main Canvas“, alles andere, zum Beispiel ein ausklappbares Menü, baust du auf einem zweiten Canvas, wo es dir im Layout nicht im Weg ist.
Laut Hersteller gibt es zwei Sorten: lokale Canvases, die zu einer Seite oder einem Layout gehören, und globale Canvases, die du auf der ganzen Website nutzen kannst. Spricht eine Interaktion einen Canvas an, hängt Divi ihn im Frontend automatisch an die Seite an. Genau das habe ich im Test bestätigt.
Mit demselben Prinzip baust du auch Popups. Ob dir dafür Divi allein reicht oder ein Plugin besser passt, steht in Popups in Divi 5. Hier geht es ums Menü.
Schritt 1: Einen Canvas anlegen
Das Menü soll auf jeder Seite verfügbar sein, also gehört es in den Header im Theme Builder. Wie du den Header anlegst, erkläre ich in Divi Header anpassen. Mein Header besteht aus einer Zeile mit zwei Spalten: links das Logo, rechts später das Hamburger-Icon.
Oben links in der Builder-Leiste steht die Auswahl „Main Canvas“. Klick darauf und dann auf den blauen Knopf „Canvas hinzufügen“. Im Dialog vergibst du einen „Leinwandnamen“, zum Beispiel „Seitenmenü“.
Der Dialog mischt „Canvas“ und „Leinwand“. Gemeint ist dasselbe.Den Schalter „Global Machen“ habe ich ausgelassen. Der Canvas gehört dann zum Header-Layout, und weil der Header ohnehin auf allen Seiten läuft, reicht das. „An Hauptleinwand Anhängen“ bleibt auf „Nicht Anhängen“. Klick auf den blauen Knopf „Canvas“, dann öffnet sich die leere Arbeitsfläche direkt mit dem Dialog „Zeile einfügen“. Wähl eine Spalte.
Schritt 2: Die Menüpunkte mit dem Link-Modul
Statt Links von Hand einzutragen, holst du dir dein WordPress-Menü (wie du es anlegst, steht in Menü in Divi 5 erstellen). Füg das Modul „Link“ ein und öffne im Reiter „Inhalt“ die Gruppe „Loop“:
- Schalter „Schleifen-Element“ einschalten.
- „Abfragetyp“ auf „Menü“ stellen und im Feld „Menü“ dein Menü wählen.
- In der Gruppe „Text“ beim Feld „Text“ auf das Symbol für dynamischen Inhalt klicken und „Loop-Menü-Text“ wählen, dann „Anwenden“.
- In der Gruppe „Link“ beim Feld „Link-Link-URL“ (ja, so doppelt) genauso „Loop-Menü-Link“ wählen.
Ein Link-Modul, sieben Menüpunkte: Der Loop wiederholt das Modul für jeden Eintrag.Zwei Fallen in derselben Gruppe. Das Feld „Auftrag“ (gemeint ist die Sortierung) steht auf „Absteigend“, und genau so stimmt die Reihenfolge. Mit „Aufsteigend“ stand bei mir „Kontakt“ ganz oben. Und „Menüpunkte Pro Seite“ steht auf 10. Hat dein Menü mehr Einträge, erhöh den Wert. Unterpunkte erscheinen übrigens ganz normal in der Liste, ohne Einrückung.
Im Reiter „Design“, Gruppe „Text“, gibst du den Links noch eine helle „Textfarbe“ und etwa 20 Pixel „Textgröße“.
Schritt 3: Die Sektion zur Seitenleiste machen
Jetzt wird aus der Sektion eine Leiste am rechten Rand. Wähl die Sektion aus und setz im Reiter „Inhalt“ unter „Hintergrund“ eine dunkle Hintergrundfarbe. Dann der Reiter „Erweitert“, und hier kommt die schönste Übersetzung von Divi 5.13: Die Positions-Einstellungen heißen „Arbeitsstelle“.
„Arbeitsstelle“ ist die Position. „Fest“ heißt fixiert.Stell „-Position“ auf „Fest“, klick im Raster „Versatz-Ursprung“ das Kästchen oben rechts an und trag als „Z-Index“ 9999 ein, damit die Leiste über allem liegt. Im Reiter „Design“ unter „Größe Einstellen“ setzt du „Breite“ auf 340px und „Höhe“ auf 100vh.
Mit 340 Pixeln Breite und 100vh Höhe wird die Sektion zur Seitenleiste.Zwei Kleinigkeiten machen dir später das Leben leichter. Gib der Sektion unter „Inhalt“ → „Meta“ → „-Elementbeschriftung“ einen Namen wie „Seitenmenü“. Dann findest du sie bei den Interaktionen sofort als „Sektion (Seitenmenü)“. Und für den Effekt beim Öffnen stellst du unter „Design“ → „Animation“ den „Animationsstil“ auf „Gleiten“.
Achtung bei der Richtung: Mit „Animationsrichtung“ „Rechts“ glitt die Leiste bei mir von links nach rechts in ihre Position, also quer über die Seite. Damit sie vom rechten Rand hereinkommt, wähl „Links“. Die Angabe meint die Bewegungsrichtung, nicht die Startseite.
Schritt 4: Ein Kreuz zum Schließen
Unter der Zeile mit den Links fügst du über das grüne Plus eine neue Zeile mit dem Modul „Icon“ ein. Im Feld „Icon“ gibt es ein Suchfeld. Das sucht nur auf Englisch: Mit „close“ bekommst du verschiedene Kreuze, mit „schließen“ gar nichts.
Damit das Kreuz oben rechts sitzt, positionierst du nicht das Icon, sondern seine Zeile: „Arbeitsstelle“ auf „Absolut“, Ursprung oben rechts, je 20 Pixel Versatz, und unter „Größe Einstellen“ die „Breite“ auf auto. Am Icon selbst hat „Absolut“ das Kreuz nur innerhalb seiner Spalte verschoben.
Dann die erste Interaktion. Beim Icon im Reiter „Erweitert“ → „Interaktionen“ → „Interaktion Hinzufügen“ wählst du „Klick“. Im Dialog „Interaktion Bearbeiten“ stellst du „Effekt-Aktion“ auf „Element Ausblenden“ und „Zielmodul“ auf „Sektion (Seitenmenü)“.
Tipp: Kleine Module sind mit der Maus schwer zu erwischen, oft greift die Zeile. Dann wähl die Zeile, klapp „Elemente“ auf und klick beim Eintrag „Spalte“ und danach beim „Icon“ auf den Stift.
Schritt 5: Den Hamburger im Header verbinden
Wechsle über die Canvas-Auswahl zurück auf „Main Canvas“. In die rechte Spalte des Headers kommt wieder ein „Icon“-Modul, diesmal mit dem Suchbegriff „menu“ für die drei Striche. Dieses Icon bekommt zwei Interaktionen:
- Klick → „Sichtbarkeit Umschalten“ → „Sektion (Seitenmenü)“: öffnet die Leiste.
- Laden → „Element Ausblenden“ → „Sektion (Seitenmenü)“: sorgt dafür, dass die Leiste beim Seitenaufruf zu ist.
Im „Zielmodul“ stehen die Elemente nach Canvas sortiert, auch die vom Seitenmenü.
Die zweite Interaktion blendet das Menü beim Laden aus.Speichern, Beenden und im Theme Builder „Änderungen Speichern“, fertig.
Das Ergebnis
Beim Aufruf der Seite ist vom Menü nichts zu sehen, auch kein kurzes Aufblitzen. Ein Klick auf den Hamburger lässt die Leiste von rechts hereingleiten, ein Klick aufs Kreuz schließt sie wieder.
Das fertige Seitenmenü live, geöffnet über den Hamburger.Auf dem Handy rutschte der Hamburger bei mir zuerst unter das Logo. Das ist der übliche Zeilenumbruch: In der Telefon-Ansicht die Header-Zeile wählen und unter „Design“ → „Layout“ den „Layout-Umbruch“ auf „Kein Umbruch“ stellen. Danach passt die 340 Pixel breite Leiste gut auf ein 390 Pixel breites Display.
Wenn der Canvas plötzlich leer ist
Das hat mich kurz erschreckt: Nach dem Neuladen des Builders war der Canvas „Seitenmenü“ leer. Die Ursache ist die Laden-Interaktion, sie blendet die Sektion auch im Builder aus. Gelöscht ist nichts. Öffne links die „Schichten“, dort steht „Seitenmenü“. Ein Klick darauf öffnet die Einstellungen der Sektion.
In der „Canvas-Rasteransicht“ siehst du alle Canvases nebeneinander, inklusive Vorschau.Einen Überblick bekommst du auch über das Raster-Symbol neben der Canvas-Auswahl. Über das Menü ⋮ einer Karte kannst du einen Canvas bearbeiten, duplizieren, exportieren, löschen oder „Zur Hauptleinwand Machen“.
Häufige Fragen
Lokaler oder globaler Canvas?
Für ein Menü im Header reicht ein lokaler Canvas, denn der Header läuft schon auf allen Seiten. Global lohnt sich, wenn du denselben Inhalt in mehreren Layouts ansprechen willst.
Kann ich das Menü auch an einer bestimmten Stelle aufklappen lassen?
Dafür gibt es das Modul „Canvas-Portal“. Laut Elegant Themes setzt es Canvas-Inhalt an eine bestimmte Stelle der Seite. Ich habe es hier nicht eingesetzt. Ideen dazu findest du in Mega-Menüs in Divi 5.
Brauche ich zusätzlich das Menü-Modul?
Nein. Die Menüpunkte kommen über das Link-Modul aus deinem WordPress-Menü. Änderst du das Menü unter Design → Menüs, ändert sich das Seitenmenü mit.
Du arbeitest noch nicht mit Divi? Preise und Lizenzen findest du direkt bei Elegant Themes (Werbung).
