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!

Endecke weitere Divi Codeschnipsel

Logo beim Scrollen ändern

Logo beim Scrollen ändern

Mit diesem Codeschnipsel kannst du dein Logo beim Scrollen ändern. /* Ändert das Logo beim Scrollen */ .et-fixed-header #logo { content: url(hier neue Bild-URL eintragen); } Das kann z.B. sinnvoll sein, wenn dein Hauptmenü transparent und dein Logo weiß ist und sich...

Projekte aus Backend entfernen

Projekte aus Backend entfernen

Mit Divi wird automatisch der Custom Post Type „Projekte“ mit erstellt. Der Bereich ist dazu gedacht, eigene Referenzen, Projekte oder Case Studies zu präsentieren. Über das Divi-Modul „Filterbares Portfolio“ kann man die verschiedenen Projekte auf seiner Website...

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du nutzt noch kein Divi Child-Theme?

Dann hol dir mein fertiges Divi Basis-Child Theme als perfekte Basis für deine Divi Website!

Hey, ich bin Tobias!

Portraitfoto von Tobias Both

Ich bin selbstständiger Webdesigner und der Gründer von Divitorials.

Seit rund einem Jahr veröffentliche ich auf diesem Blog Tutorials, Tipps und Tricks rund um das beliebte Divi Theme von Elegant Themes und teile meine Erfahrungen, die ich während meiner Arbeit als selbstständiger Webdesigner mit Divi sammeln konnte.

Mehr über mich erfahren