Brotkrumen-Navigation, im Englischen „Breadcrumbs“, zeigt Besuchern, wo sie gerade sind: „Startseite / Leistungen / Webdesign“. Jeder Teil davon ist ein Link zurück. Das hilft beim Orientieren und kann Suchmaschinen die Struktur deiner Website verdeutlichen.
Für Divi musst du dafür kein Plugin installieren. Divi 5 hat ein eigenes Modul namens „Breadcrumbs“. Ich zeige dir, wie du es auf einer einzelnen Seite einfügst, wie du Text, Trennzeichen und Farben anpasst und wie du es einmal im Theme Builder einsetzt, sodass es auf der ganzen Website erscheint. Mit den Vorlagen selbst beschäftigt sich Theme Builder im Überblick.
Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Schritt 1: Das Modul einfügen
Öffne die Seite im Visual Builder und klick in der gewünschten Spalte auf das Plus. Im Dialog „Modul Oder Zeile Einfügen“ tippst du in die Suche (Platzhalter „Search for a module“) zum Beispiel „Bread“. Der Treffer heißt „Breadcrumbs“. Ein Klick darauf fügt das Modul ein und öffnet seine Einstellungen.
Das Modul heißt auch in der deutschen Oberfläche „Breadcrumbs“.
Sofort steht dort eine fertige Brotkrumen-Zeile, bei meiner Testseite „Home / Tutorial TB1 Leistungen / Tutorial TB1 Webdesign“. Die Zwischenstufen kommen aus der Seitenhierarchie: Hast du die Seite „Webdesign“ unter „Leistungen“ als Elternseite eingeordnet, erscheint die Elternseite als Link. Ohne Elternseite siehst du nur „Home“ und den Seitentitel.
Schritt 2: Texte und Trennzeichen ändern
Im Reiter „Inhalt“ liegt die Gruppe „Inhalt“ mit drei Feldern:
- „Haupttext“: der Text für den ersten Link. Standard ist „Home“. Auf einer deutschen Website schreibst du dort „Startseite“.
- „Home-URL“: bleibt in der Regel leer und führt dann auf deine Startseite.
- „Trennzeichen“: steht auf „/“. Ich habe „›“ eingetragen, das wirkt etwas ruhiger.
Drei Felder reichen für die Texte.
Schritt 3: Farben und Schrift
Für die Optik wechselst du in den Reiter „Design“. Dort stehen die Gruppen „Layout“, „Breadcrumb“, „Breadcrumb-Link“, „Home Link“ und „Trennzeichen“, darunter die üblichen wie „Zwischenraum“ oder „Rand“. Die Namen sind teils englisch gemischt.
Willst du die Linkfarbe ändern, öffnest du „Breadcrumb-Link“, darin die Untergruppe „Text“, und setzt die „Textfarbe“. Dort gibt es auch „Schriftart“, „Schriftstärke“ und „Textgröße“. Ich habe #b4400e eingetragen.
Die Linkfarbe sitzt in „Breadcrumb-Link“ → „Text“.
Beim Ausprobieren fiel mir eine Eigenheit auf: Der erste Link zur Startseite hat eine eigene Gruppe „Home Link“. Er behält darum die alte Farbe, wenn du nur „Breadcrumb-Link“ änderst. Soll alles einheitlich aussehen, stellst du beide Gruppen gleich ein. Das Trennzeichen hat ebenfalls eine eigene Gruppe.
Der Link zur Elternseite ist orange, „Startseite“ blieb blau.
Speichere die Seite mit „Speichern“ oben rechts und ruf sie ausgeloggt auf.
Schritt 4: Breadcrumbs auf der ganzen Website
Dasselbe Modul kannst du im Theme Builder einsetzen. Dann musst du es nicht auf jeder Seite einzeln einfügen. Ich habe es zum Test in einen globalen Header gelegt: Divi → Theme Builder → „Globalen Header Hinzufügen“ → „Globalen Header Erstellen“, eine Spalte, Modul „Breadcrumbs“, im „Haupttext“ „Startseite“. Danach „Speichern“, „Beenden“ und im Theme Builder „Änderungen Speichern“. In der Praxis legst du das Modul meist unter Logo und Menü in die Kopfzeile, wie sie in Globale Kopfzeile bauen entsteht.
Dieselbe Zeile steht jetzt in der Kopfzeile.
Das Modul holt sich seine Teile automatisch aus der jeweiligen Seite. Ich habe vier Seiten aufgerufen:
| Seite |
Anzeige |
| Startseite |
Startseite / Startseite Studio Nordlicht |
| Elternseite |
Startseite / Leistungen |
| Unterseite |
Startseite / Leistungen / Webdesign |
| Beitrag in einer Kategorie |
Startseite / Dienstleistungen / Beitragstitel |
Bei Beiträgen erscheint die Kategorie als Zwischenstufe.
Auffällig ist die Startseite: Dort steht der Name doppelt („Startseite / Startseite Studio Nordlicht“), weil die Startseite ein normaler Seitentitel ist. Auf einer Startseite sind Brotkrumen ohnehin überflüssig. Du solltest sie dort lieber ausblenden. Den Weg dafür habe ich nicht getestet, im Reiter „Erweitert“ gibt es aber die Gruppen „Bedingungen“ und „Sichtbarkeit“, die dafür in Frage kommen.
Zu den Beiträgen: Die Kategorie erscheint nur, wenn dem Beitrag eine zugeordnet ist. Bei seltsamen Zwischenstufen prüfst du also zuerst die Kategorie des Beitrags.
Wann sich Breadcrumbs lohnen
Bei einer Website mit drei, vier Seiten brauchst du sie nicht. Sinnvoll werden sie, wenn es Unterseiten gibt, etwa Leistungen mit Unterleistungen, oder einen größeren Blog mit Kategorien. Dort helfen sie Besuchern, die über Google mitten in der Struktur landen. Den Theme Builder und Divi selbst bekommst du bei Elegant Themes (Werbung).
Häufige Fragen
Brauche ich ein Plugin für Breadcrumbs in Divi?
Nein. Divi 5 bringt das Modul „Breadcrumbs“ mit, wie meine Modulsuche zeigte.
Warum fehlt die Elternseite in den Breadcrumbs?
Das Modul richtet sich nach der Seitenhierarchie. Ordne die Seite in den Seiteneigenschaften unter einer Elternseite ein, dann erscheint sie in der Zeile.
Wie ändere ich „Home“ in „Startseite“?
Im Reiter „Inhalt“ im Feld „Haupttext“. Dort steht standardmäßig „Home“.
