Trick # 379 | Dieser Beitrag beinhaltet 616 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Hinweise, welche auf die Website «gestempelt» werden, sind beliebt und ein auffälliges Element dazu. Oft werden dafür Grafiken verwendet. Das ist aber gar nicht nötig – mit dem Text-Modul des Divi-Themes und etwas CSS-Code geht das ganz praktisch.
Vielleicht benötigen Sie einen Hinweis-Badge auf der Startseite oder Sie betreiben auf Ihrer Website einen Blog, dessen neuesten Beitrag Sie besonders markieren möchten. So wie im Beispiel nebenan:
neuester
Beitrag
Benutzerdefiniertes Navigationsmenü in WordPress ohne Plugin erstellen
Unabhängig davon, welches WordPress-Theme Sie verwenden, wird es mit ziemlicher Sicherheit mindestens eine Menüposition bieten, an der Sie Ihr Menü anzeigen können – normalerweise in der Kopfzeile Ihrer Website. Aber was, wenn Sie ein weiteres Menü benötigen, das an anderer Stelle auf Ihrer Website angezeigt werden soll? Ein zusätzliches Menü lässt sich ganz einfach installieren.
Sie benötigen recht wenig dafür: Zunächst mal ein Divi-Text-Modul, in welches Sie den gewünschten Text eingeben. Verwenden Sie kurze Wörter und erstellen Sie mehrzeilige Badges, indem Sie die Zeilenschaltung mit «Shift»+«Enter» erstellen.
Vergeben Sie nun dem Text-Modul noch eine CSS-Klasse. In unserem Beispiel heisst sie «poststamp». Fügen Sie diesen Klassennamen im «Erweitert»-Tab des Text-Moduls ein. Genauer unter «CSS-ID und Klassen» und dort im Textfeld «CSS-Klassen».
Nun kommt der CSS-Code: Den untenstehenden Block kopieren Sie in das CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:
.poststamp {
float: right;
border: 1px dotted #ff0000;
border-radius: 100%;
height: 130px;
width: 130px;
transform: rotate(10deg);
margin-bottom: -75px !important;
margin-top: -20px !important;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: Verdana;
color: #ff0000;
font-size: 26px;
text-align: center !important;
font-weight: 100;
line-height: 1.3;
z-index: 1000;
background-color: transparent;
}
Den Code können Sie natürlich gut anpassen. Wählen Sie etwa einen anderen Drehwinkel (in Zeile 7), eine andere Farbe (in den Zeilen 3 und 15), einen anderen Font (in Zeile 14) oder andere Abstände (in den Zeilen 8 und 9) und, und, und …
Ziemlich easy. Oder?
Werbung
Werbung
