Trick # 552 | Dieser Beitrag beinhaltet 566 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Out oft the box schaut das Suchfeld des Divi-Themes etwas ärmlich aus. Mit unserem CSS-Bausatz können Sie das Suche-Modul aber ganz einfach dem Styling Ihrer Website anpassen.
Ohne Zutun präsentiert sich das Divi-Suchmodul nicht eben berauschend und in etwa so wie nebenan.
Das lässt sich mit unserem CSS-Baukasten verbessern. Dazu platzieren Sie ein Suchmodul und geben ihm die CSS-Klasse «search-form». Diesen Begriff tragen Sie im «Erweitert»-Tab des Suchmoduls unter «CSS-ID und Klassen» im Textfeld «CSS-Klassen» ein.
Nun kopieren Sie den folgenden CSS-Block in das Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS:
/* Gesamtes Suchformular stylen */
.search-form {
border: none
}/* Eingabefeld stylen */
.search-form input.et_pb_s {
width: calc(100% - 150px);
color: #000000;
background: #59b14b33;
border: 2px solid #293280;
border-radius: 10px;
padding-left: 10px!important;
}/* Eingabefeld stylen, sobald es aktiv ist */
.search-form input.et_pb_s:focus {
background: #ffffff;
}/* Sende-Button stylen */
.search-form input.et_pb_searchsubmit {
width: 140px;
color: #ffffff;
background: #293280;
border: 1px solid #293280;
border-radius: 10px;
transition: all .3s ease;
}/* Sende-Button beim hovern stylen */
.search-form input.et_pb_searchsubmit:hover {
color: #293280;
font-weight: 700;
background: #ffffff;
transition: all .3s ease;
}Den Code können Sie natürlich nach Belieben anpassen; wir haben hier ein Styling gewählt, das gut zu unserer Website passt. Besonders die Farbwerte müssten bei Ihnen vermutlich angepasst werden.
Mit obigem Beispielcode zeigt sich das Suchfeld wie nebenan:
Ziemlich einfach, finden wir.
Werbung
Werbung
