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

    Tabellen stylen und Zeilen abwechselnd einfärben

    Einst waren Tabellen auf Websites allgegenwärtig. Heute deutlich weniger – auch weil Tabellen im Responsive Design nicht ganz unproblematisch sind. Aber so ganz verzichten kann man denn doch nicht auf Tabellen. Damit sie aber wenigstens ...
    Keine Inhalte gefunden.

    Werbung

     

    Pin It on Pinterest

    Share This