Auf Seite filtern

Es gibt einige WordPress Plugins, die dir eine filterbare Galerie für Elementor bieten können. Hier sind einige der beliebtesten Optionen:

- Essential Addons für Elementor: Dieses Plugin ist kostenlos und bietet dir über 40 Elemente für Elementor, darunter eine Filterbare Galerie. Du kannst deine Bilder nach Kategorien filtern und verschiedene Layouts und Effekte wählen. .

- Photo Gallery by 10Web: Dieses Plugin ist ebenfalls kostenlos, hat aber auch eine Pro-Version mit mehr Funktionen. Mit Photo Gallery by 10Web kannst du deine Bilder in verschiedenen Galerie-Typen anzeigen, wie z.B. Mauerwerk, Mosaik, Schieberegler, etc. Du kannst auch Filter-Tags hinzufügen, um deine Bilder zu sortieren.

- Modula: Dieses Plugin ist ein einfaches und leistungsstarkes Werkzeug, um schöne Galerien zu erstellen. Du kannst deine Bilder mit einem Drag-and-Drop-Editor anordnen und Filter verwenden, um sie nach deinen Wünschen zu gruppieren. Modula hat eine kostenlose Version mit einigen Einschränkungen und eine Pro-Version mit mehr Optionen.

- Elfsight Photo Gallery: Dieses Plugin ist ein Premium-Plugin, das dir eine professionelle und ansprechende Galerie bietet. Du kannst deine Bilder in einem Raster, einer Karussell oder einer Schieberegler-Ansicht präsentieren und Filter-Knöpfe hinzufügen, um sie nach Alben zu organisieren. Elfsight Photo Gallery ist responsiv, SEO-freundlich und einfach zu bedienen.

Zitat von Mm77

da gab es aber nur die Möglichkeit über Buttons zu filtern, was bei meinem Vorhaben nicht ausreicht. Das würden viel zu viele werden, daher der Gedanke mit dem drop down Menü über das man filtern kann.

Ein Button ist ein Link. Ein Drop Down Menü ist eine Sammlung von Links

man kann aber auch aus einem Button ein Drop Down Menü machen

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

und etwas JavaScript

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}


// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }

solche Änderungen kannst du mit jedem Theme / Editor "eben" einbauen... o.k. bei Gutenberg nicht unbedingt ohne die Aufführung eines Affentanzes.

Quelle
https://www.w3schools.com/howto/howto_js_dropdown.asp