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
Automatisches Lazy Loading von Bildern aktivieren
Lazy Loading ist eine Technik, bei der Bilder und andere Ressourcen nur dann geladen werden, wenn sie im sichtbaren Bereich des Users erscheinen – das verbessert die Ladezeiten. WordPress hat das Feature seit der Version 5.5 eigentlich standardmässig eingebaut. Ab und an ist aber das Lazy Loading auch deaktiviert. Mit unserem heutigen Beitrag können Sie dann eingreifen.
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
