„Neu“, „Sale“ oder „Beliebt“: Ein kleines Label neben einem Menüpunkt lenkt den Blick genau dorthin, wo du ihn haben willst. Eine Einstellung dafür gibt es in Divi 5 nicht, weder im Menü-Modul noch in den WordPress-Menüs. Ich habe in beiden gesucht und nichts gefunden. Es geht trotzdem mit zwei kleinen Schritten: einer CSS-Klasse am Menüpunkt und ein paar Zeilen CSS im Menü-Modul.
Das ist eine Lösung für Leute ohne Programmierkenntnisse. Du kopierst im Grunde nur eine Zeile und passt Text und Farbe an. Getestet mit Divi 5.13 (deutsche Oberfläche) und WordPress 7.1, Stand Oktober 2026.
So funktioniert der Trick
Du gibst dem Menüpunkt in WordPress einen Klassennamen, zum Beispiel label-neu. Danach schreibst du eine CSS-Regel, die hinter dem Link dieses Menüpunkts ein kleines farbiges Feld mit Text einfügt. Das Feld gehört nicht zum Menütext selbst, es verändert also weder den Link noch die Reihenfolge.
Schritt 1: Das Feld „CSS-Klassen“ einblenden
Gehe im WordPress-Backend auf Design → Menüs und wähle das Menü, das du bearbeiten willst. Klappe die Bildschirmoptionen auf, sie heißen in der deutschen Oberfläche „Ansicht anpassen“ und sitzen rechts oben. Unter „Erweiterte Menüeigenschaften anzeigen“ findest du fünf Haken: „Linkziel“, „Title-Attribut“, „CSS-Klassen“, „Linkbeziehung (XFN)“ und „Beschreibung“. Setze den Haken bei „CSS-Klassen“.
Der Haken bei „CSS-Klassen“ blendet das Feld an jedem Menüpunkt ein.Das ist die wichtigste Stolperfalle, denn ohne diesen Haken gibt es das Feld nicht. Standardmäßig ist es aus.
Schritt 2: Die Klasse am Menüpunkt eintragen
Klappe den Menüpunkt mit dem Pfeil rechts auf. Jetzt gibt es zusätzlich zu „URL“ und „Navigationsbeschriftung“ das Feld „CSS-Klassen (optional)“. Trage dort den Namen ein, ohne Punkt davor, zum Beispiel label-neu. Beim nächsten Punkt kannst du eine zweite Klasse vergeben, etwa label-sale. Klicke unten auf „Menü speichern“.
Der Menüpunkt „Shop“ bekommt die Klasse label-neu.Schritt 3: Das Menü im Menü-Modul wählen
Öffne die Seite im Visual Builder und die Einstellungen des Menü-Moduls (Zahnrad in der Hover-Leiste). Im Reiter „Inhalt“ gibt es in der Gruppe „Inhalt“ das Feld „Menü“. Wähle dort dein Menü aus. Bei mir zeigte das Modul schon von selbst ein Menü an, doch ich würde die Auswahl immer ausdrücklich treffen.
Im Feld „Menü“ legst du fest, welches Menü das Modul zeigt.Schritt 4: Das Label per CSS erzeugen
Wechsle in den Reiter „Erweitert“ und öffne die Gruppe „CSS (Standbild)“. Die Beschriftung ist eine missglückte Übersetzung von „CSS“, gemeint ist hier das CSS-Feld. Es hat zwei Unterreiter, „Freiform- CSS“ und „Modulelemente“. Im ersten steht der Hinweis, dass du mit dem Wort selector das Modul ansprichst. Klicke in das dunkle Feld und füge diesen Code ein:
selector .label-neu > a::after { content: "NEU"; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: #c7124a; color: #fff; font-size: 11px; }
Was die Teile bedeuten:
.label-neu ist die Klasse aus Schritt 2.content: "NEU" ist der Text des Labels. Hier änderst du ihn.background und color sind Hintergrund- und Schriftfarbe des Labels.margin-left, padding, border-radius und font-size bestimmen Abstand, Innenabstand, Rundung und Größe.
Für ein zweites Label kopierst du die Zeile und änderst Klasse, Text und Farbe, etwa auf .label-sale mit „SALE“ und #1e6fd9. Beide Zeilen stehen untereinander im Feld.
Zwei Zeilen CSS im Freiform-Feld des Menü-Moduls.Der Canvas zeigt das Ergebnis sofort: hinter „Shop“ steht jetzt „NEU“, hinter „Angebote“ steht „SALE“.
Im Visual Builder erscheinen die Labels sofort.Speichern und auf dem Handy prüfen
Klicke oben rechts auf „Speichern“ und öffne die Live-Seite. Auf dem Desktop sieht das Menü so aus:
Die Labels auf der Live-Seite.Auch auf dem Handy bleiben sie erhalten. Ich habe die Seite in einem schmalen Fenster geöffnet und das Hamburger-Menü aufgeklappt: Die Labels stehen im Dropdown hinter den Menüpunkten.
Im aufgeklappten Handy-Menü bleiben die Labels sichtbar.Grenzen und Tipps
- Nur dieses Modul: Das CSS im Menü-Modul gilt nur für dieses eine Modul. Hast du dasselbe Menü an mehreren Stellen, musst du das CSS in jedem Modul eintragen. Divis eingebauten Standard-Header habe ich nicht getestet. Dort wäre globales CSS der richtige Ort.
- Weniger ist mehr: Ein bis zwei Labels reichen. Wer jeden Menüpunkt markiert, markiert keinen.
- Lesbar bleiben: Nimm kurze Wörter und genug Kontrast zwischen Labelfarbe und Schrift.
- Label wieder entfernen: Lösche die Klasse am Menüpunkt, dann verschwindet das Label, ohne dass du das CSS anfassen musst.
Divi gibt es bei Elegant Themes (Werbung).
