Lesefortschritt:

    Portfolio-Filter als Dropdown-Menü darstellen

    20. August 2025 | CSS-Stylesheet, Divi-Theme

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

    Das Portfolio, welches Sie mit dem filterbaren Portfolio-Modul des Divi-Themes erstellen können, zeigt die Kategoriefilter standardmässig als Button. Wenn Ihnen ein Dropdown-Manü besser zusagt, können Sie es auch als solches darstellen. Wie’s geht, zeigt dieser Trick.

    Von Haus aus werden die Filter im filterbaren Portfolio-Modul als Buttons dargestellt. So wie nebenan:

    Um die Ansicht auf ein Dropdown-Menü umzugestalten, benötigen Sie das folgende Script, welches Sie in den <head>-Bereich Ihrer Website integrieren. Unter Divi/Theme-Optionen/Integration:

    <script>
    jQuery(document).ready(function($){
    $('.et_pb_portfolio_filters ul').each(function() {
    var $select = $('<select />');$(this).find('.et_pb_portfolio_filter a').each(function() {
    var $option = $('<option />');
    $option.attr('value', $(this).attr('data-category-slug')).html($(this).html());
    $select.append($option);
    });
    $(this).prepend($select);
    });
    $('.et_pb_portfolio_filters select').each(function() {
    $(this).on('change', function() {
    var selectedFilter = $(this).val();
    $(this).siblings().find("[data-category-slug='"+selectedFilter+"']").trigger('click');
    });
    });
    $('.et_pb_portfolio_filters ul li').hide();
    });
    </script>

    Sogleich werden die Filter statt nebeneinander als Dropdown-Auswahl angezeigt:

    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.