Trick # 331 | Dieser Beitrag beinhaltet 1389 Wörter. – Geschätzte Lesezeit: ca. 7 Minuten.
In WordPress-Menüs können Sie ganz einfach einen Hinweistext einbauen: Etwa «Neu» oder «Top-Tipp» – wie Ihnen beliebt. Machbar ist solcherlei mit wenig CSS-Code. Wir zeigen Ihnen wie’s geht.
Der Hack funktioniert in den Standard-WordPress-Menüs und den allermeisten Themes ebenso wie in den Menüs des Divi-Themes – egal ob Sie das Divi-Standardmenü oder das Menü-Modul verwenden.
Gleich drei Varianten stellen wir zur Auswahl – je nachdem ob Sie den Infotext in den Menüs links, rechts oder inline darstellen wollen:
1. Menü-Infotext inline darstellen
Das Resultat soll so aussehen:
Dafür benötigen Sie die Codes von nebenan:
Bearbeiten Sie das WordPress-Menü – im Backend unter Design/Menüs. Fügen Sie im Feld «Angezeigter Name» den folgenden Code ein:
<span class="menu-callout-inline">NEW</span>NAME-MENU-NAVIGATIONSPUNKTDie GROSSGESCHRIEBENEN Texte müssten Sie freilich nach Ihren Bedürfnissen anpassen.
Im CSS-Stylesheet Ihrer WordPress-Seite (im Backend unter Design/Customizer/Zusätzliches CSS) platzieren Sie den folgenden CSS-Code:
.menu-callout-inline {
font-size: 16px;
margin-right: 8px;
margin-top: -3px;
color: #ffffff;
background-color: #293280;
padding: 3px 4px;
border-radius: 3px;
}Die Farben, die Fontgrösse und die Abstände können Sie einfach variieren.
2. Menü-Infotext links platzieren
Das Resultat soll so aussehen:
Dafür benötigen Sie die Codes von nebenan:
Bearbeiten Sie das WordPress-Menü – im Backend unter Design/Menüs. Fügen Sie im Feld «Angezeigter Name» den folgenden Code ein:
<span class="menu-callout-left">NEW</span>NAME-MENU-NAVIGATIONSPUNKTDie GROSSGESCHRIEBENEN Texte müssten Sie freilich nach Ihren Bedürfnissen anpassen.
Im CSS-Stylesheet Ihrer WordPress-Seite (im Backend unter Design/Customizer/Zusätzliches CSS) platzieren Sie den folgenden CSS-Code:
.menu-callout-left {
font-size: 10px;
margin-right: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #293280;
padding: 3px 4px;
border-radius: 3px;
}Die Farben, die Fontgrösse und die Abstände können Sie einfach variieren.
3. Menü-Infotext rechts platzieren
Das Resultat soll so aussehen:
Dafür benötigen Sie die Codes von nebenan:
Bearbeiten Sie das WordPress-Menü – im Backend unter Design/Menüs. Fügen Sie im Feld «Angezeigter Name» den folgenden Code ein:
NAME-MENU-NAVIGATIONSPUNKT<span class="menu-callout-right">NEW</span>Die GROSSGESCHRIEBENEN Texte müssten Sie freilich nach Ihren Bedürfnissen anpassen.
Im CSS-Stylesheet Ihrer WordPress-Seite (im Backend unter Design/Customizer/Zusätzliches CSS) platzieren Sie den folgenden CSS-Code:
.menu-callout-right {
font-size: 10px;
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #293280;
padding: 3px 4px;
border-radius: 3px;
}Die Farben, die Fontgrösse und die Abstände können Sie einfach variieren.
Ein ziemlich einfacher Hack.
Werbung
Werbung
