Filtrerbart billedgalleri

Et almindeligt billedgitter giver besøgende ingen mulighed for at gennemse efter emne. Den Filtrerbart billedgalleri widget i Master Addons til Elementor løser det. Det tilføjer kategorifiltre, hover-overlejringer, bånd og lightbox-links til et standardgalleri, så du kan opbygge en filtrerbar portefølje eller produktudstilling uden at skrive nogen kode.

Sådan fungerer hver fane og indstilling, så du kan konfigurere en Elementor filtrerbart galleri uden at gætte på, hvad vipperne gør.

Denne side er indstillingsreferencen. For live eksempler og en oversigt over, hvad widgetten kan gøre, besøg Elementor filtrerbar galleri widget page.

Hvad gør widgetten Filterable Image Gallery #

Widgetten viser et gitter af billeder og lader besøgende filtrere dem efter kategori. Hvert gallerielement understøtter en titel, undertekst, bånd, hoverikon og to handlingsknapper. Layout, afstand, overlejringsanimation og typografi styres alle fra Elementor-panelet, så den samme widget fungerer for porteføljer, e-handelsopslagsbøger, rejsegallerier og teamets fotovægge.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Brug for hjælp? Se den installationsvejledning.
• Billeder grupperet i kategorier, du vil have besøgende til at filtrere efter.

Sådan tilføjes Elementor Filterable Gallery-widgetten #

Åbn Elementor-editoren, og søg efter Filtrerbart Galleri i panelet Elementer, eller rul ned til afsnittet Mastertilføjelser. Træk widgetten over på din side. Den indlæses med gallerielementer til pladsholdere, så du har noget på skærmen, du kan arbejde med med det samme.

Opbyg dit galleri på fanen Indhold #

The Content faneblad er det sted, hvor du tilføjer billeder, tildeler filterkategorier og opsætter bånd og links.

Galleri Indhold #

The Galleri Indhold sektion er en repeater. Hvert element repræsenterer ét billedkort. Klik Tilføj vare for at oprette flere kort, eller brug dublet- og sletteikonerne til at administrere dem.

Hver vare har de samme felter:

• Filter Etiket: den kategori besøgende bruger til at filtrere. Eksempler: Teknologi, Natur, Arkitektur.
• Images: klik for at åbne medievælgeren og vælg billederne til dette kort. Du kan vælge flere på én gang.
• Titel: hovedoverskriften vist under eller over billedet.
• Undertitel: en mindre linje under titlen.
• Vis bånd?: skift for at tilføje et hjørne- eller inline-badge.
• Bånd: badgeteksten, såsom Populær eller Ny.
• Popup eller Links?: vælg, om kortet åbner en lightbox-popup eller linker til en URL.
• Knap En Tekst / URL: etiket og destination for den første handlingsknap.
• Knap To Tekst / URL: etiket og destination for den anden handlingsknap.

Billedopløsning og kolonner #

Under repeateren skal du indstille Billedopløsning WordPress bør tjene og antallet af Kolonner. Seks kolonner giver dig små miniaturebilleder; drop til tre, når du vil have større kort med læsbare titler. Vælg en opløsning tæt på den faktiske visningsstørrelse, ellers indlæser du billeder i fuld størrelse i små kort, og siden betaler for det.

Indstillinger #

The Indstillinger sektion styrer den overordnede galleriadfærd.

• Vis Filter Nav?: viser kategorifilterknapperne over gitteret.
• Vis “Alle” Filter Tab: tilføjer en Alle-knap, så besøgende kan nulstille filteret.
• Alle kategorier Tekst: etiketten til nulstillingsknappen, normalt Alle.
• Vis værktøjstip?: aktiverer værktøjstip på filterknapper.
• Billedaspektforhold: fremtvinger et ensartet forhold på tværs af hvert billede.
• Rendesten: mellemrummet mellem gitterelementer.
• Murværk: skifter gitteret til et murværk layout for ujævne billedhøjder.
• Hover Scale: zoomer billedet lidt på hover.
• Skala Værdi: hvor meget billedet zoomer, såsom 1.1.
• Tilt Effekt: tilføjer en 3D-hældning, der følger markøren.

Overlay Indstilling #

The Overlay Indstilling sektion bestemmer, hvad der vises, når en besøgende svæver over et element.

• Vis titel?: vis varetitlen på hover.
• Vis undertitel?: vis undertitlen på hover.
• Vis Kategori?: vis filterkategorimærket.
• Hoverikon?: tilføj et ikon, der vises på hover, såsom et forstørrelsesglas eller linksymbol.
• Overlejringstype: vælg, hvornår overlægningen vises. På Hover er den mest almindelige.
• Billedtekst: skift billedtekstområdet under billedet.
• Hover Retning: muliggør retningsbestemte svæveeffekter.

Style galleriet i fanen Style #

The Style fanen dækker kortbeholderen, billedet, overlejringen og knapperne.

Item Style #

Item Style styrer kortomslaget. Indstil polstring, margin, kanttype, kantbredde, kantfarve og kantradius her. En tynd kant med en lille radius er en hurtig måde at adskille kort fra en lys baggrund.

Image Style #

Image Style styler selve billedet og dets svævetilstand.

• Billedstil: vælg standard- eller et svæveoverlejringslook.
• Hover Overlay Farve: nuancen, der dækker billedet på hover.
• Titel Stil: farve og typografi for varetitlen.
• Billedtekst Undertekst Stil: farve og typografi til undertitlen.
• Ikon stil: ikonstørrelse og farve for svæveikonet.

Overlay #

The Overlay sektion vælger svæveanimationen. Valgmulighederne omfatter Fade In, Slide From Left, Slide From Top, Mask From Bottom, Rotate In, Zoom In og Scale Up. Fade In er den sikre standard; slide- og rotervarianterne henleder mere opmærksomhed på sig selv, som du måske eller måske ikke ønsker på en portefølje.

Knap et og to stil #

Style handlingsknapperne separat. Hver knap har Normal- og Hover-tilstande med kontrolelementer til typografi, udfyldning, tekstfarve, baggrundsfarve, kant, grænseradius og boksskygge.

Se live resultatet #

Udgiv eller se et eksempel på siden for at se det endelige galleri. Besøgende kan holde markøren over et element for at se overlejringen, titlen og ikonet, eller klikke for at åbne lysboksen eller linket. Hvis du har aktiveret filternavigationen, kan de også klikke på kategoriknapper for kun at vise matchende billeder.

En ting at kontrollere: Hvis filterknapperne ikke reagerer på live-siden, men fungerer fint i editoren, udskyder eller kombinerer dit caching- eller optimeringsplugin sandsynligvis galleriets JavaScript. Udeluk Master Addons-scripts fra JS-optimering og ryd cachen.

Almindelige brugstilfælde #

• Porteføljesider: lad kunder filtrere efter branding, webdesign eller fotografering.
• Produktkataloger: gruppér elementer efter kategori, farve eller samling.
• Rejse eller fast ejendom gallerier: filtrer efter placering eller ejendomstype.
• Team- eller eventalbum: organiser billeder efter afdeling eller session.

Tips til et bedre filtrerbart galleri #

• Brug ensartede billedstørrelser. Det holder gitteret pænt, især når murværket er slukket.
• Hold filteretiketter korte. Et eller to ord passer bedst til filterbjælken.
• Aktiver billedformatforhold hvis dine kildebilleder har forskellige dimensioner.
• Vælg en stærk svæveeffekt i stedet for at stable skala, hældning og en optaget overlejring.
• Komprimer billeder før upload. Et galleri fyldt med ukomprimerede fotos er en af de mest almindelige årsager til en langsom side.

Video Tutorial #

Hvis du gerne vil se widgetten Filterable Gallery i aktion, går denne video gennem hele opsætningen, fra tilføjelse af gallerielementer til det filtrerede gitter på livesiden:

Ofte stillede spørgsmål #

Indpakning #

Master Addons Filtrerbart billedgalleri widget forvandler et statisk billedgitter til et kategoribaseret galleri, besøgende faktisk kan gennemse. Filternavigation, svæveoverlejringer, bånd og lightbox-understøttelse er alle indbygget, så du behøver ikke et separat galleri-plugin til de fleste projekter. Du kan se det arbejde på Filtrerbar billedgalleri-widgetside.

For flere billedværktøjer, udforsk Avanceret billedwidget, Billedkarrusel, og Galleri Slider. Du kan også læse vores roundup af Elementor filtrerbare galleri plugins eller gennemse hele Master Addons widgets og udvidelser collection.