Trick # 569 | Dieser Beitrag beinhaltet 494 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
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.
So präsentiert sich das Such-Modul im Divi Theme standardmässig:
Um das gewünschte Styling zu erreichen, müssen Sie nun dem Such-Modul eine CSS-Klasse zuweisen: search-box-icon-button. Diese Klasse tragen Sie hier ein: Im Register «Advanced» des Such-Moduls, unter «CSS-ID und Klassen» und dort im Textfeld «CSS-Klassen».
Nun können Sie den folgenden CSS-Code zu Ihrem CSS-Stylesheet hinzufügen. Dieses bearbeiten Sie im Backend unter
.et_pb_search.search-box-icon-button .et_pb_searchsubmit {
text-indent: -9999px;
overflow: hidden;
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D"http%3A//www.w3.org/2000/svg" viewBox%3D"0 0 64 64"%3E%3Cpath fill%3D"%232f8fff" d%3D"M55%2C51.6l-9.9-9.8c1.5-2.4%2C2.3-5.2%2C2.3-8.1c0-7.7-6.3-14-14-14s-14%2C6.3-14%2C14c0%2C7.7%2C6.3%2C14%2C14%2C14c2.9%2C0%2C5.7-0.8%2C8.1-2.3l9.9%2C9.9c0.6%2C0.6%2C1.4%2C0.9%2C2.2%2C0.9s1.6-0.3%2C2.2-0.9C55.6%2C54.1%2C55.6%2C52.8%2C55%2C51.6zM33.4%2C42.7c-5.1%2C0-9.3-4.1-9.3-9.3s4.1-9.3%2C9.3-9.3c5.1%2C0%2C9.3%2C4.1%2C9.3%2C9.3S38.5%2C42.7%2C33.4%2C42.7z"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position-x: 5px; /* Horizontale Position des Symbols anpassen */
background-position-y: 5px; /* Symbol vertikal ausrichten */
width: 41px; /* Passen Sie die Breite nach Bedarf an */
height: 41px; /* Höhe nach Bedarf anpassend */
}Auf den Zeilen 6 bis 9 empfehlen wir nötigenfalls ein paar Anpassungen des Codes.
Das Suchmodul wird sich nun so zeigen:
Werbung
Werbung
