Rows
1. februar 2022
Indsæt Row
For at indsætte en Row skal du hive den over på den hvide del af din Page Builder. Du kan slippe den, når der kommer en rød streg.
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 row (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.
Appearance
- Contained: Her vil alt indholdet følge det grid, som er defineret af dit kundetema.
- Full Width: Her vil baggrunden gå helt til kanten, men hvis du fx tilføjer tekst, vil det stadig følge det grid, der er defineret af dit kundetema.
- Full Bleed: Her vil alt indhold gå helt til kanterne af siden – altså både baggrund og indhold såsom tekst osv.
- Minimum Height: Her kan du tilføje en minimumshøjde. Det skal angives i enten Pixels eller Procent.
- Vertical Alignment: Her kan du vælge hvor indholdet placere sig vertikalt inde i din row.
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 row.
- Background Image: Her kan du uploade et baggrundsbillede til din row.
- 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 mobilvariant også – eller det kunne 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 din row, eller om det skal vises i de rigtige proportioner. Ved Auto vises default baggrundsstørrelse, som bliver defineret i dit kundetema.
- Background Position: Her kan du styre, hvor i din row 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 du scroller, eller Fixed hvor den ikke flytter sig, når du scroller over baggrunden (NB. Virker dog ikke på mobil).
- Background Repeat: Her kan du vælge, om baggrunden skal gengive sig selv i din row 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. Hvis den står til No, loader filmen på 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.
Parallax Background
- Enable Parallax Background: Hvis du sætter den til Yes, kan du styre hastigheden, når du scroller over din row.
- Parallax Speed: Her kan du indsætte en værdi mellem -1.0 og 2.0. Negative værdier får baggrunden til at scrolle i negativ retning. Værdier fra 0-1 får baggrunden til at scrolle langsommere og fra 1-2 hurtigere. En værdi på 0 får baggrunden til at side fast ved scroll, og 1 vil være samme tempo som almindeligt scroll.
Advanced
- Alignment: Her kan du styre, hvor indholdet i din row skal placeres.
- Border: Her kan du vælge, om der skal være en kant rundt om din row.- Der er forskellige valgmuligheder, fx prikket osv.
- Border Color: Her kan du vælge farve på stregen.
- 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 stylesheet til din row.
- 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.