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