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!
Hallo Tobias,
vielen Dank für die ganzen Tips und Kniffe auf deiner Seite.
Kann ich so einen NEU Button auch in die sekundäre Menüleiste bringen?
Was muss man da am Code ändern? Hab gesucht, aber nix gefunden, deshalb frage ich hier.
Schöne Grüße
Klaus
Hallo Klaus,
vielen Dank für deinen Kommentar! Freut mich, dass dir meine Tipps gefallen und du bereits fündig geworden bist.
Den Code kannst du wie folgt anpassen:
#et-secondary-menu>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;
}
Damit sollte es auch in der Sekundärnavigation funktionieren.
Lass mich gerne wissen, ob es damit geklappt hat.
Viele Grüße,
Tobias
Guten Morgen Tobias,
vielen Dank für die schnelle Antwort!
Habe es eben getestet und funktioniert top.
Wünsche dir einen schönen Tag!
Viele Grüße,
Klaus
Hallo Klaus,
super – freut mich!
Wünsche ich dir auch!
Viele Grüße,
Tobias