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 i desktop (t.ex ökar avstånd på en text eller bild) så speglar detta i mobilen. Däremot om du endast justerar i mobilen så kommer det inte slå igenom på desktop. Detta för att du ska på ett enkelt vis kunna anpassa din mobila version.
Observera att dessa inställningar i denna guide visar hur du justerar avstånd och marginaler inom ett block/kolumn.
Se vår videoguide hur du kan arbeta med marginaler och radavstånd på bästa sätt.
Så justerar du marginaler i ett block
När du hovrar med muspekaren över ett block så synliggörs blockets kan i överkant och nedre kant. Dessa går att "ta tag i" med muspekaren och på så vis dra din marginal (padding) upp eller ned. För justering av block i sidlek behöver du antingen justera blockets grundinställningar mellan fullbredd/inboxad som du kan läsa mer om här.
Eller justera i kolumnerna istället.
Så justerar du marginaler i en kolumn
När du hovrar med muspekaren över en kolumn så synliggörs kolumnernas kanter. En kolumn inom blocket kan justeras i både överkant, nedre kant och på sidorna. Dessa går att "ta tag i" med muspekaren och på så vis dra din marginal (padding) åt det håll du önskar.
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.
Så drar du i marginalerna på en widget i en kolumn
När du hovrar med muspekaren över en widget kommer du se pilar på två ställen där du kan ta tag i widgeten för att minska/öka storleken på den. Samt för att skapa marginaler.
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.
Vårt tips är börja med redigering i datorversionen och sedan i slutet kika på mobilversionen för eventuella justeringar och anpassningar. Men det är bra att först förstå grunderna i hur marginaler och avstånd fungerar innan du redigerar.
Gällande avståndsbricka - 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 så justerar du detta istället via kolumnens marginalinställningar.
Så drar du i marginalerna på en bildwidget i en kolumn
När du hovrar med muspekaren över en bildwidget kommer du se totalt tre ställen du kan ta tag i bilden för att minska/öka storleken på den. Samt för att skapa marginaler.
Webbas rekommenderar!
Även om både pilarna på kanten och undersidan av bildwidgeten funkar galant. Så kan pilarna på kanten ibland vara lite svåra att få tag på när de angränsar till kolumnens marginalinställningar. Därför rekommenderar vi att du använder den som syns i nedre hörn. När du drar i denna kan du justera hela bildwidgeten fritt både i sidled, höjd och totalt.
