I denna guide får du lära dig hur du jobbar med marginaler, avstånd och white space (som vi gärna använder för att hemsidan ska andas).
Du kan jobba med marginaler och avstånd på fyra sätt:
Marginal i block
Marginal i kolumn
Marginal för widget
Widgeten avståndsbricka
Detta innebär att du justerar avstånd mellan olika element till/från kantlinjer till varandra.
Ökar du marginaler för block, kolumner eller widgets (t.ex ökar avstånd på en text eller bild) så speglar detta i mobilen.
Observera att dessa inställningar i denna guide visar hur du justerar avstånd och marginaler inom ett block/kolumn. Du kan även justera en kolumns så kallade toppmarginal som innebär att hela kolumnen dras uppåt så den läggs längre upp och/eller överlappar blocket ovan till viss grad. Detta ställer du in i kolumninställningar och går att läsa om här.
Bildexempel på effekt med justerad toppmarginal för hela kolumnen.
Använder du widgeten "Avståndsbricka" i dator så kommer det i mobilversionen endast bli 30px som avståndsbrickan är som standard - oavsett hur mycket pixlar du valt på avståndsbrickan i datorversionen. Du kan dock även jobba separat med avståndsbrickor i mobiversionen specifikt. Se videon för att förstå detta bättre.
Vårt tips är börja med redigering i datorversionen och sedan i slutet kika på mobilversionen för eventuella justeringar, och där jobba med widgeten "Avståndsbricka" för att få avstånd till innehåll. Men det är bra att först förstå grunderna i hur marginaler och avstånd fungerar innan du redigerar.
Gällande avståndsrbicka - Det går endast få till marginaler med avståndsbrickan mellan innehåll ovanför eller nedanför, och går inte att lägga in vid sidan om innehåll (alltså på kanterna). Önskar du marginaler där i mobilversionen behöver du skapa en unik mobilversion för just det blocket du önskar detta för. I datorversionen kan du då jobba med marginaler i block och/eller kolumn.
Se vår videoguide hur du kan arbeta med marginaler och radavstånd på bästa sätt.