Wichtige Erkenntnisse
- Bei allen sechs Beispielen handelt es sich um Live-Demoseiten, die mit demselben Widget erstellt wurden, sodass Sie jedes einzelne öffnen und selbst auf die Registerkarten klicken können.
- Jede verwendet vier Kategorien plus einen All-Tab, der die Leiste auf einer einzigen Zeile eines Laptops hält.
- Der Reiter Alle wird in jedem Design umbenannt: “Alle Einträge”, “Volles Menü”, “Alle Arbeiten”, “Alle Projekte”, “Alle einkaufen” und “Jedes Ziel”.
- Die Spaltenanzahl reicht von zwei für Innenräume und vier für die Restaurantkarte und das Ladenraster.
- Zwei der sechs Stecktasten auf jeder Karte, zwei verwenden ein Hover-Symbol, das das Bild öffnet, und zwei verwenden keines von beiden.
Eine filterbare Galerie sieht je nach Inhalt anders aus. Eine Restaurantkarte möchte dichte vierspaltige Karten mit Preisen, ein Innenstudio möchte zwei große Säulen und einen Fallstudienlink und ein Fotograf möchte, dass die Bilder alles tragen.
Die sechs Designs unten sind Live-Demoseiten, durch die Sie klicken können Jeder Eintrag notiert die Kategorien, die Spaltenanzahl und die Einstellungen, die ihm seinen Charakter verleihen, sodass Sie die Form kopieren können, die zu Ihrem Inhalt passt.
Inhaltsverzeichnis
Die sechs Beispiele im Überblick
| Beispiel | Kategorien | Gegenstände | Spalten | Kartenlinks |
|---|---|---|---|---|
| Immobilieneinträge | Wohnungen, Villen, Stadthäuser, Büros | 8 | 3 | Zwei Tasten |
| Restaurantmenü | Kleine Teller, Zinnen, Desserts, Cocktails | 8 | 4 | Schwebesymbol |
| Hochzeitsfotografie | Zeremonie, Porträts, Empfang, Details | 9 | 3 | Schwebesymbol |
| Innenprojekte | Wohnen, Gastgewerbe, Einzelhandel, Arbeitsplatz | 8 | 2 | Ein Knopf |
| Produktkatalog | Taschen, Schuhe, Uhren, Oberbekleidung | 8 | 4 | Zwei Tasten |
| Reiseziele | Europa, Asien, Amerika, Afrika | 8 | 3 | Schwebesymbol |
Filterbare Galeriebeispiele
1. Immobilieneinträge
Acht Listings über vier Kategorien hinweg, wobei der Reiter Alle in “Alle Listings” umbenannt wurde Jede Karte trägt den Eigenschaftsnamen als Titel und die Spezifikationszeile als Untertitel, so dass unter dem Foto “2 Bett, 1 Bad, 940 qm ft, $2.450/mo” zwei Knöpfe pro Karte die beiden Dinge handhaben, die ein Besucher haben möchte: Details, und eine Betrachtung.
Das zu kopierende Detail ist das Band: Ein Eckabzeichen mit der Aufschrift Neu oder Preis fallen auf zwei der acht Karten zieht das Auge, ohne das Layout zu berühren.
2. Restaurantmenü
Vier Spalten auf dunklem Hintergrund, wobei auf dem Reiter Alle “Volles Menü” steht, der Gerichtname ist der Titel und der Preis der Untertitel, das ist die ganze Menüstruktur in zwei Feldern Kurse werden zum Filter, so dass ein Besucher, der nur Dessert will, mit einem Klick dort ankommt.
Vier Spalten funktionieren hier, weil die Fotos enge Ernten von Einzelschalen sind Breites Szenenfotografieren an vier Spalten wäre unlesbar.
3. Hochzeitsfotografie
Neun Frames, vier Teile des Tages, und fast kein Text Auf der Registerkarte „Alle Arbeit“steht „Alle Arbeit” und die Karten verwenden ein Hover-Symbol anstelle von Schaltflächen, sodass ein Klick das Bild öffnet, anstatt wegzunavigieren. Dies ist das Design, das kopiert werden soll, wenn die Fotos das Produkt sind.
Was es zum Funktionieren bringt, ist das, was es weglässt: keine Bänder, keine Knöpfe und keine Untertitel, die mit den Bildern konkurrieren.
4. Innenprojekte
Zwei Spalten, so erhält jedes Projekt echten Raum, wobei das Overlay so eingestellt ist, dass es jederzeit angezeigt wird, anstatt mit dem Mauszeiger Ein Knopf pro Karte, der “Fallstudie anzeigen” liest Die Filterleiste ist links ausgerichtet und nicht zentriert, was dem redaktionellen Gefühl entspricht.
Zwei Spalten sind die Wahl, die es wert ist, für Arbeiten kopiert zu werden, die einen zweiten Blick verdienen Acht Projekte in zwei Spalten passen immer noch in einen Bildschirm des Scrollens.
5. Produktkatalog
Vier Spalten, Produktname als Titel, Preis als Untertitel, und zwei Knöpfe mit der Aufschrift “Schnellansicht” und “Zur Tasche hinzufügen” Auf dem Reiter Alle steht “Alles einkaufen” Es sieht aus wie eine Shopseite, ohne eine zu sein: Die Karten sind eher Bilder mit Links als Produkte, also geht nichts in einen Warenkorb Für ein Lookbook, das auf einen Laden zeigt, reicht das.
Das Zwei-Tasten-Muster ist der nützliche Teil: eine weiche Aktion, eine feste.
6. Reiseziele
Kontinente als Filter, wobei der Reiter Alle in “Jedes Ziel” umbenannt wurde Die Hover-Skala ist höher eingestellt als bei den anderen Demos, so heben Karten deutlicher unter dem Cursor Titel nennen den Ort und Untertitel fügen das Detail hinzu.
Der umbenannte Reiter Alle leistet hier echte Arbeit “Jedes Ziel” sagt einem Besucher, was das Set ist; “Alle” sagen ihnen nichts.
Was die Sechs gemeinsam haben
- Vier Kategorien in allen sechs Designs Vier Tabs plus Alle passen auf eine Zeile eines Laptops und wickeln sich auf einem Telefon zu zwei.
- Die Registerkarte Alle wird jedes Mal umbenannt, mit sechs verschiedenen Beschriftungen und keiner übrig bei der Voreinstellung.
- Titel oben, Detail darunter, in jedem Design, das überhaupt Text verwendet.
- Die Kolumnenzählung folgt der Fotografie: Enge Ernten umfassen vier Kolumnen, Szenen und Räume zwei oder drei.
- Ein Klickverhalten pro Karte, entweder Schaltflächen oder ein Lightbox-Symbol, niemals beides.
Bauen Sie eine davon
Jedes Design ist das gleiche Widget mit unterschiedlichen Einstellungen Der Build ist: pro Bild ein Element hinzufügen, auf jedem ein Filter Label eingeben, um die Tabs zu erstellen, Spalten setzen, dann entscheiden, ob Karten mit Image Aspect Ratio auf eine einheitliche Höhe zuschneiden oder ihre eigenen Proportionen beibehalten Titel, Untertitel und das Overlay-Verhalten live im Overlay-Einstellabschnitt, und die beiden Tasten sitzen auf jedem Element.
Die vollständige Komplettlösung ist in So erstellen Sie eine filterbare Galerie in Elementorund das Widget selbst ist das Filterbare Bildergalerie.
Häufig gestellte Fragen
Kann ich diese Beispiele als Vorlagen importieren?
Es sind eher Demoseiten als importierbare Kits. Der Wiederaufbau dauert etwa zehn Minuten, da die Struktur aus einer Handvoll Einstellungen und eigenen Bildern besteht.
Wie viele Kategorien sollte eine Filterleiste haben?
Vier ist das Muster über alle sechs Designs Nach sechs wickelt sich die Leiste auf einem Laptop und beginnt wie ein zweites Menü zu lesen.
Kann ein Bild unter zwei Tabs angezeigt werden?
Ja. Beide Kategorienamen in das Feld Filternetikett setzen, getrennt durch ein Komma.
Verwenden die Demos Mauerwerk?
Nr. Alle sechs Crop-Karten auf eine einheitliche Höhe, weshalb die Gitter aufgeräumt aussehen Freimaurerei ist ein separater Schalter für Sets mit gemischten Ausrichtungen.
Kann das Shop-Beispiel Zahlungen nehmen?
Nein. Es ist eine Galerie mit Schaltflächen, also verlinken die Karten überall, wo Sie sie zeigen Die Kasse gehört zu WooCommerce.
Letzte Gedanken
Sechs Designs, ein Widget und vier Entscheidungen zwischen ihnen: wie viele Spalten, ob die Karten zuschneiden, was die Schaltflächen tun und wie die Registerkarte Alle heißt Beginnen Sie mit dem Beispiel, das Ihrem Inhalt am nächsten liegt, und ändern Sie diese vier.
Verwandte Lektüre
