Banner
1. februar 2022
Indsæt Banner
Find banneret i venstre side, og hiv det over i din row.
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 dit banner (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.
Appearance
- Poster: Centrer indholdet og knappen på banneret. Hvis der bliver tilføjet et overlay, vil det være vist på hele banneret.
- Collage Left: Placerer indholdet og knappen i venstre side af banneret. Hvis der bliver tilføjet et overlay, bliver det kun vist under dette indhold.
- Collage Center: Placerer indholdet og knappen i midten af banneret. 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 banneret. 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å dit banner.
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 dit banner.
- Background Image: Her kan du uploade et baggrundsbillede til dit banner.
- 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 banneret, 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 dit banner, 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 dit banner 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 banneret (find link til kursus om tekst under “Links” ovenfor).
- Link: Her kan du vælge, hvor hen dit banner 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.
Advanced
- Alignment: Her kan du styre, hvordan indholdet justeres inde i dit banner.
- Border: Her kan du vælge, om der skal være en kant rundt om dit banner. 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 dit banner.
- Margins: Hvor meget luft, der skal være udenfor dit element.
- Padding: Hvor meget luft, der skal være inden i dit element.
Underviser
Agnes Madsen
Agnes er Graphic- & Webdesigner i Salecto.
Hun er også en del af produktudviklings teamet.