Hur man ändrar marginaler i WordPress (nybörjarguide)

Att ändra marginaler i WordPress är ett enkelt sätt att förbättra din webbplats design. Marginaler skapar utrymme mellan element, vilket gör ditt innehåll mer läsbart och visuellt tilltalande.

Som en allmän bästa praxis använder vi alltid marginaler och avstånd när vi designar våra WordPress-webbplatser. Vi har märkt att det har en positiv inverkan på hur användare interagerar med våra webbsidor och innehåll.

I den här nybörjarguide visar vi dig hur du lägger till och justerar marginaler i WordPress. Vi lär dig olika metoder för att ändra marginaler i olika områden på din WordPress-webbplats.

Vad är marginaler i WordPress och webbdesign?

Marginaler är utrymmet som läggs till runt en webbsida eller andra element inuti en webbsida.

Tänk på en typisk webbsida som ett tomt papper. Marginaler är det vita eller tomma utrymmet runt kanterna på papperet.

Syftet med att använda marginaler är att säkerställa att element på en webbsida inte ser hopklämda ut.

På samma sätt kan marginaler användas runt olika element inuti sidlayouten.

Du kan till exempel ändra marginaler runt bilder så att de inte ligger för nära texten eller lägga till en marginal för att skapa utrymme mellan ditt innehållsområde och sidofältet.

I den här artikeln kommer vi att täcka mycket information. Klicka på länkarna nedan för att hoppa till valfri sektion.

• Vad är skillnaden mellan marginal och stoppning?
• Varför du kan behöva lägga till eller ändra marginaler i WordPress?
• Hur lägger man till marginaler i WordPress?
• Lägga till marginaler i WordPress med hjälp av Full Site Editor
• Lägga till marginaler i blockredigeraren
• Lägga till marginaler i WordPress med SeedProd
• Ändra marginaler med Thrive Architect
• Ändra marginaler i WordPress med CSS-kod
• Lägga till och ändra marginaler med anpassad CSS i WordPress-tema
• Använda anpassad CSS för att ändra marginaler i webbplatsredigeraren
• Lägga till marginaler med CSS i temaanpassaren
• Ändra marginaler med anpassad CSS-kod med WPCode
• Vanliga frågor om marginaler i WordPress

Vad är skillnaden mellan marginal och stoppning?

Marginal och stoppning används båda för att lägga till vitt utrymme i webbdesign. De används dock mycket olika.

Marginaler lägger till tomt utrymme utanför ett element, och stoppning lägger till tomt utrymme inuti det.

Marginaler används för att lägga till utrymme utanför ett element. De gör att du kan säkerställa att det finns gott om utrymme mellan elementen på en webbsida.

Nu ska vi titta på några exempel på när man ska använda marginaler.

1. Lägga till marginaler för att öka utrymmet mellan en bild och text i en artikel.

2. Justera marginaler för att lägga till utrymme mellan sektioner, som rubriken och innehållsområdet.

Padding används däremot för att lägga till utrymme mellan innehåll och kanternas på en ruta eller ett element.

Här är några exempel på när du kanske vill använda extra fyllning.

1. Justera stoppning för att öka utrymmet i dina call-to-action-knappar.

2. Öka stoppningen i en textkolumn

Både utfyllnad och marginaler används flitigt inom webbdesign.

Användning av tomma utrymmen ger andrum till alla designer, vilket gör dem mer användarvänliga och eleganta.

För mer information, se vår handledning om skillnaden mellan fyllning och marginaler i WordPress.

Varför du kan behöva lägga till eller ändra marginaler i WordPress?

Marginaler är en avgörande aspekt av webbdesign. De gör din webbplats trevlig och lätt att använda.

Baserat på vår erfarenhet av A/B-tester har vi funnit att strategisk användning av vitt utrymme ofta har en positiv inverkan på konverteringar.

När du skapar en renare, mer organiserad design är användarna mer benägna att stanna kvar på webbplatsen längre och slutföra önskade åtgärder.

WordPress-teman hanterar designaspekten av din WordPress-webbplats. De flesta av dem gör redan ett utmärkt jobb med att ställa in CSS-regler för att säkerställa gott om vitt utrymme med hjälp av marginaler i hela ditt temas layout.

Med det sagt kan du ibland behöva lägga till marginaler för att justera saker.

Till exempel kanske du inte gillar marginalen runt dina navigeringsmenyer eller vill lägga till mer marginal runt dina uppmaningar till handling-knappar.

På samma sätt kan du ibland känna att objekt är för nära varandra eller för långt ifrån varandra.

I det fallet måste du ändra marginaler i WordPress själv.

Hur lägger man till marginaler i WordPress?

Det finns gott om sätt att lägga till marginaler i WordPress.

Beroende på var du vill lägga till marginal och vilka alternativ som finns tillgängliga i ditt WordPress-tema, behöver du välja en metod som fungerar för dig.

Låt oss börja med de standardinbyggda alternativen i WordPress självt, eftersom de är enklast för nybörjare.

Lägga till marginaler i WordPress med hjälp av Full Site Editor

Om du använder ett blockbaserat tema med stöd för fullständig webbplatsredigering kan du använda den inbyggda webbplatsredigeraren för att ändra marginaler var som helst på din WordPress-webbplats.

Ett enkelt sätt att kontrollera är att titta på din WordPress-instrumentpanel. Om du ser Utseende » Redigerare, då har du ett blockbaserat tema. Om du istället ser Utseende » Anpassa, då kan du hoppa till en annan metod nedan.

Först måste du gå till Utseende » Redigerare för att starta webbplatsredigeraren.

När du är inne i webbplatsredigeraren, klicka för att välja en mall från den vänstra kolumnen eller klicka var som helst i förhandsgranskningsfönstret.

Klicka sedan på området eller elementet där du vill ändra marginaler. I den högra kolumnen ser du alternativet att justera marginaler under fliken 'Stil'.

När du justerar marginalerna kommer redigeraren att markera marginalområdet.

Du kan också välja att lägga till marginaler på ovansidan, undersidan, höger eller vänster sida.

Lägga till marginaler i blockredigeraren

Om du arbetar med ett blogginlägg eller en sida kommer du att använda blockredigeraren.

Blockredigeraren i WordPress låter dig lägga till och ändra marginaler för olika block.

Klicka bara på blocket där du vill lägga till/justera marginaler. Under blockinställningarna, växla till fliken ‘Stil’ och rulla ner till alternativet ‘Dimensioner’ eller ‘Marginaler’.

Lägga till marginaler i WordPress med SeedProd

SeedProd är den bästa WordPress sidbyggarplugin på marknaden. Den låter dig enkelt skapa anpassade sidor för din webbplats.

Du kan till och med använda den för att skapa ett anpassat WordPress-tema från grunden.

Flera av våra partner varumärken har designat hela sina webbplatser med SeedProd, och de älskar att använda det. För att lära dig mer, se vår kompletta SeedProd-recension.

SeedProds intuitiva dra-och-släpp-sidbyggare låter dig enkelt justera marginaler för alla element inuti redigeraren.

Först måste du installera och aktivera pluginet SeedProd. För mer information, se vår handledning om hur man installerar ett WordPress-plugin.

Därefter måste du besöka SeedProd » Landningssidor och sedan klicka på knappen ‘Lägg till ny landningssida’.

Därefter kommer du att bli ombedd att välja en mall för din sida.

SeedProd levereras med dussintals färdiga mallar som du kan använda som utgångspunkt, eller så kan du börja med en tom mall.

Klicka för att välja din mall, och ange sedan ett namn för din landningssida.

Detta startar SeedProd:s sidbyggare.

Du kommer att se en liveförhandsgranskning av din sida på höger sida. Och element du kan lägga till på din sida i den vänstra kolumnen.

Du kan peka och klicka på vilket objekt som helst på sidan för att redigera det.

Att klicka på ett element markerar det, och du ser dess alternativ i den vänstra kolumnen. Därifrån, byt till fliken 'Avancerat' och klicka på alternativet 'Mellanrum'.

Du kan ändra marginaler och utfyllnad för det valda elementet härifrån.

När du är klar med att redigera din sida, glöm inte att klicka på knappen 'Spara' och 'Publicera' i det övre högra hörnet.

Därefter kan du besöka din webbplats för att se ändringarna i praktiken.

Ändra marginaler med Thrive Architect

Thrive Architect är en användarvänlig WordPress-sidbyggare som låter dig använda ett dra-och-släpp-gränssnitt för att designa WordPress-sidor.

Under testning upptäckte vi att den har över 300 mallar som du kan använda som utgångspunkt. Dessutom kan du också använda den för att redigera dina WordPress-inlägg och sidor, och låna layouten och stilen från ditt befintliga WordPress-tema.

För att lära dig mer, se vår fullständiga Thrive Architect-recension.

För att installera Thrive Architect måste du först logga in på ditt konto på Thrive Themes webbplats.

Därifrån behöver du ladda ner och installera Thrive Product Manager-pluginet. För mer information, se vår handledning om hur man installerar ett WordPress-plugin.

Efter aktivering måste du besöka sidan Thrive Product Manager.

Klicka på knappen 'Logga in på mitt konto' för att ansluta WordPress till ditt Thrive Themes-konto.

När du är ansluten ser du listan över tillgängliga Thrive Themes-produkter under ditt konto.

Klicka på kryssrutan 'Installera produkt' under Thrive Architect, och klicka sedan på knappen 'Installera valda produkter' längst ner.

Thrive Product Manager kommer nu att installera Thrive Architect-pluginet åt dig.

Därefter kan du redigera eller skapa ett nytt WordPress-inlägg eller en sida och klicka på knappen 'Redigera med Thrive Architect' eller 'Starta Thrive Architect'.

Thrive Architect kommer att be dig att välja en mall om det är en ny sida.

Du kan använda din temamall för att skapa en ‘Normal sida’ eller en mall för ‘Förbyggd landningssida’.

Om du väljer ett alternativ för 'Förbyggd landningssida', kommer pluginet att visa en mängd mallar att välja mellan.

Klicka helt enkelt för att välja den som liknar det du vill skapa.

Oavsett om det är en vanlig sida (med ditt temas stilar) eller en landningssida, skulle Thrive Architects sidbyggare ha samma funktioner.

Du kommer att se en liveförhandsgranskning av din sida med en verktygsfält till höger och en inställningspanel till vänster.

Du kan peka och klicka på ett element för att välja det. Eller klicka på lägg till [+] -knappen i verktygsfältet för att lägga till ett nytt element.

När du klickar för att välja och redigera ett element, kommer dess inställningar att visas i den vänstra kolumnen.

Härifrån klickar du på fliken 'Layout & Position' för att ändra marginaler och fyllning.

Du kommer att se en visuell representation av marginal och utfyllnad.

Håll musen över någon sida av marginalen och dra handtaget för att öka eller minska marginalen.

Du kan upprepa processen för att ändra marginaler på någon av de fyra sidorna.

När du är klar, glöm inte att klicka på knappen Spara arbete och sedan välja alternativet Spara och avsluta till redigeraren.

Du kan nu klicka på knappen 'Publicera' eller 'Spara' för att spara ditt WordPress-inlägg eller din sida.

Ändra marginaler i WordPress med CSS-kod

Den här metoden kräver att du lägger till CSS-kod i ditt WordPress-tema. Du behöver också en mycket grundläggande förståelse för HTML och CSS.

Men, den här metoden ger dig mer flexibilitet eftersom du manuellt kan välja det område där du vill lägga till eller justera marginalerna.

Lägga till och ändra marginaler med anpassad CSS i WordPress-tema

WordPress låter dig spara anpassad CSS i dina WordPress-temainställningar. Beroende på ditt WordPress-tema finns det dock flera sätt att göra det på.

Innan du lägger till eller ändrar marginaler med CSS, kan du behöva ta reda på vilket element du behöver rikta in dig på med din CSS-kod.

Om du till exempel vill ändra marginaler runt sidans brödtext kan du använda följande kod:

body { 
margin:50px; 
}

I den här koden står 'px' för pixlar, en vanlig mätenhet för skärmar. Att använda egenskapen margin med bara ett värde på detta sätt ställer in marginalen för alla fyra sidor (upp, höger, ner och vänster) samtidigt.

Det enklaste sättet att hitta vilket element du ska rikta in dig på är genom att använda Inspektera-verktyget i din webbläsare.

Öppna din webbplats i en ny webbläsarflik och för musen över elementet som du vill ändra marginaler runt. Högerklicka sedan och välj 'Inspektera' från webbläsarens meny.

Detta delar din webbläsarskärm, och du kommer att se HTML-koden och CSS bakom sidan.

Du kan flytta musen över koden, och din webbläsare kommer att markera det område som påverkas av den.

I koden kan du se HTML-elementet eller CSS-klassen du behöver rikta in dig på med din anpassade CSS. Tänk på detta som 'adressen' för den specifika delen av sidan du vill styla.

Du kan till och med prova dina marginaler här för att förhandsgranska hur det kommer att se ut.

Dessa ändringar sparas dock inte i ditt tema och försvinner när du laddar om eller stänger webbläsarfliken.

Låt oss gå igenom olika sätt du kan spara din anpassade CSS i WordPress.

Använda anpassad CSS för att ändra marginaler i webbplatsredigeraren

Om du använder ett blocktema med stöd för fullständig webbplatsredigering. Då är här hur du kan lägga till anpassad CSS till ditt tema.

Gå först till sidan Utseende » Redigerare för att starta webbplatsredigeraren och byt sedan till panelen 'Stilar'.

Längst ner i panelen 'Styles' klickar du på fliken 'Additional CSS'.

Detta öppnar en textredigerare där du kan lägga till din anpassade CSS-kod. Din CSS-kod kommer att tillämpas omedelbart, och du kommer att kunna se ändringarna visas på skärmen.

När du är nöjd med ändringarna, glöm inte att klicka på knappen 'Spara' för att lagra dina ändringar.

Lägga till marginaler med CSS i temaanpassaren

Om du använder ett klassiskt tema (utan stöd för webbplatsredigeraren) kan du spara din anpassade CSS i temaanpassaren.

Gå till sidan Utseende » Anpassa för att starta temaanpassaren.

Anpassaren visar olika alternativ beroende på ditt WordPress-tema.

Du måste klicka på fliken Ytterligare CSS för att expandera den.

Fliken glider för att visa en enkel ruta där du kan lägga till din anpassade CSS.

Så snart du lägger till en giltig CSS-regel kan du se den tillämpas i din webbplats liveförhandsgranskning.

När du är nöjd med ändringarna, klicka på knappen 'Publicera' för att spara dina ändringar.

Ändra marginaler med anpassad CSS-kod med WPCode

Det enklaste sättet att lägga till anpassad CSS-kod i WordPress är att använda pluginet WPCode.

Det är det bästa pluginet för WordPress-kodutdrag som låter dig lägga till valfri CSS/HTML/PHP/JavaScript-kod på din WordPress-webbplats utan att bryta den.

Under vår utvärdering fann vi att den var superanvändarvänlig. För att lära dig mer om vår erfarenhet, se vår detaljerade WPCode-recension.

Fördelen med att använda WPCode är att du inte förlorar dina CSS-ändringar när du byter WordPress-tema.

Det första du behöver göra är att installera och aktivera pluginet WPCode. För mer information, se vår handledning om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan Kodavsnitt » + Lägg till nytt.

Håll muspekaren över alternativet 'Lägg till din anpassade kod (nytt utdrag)' i biblioteket med kodutdrag och klicka på knappen 'Använd utdrag'.

Lägg sedan till en titel för ditt anpassade CSS-utdrag högst upp på sidan. Detta kan vara vad som helst som hjälper dig att identifiera koden.

Skriv sedan ner eller klistra in din anpassade CSS i rutan 'Kodförhandsgranskning' och ställ in 'Kodtyp' genom att välja alternativet 'CSS-utdrag' från rullgardinsmenyn.

Om du till exempel vill lägga till eller ändra marginalerna runt hela webbsidans kropp, kan du använda följande CSS-kod:

body { 
margin:50px;
}

Rulla sedan ner till avsnittet 'Infogning' och välj metoden 'Automatisk infogning' för att köra koden på hela din WordPress-webbplats.

Om du bara vill köra koden på vissa sidor eller inlägg kan du välja metoden 'Kortkod'.

Nu måste du gå tillbaka till toppen av sidan och växla omkopplaren till 'Aktiv'.

Slutligen, klicka på knappen 'Spara utdrag' för att lagra dina ändringar.

Du kan nu besöka din webbplats för att se din anpassade CSS i praktiken.

Vanliga frågor om marginaler i WordPress

Här är några frågor som våra läsare ofta ställer om att lägga till marginaler i WordPress:

Vad är den huvudsakliga skillnaden mellan marginal och stoppning?

Marginal är utrymmet utanför ett elements kantlinje, vilket skapar avstånd mellan det och andra element. Fyllning (padding) är utrymmet innanför ett elements kantlinje, vilket skapar en dämpning mellan innehållet och själva kantlinjen.

Tänk på marginal som utrymmet mellan tavelramar på en vägg, och stoppning som passepartouten inuti en enda tavelram.

För mer information kan du också kolla in vår guide om stoppning vs marginal i WordPress.

Hur kan jag ändra marginaler specifikt för mobila enheter?

För att justera marginaler för mobil kan du använda CSS media queries. Detta låter dig tillämpa specifika stilar för olika skärmstorlekar.

Sidbyggarplugins som SeedProd erbjuder också enhetspecifika kontroller, vilket gör att du enkelt kan ändra marginaler för dator-, surfplatta- och mobilvyer.

Varför visas inte marginalalternativet för ett specifikt block i WordPress-redigeraren?

Alla WordPress-block har inte inbyggda marginalkontroller, eftersom detta kan bero på ditt tema.

Om alternativet saknas kan du omsluta blocket i ett Gruppblock, som har inställningar för marginal och stoppning. Du kan också använda en av metoderna för anpassad CSS för att rikta in dig på blocket direkt.

Är det bättre att använda ett plugin eller anpassad CSS för att ändra marginaler?

För nybörjare är en sidbyggarplugin som SeedProd ofta enklare eftersom den ger ett visuellt gränssnitt.

För mer avancerade användare eller för att göra webbplatsomfattande justeringar, ger anpassad CSS dig mer exakt kontroll.

Att använda ett plugin som WPCode för att lägga till din CSS är ett utmärkt val eftersom det skyddar din kod när du uppdaterar eller byter tema.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till eller ändrar marginaler i WordPress. Du kanske också vill lära dig hur du placerar bilder sida vid sida i WordPress eller hur du lägger till knappar för understrykning och justering av text i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.