Lesefortschritt:

Schliessen-Icon des Divi-Standardsuchmoduls anpassen

10. September 2025 | CSS-Stylesheet, Divi-Theme

Trick # 493 | Dieser Beitrag beinhaltet 276 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Die Standardkopfzeile des Divi-Themas enthält ein Suchsymbol, das beim Anklicken ein Suchfeld aufruft. Dieses Suchfeld enthält ein graues «Kreuz»-Symbol, das zum Schliessen des Suchfeldes verwendet werden kann. Wenn Sie eine andere Farbe wünschen, können Sie das Symbol selber gestalten.

In unserem Beispiel soll das «Schliessen»-Kreuz blau dargestellt werden und – sobald die Maus darüber bewegt wird – auf grün wechseln. Das geschieht mit folgendem CSS-Code, den Sie in das Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS – einfügen:

.et_close_search_field:after {
    color:#293280;
}
.et_close_search_field:hover:after {
    color: #59B14B;
}

Das Icon sieht dann normal so aus:

und beim Hovern so:

Für andere Farben passen Sie den Code ganz einfach an.

Werbung

«Back to top»-Button im Divi-Theme stylen

Im Divi-Theme lässt sich ein «Back to top»-Button anzeigen. Wenn man auf einer Seite hinunterscrollt wird dieser Button unten rechts angezeigt und ermöglicht es BesucherInnen, mit einem Klick wieder bis ganz nach oben zu scrollen. Ein nettes ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.