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
Hover-Animation für das Divi-Standard-Menü
Die Gestaltungsmöglichkeiten des Standard-Menüs im Divi-Theme sind beschränkt. Es lässt sich aber noch das eine oder andere herauskitzeln. Heute zeigen wir Ihnen eine einfache Animation für das Standardmenü.
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
