Sådan oprettes en billedkarrusel i Elementor

Drop the Billede Karrusel widget på siden skal du vælge dine billeder fra mediebiblioteket, indstille slides-per-view for hver enhed og slå automatisk afspilning til. Fire trin, cirka to minutter, og ingen licens nødvendig.

Det er den korte version. Resten af dette dækker de indstillinger, der adskiller en karrusel, der fungerer fra en, der ser lidt forkert på telefoner, plus coverflow layout, lysboksen, og de to billedfejl, der gør en ellers fin karrusel langsom. Ikke sikker på et billede karrusel er endda den rigtige form? Den fuld karrusel widget lineup sammenligner hver type på ét sted, og den karrusel versus skyderen opdeling afregner navngivningen.

Hvad du har brug for

Elementor gratis og Master Addons gratis. Elementors egen billedkarrusel eksisterer, men har ingen dias-tekster og begrænset responsiv kontrol, så denne gennemgang bruger Master Addons Billedkarrusel, som også er gratis og tilføjer billedtekster, en lightbox og et coverflow-layout.

Trin 1: Tilføj widgetten

Åbn siden i Elementor, og søg i widgetpanelet efter “billedkarrusel.” Træk den ind i en beholder.

Det gengives med pladsholderbilleder, så du kan se figuren, før du begår noget indhold. Lad dem ligge indtil videre. Det er nemmere at konfigurere layoutet mod ensartede pladsholdere end mod dine rigtige billeder, som alle er forskellige størrelser.

Trin 2: Tilføj dine billeder

Klik på gallerifeltet og vælg fra mediebiblioteket, eller upload. Ordreforhold og træk-for-at-genbestille værker, så sæt dit stærkeste billede først, for på mobilen er det måske det eneste, nogen ser.

Under indholdsindstillingerne finder du billedstørrelse, billedtekstkilde og linkadfærd.

Billedstørrelse er den indstilling, folk forlader på Fuld og fortrydelse. Fuld betyder den oprindelige upload: en 4000px kamera eksport serveret i en 400px slide. WordPress allerede genereret mindre versioner; pick medium_large eller large og du vil skære karrusellens vægt med det meste uden nogen synlig forskel.

Billedtekster træk fra mediebibliotekets billedtekst eller beskrivelse-felt, så hvis slides har brug for tekst, skal du skrive det der i stedet for at lede efter en per-slide tekstboks i widgetten.

Trin 3: Navigation

Pile, prikker, brøk eller en rullepanel. Vælg ud fra, hvor mange slides du har:

• Under 8 slides: prikker. Folk kan se hele sættet med et blik og hoppe rundt.
• 8 til 20: kun pile. Tyve prikker er en smøre, ikke en kontrol.
• Over 20: pile plus brøk (“04 / 32”). Tallet er det eneste, der fortæller nogen, hvor de er.

På mobil skal du kontrollere pilens størrelse. Desktop-standarden er ofte et 30px-mål, og det tilgængelige minimum for et tryk er 44px. Bump det på mobilens breakpoint eller slip pile helt og stole på swipe.

Trin 4: Karruseladfærd

Det er panelet, der afgør, om karrusellen føles rigtig.

Slides pr. visning: indstil det tre gange. Klik på enhedsikonerne øverst i indstillingen og giv desktop, tablet og mobil deres egen værdi. Fire, to, en er den sikre standard. Dette enkelt trin er forskellen mellem en karrusel, der fungerer på telefoner, og en, der viser fire sammenklemte miniaturebilleder.

Slides til at rulle. Indstil det til 1 for en kontinuerlig browsing-følelse, eller match slides-per-view for side-stil personsøgning. Matching er bedre, når slides danner grupper; 1 er bedre for et langt udifferentieret sæt.

Autoplay. Slå det til for dekorative gallerier. Sluk det, hvis diasene er klikbare, fordi nogen vil række ud efter et billede og klikke på det, der erstattede det. Pause-on-hover dækker skrivebordet, men der er ingen hover ved berøring.

Infinite loop har brug for nok dias. Swiper kloner dias til at forfalske wrap, og det har brug for mindst fordoble dine dias-per-view. Fire billeder på tre-per-view vil synligt hoppe. Tilføj billeder eller slå løkken fra.

Speed. 300 til 500ms. Under 200 ligner det et snit snarere end en overgang; over 800 personer begynder at klikke to gange.

Coverflowlayoutet

Skift layout fra standard til dækselstrøm, og sideslæderne roterer væk i 3D, dæmpes og trækkes tilbage, så midterslæden efterlades som den eneste læsbare.

Det passer til porteføljer og casestudier, alt hvor et billede ad gangen er pointen. Det er forkert for alt, hvad folk skal sammenligne, fordi hele designet er til for at forhindre dig i at se på naboerne.

To indstillinger for at komme til højre: roter mellem 30 og 40 grader (forbi 50 og sideslidsene bliver ulæselige skiver), og centrerede slides på, eller det aktive billede sidder flush til venstre, og kompositionen kollapser.

Coverflow er en af fire dybdebaserede stilarter. Flip, bue og kredsløb er de tre andre, og den Elementor 3D karrusel guide dækker over, hvad hver enkelt er god til.

Styling af diasene

Fanen Style håndterer afstanden mellem slides, grænseradius, skygger og svævetilstande.

Indstillingen værd at tænke over er gap. Nul mellemrum gør karrusellen læses som én kontinuerlig billedstrimmel, hvilket er rigtigt for et panorama og forkert for særskilte elementer. 16 til 24px er det område, hvor dias læses som separate kort, uden at rækken ser sparsom ud.

Hover effekter (skala, overlay, billedtekst afsløring) gælder for hele sættet, ikke pr. slide. Hold skalaen under 1,05. Et slide, der vokser 15% på hover, skubber ind i sine naboer og ligner en layoutfejl.

Lightbox og billedtekster

Tænd for lysboksen, og hvis du klikker på et dias, åbnes billedet i fuld størrelse over siden, med dets egne næste og tidligere kontroller, der går gennem hele karrusellen.

Dette er grunden til at bruge en karrusel snarere end et gitter til fotografering. Karrusellen er indekset; lyskassen er seeren. Titler og undertekster bære igennem i lyskassen, så billedtekst en gang, og det virker begge steder. Hvis du vil have indekset synlig på siden som en miniature strip snarere end skjult bag et klik, det er den Galleri Slider widget i stedet, som har brug for Pro.

En advarsel: lysboksen serverer billedet i fuld størrelse, ikke miniaturebilledet. Hvis du indstiller billedstørrelse til medium_large for karrusellen og dine originaler er 8MB kamerafiler, vil lysboksen stadig hente 8MB versionen. Komprimer originalerne ved upload, ikke kun displaystørrelsen.

Hvis du vil have miniature navigation

Billedkarrusellen er en enkelt række. Der er ingen miniaturestrimmel, der driver en stor forhåndsvisning. Hvis det todelte layout er det, du leder efter, skal du importere Vitrine Plade Galleri i stedet er et af de gratis designs i slider skabeloner samling: en enkelt plade under en miniaturestrimmel, med et billedtekstpanel, der indeholder en redigerbar ramme-datatabel til sted, tid, linse, blænde, lukker og ISO. Det blev bygget til fotografering. Den samme preview-plus-miniaturebilleder form er, hvad de fleste mennesker mener, når de beder om en videokarrusel, og den video karrusel og galleri skyder guide dækker den version.

Live Demo

For at importere det: Master Addons → Widget Builder → Import Widget, træk JSON i, og det vises i Elementor under Favoritter. Det kører på det gratis plugin, ingen Pro licens nødvendig. Den samme samling har den Plinth Hero Slider, en fuldblods helte skyder med per-slide links, som også er gratis at importere. Tyve navngivne designs i alt, otte af dem gratis.

Pil styling

Størrelse, farve, baggrund, grænseradius og position: inde i karrusellen, uden for den eller overlappende kanter.

Pile placeret uden for karrusellen har brug for vandret rum, og på en fuld bredde container er der ikke nogen. De vil klippe. Enten holde containeren smallere end viewport eller placere pilene inde.

Resultatet

Før du kalder det gjort, indlæse siden på en faktisk telefon over cellulære. Ikke browserens enhed emulator, som ændrer størrelsen på viewport men holder dit skrivebords forbindelse og GPU. De fleste karrusel problemer vises kun på ægte hardware på et rigtigt netværk.

To fejl, der gør en karrusel langsom

Serverer billeder i fuld størrelse. Overdækket, og det er den store. En ti-slide karrusel i Fuld størrelse på et fotograferingssted kan være 20MB. Den samme karrusel kl large er under 2MB, og ingen kan fortælle det.

Sætter den over folden med autoplay på. Karrusellen bliver din største indholdsrige maling, og autoplay betyder, at browseren animerer under det mest ydelsesfølsomme sekund af sideindlæsningen. Hvis en karrusel skal være øverst, skal du slå autoplay fra og lade den sidde stille, indtil siden har lagt sig.

Logoer er et andet job end fotografier. De dukker op i uoverensstemmende former og farver og skal udjævnes, før de sidder på række, hvilket de logo karruselgennemgang går igennem.

Ofte stillede spørgsmål