Elementorfilterbares Galerie-Widget - Bilder filterbar machen
Eine statische Galerie zeigt Bilder Eine filterbare Galerie lässt die Leute finden, was ihnen wichtig ist Das Widget Filterable Image Gallery gibt Ihrem Portfolio, Produktkatalog oder Ihrer Fotosammlung oben eine Kategorieleiste Besucher klicken auf eine Registerkarte, das Raster filtert sofort, und jeder Artikel kann einen Titel, einen Untertitel und zwei gestylte Schaltflächen für “Details anzeigen” oder “Live-Demo” tragen.
Das Widget ist im Master Addons Plugin kostenlos und funktioniert ohne Elementor Pro.
Sehen Sie die Filter-Tabletten in Aktion
Dieses Raster ist das Widget selbst, kein Screenshot Vier Kategorien und ein All-Tab sitzen darüber, und durch Klicken auf eine Kategorie wird jedes Element ausgeblendet, das nicht diese Beschriftung trägt Jede Karte hier zeigt auch einen Titel und einen Untertitel, der aus ihren eigenen Feldern gezogen wurde.
- Alle Einträge
- Wohnungen
- Villen
- Stadthäuser
- Büros
Cove Street Loft
2 Bett · 1 Bad · 9 qm ft 40 $ 2.450/mo
Marina-Punkt 8b
1 Bett · 1 Bad · 6 qm ft 80 $ 1.890/mo
Ridgeway-Villa
4 Bett · 3 Bad · Pool 1,24 Mio. $
Glashaus auf Elm
3 Bett · 2 Bad · 2,100 qm ft 00 $ 980,00
Bricklane Reihe 12
3 Bett · 2 Bad · Garage 720,00 $
Schöffengericht 4
2 Bett · 2 · ummauerter Garten 645,00 $
Hafenarbeiten, Etage 3
4,200 sq ft · 38 desks 6.400 $/mo
Das Quay Studio
1,8 qm ft · 16 Schreibtische 2.950 $/moWas Sie mit dem filterbaren Galerie-Widget tun können
Kategoriefilterung mit voller Kontrolle
Aktivieren Sie die Filterleiste und Besucher sehen Kategorie-Schaltflächen über der Galerie: “Alle”, “Branding”, “Fotografie”, “Webdesign”, welche Beschriftungen Sie auch immer festlegen Benennen Sie die Registerkarte “Alle” um, richten Sie die Registerkarte links, in der Mitte oder rechts aus und gestalten Sie aktive Registerkarten mit separaten Farben, Hintergründen und Rändern, damit die Leute immer wissen, was sie ausgewählt haben.
- Weisen Sie jedes Bild mit dem Feld Filter Label einer Kategorie zu Komma-separat für mehrere Kategorien.
- Durch das Active-State-Styling hebt sich die ausgewählte Registerkarte vom Rest ab.
- Typografie und Abstände auf der Filterleiste sind vollständig anpassbar.
Galerielayout und 3 D-Effekte
Wählen Sie die Anzahl der Spalten, aktivieren Sie Masonry für ein gestaffeltes Raster im Pinterest-Stil und steuern Sie den Abstand mit Gutter-Einstellungen. Dann legen Sie eine Ebene auf interaktive Effekte: Hover Scale lässt Elemente beim Mouseover vergrößern, und der Tilt-Effekt fügt eine 3 D-Perspektive hinzu, die dem Cursor mit optionaler Blendung folgt. Es ist die Art von Detail, die eine Galerie als berücksichtigt statt als Standard anfühlt.
- Mauerwerkslayout für dynamische, ungleichmäßige Bildhöhen.
- 3 D-Neigung mit einstellbarer Perspektive, Geschwindigkeit und Blendintensität.
- Schwebungsskala mit konfigurierbarer Übergangsgeschwindigkeit.
- Responsive Spalten, die auf Mobilgeräten sauber gestapelt werden.
Gestylte Textüberlagerungen und duale CTAs
Jedes Galerieelement kann einen Titel, Untertitel und eine Kategoriebezeichnung mit jeweils unabhängiger Typografie und Farbe anzeigen. Im Hover blendet eine Overlay-Farbe ein und es erscheinen zwei Schaltflächen: „Details“und „Demo” (oder welcher Text auch immer Sie schreiben). Beide Schaltflächen verfügen über vollständige Normal- und Hover-Statussteuerungen für Hintergrund, Textfarbe, Rand, Radius und Schatten.
- Separate Abschnitte Titelstil, Untertitelstil und Kategorienstil.
- Zwei Tasten pro Artikel, jeweils unabhängig voneinander gestaltet.
- Bewegen Sie die Symbolgröße und -farbe, um sie an Ihre Marke anzupassen.
- Bildüberlagerungsfarbe mit sanftem Übergang.
- Möchten Sie mehr Hover-Animationen auf einzelnen Bildern? Versuchen Sie es mit Bild-Hover-Effekte Widget.
Erstellen Sie ein filterbares Portfolio in Elementor
Elementor eigenes Portfolio-Widget braucht Pro. Dieses Raster läuft auf Master Addons, also funktioniert die Filterleiste auf einer kostenlosen Elementor-Installation Jedes Element trägt einen Projekttitel, einen Untertitel für die Kategorie oder das Jahr, und zwei Buttonfelder, so kann eine Portfoliokarte gleichzeitig auf die Live-Seite und die Fallstudie zeigen Die folgenden Buttons gelangen zur Demoseite.
- Alle Projekte
- Wohn
- Gastfreundschaft
- Einzelhandel
- Arbeitsplatz
Ashgrove-haus
Privatresidenz · Melbourne · 2025
Lime Wash Wohnung
Vollständige Sanierung · Lissabon · 2025
Das Fenwick Hotel
Lobby und Lounge · Edinburgh · 2024
Kellner Gästehaus
32 Zimmer · Wien · 2024
Studio Nine Flaggschiff
Einzelhandelsausbau · Kopenhagen · 2025
Marlow & Fold
Concept Store · Toronto · 2023
Hauptsitz von Beacon Labs
1.400 qm Arbeitsplatz · Berlin · 2025
Ardent-partner
Büro und Tagungsraum · Dublin · 2024Filtrierbare Galerie in Elementor ohne Pro
Die kostenlose Image Gallery von Elementor ist ein Raster mit Lightbox Die ganze Steuerliste sind Bilder, Spalten, Spalt, Bildunterschrift, Link und Lightbox, also keine Filterleiste und kein Mauerwerk drin Elementor behält sein reichhaltigeres Gallery Widget auf der Pro-Liste, wo eine Lizenz reinkommt Dieses Widget fügt die Filterleiste auf einer kostenlosen Elementor-Installation hinzu.
| Merkmal | Elementor-Bildergalerie (kostenlos) | Master Addons Filtrierbare Bildergalerie |
|---|---|---|
| Filterreiter der Kategorie | Nein | Ja, von einem Filteretikett pro Artikel |
| Tab “Alle” | Nein | Ja, mit eigenem Label |
| Mauerwerk | Nein | Ja |
| Spalten | Ja | Ja, 1 bis 6 |
| Leuchtkasten | Ja | Ja |
| Bildunterschriften | Die Anhang-Beschriftung | Ein Titel, Untertitel und eine Kategorie, die Sie pro Artikel eingeben |
| Knöpfe an einem Gegenstand | Nein | Zwei, jeweils mit eigener URL |
| Bandabzeichen | Nein | Ja |
| 3 D-Neigung auf dem Schwebeflug | Nein | Ja, mit Blendung |
| Benötigt Elementor Pro | Nein | Nein |
Was das Widget tut und was nicht
Im Widget-Panel wurde unten alles angekreuzt, die zweite Hälfte zählt genauso wie die erste: wenn man Paging oder ein Suchfeld braucht, ist das das falsche Widget und es ist besser, es jetzt zu wissen.
| Einstellung | Unterstützt |
|---|---|
| Filterreiter der Kategorie | Ja, ein Filteretikett pro Element, Komma für mehr als eins getrennt |
| Tab “Alle” | Ja, und man kann es umbenennen |
| Mauerwerk | Ja |
| Bildseitenverhältnissperre | Ja |
| Spalten | 1 bis 6, ein Wert für jede Bildschirmgröße |
| Lightbox-popup | Ja |
| Links statt des Popups | Ja |
| Knöpfe pro Artikel | Zwei, jeweils mit eigener URL |
| Bandabzeichen | Ja, 12 Presets plus Rabattfeld |
| Titel, Untertitel und Kategorienbezeichnung | Ja, jeder mit seiner eigenen Typografie |
| Tooltip zu einem Artikel | Ja |
| Überlagerung | Auf dem Schwebeflug, immer, nie, oder verstecken sich auf dem Schwebeflug |
| 3 D-Neigung mit Blendung | Ja |
| Eintrag Animation | Ja |
| Mehr Button laden | Nein |
| Paginierung | Nein |
| Suchfeld | Nein |
| Videoartikel | Nein |
| Beiträge oder Produkte als Quelle | Nein, die Galerie ist ein Repeater, den Sie ausfüllen |
Andere Bild-Widgets im selben Plugin: Bild-Hover-Effekte Für Untertitel, die auf Hover erscheinen, Bild Karussell Für eine Schiebereihe, die Galerie-schieber Für eine große Vorschau mit einem Miniaturbildstreifen Bild Hotspot Für Markierungen auf einem einzelnen Bild und Erweitertes Bild Für ein Bild mit einer Bildunterschrift und einem Link.
Filtrierbare Galeriebeispiele und Anwendungsfälle
- Portfolios: Lassen Sie Besucher nach Projekttyp, Branding, Web, Fotografie und Illustration filtern.
- Produktkataloge: Kategorie-Tabs für “Alle”, “Neuheiten”, “Verkauf”, “Bestseller”.
- Restaurantmenüs: filtern nach “Starters”, “Mainss”, “Desserts”, “Drinks”.
- Immobilienangebote: “Wohnungen”, “Häuser”, “Gewerbe”, “Grundstücke”.
- Hochzeitsfotografie: “Ceremony”, “Rezeption”, “Portraits”, “Details”.
- Fallstudien zu Agenturen: Filter nach Kundenbranche oder Servicetyp.
So erstellen Sie eine filterbare Galerie in Elementor
- Lassen Sie das Widget fallen. Suchen Sie in Elementor unter Master Addons nach “Filterable Image Gallery” und ziehen Sie es in Ihren Bereich.
- Galerieartikel hinzufügen. Klicken Sie auf + Element für jedes Bild hinzufügen Laden Sie das Bild hoch, schreiben Sie einen Titel und Untertitel, setzen Sie das Filternabel (Kategoriename) und fügen Sie bei Bedarf Schaltflächentext und Links hinzu.
- Aktivieren Sie die Filterleiste. Schalten Sie den Filter Nav anzeigen ein, stellen Sie Ihre Spaltenanzahl ein, wählen Sie Freimaurerei oder reguläres Gitter und passen Sie den Gossenabstand an Aktivieren Sie die Schwebeschaltfläche und den Neigeffekt für Interaktivität.
- Stil alles. Entwerfen Sie im Register Stil die Filterleiste, die Artikelkarten, Textüberlagerungen, Schaltflächen und Hover-Zustände. Veröffentlichen Sie, wenn Sie fertig sind.
Häufig gestellte Fragen für filterbare Bildergalerie
Was ist das Widget Filterable Image Gallery?
Ein eigenständiges Elementor-Widget, das jedes Bildraster in eine kategoriefilterte Galerie verwandelt Besucher klicken auf Filterregisterkarten, um nur relevante Elemente anzuzeigen Jedes Element kann einen Titel, einen Untertitel und zwei gestylte Call-to-Action-Schaltflächen anzeigen.
Ist das Widget Filterable Image Gallery kostenlos?
Ja. Es kommt mit dem kostenlosen Master Addons Plugin, so können Sie eine filterbare Galerie ohne Elementor Pro oder eine Master Addons Pro Lizenz bauen Sie können so viele Galerie-Elemente hinzufügen, wie Sie brauchen.
Wie ordne ich Artikel Filterkategorien zu?
Suchen Sie im Bereich Galerie Inhalt für jeden Artikel das Feld Filter Label und geben Sie unter einem Filterknopf den Kategorienamen (“Technologie”, “Branding”, “Fotografie”) Alle Artikel mit derselben Etikettengruppe Komma-separat, um einen Artikel mehreren Kategorien zuzuordnen.
Hat Elementor eine filterbare Galerie?
Die kostenlose Bildergalerie von Elementor ist ein einfaches Raster, hat also keine Filterleiste. Das Galerie-Widget Elementor wird mit Pro ausgeliefert. Dieses Widget fügt die Kategorie-Tabs bei einer kostenlosen Elementor-Installation hinzu.
Kann ich mit diesem Widget ein Portfolio aufbauen?
Ja. Jeder Artikel nimmt einen Projekttitel, einen Untertitel für die Kategorie oder das Jahr und zwei Schaltflächen mit eigenen URLs, sodass eine Karte auf die Live-Site und auf die Fallstudie zeigen kann.
Können Besucher Bilder in einer Lightbox öffnen?
Ja. Jeder Button kann auf ein Lightbox-Popup, eine externe URL, oder eine Seite auf Ihrer Seite verlinken Legen Sie im Abschnitt Galerieinhalt das Linkziel pro Element fest.
Ist die Galerie mobil responsive?
Ja. Spalten stapeln sich automatisch, aus vier Spalten werden zwei oder eine auf kleineren Bildschirmen Filtertasten wickeln sich an die Passform Verwenden Sie den Responsive-Modus von Elementor, um Gutter - und Schriftgrößen für Mobilgeräte gezielt anzupassen.
Wie unterscheidet sich das von einem normalen Image Carousel oder Gallery Slider?
Ein Karussell oder Schieberegler zeigt jeweils ein Bild und durchläuft es Eine filterbare Galerie zeigt alles auf einmal und lässt Besucher das Raster nach Kategorien verengen Verwenden Sie die Bild Karussell Für Heldenabschnitte und Logo-Reihen, oder Galerie-schieber (Pro) wenn Sie ein großes Bild mit Miniaturansichten wünschen Verwenden Sie eine filterbare Galerie für Portfolios, Kataloge und Sammlungen, in denen das Durchsuchen wichtig ist.
Hat die Galerie mehr Ladung oder Paginierung?
Nein. Jedes Element im Repeater wird mit der Seite geladen, daher werden alle 40 Bilder von einem Portfolio mit 40 Bildern gleichzeitig geliefert. Teilen Sie sehr große Sätze auf Seiten auf oder halten Sie die Bilddateien leicht.
Warum werden meine Filter-Tabs nicht angezeigt?
Drei Dinge, die Sie überprüfen sollten: Filter Nav anzeigen ist im Reiter Einstellungen eingeschaltet, jedes Element hat ein Filter Label, und der Seitencache wurde nach dem Bearbeiten gelöscht Ein Element mit leerem Label schließt sich nie einer Kategorie an.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
