Trick # 566 | Dieser Beitrag beinhaltet 401 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Out of the Box stellt das Divi-Theme den Suchbutton im entsprechenden Modul direkt im Anschluss an das Eingabefeld dar. Sie können aber die beiden Elemente auch voneinander trennen und dazwischen einen kleinen Abstand einfügen.
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-separated. 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-separated .et_pb_s {
border: 1px solid #ddd;
}
.et_pb_search.search-box-separated {
border: none;
}
.et_pb_search.search-box-separated .et_pb_searchsubmit,
.et_pb_search.search-box-separated .et_pb_s {
margin-right: 10px;
margin-left: 10px;
}Das Suchmodul wird sich nun so zeigen:
Werbung
Werbung
