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.
Was 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.
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.
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.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
