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