Galleri Slider

En galleriskyder parrer et stort eksempelbillede med et klikbart sæt miniaturebilleder, så besøgende kan hoppe direkte til det billede, de ønsker, i stedet for at klikke gennem et dias ad gangen. Den Galleri Slider widget i Master Addons Pro bygger dette layout på få minutter. Du vælger billederne, vælger et miniaturegitter eller karrusel og styler hver del fra Elementor-panelet.

Denne guide går gennem alle omgivelser, så du kan bygge en Elementorgalleri skyder uden at gætte, hvad hver kontrol gør.

Hvad gør Gallery Slider-widgetten #

Widgetten viser én stor forhåndsvisningsdias ved siden af et gitter eller en karrusel med miniaturebilleder. Hvis du klikker på en miniature eller en pil, ændres forhåndsvisningen. Billedtekster, automatisk afspilning, uendelig løkke, fade- eller slideovergange og separate hover-tilstande til forhåndsvisningen og miniaturebilleder er alle indbygget. Det passer til porteføljer, produktfotos, ejendomsoversigter, begivenhedsalbum eller enhver side, hvor besøgende skal gennemse et sæt billeder hurtigt.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Brug for hjælp? Se den installationsvejledning.
• A Master Addons Pro licens, fordi Gallery Slider er en Pro-widget.
• Et sæt billeder uploadet til dit mediebibliotek, ideelt set med lignende billedformater.

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

Åbn Elementor-editoren, og søg efter Galleri Slider i panelet Elementer, eller rul ned til afsnittet Mastertilføjelser. Hver Mastertilføjelser-widget bærer et lille MA-badge, som hjælper, når du har flere tilføjelsespakker installeret. Træk widgetten ind i din sektion.

Tilføj billeder i fanen Indhold #

Galleri #

Widgetten starter tom. I Content fane, åbn Galleri sektion og klik på plusknappen under Tilføj billeder.

WordPress medievinduet åbnes på Opret galleri skærm. Vælg de billeder, du vil have i skyderen, og klik derefter igennem for at indsætte galleriet. Brug et minut her til at udfylde alternativ tekst og billedtekster for hvert billede. Billedtekstfeltet betyder mere, end det ser ud: widgetten kan udskrive det under eksempelbilledet senere, og hvis der mangler en billedtekst på frontenden, er dette skærmbillede det første sted, der skal kontrolleres.

Når du har indsat galleriet, viser editoren det fulde layout med det samme: det store eksempel til venstre med navigationspile og miniaturegitteret til højre. De valgte billeder vises også inde i sektionen Galleri, hvor du kan omarrangere eller fjerne dem.

Miniaturebilleder #

The Miniaturebilleder sektionen styrer de små billeder ved siden af forhåndsvisningen.

• Miniaturebilleder: vis eller skjul miniatureområdet helt.
• Karrusel/Gitter: skift mellem et statisk gitter og en rullende karrusel.
• Billedopløsning: størrelsen WordPress tjener til miniaturebilleder. Miniaturebillede (150 x 150) holder siden lys.
• Kolonner: vælg 1 til 12 kolonner til gitteret. Flytning fra 2 til 3 kolonner ændrer gitteret fra høj og smal til en strammere blok.
• Bestilling: hold standardrækkefølgen, eller bland billederne tilfældigt.
• Billedtekst: vis en billedtekst på miniaturebilleder, eller lad den stå på Ingen.

Skift til Karrusel tilstand erstatter gitteret med en stribe af miniaturebilleder og tilføjer sin egen gruppe af indstillinger: Orientering (vandret eller lodret), Slides Per View, en Pile skift med en Pilposition dropdown, plus Autoplay, Infinite Loop, og Retning kontroller kun for miniaturestrimlen. Gitter fungerer bedre for et dusin billeder eller færre; forbi det sparer karrusellen meget lodret plads.

Preview #

The Preview sektion styrer den store rutsjebane, og hvordan den opfører sig.

• Billedopløsning: størrelsen serveret til det store billede. Fuld ser bedst ud, men vejer mest, så komprimer dine originaler.
• Link til: link eksempelbilledet til en URL-adresse eller mediefil, eller hold det på Ingen. Hvis du linker til mediefilen, kan du tænde en lysboks.
• Billedtekst: vis billedteksten under forhåndsvisningen.
• Retning: glid fra venstre mod højre eller højre mod venstre.
• Uendelig sløjfe: vend tilbage til det første slide efter det sidste.
• Auto Højde: lad skyderen justere sin højde til hvert billede. Praktisk til blandede forhold, selvom siden vil skifte lidt, efterhånden som dias ændres.
• Autoplay: fremfør slides automatisk. Klik på redigeringsikonet for at justere det.
• Effekt: Slide, Fade, Cube, Flip eller Coverflow. Med Fade, en Ken Burns option tilføjer en langsom zoom med skala, transform oprindelse, varighed og lempelse.
• Hastighed (ms): hvor længe overgangen varer. Standarden er 1000.
• Pile: vis eller skjul navigationspilene, og vælg deres Position, såsom Top Venstre.

Design skyderen i fanen Stil #

Layout #

The Layout sektion bestemmer, hvor forhåndsvisningen sidder i forhold til miniaturebillederne. Forhåndsvisningsposition tilbyder Top, Højre, Bund og Venstre. Med Top eller Bund, miniaturebillederne linje op under eller over forhåndsvisningen og en Vandret Juster kontrol vises med en Karrusel Bredde slider. Med Venstre eller Højre får du en Forhåndsvisningsbredde (%) skyder i stedet.

• Stak på: vælg, når layoutet stables lodret, som f.eks. Tablet & Mobil.
• Forhåndsvisningsbredde (%): hvor meget vandret plads forhåndsvisningen tager. Et sted mellem 60 og 70 procent sidder pænt ved siden af et tre-søjlet gitter.
• Spatiering: afstanden mellem forhåndsvisningen og miniaturebillederne.

Preview #

Fanen Stil Preview sektion styler den store diasbeholder.

• Brugerdefineret højde: tilsidesæt den automatiske højde.
• Baggrundsfarve: udfylder området bag billedet.
• Kanttype: Standard, Ingen, Solid, Dobbelt, Prikket, Stiplet eller Groove, med bredde- og farvekontroller, når de er aktive.
• Border Radius og Box Shadow: rund hjørnerne og løft sliden af siden.
• Pile: en dedikeret gruppe med Størrelse, Polstring, Grænseradius, Transition, og adskille Default, Hover, og Handicappede stater, hver med sin egen farve og baggrundsfarve.

Forhåndsvisning billedtekster #

Hvis du har aktiveret billedtekster på fanen Indhold, placerer og styler dette afsnit dem. Lodret justering placerer billedteksten øverst, midt eller nederst på sliden, og Vandret Juster tilbud venstre, center, højre, og begrunde. Du får også Typografi, Polstring, Margin, Border Type, og Grænseradius kontroller.

Forhåndsvisning af Hover Effects #

Forhåndsvisning af Hover Effects animerer billedteksten, når besøgende holder markøren over sliden. Vælg en Effekt, indstil Transition, stil derefter den Default og Hover tilstande med farve, baggrundstype, opacitet og tekstskygge.

Miniaturebilleder #

Fanen Stil Miniaturebilleder sektion håndterer de små billeder: Lodret justering for hele blokken, Vandret afstand og Lodret afstand mellem miniaturer, plus Border Type og Grænseradius.

Miniaturebilleder Hover Effects #

Dette afsnit styler miniaturebilleder på tværs af tre tilstande: Default, Hover, og Aktiv (miniaturebilledet, der matcher det aktuelle dias). Den Images gruppe dækker baggrundsfarve, Opacitet, Scale, Box Shadow, og CSS-filtre. Ud af boksen sidder inaktive miniaturebilleder ved 0,65 opacitet, så den aktive skiller sig ud. Den Overlay gruppe tilføjer et farve- eller forløbslag med Blandingstilstand, Margin, Opacitet, og grænsekontrol.

Der er også en Mønstre sektion nederst på fanen Stil med færdiglavede stilforudindstillinger. Det samme afsnit vises i mange Master Addons-widgets.

Se live resultatet #

Klik på øjeikonet for at få vist et eksempel på siden. Besøgende ser miniaturegitteret ved siden af den store forhåndsvisning. Hvis du klikker på et miniaturebillede, skiftes forhåndsvisningen med det samme, pilene går gennem dias i rækkefølge, og billedteksten følger hvert billede.

Almindelige brugstilfælde #

• Porteføljefremviser: ét stort heltebillede med resten af projektet et klik væk.
• Produktsider: det klassiske butikslayout med en zoomet forhåndsvisning og miniaturevælger.
• Fast ejendom lister: lad købere bladre gennem værelser uden at forlade siden.
• Begivenhed eller bryllup albums: marker ét billede, mens du holder det fulde sæt synligt.

Tips til en bedre galleri skyder #

• Match billedformatforhold. Auto Højde forhindrer beskæring overraskelser, men ensartede forhold ser renere og stoppe layoutet fra at hoppe.
• Tjen de rigtige beslutninger. Fuld til forhåndsvisningen, Miniaturebillede (150 x 150) til gitteret. Komprimer før upload; se vores guide til bedste WordPress billede optimizer plugins.
• Skriv billedtekster i Mediebiblioteket før du indsætter galleriet, så hver slide er klar.
• Hold autoplay hastighed rimelig. Giv besøgende tid til rent faktisk at se hvert billede.
• Brug tilstanden Aktiv. Standard 0,65 opacitet på inaktive miniaturebilleder styrer allerede øjet; en kant eller en lille skala på det aktive miniaturebillede gør det endnu tydeligere.

Video Tutorial #

Foretrækker du at se opsætningen i stedet? Denne video dækker hele processen, fra at trække widgetten ind til den færdige skyder på live-siden:

Ofte stillede spørgsmål #

Indpakning #

Master Addons Galleri Slider widget (Pro) dækker hele preview-plus-thumbnails-mønsteret: gitter- eller karruselminiaturebilleder, forhåndsvisningen på enhver side, billedtekster og stil pr. tilstand, alt sammen fra ét panel og uden brugerdefineret kode.

For flere måder at vise billeder på, tjek Billedkarrusel, Filtrerbart Galleri, og Avanceret billede dokumenter, eller sammenlign muligheder i vores Elementor billedkarruselguide. For at se alt andet i plugin'et, gennemse Master Addons widgets og udvidelser samling eller den prisplaner.