Layouter och responsivitet

Sitevision och responsiv struktur

Sitevision har inbyggd responsivitet som gör att innehåll i olika spalter automatiskt staplas på mindre skärmar.

Vill man styra så att olika innehåll ska synas i mobil/desktop så kan man göra det via egenskaper på modulen och responsiv webb. Där går det att välja att dölja modulen i vissa brytpunkter eller endast visa i vissa. Vilket man väljer är en smaksak.

Viktigt att tänka på är att när brytpunkten för stapling kommit så kommer det inte längre gå att dela upp innehåll i spalter, eftersom spalterna då redan har staplats och tar upp 100% av ytan.
Vill man ha moduler brevid varann i mobil, kan man då tex sätta bredd i % sedan "flöda innehållet". Se exempel i modulen "rad -endast mobil" i innehållsträdet till vänster. Tänk då på att max-ytan är 100%, detta är inklusive eventuella inställda marginaler så ta höjd för dem vid bredd-angivelse.

Layouter och spalter

Varje innehållsyta består av 12 kolumner. När man skapar layouter med spalter i är det så många man har att förhålla sig till.
Ska två bilder ta upp hälften av ytan var så ska de ligga i varsin 6-kolumns spalt.

Sitevision separerar automatiskt spalter med ett visst mellanrum, därför går det inte att lägga till sidled marginal på en spalt utan bara vertikalt.

Notera att padding och marginal som ställs in via en moduls egenskaper ärvs ner i responsivt läge, du kan alltså inte ställa in en viss padding på desktop och en annan på mobil. Det måste göras via css, eller via två olika modulen som visas i olika brytpunkter.

Om det ser konstigt ut även fast ni använder layouter, testa att lägga in en gridrad först och sedan layouten där i.
Ibland har moduler vissa egenskaper som inte funkar ihop med layouten men gör det med en gridrad.
De kommer fortfarande staplas på varann i mobil.

Bild eller bakgrundsbild

Bild-modueln kommer alltid att försöka använda bildens inbyggda storlek och skala automatiskt med den. Vill du ha möjlighet att påverka bildens utseende i en viss yta så använd spalter med bakgrundsbild påkopplat. Se exempel layout - bakgrundsbilder i innehållsträdet till vänster.

Använd modulens egenskaper och storlek för att styra ytan som bilden ska förhålla sig till i höjd. Bredd anpassas automatiskt till ytan som elementet med bakgrundsbild ligger på, tex en spalt.

Huvudinnehåll

Denna innehållsyta kommer efter vänsterspalten i mobil.

Se nedan exempel på layouter att använda.