Slider
1. februar 2022
Indsæt Slider
Find slideren i venstre side, og hiv det over i din row.
Overordnet toolbox
- Move: Her kan du holde fast og flytte elementet ved at trække det hen til den ønskede placering og slippe.
- Settings: Her kan du indstille din slider (det bliver gennemgået nedenfor).
- Hide/show: Her kan du skjule/vise dit element, hvis du ikke ønsker, det skal slettes.
- Duplicate: Her kan du duplikere hele dit element nedenfor.
- Remove: Her kan du slette dit element.
- Upload New Image: Her kan du uploade et billede lokalt fra din computer.
- Select from Gallery: Her kan du vælge et billede fra dit bibliotek i backend.
Edit slider
- Minimum Height: Her kan du lave en minimumshøjde for hele slideren.
Slider settings
- Autoplay: Hvis den står til Yes, vil den automatisk skifte til næste slider efter det antal sekunder, der bliver defineret nedenfor.
- Autoplay Speed: Hvis du har tilføjet Autoplay, kan du nu vælge, hvor lang tid der skal være mellem skiftene på hvert slide. Som default er den sat til 4000ms = 4 sekunder.
- Fade: Hvis du sætter den til Yes, vil slideren blive transparent, når den skifter til næste slide. Dette kan give en mere glat overgang til næste slide.
- Infinite Loop: Hvis du sætter den til Yes, vil slideren starte forfra hver gang, du er nået til ende.
- Show Arrows: Hvis du sætter den til Yes, vil der komme pile på din slider.
- Show Dots: Hvis du sætter den til Yes, vil der komme små prikker under slideren. Disse indikere hvor mange slides der er i alt og hvilket et af dem, der er synligt. De bliver kun skjult på frontend.
Advanced
- Alignment: Her kan du styre, hvordan indholdet justeres inde i din slider.
- Border: Her kan du vælge, om der skal være en kant rundt om din slider. Der er forskellige valgmuligheder, fx prikket osv.
- Border Color: Her kan du vælge farve på kanten.
- Border Width: Her kan du vælge, hvor tyk kanten skal være i pixels.
- Border Radius: Her kan du vælge, om og hvor meget afrundede hjørner kanten skal have (jo højere antal pixels, jo mere afrundet bliver hjørnerne).
- CSS Classes: Her kan du tilføje en CSS-klasse fra dit style sheet til din slider.
- Margins: Hvor meget luft, der skal være udenfor dit element.
- Padding: Hvor meget luft, der skal være inden i dit element.
Individuel Slider Toolbox
- Settings: Her kan du indstille hver enkelt slide (det bliver gennemgået nedenfor).
- Duplicate: Her kan du duplikere hele dit slide.
- Remove: Her kan du slette dit element.
Appearance
- Poster: Centrer indholdet og knappen på slideren. Hvis der bliver tilføjet et overlay, vil det være vist på hele slideren.
- Collage Left: Placerer indholdet og knappen i venstre side af slideren. Hvis der bliver tilføjet et overlay, bliver det kun vist under dette indhold.
- Collage Center: Placerer indholdet og knappen i midten af slideren. Hvis der bliver tilføjet et overlay, bliver det kun vist under dette indhold.
- Collage Right: Placerer indholdet og knappen i højre side af slideren. Hvis der bliver tilføjet et overlay, bliver det kun vist under dette indhold.
- Minimum Height: Her kan du tilføje en minimumshøjde på din slider.
Background
Her har du 3 muligheder for at ændre baggrunden; Background Color, Image eller Video.
- Background Color: Her kan du lave en baggrundsfarve i hele din slider.
- Background Image: Her kan du uploade et baggrundsbillede til din slider.
- Background Mobile Image: Her har du mulighed for at uploade en mobilversion af dit baggrundsbillede.
På mobilen behøver du ikke så store billeder, så det ville være godt for load-tiden at uploade en mobilversion også. Det kunne også tænkes, du gerne ville have en anden beskæring på mobil. - Background Size: Her kan du vælge om indholdet skal skaleres, så det fylder hele slideren, eller om det skal vises i de rigtige proportioner. Ved Auto vises default baggrundsstørrelse, som defineres i dit kundetema.
- Background Position: Her kan du styre, hvor i din slider, baggrunden skal placere sig.
- Background Attachment: Her kan du vælge, om den skal være sat til Scroll, hvor baggrunden flytter sig med ned, når man scroller, eller Fixed hvor den ikke flytter sig, når man scroller over baggrunden (virker dog ikke på mobil).
- Background Repeat: Her kan du vælge, om baggrunden skal gengive sig selv i din slider for at udfylde pladsen.
- Video URL: Her kan du indsætte en video-URL fra bl.a. Youtube og Vimeo.
- Overlay Color: Her kan du indsætte et overlay på din video, hvis du fx vil tilføje tekst på videoen. Husk at sætte transparensen ned, hvis man skal kunne se videoen igennem farven.
- Infinite Loop: Hvis denne står til Yes, vil videoen køre i loop – altså starte forfra, når afspilningen er færdig.
- Lazy Load: Hvis denne står til Yes, bliver videoen loadet fra kilden, når den bliver vist. Står den til No, loader filmen samme tid som siden og kan derfor give en længere load-tid for hele siden.
- Play Only When Visible: Hvis denne står til Yes, begynder videoen først at afspille, når videoen bliver synlig på skærmen. Står den til No, begynder afspilningen så snart, den er blevet loadet.
- Fallback Image: Her kan du indsætte et billede, som bliver vist, indtil videoen bliver loadet, eller hvis der af en eller anden grund sker en fejl, når filmen skal loades.
Content
- Message Text: Her kan du skrive det tekst, du har lyst til at tilføje til slideren (find link til kursus om tekst under “Links” ovenfor).
- Link: Her kan du vælge, hvor hen din slider skal linke til – enten ved en URL, Category, Product eller Page. Du kan nedenfor sætte flueben i checkboxen Open in new tab, hvis du ønsker, siden skal åbnes i et nyt vindue.
- Show Button: Her kan du vælge, om der skal vises en knap, og om den skal være synlig konstant eller kun ved hover.
- Button Text: Her kan du udfylde den tekst, der skal stå inden i knappen.
- Button Type: Her kan du vælge, om knappen skal være en Primary, Secondary eller Link.
- Show Overlay: Her kan du vælge, om baggrunden skal have en overlay-farve, og om den skal være der konstant eller kun ved hover.
- Overlay Color: Her kan du vælge en overlay-farve – husk at ændre transparens, hvis man skal kunne se billedet under.
Underviser
Agnes Madsen
Agnes er Graphic- & Webdesigner i Salecto.
Hun er også en del af produktudviklings teamet.