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
Divi-Such-Modul-Special – Trick #1: Text der Suchschaltfläche ausblenden und Lupe anzeigen
Wenn Sie auf Ihrer Divi-Website ein Such-Modul einfügen, wird normalerweise auf dem Suchbutton ein Text erscheinen. Wahlweise können Sie diesen Text aber ganz einfach mit einer Lupe ersetzen. Wir zeigen Ihnen wie das geht.
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
