Filterbare Bildergalerie

Ein einfaches Bildraster gibt Besuchern keine Möglichkeit, nach Themen zu stöbern Die Filterbare Bildergalerie Widget in Master-Addons für Elementor Behebt das Es fügt Kategoriefilter, Hover-Overlays, Bänder und Lightbox-Links zu einer Standardgalerie hinzu, sodass Sie ein filterbares Portfolio oder Produkt-Showcase erstellen können, ohne Code zu schreiben.

So funktioniert jeder Tab und jede Einstellung, sodass Sie einen einrichten können Elementorfilterbare Galerie Ohne zu raten, was die Kipphebel machen.

Diese Seite ist die Einstellungsreferenz Für Live-Beispiele und eine Übersicht, was das Widget kann, besuchen Sie die Elementor-filterbares Galerie-Widget Seite.

Was das Widget Filterable Image Gallery bewirkt #

Das Widget zeigt ein Raster von Bildern an und lässt Besucher diese nach Kategorien filtern Jedes Galerieelement unterstützt einen Titel, Untertitel, ein Menüband, ein Hover-Symbol und zwei Aktionstasten Layout, Abstände, Overlay-Animation und Typografie werden alle vom Elementor-Panel aus gesteuert, sodass das gleiche Widget für Portfolios, E-Commerce-Lookbooks, Reisegalerien und Teamfotowände funktioniert.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Brauchen Sie Hilfe? Sehen Sie sich die Installationsführung.
• Bilder gruppiert in Kategorien, nach denen Besucher filtern sollen.

So fügen Sie das Elementor Filterable Gallery-Widget hinzu #

Öffnen Sie den Elementor-Editor und suchen Sie nach Filterbare Galerie Im Elements-Panel, oder scrollen Sie nach unten in den Abschnitt Master-Addons Ziehen Sie das Widget auf Ihre Seite Es wird mit Platzhalter-Galerie-Elementen geladen, so dass Sie etwas auf dem Bildschirm haben, mit dem Sie sofort arbeiten können.

Bauen Sie Ihre Galerie im Reiter Inhalt auf #

Die Inhalt Auf der Registerkarte fügen Sie Bilder hinzu, weisen Filterkategorien zu und richten Bänder und Links ein.

Galerie Inhalt #

Die Galerie Inhalt Abschnitt ist ein Repeater Jedes Element steht für eine Bildkarte Klicken Sie Artikel hinzufügen Weitere Karten zu erstellen, oder verwenden Sie die Duplikate und Löschsymbole, um diese zu verwalten.

Jeder Artikel hat die gleichen Felder:

• Filternabel: Die Kategorie, die Besucher zum Filtern verwenden Beispiele: Technik, Natur, Architektur.
• Bilder: Klicken Sie, um den Medienwähler zu öffnen und wählen Sie die Bilder für diese Karte aus Sie können mehrere auf einmal auswählen.
• Titel: Die Hauptüberschrift wird unter oder über dem Bild angezeigt.
• Untertitel: Eine kleinere Zeile unter dem Titel.
• Band anzeigen?: Umschalten, um ein Eck- oder Inline-Abzeichen hinzuzufügen.
• Band: Der Abzeichentext, z. B. Beliebt oder Neu.
• Popup oder Links?: Wählen Sie aus, ob die Karte ein Lightbox-Popup öffnet oder Links zu einer URL.
• Button One Text / URL: Beschriftung und Ziel für den ersten Aktionsknopf.
• Button Two Text / URL: Beschriftung und Ziel für den zweiten Aktionsknopf.

Bildauflösung und Spalten #

Stellen Sie unter dem Repeater die Bildauflösung WordPress dienen soll und die Anzahl der Spalten. Sechs Spalten geben Ihnen kleine Miniaturansichten; fallen Sie auf drei, wenn Sie größere Karten mit lesbaren Titeln wünschen Wählen Sie eine Auflösung nahe der tatsächlichen Displaygröße, sonst laden Sie Bilder in voller Größe in kleine Karten und die Seite zahlt dafür.

Einstellungen #

Die Einstellungen Abschnitt steuert das gesamte Galerieverhalten.

• Filter Nav anzeigen?: Zeigt die Kategorienfilter-Tasten über dem Raster an.
• “Alle” Filter Tab anzeigen: Fügt eine All-Taste hinzu, damit Besucher den Filter zurücksetzen können.
• Alle Kategorien Text: Das Etikett für die Reset-Taste, normalerweise Alle.
• Tooltip anzeigen?: Tooltips auf Filterknöpfen ermöglicht.
• Bildaspektverhältnis: Über jedes Bild ein gleichmäßiges Verhältnis erzwingt.
• Dachrinne: Der Raum zwischen Gitterelementen.
• Mauerwerk: Schaltet das Gitter für ungleichmäßige Bildhöhen auf eine Mauerwerksanordnung um.
• Hover-Skala: Zoomt das Bild leicht auf dem Schwebeflug.
• Skalenwert: Wie stark das Bild zoomt, wie z.B. 1.1.
• Kipp-Effekt: Fügt eine 3 D-Neigung hinzu, die dem Cursor folgt.

Overlay-einstellung #

Die Overlay-einstellung Abschnitt entscheidet, was erscheint, wenn ein Besucher über einem Gegenstand schwebt.

• Titel anzeigen?: Artikeltitel im Hover anzeigen.
• Untertitel anzeigen?: Untertitel im Schwebeflug anzeigen lassen.
• Kategorie anzeigen?: Filterkategorie-Etikett anzeigen.
• Schwebe-Symbol?: Fügen Sie ein Symbol hinzu, das im Hover angezeigt wird, z. B. eine Lupe oder ein Link-Symbol.
• Overlay-typ: Wählen Sie, wann das Overlay erscheint On Hover ist am häufigsten.
• Bildunterschrift: Schalten Sie den Beschriftungsbereich unter dem Bild um.
• Hover-Richtung: Richtungs-Hover-Effekte ermöglicht.

Style die Galerie im Style Tab #

Die Stil Tab deckt den Kartenbehälter, das Bild, die Überlagerung und die Schaltflächen ab.

Artikelstil #

Artikelstil Steuert den Kartenumschlag Setzen Sie hier Polsterung, Rand, Randtyp, Randbreite, Randfarbe, und Randradius ein Ein dünner Rand mit kleinem Radius ist eine schnelle Möglichkeit, Karten von einem hellen Hintergrund zu trennen.

Bildstil #

Bildstil Stile das Bild selbst und seinen Schwebezustand.

• Bildstil: Wählen Sie die Standardeinstellung oder einen Hover-Overlay-Look.
• Überlagerungsfarbe des Mauszeigers: Die Tönung, die das Bild im Schwebeflug bedeckt.
• Titelstil: Farbe und Typografie für den Artikeltitel.
• Stil des Untertitels: Bildunterschrift Farbe und Typografie für den Untertitel.
• Symbolstil: Symbolgröße und Farbe für das Hover-Symbol.

Überlagerung #

Die Überlagerung Abschnitt wählt die Hover-Animation aus Optionen sind Einblenden, Einblenden, Ausblenden von links, Ausblenden von oben, Maske von unten, Eindrehen, Einzoomen und Hochskalieren Einblenden ist die sichere Voreinstellung; die Varianten aus Einblenden und Drehen lenken mehr Aufmerksamkeit auf sich selbst, die Sie möglicherweise in einem Portfolio wünschen oder auch nicht.

Knopf Eins und Zwei Stil #

Gestalten Sie die Aktionstasten separat Jede Taste verfügt über Normal- und Hover-Zustände mit Bedienelementen für Typografie, Auffüllung, Textfarbe, Hintergrundfarbe, Rand, Randradius und Kastenschatten.

Sehen Sie sich das Live-Ergebnis an #

Veröffentlichen oder Vorschau der Seite, um die endgültige Galerie zu sehen Besucher können mit der Maus über ein Element fahren, um das Overlay, den Titel und das Symbol zu sehen, oder klicken, um die Lightbox oder den Link zu öffnen Wenn Sie die Filternavigation aktiviert haben, können sie auch auf Kategorien-Schaltflächen klicken, um nur passende Bilder anzuzeigen.

Eines ist zu prüfen: wenn die Filterbuttons nicht auf der Live-Seite antworten, sondern im Editor einwandfrei funktionieren, wird Ihr Caching - oder Optimierungs-Plugin wahrscheinlich das JavaScript der Galerie verschieben oder kombinieren, die Master Addons Skripte von der JS-Optimierung ausschließen und den Cache löschen.

Häufige Anwendungsfälle #

• Portfolioseiten: Lassen Sie Kunden nach Branding, Webdesign oder Fotografie filtern.
• Produktkataloge: Gruppenartikel nach Kategorie, Farbe oder Sammlung.
• Reise - oder Immobiliengalerien: Filter nach Ort oder Eigenschaftstyp.
• Team - oder Eventalben: Organisieren Sie Fotos nach Abteilung oder Sitzung.

Tipps für eine besser filterbare Galerie #

• Verwenden Sie konsistente Bildgrößen. Es hält das Gitter ordentlich, besonders wenn das Mauerwerk ausgeschaltet ist.
• Filteretiketten kurz halten. Ein oder zwei Wörter passen am besten in die Filterleiste.
• Bildaspektverhältnis aktivieren Wenn Ihre Quellbilder unterschiedliche Abmessungen haben.
• Wählen Sie einen starken Schwebeeffekt Anstatt Maßstabsgetreu, neigen und überlagern.
• Komprimieren Sie Bilder vor dem Hochladen. Eine Galerie voller unkomprimierter Fotos ist eine der häufigsten Ursachen für eine langsame Seite.

Video-Tutorial #

Wenn Sie das Widget Filterbare Galerie in Aktion sehen möchten, durchläuft dieses Video das vollständige Setup, vom Hinzufügen von Galerieelementen zum gefilterten Raster auf der Live-Seite:

Häufig gestellte Fragen #

Einwickelnd #

Die Master Addons Filterbare Bildergalerie Widget verwandelt ein statisches Bildgitter in eine kategoriebasierte Galerie, die Besucher tatsächlich durchsuchen können Filternavigation, Hover-Overlays, Bänder und Lightbox-Unterstützung sind alle integriert, sodass Sie für die meisten Projekte kein separates Galerie-Plugin benötigen Sie können sehen, wie es auf der funktioniert Widget-Seite der filterbaren Bildergalerie.

Für weitere Bildtools erkunden Sie die Erweitertes Bild-Widget, Bild Karussell, und Galerie-schieber. Sie können auch unsere Zusammenfassung lesen Elementorfilterbare Galerie-Plugins oder stöbern Sie in voller Länge Master Addons Widgets und Erweiterungen Sammlung.