Wichtige Erkenntnisse
- Das kostenlose Widget Image Gallery von Elementor hat keine Filterleiste Die Steuerliste besteht aus Bildern, Spalten, Lücke, Bildunterschrift, Link und Lightbox.
- Zwei Routen geben Ihnen Kategorie-Tabs: Elementors Galerie-Widget, das sich auf der Pro-Liste befindet, oder ein Addon-Widget auf einer kostenlosen Elementor-Installation.
- Mit der Master Addons Filtrierbare Bildergalerie Die Kategorie stammt von einem Filteretikett, das Sie auf jedem Element eingeben, sodass ein Bild in mehreren Kategorien platziert werden kann.
- Filter Nav anzeigen und “Alle” Filter Tab anzeigen sind beide standardmäßig eingeschaltet, und der Text auf der Registerkarte „Alle” ist bearbeitbar.
- Wenn keine Tabs angezeigt werden, ist die Ursache fast immer ein leeres Filter-Label, ausgeschaltetes Filter-Nav anzeigen oder ein Seiten-Cache, der das alte Markup bedient.
Eine filterbare Galerie ist ein Raster mit einer Reihe von Kategorien-Buttons darüber Klicken Sie auf Porträts und die Porträts bleiben, während alles andere außer Sichtweite fällt Es sind die Layout-Portfolios, Produktkataloge und Fotosets greifen nach, denn das Scrollen über vierzig Bilder hinaus, um eine Art von Arbeit zu finden, ist niemandes Idee von einer guten Zeit.
Elementor kann das, aber nicht im kostenlosen Widget Bildergalerie Diese Anleitung behandelt beide Routen: was Elementor selbst bietet, und wie man dasselbe auf einem kostenlosen Elementor-Install mit einem Addon baut.
Inhaltsverzeichnis
Was Elementor Ihnen aus der Box gibt
Öffnen Sie das Widget-Panel auf einer kostenlosen Elementor-Installation, suchen Sie nach Galerie, und Sie erhalten das Widget Bildergalerie Seine Steuerliste ist Bilder hinzufügen, Bildauflösung, Spalten, Bildunterschrift, Link, Lightbox, Order By und ein Spacing-Slider in der Registerkarte Stil. Spalten laufen von 1 bis 10 und beginnen bei 4, Bildunterschrift bietet die Beschriftung des Anhangs oder nichts, und Link sendet das Bild an die Mediendatei, die Anhangsseite oder nirgends Das gibt Ihnen ein Raster mit einer Lightbox Es gibt keine Filterleiste, kein Mauerwerk und keinen Titel pro Bild.
Elementor hat ein zweites Galerie-Widget, genannt Gallery, und das hier ist Pro. Es enthält die Layout-Optionen und die Filterleiste Eine Filterleiste von Elementor selbst bedeutet eine Pro-Lizenz.
Route 1: das Elementor Gallery Widget (Pro)
Wenn Sie bereits für Elementor Pro bezahlen, beginnen Sie hier, denn es ist ein Plugin weniger Das Galerie-Widget enthält mehrere Galerien in einem Widget und gibt jedem einen Namen, und diese Namen werden zur Filterleiste.
- Ziehen Sie das Galerie-Widget auf die Seite.
- Wechseln Sie vom Einzel- zum Mehrfachtyp. Single ist die Standardeinstellung und verfügt über keine Filterleiste.
- Fügen Sie im Galleries-Repeater eine Galerie pro Kategorie hinzu und füllen Sie das Titelfeld aus, da dieser Text zur Registerkarte wird.
- Wählen Sie ein Layout: Gitter, gerechtfertigt oder Freimaurerei Raster und Freimaurerei verwenden die Steuerung Spalten, die bei 4 auf dem Desktop, 2 auf dem Tablet und 1 auf dem Handy beginnt Justified verwendet stattdessen Row Height.
- Lassen Sie den Schalter “Alle” Filter einschalten, und benennen Sie ihn in “Alle” Filter Label um, wenn “Alle” zu vage ist.
Der Kompromiss ist, wie die Kategorien gespeichert werden Jedes Bild gehört zu der Galerie, in die man es fallen gelassen hat, also muss ein Bild, das in zwei Kategorien gehört, zweimal hinzugefügt werden Die Addon-Route unten verarbeitet das stattdessen mit einem Textfeld.
Route 2: das Master Addons Widget, Schritt für Schritt
Diese Route funktioniert auf einer kostenlosen Elementor-Installation Installieren Sie Master-Addons, stellen Sie sicher, dass das Widget der Filterbaren Bildergalerie in der Widget-Liste des Plugins aktiviert ist, und gehen Sie dann wie folgt vor.
Schritt 1: Fügen Sie das Widget und Ihre Bilder hinzu
Suchen Sie im Elementor-Panel nach einer filterbaren Bildergalerie und ziehen Sie sie hinein. Bilder werden einzeln im Repeater für Galerieinhalte hinzugefügt und nicht in einem einzelnen Medienauswahlfeld, was die Felder pro Element ermöglicht.
Spalten nimmt eine Zahl von 1 bis 6 und die Voreinstellung ist 3. Eines ist zu wissen, bevor Sie ein Layout planen: dieses Steuerelement ist nicht responsive, daher gilt auf jeder Bildschirmgröße die gleiche Spaltenanzahl, das Gitter selbst fliegt auf schmalen Bildschirmen immer noch nach, aber Sie können nicht vier Spalten auf dem Desktop und zwei auf dem Tablet aus dem Panel setzen.
Schritt 2: Geben Sie jedem Artikel ein Filteretikett
Öffnen Sie eine Repeater-Zeile und Sie erhalten die Felder, aus denen die Karte erstellt wird: das Bild, einen Titel, einen Untertitel, ein Menüband, das Popup- oder Linkverhalten, zwei Schaltflächen mit eigenen URLs und das Filteretikett.
Tippen Sie den Kategorienamen genau so ein, wie er auf der Schaltfläche gelesen werden soll, denn aus diesem Text ist die Registerkarte aufgebaut Trennen Sie mehrere Kategorien mit Kommas, wenn ein Element in mehr als eins gehört, das ist der Teil, den die Pro-Route nicht ohne Duplizierung des Bildes machen kann.
Schritt 3: Schalten Sie die Filterleiste ein und benennen Sie die Registerkarte Alle
Öffnen Sie den Abschnitt Einstellungen Filter Nav anzeigen und “Alle” Filter Tab anzeigen sind beide standardmäßig eingeschaltet, und Alle Kategorien Text setzt, was auf der ersten Schaltfläche steht “Alle Projekte”, “Alle einkaufen” und “Volles Menü” lesen sich alle besser als ein blankes “Alle”.
Schritt 4: Überprüfen Sie es am vorderen Ende
Speichern und Anzeigen der Seite Die Filterleiste rendert über dem Raster, die Registerkarte Alle ist aktiv, und durch Klicken auf eine Kategorie wird jedes Element ohne diese Beschriftung ausgeblendet.
Die Einstellungen, die das Verhalten des Filters ändern
| Einstellung | Wo | Was es tut |
|---|---|---|
| Filteretikett | Jeder Repeater-Artikel | Baut die Tabs auf Komma für mehrere Kategorien getrennt. |
| Filter Nav anzeigen | Einstellungen | Blendet die gesamte Leiste aus, wenn sie ausgeschaltet ist, wodurch Sie ein einfaches Gitter erhalten. |
| “Alle” Filter Tab anzeigen | Einstellungen | Lässt den ersten Tab fallen, wenn Besucher eine Kategorie sofort auswählen möchten. |
| Alle Kategorien Text | Einstellungen | Benennt den Reiter Alle um. |
| Bildaspektverhältnis | Einstellungen | Schneidet jede Karte auf die gleiche Höhe aus Off behält die eigenen Proportionen jedes Bildes. |
| Dachrinne | Einstellungen | Leerzeichen zwischen Karten Responsive, 0 bis 40 px, 10 standardmäßig. |
| Spalten | Inhalt | 1 bis 6, ein Wert für jede Bildschirmgröße. |
| Overlay-typ | Overlay-einstellung | Auf dem Schwebeflug, immer, nie, oder verstecken sich auf dem Schwebeflug. |
| Popup oder Links | Jeder Repeater-Artikel | Öffnet das Bild in einer Lightbox oder sendet die Karte an eine URL. |
Zwei Dinge, die das Widget nicht hat, damit Sie sie planen können: Es gibt keine Lade-Mehr-Taste und keine Paginierung, also lädt jedes Element mit der Seite, und es gibt kein Suchfeld Für ein Portfolio mit vierzig Bildern ist das auf einem anständigen Host in Ordnung, aber ein Archiv mit zweihundert Bildern möchte sich auf Seiten aufteilen.
Filterregisterkarten werden nicht angezeigt? Überprüfen Sie diese vier Dinge
Vier Dinge verursachen dies, und die ersten beiden machen den größten Teil davon aus.
- Ein leeres Filter-Etikett Ein Element ohne Etikett schließt sich nie einer Kategorie an, und wenn kein Element eines hat, gibt es nichts, woraus man Registerkarten erstellen kann.
- Filter Nav ausgeschaltet anzeigen Standardmäßig eingeschaltet, daher ist dies normalerweise die frühere Bearbeitung durch jemanden.
- Eine zwischengespeicherte Seite Seitencaches und CDNs dienen dem Markup von bevor Sie die Beschriftungen hinzugefügt haben, also löschen Sie den Cache und laden Sie ihn mit einem harten Refresh neu.
- Um ein Zeichen abweichende Beschriftungen “Portraits” und “Portraits” mit einem Nachlaufraum sind zwei Kategorien, so dass man zwei Tabs erhält, die jeweils die Hälfte des Sets halten.
Wenn die Tabs angezeigt werden, aber das Anklicken einer führt zu nichts, das Filterskript ist nicht ausgeführt Das zeigt auf einen JavaScript-Fehler von einem anderen Plugin auf derselben Seite, oder einen Skriptoptimierer, der die Datei aufschiebt JS combining für diese Seite ausschalten und erneut testen.
Häufig gestellte Fragen
Hat Elementor eine filterbare Galerie?
Nicht in der kostenlosen Version Das kostenlose Image Gallery Widget ist ein Raster mit Lightbox Elementors Gallery Widget, das mehrere benannte Galerien mit Filterleiste zeigen kann, steht auf seiner Pro-Liste.
Kann ein Bild in zwei Kategorien platziert werden?
Ja, mit der Addon-Route Beide Kategorienamen in das Feld Filternetikett setzen, getrennt durch ein Komma, und das Element zeigt unter beiden Registerkarten.
Kann ich ändern, was auf der All-Taste steht?
Ja. Alle Kategorien Text im Bereich Einstellungen setzt es, so können Sie “Alle Arbeiten”, “Alle einkaufen” oder alles andere verwenden, was zur Seite passt.
Hat die Galerie mehr Ladung oder Paginierung?
Nr. Jedes Element rendert mit der Seite Sets auf eine Größe halten, die bequem geladen wird, oder ein großes Archiv auf mehrere Seiten aufteilen.
Funktioniert die Galerie mobil?
Ja, das Gitter fliegt zurück und die Filtertasten wickeln sich ein Denken Sie daran, dass der Spaltenwert für jede Bildschirmgröße gilt, also wählen Sie eine Zahl aus, die auf einem Telefon immer noch gut liest.
Letzte Gedanken
Auf Elementor Pro bringt dich das Galerie-Widget dorthin und du installierst nichts Auf einer kostenlosen Installation macht es ein Addon-Widget, und das Feld Filter Label hat den Rand für jeden, dessen Arbeit in mehr als eine Kategorie fällt.
Welchen Weg Sie auch nehmen, verbringen Sie die Zeit mit den Kategorienamen. Vier klare Kategorien schneiden das Raster auf das herunter, wofür der Besucher gekommen ist; Neun vage verschieben das Problem einfach in die Filterleiste.
Verwandte Lektüre
