Nøgle takeaways
- Alle seks eksempler er live demo sider bygget med den samme widget, så du kan åbne hver enkelt og klikke på fanerne selv.
- Hver enkelt bruger fire kategorier plus en All-fane, som holder bjælken på en enkelt linje på en bærbar computer.
- Fanen Alle omdøbes i hvert design: “Alle fortegnelser”, “Fuld menu”, “Alt arbejde”, “Alle projekter”, “Shop alle” og “Hver destination”.
- Kolonnetællinger løber fra to for interiørcasestudier til fire for restaurantmenuen og butiksgitteret.
- To af de seks sætte knapper på hvert kort, to bruger en hover ikon, der åbner billedet, og to bruger ingen af dem.
Et filtrerbart galleri ser forskelligt ud afhængigt af, hvad det rummer. En restaurantmenu vil have tætte fire kolonnekort med priser, et interiørstudie vil have to store kolonner og et casestudielink, og en fotograf vil have billederne til at bære alt.
De seks designs nedenfor er live demo sider, du kan klikke dig igennem. Hver post noterer kategorierne, kolonnetællingen og de indstillinger, der giver den dens karakter, så du kan kopiere den form, der matcher dit indhold.
Indholdsfortegnelse
De seks eksempler på et øjeblik
| Eksempel | kategori | Varer | Kolonner | Kortlinks |
|---|---|---|---|---|
| Ejendomslister | Lejligheder, Villaer, Byhuse, Kontorer | 8 | 3 | To knapper |
| Restaurant menu | Små plader, lysnettet, desserter, cocktails | 8 | 4 | Svæveikon |
| Bryllupsfotografering | Ceremoni, Portrætter, Reception, Detaljer | 9 | 3 | Svæveikon |
| Interiørprojekter | Bolig, gæstfrihed, detailhandel, arbejdsplads | 8 | 2 | En knap |
| Produktkatalog | Tasker, Fodtøj, Ure, Overtøj | 8 | 4 | To knapper |
| Rejsemål | Europa, Asien, Amerika, Afrika | 8 | 3 | Svæveikon |
Filtrerbare gallerieksempler
1. Ejendomsoversigter
Otte lister på tværs af fire kategorier, med fanen Alle omdøbt til “Alle lister”. Hvert kort bærer egenskabsnavnet som titlen og specifikationslinjen som undertitlen, så “2 seng, 1 bad, 940 sq ft, $2.450/mo” sidder under billedet. To knapper pr. kort håndterer de to ting, en besøgende ønsker: detaljer og en visning.
Detaljen, der er værd at kopiere, er båndet: et hjørnemærke, der læser Ny eller Pris Drop på to af de otte kort, trækker øjet uden at røre layoutet.
2. Restaurant menu
Fire kolonner på en mørk baggrund, med fanen Alle, der læser “Fuld menu”. Parabolnavnet er titlen, og prisen er undertitlen, som er hele menustrukturen i to felter. Kurser bliver filteret, så en besøgende, der kun vil have dessert, kommer dertil med et klik.
Fire kolonner fungerer her, fordi billederne er stramme afgrøder af enkeltretter. Bred scenefotografering ved fire kolonner ville være ulæselig.
3. Bryllupsfotografering
Ni rammer, fire dele af dagen, og næsten ingen tekst. Fanen Alle siger “Alt arbejde”, og kortene bruger et svæveikon i stedet for knapper, så et klik åbner billedet i stedet for at navigere væk. Dette er designet til at kopiere, når fotografierne er produktet.
Det, der får det til at fungere, er, hvad det udelader: ingen bånd, ingen knapper og ingen undertekster, der konkurrerer med billederne.
4. Interiørprojekter
To kolonner, så hvert projekt får reel plads, med overlayet indstillet til at vise på alle tidspunkter i stedet for på hover. En knap pr. kort, der læser “Vis casestudie”. Filterlinjen er justeret til venstre i stedet for centreret, hvilket passer til den redaktionelle følelse.
To kolonner er valget værd at kopiere til arbejde, der fortjener et andet kig. Otte projekter ved to kolonner passer stadig i en skærm med rulning.
5. Produktkatalog
Fire kolonner, produktnavn som titlen, pris som undertitlen, og to knapper, der læser “Hurtig visning” og “Tilføj til taske”. Fanen Alle siger “Shop alle”. Det ligner en butiksside uden at være en: kortene er billeder med links snarere end produkter, så intet går i en vogn. For en lookbook, der peger på en butik, er det nok.
Mønsteret med to knapper er den nyttige del: en blød handling, en fast.
6. Rejsemål
Kontinenter som filteret, med fanen Alle omdøbt til “Hver destination”. Hover-skalaen er sat højere end de andre demoer, så kort løfter mere mærkbart under markøren. Titler navngiver stedet, og undertekster tilføjer detaljerne.
Den omdøbte fane Alle gør rigtigt arbejde her. “Hver destination” fortæller en besøgende, hvad sættet er; “Alle” fortæller dem intet.
Hvad de seks har til fælles
- Fire kategorier i alle seks designs. Fire faner plus Alle passer på én linje på en bærbar computer og ombrydes til to på en telefon.
- Fanen Alle omdøbes hver gang med seks forskellige etiketter og ingen tilbage som standard.
- Titel øverst, detalje nedenunder, i hvert design, der overhovedet bruger tekst.
- Kolonnetællingen følger fotograferingen: stramme afgrøder tager fire kolonner, scener og rum tager to eller tre.
- Et klik adfærd pr. kort, enten knapper eller et lysboksikon, aldrig begge dele.
Opbygning af en af disse
Hvert design er den samme widget med forskellige indstillinger. Opbygningen er: tilføj et element pr. billede, skriv et Filter Label på hver enkelt for at oprette fanerne, indstil Kolonner, og beslut derefter, om kort beskæres til en ensartet højde med Image Aspect Ratio eller behold deres egne proportioner. Titler, undertekster og overlejringsadfærden lever i afsnittet Overlejringsindstilling, og de to knapper sidder på hvert element.
Den fulde gennemgang er i sådan oprettes et filtrerbart galleri i Elementor, og selve widgetten er den Filtrerbart billedgalleri.
Ofte stillede spørgsmål
Kan jeg importere disse eksempler som skabeloner?
De er demo sider snarere end importerbare kits. Genopbygning af en tager omkring ti minutter, da strukturen er en håndfuld indstillinger og dine egne billeder.
Hvor mange kategorier skal en filterbar have?
Fire er mønsteret på tværs af alle seks designs. Forbi seks ombrydes baren på en bærbar computer og begynder at læse som en anden menu.
Kan ét billede vises under to faner?
Ja. Sæt begge kategorinavne i feltet Filterlabel, adskilt af et komma.
Bruger demoerne murværk?
Nej. Alle seks beskær kort til en ensartet højde, hvorfor gitrene ser ryddelige ud. Murværk er en separat kontakt til sæt med blandede orienteringer.
Kan shopeksemplet tage betalinger?
Nej. Det er et galleri med knapper, så kortene linker, hvor end du peger dem. Checkout tilhører WooCommerce.
Endelige tanker
Seks designs, en widget og fire beslutninger mellem dem: hvor mange kolonner, om kortene beskære, hvad knapperne gør, og hvad fanen Alle hedder. Start fra eksemplet tættest på dit indhold og ændre disse fire.
Relateret læsning
