Lesefortschritt:

    Divi-Such-Modul-Special – Trick #2: Button und Suchbox abrunden

    9. Mai 2026 | CSS-Stylesheet, Divi-Theme

    Trick # 568 | Dieser Beitrag beinhaltet 407 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

    Das Such-Modul des Divi-Themes hat standardmässig Ecken und Kanten. Je nach Webdesign möchten Sie es vielleicht ein wenig runder. Geht ganz einfach. Wir zeigen wie.

    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-rounded. 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-rounded,
    .et_pb_search.search-box-rounded .et_pb_s,
    .et_pb_search.search-box-rounded .et_pb_searchsubmit {
    border-radius: 30px; /* Passen Sie den px-Wert so an, dass er der Hälfte der Höhe des Suchfelds entspricht, um eine perfekte Pillenform zu erhalten. */
    }

    Auf der Zeile 4 empfehlen wir nötigenfalls eine Anpassung des Codes.

    Das Suchmodul wird sich nun so zeigen:

    Werbung

    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.