Column
1. februar 2022
Indsæt Column
Som default indsættes der 2 lige store kolonner. Du kan altid justere størrelsen ved at hive i siderne eller indsætte en ekstra ved at hive flere over fra værktøjslinjen i venstre side.
Column Grid
Sørger for, at indholdet bliver vist, som det skal både på desktop og mobile enheder. Det er som standard delt op i 12. Når du hover over en kolonne, kan du se, hvor mange af de 12 grids den pågældende kolonne fylder.
Toolbox
- Move: Her kan du holde fast og flytte elementet ved at trække den hen til den ønskede placering og slippe.
- Settings: Her kan du indstille din kolonne (det bliver gennemgået nedenfor).
- Duplicate: Her kan du duplikere hele dit element nedenfor.
- Remove: Her kan du slette dit element.
Appearance
- Full height: Kolonnen strækker sig, så den fylder hele højden på containeren.
- Top aligned: Kolonnen ligger sig i toppen af containeren.
- Centered: Kolonnen centreres i midten af containeren.
- Bottom aligned: Kolonnen ligger sig i bunden af containeren.
- Minimum height: Her kan du styre højden på din kolonne.
- Vertical Alignment: Her kan du styre, hvor indholdet ligger sig vertikalt inde i din kolonne.
Background
- Background Color: Her kan du vælge, om kolonnen skal have en baggrundsfarve.
- Background Image: Her kan du uploade et baggrundsbillede til din kolonne.
- Background Mobile Image: Her har du mulighed for at uploade en mobil version af dit baggrundsbillede. På mobilen behøver du ikke så store billeder, så det ville være godt for loadtiden 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 kolonne, 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 kolonnen, 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 (NB. Virker dog ikke på mobil).
- Background Repeat: Her kan du vælge, om baggrunden skal gengive sig selv i kolonnen for at udfylde pladsen.
Advanced
- Alignment: Her kan du styre, hvor indholdet i kolonnen skal placeres.
- Border: Her kan du vælge, om der skal være en kant rundt om din kolonne, 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 kolonnen.
- Margins: Hvor meget luft, der skal være udenfor din 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.