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
Veraltete WordPress-Revisionen automatisch löschen
Revisionen sind eine grossartige Funktion, um frühere Beitragsversionen wiederherzustellen. Doch mit der Zeit können sich diese anhäufen und Ihre Datenbank aufblähen, insbesondere bei Webseiten mit häufig aktualisierten Beiträgen. Das automatische Löschen älterer Revisionen hält Ihre Datenbank sauber und verbessert die Leistung Ihrer Website.
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
