Divi Hauptmenü Neu-Tag hinzufügen

Du hast einen Link in deinem Divi Hauptmenü, den du besonders hervorheben möchtest?

Ein „Neu-Tag“ ist eine gute Möglichkeit, um die Aufmerksamkeit deiner Besucher auf einen bestimmten Link in deiner Hauptnavigation zu lenken.

Regelmäßige Besucher deiner Website erkennen so schnell, dass es eine neue Seite auf deiner Website gibt, denn das Neu-Tag springt gleich ins Auge.

So einfach fügst du das Neu-Tag deinem Hauptmenülink hinzu:

Schritt 1:

Fügen dem Link, den du hervorheben möchtest, in den Menüeinstellungen unter Design > Menüs die Klasse neu hinzu.

Tipp: Wenn du das Feld „CSS-Klassen (optional)“ nicht siehst, musst du es zuerst in WordPress aktivieren. Klicke dazu ganz oben rechts in den Menüeinstellungen auf Ansicht anpassen und wähle unter Erweiterte Menüeigenschaften anzeigen CSS-Klassen aus.

Schritt 2:

Wenn du die CSS-Klasse festgelegt hast, fügst du anschließend folgenden Code im Stylesheet deines Child-Themes ein:

#top-menu-nav>ul>li.neu a:before {
    content: "Neu";
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: #000; /* Hier Hintergrundfarbe ändern */
    padding: .2em .4em;
    position: relative;
    border-radius: 4px;
    left: 0;
    bottom: 3px;
    margin-right: .5em;
}

Alternativ kannst du den Code auch im Bereich Zusätzliches CSS im Divi Customizer einfügen, falls du kein Child-Theme nutzt:

Et voilà! Du solltest nun das Neu-Tag in deinem Hauptmenü sehen können.

Wenn dir das Codeschnipsel gefällt, freue ich mich über einen kurzen Kommentar von dir!