Så här ändrar du marginaler i WordPress (Beginner’s Guide)

Att ändra marginaler i WordPress är ett enkelt sätt att förbättra din webbplats design och användarupplevelse. 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 gott om marginaler och mellanrum i våra webbdesigner. Vi har märkt att det har en positiv inverkan på hur användarna engagerar sig i våra webbsidor och vårt innehåll.

I denna nybörjarguide visar vi dig hur du lägger till och justerar marginaler i WordPress. Du kommer att lära 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 det utrymme som add to runt en webbsida eller andra element på en webbsida.

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

Syftet med att använda marginaler är att se till att elementen på en page inte ser ihopklämda ut.

På samma sätt kan marginaler användas runt olika element i sidans layout.

You can for example change margins around images so they are not too close to the text or add to a margin to leave space between your content area and the sidebar.

I den här artikeln kommer vi att gå igenom en hel del information. Klicka på länkarna nedan för att hoppa till det avsnitt du vill.

Vad är skillnaden mellan Margin och Padding?

Margin och padding används båda för att add to vita ytor i webbdesign. De används dock på väldigt olika sätt.

Marginaler addar tomt utrymme utanför ett element och padding addar tomt utrymme inuti det.

Marginaler används för att add to utrymme utanför ett element. They allow you to ensure there is plenty of space between elements on a web page.

Låt oss nu ta en titt på några exempel på när man kan använda marginaler.

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

2. Justera marginaler för att add to space mellan sections, gillar header och content area.

Padding används däremot för att add to mellanrum mellan content och kanterna på en box eller ett element.

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

1. Adjusting padding to increase cushion space in your call-to-action buttons.

2. Öka padding i en textcolumn

Både padding och marginaler används ofta inom webbdesign.

Att använda tomma utrymmen add to andrum till en design, vilket gör den mer användarvänlig och elegant.

Mer information finns i vår handledning om skillnaden mellan padding och marginaler i WordPress.

Varför kan du behöva add to eller ändra marginaler i WordPress?

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

Vi genomför grundliga A/B-tester på alla våra webbplatser för att förstå hur användarna interagerar med en design. Gång på gång visar resultaten att tillägg av marginaler har en stor effekt på konverteringen.

När du skapar en renare och mer organiserad design är det mer sannolikt att användarna stannar kvar längre på webbplatsen och slutför önskade åtgärder.

WordPress themes hanterar designaspekten av din WordPress website. 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 temats layout.

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

Du kanske till exempel inte gillar marginalen runt dina navigeringsmenyer eller vill lägga till mer marginal runt dina call-to-action-knappar.

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

I så fall måste du själv ändra marginalerna i WordPress.

Hur addar man marginaler i WordPress?

Det finns många sätt att add to marginaler i WordPress.

Beroende på var du vill lägga till marginal och de alternativ som finns tillgängliga i ditt WordPress-tema måste du välja en metod som fungerar för you.

Låt oss börja med de inbyggda standardalternativen i WordPress själv, eftersom de är enklast för nybörjare.

Lägga till marginaler i WordPress med hjälp av redigeraren för hela webbplatsen

Om du använder ett blockbaserat theme med fullt stöd för Site Editor kan du använda den built-in Site Editor för att ändra marginaler var som helst på din website i WordPress.

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

När du är inne i Site Editor klickar du för att välja en template från den vänstra colonnen eller klickar var som helst i preview-fönstret.

Klicka sedan på det område eller element där du vill ändra marginalerna. I den högra kolumnen ser du möjligheten att justera marginalerna under fliken ”Stil”.

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

You can also choose to add margins to the top, bottom, right, or left side.

Lägga till marginaler i blockredigeraren

Om du arbetar med ett blogginlägg eller en page kommer du att använda block editor.

Med blockredigeraren i WordPress kan du lägga till och ändra marginaler för olika block.

Klicka bara på det block där du vill lägga till/justera marginaler. Under blockinställningarna växlar du till fliken ”Stil” och bläddrar ner till alternativet ”Mått” eller ”Marginaler”.

Lägga till marginaler i WordPress med hjälp av SeedProd

SeedProd är det bästa WordPress page builder tillägget på marknaden. Det allow you att enkelt skapa customizes pages för din website. Du kan även använda det för att skapa ett custom WordPress theme from scratch.

SeedProd’s intuitiva drag and drop page builder allow you to adjust margins for any element inside the editor easily.

Först måste du installera och aktivera SeedProd plugin. För mer detaljer, se vår tutorial om hur du installerar ett WordPress plugin.

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

Efter det kommer du att bli ombedd att välja en template för din page.

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

Click för att välja template och ange sedan ett namn på din landing page.

Detta kommer att starta SeedProd’s page builder.

Du kommer att se en Live Preview av din page på höger sida. Och element som du kan add to din page i den vänstra colonnen.

You can point and click on any object on the page to edit it.

Om du klickar på ett element markeras det och du ser dess alternativ i den vänstra kolumnen. Här går du till fliken ”Avancerat” och klickar på alternativet ”Avstånd”.

Du kan ändra marginaler och padding 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.

Efter det kan you besöka your website för att se ändringarna i action.

Ändra marginaler med hjälp av Thrive Architect

Thrive Architect är ett av de bästa WordPress page builder-verktygen som låter dig använda ett drag-and-drop-gränssnitt för att designa WordPress pages.

Det finns över 300 mallar som du kan använda som utgångspunkt. Dessutom kan du redigera dina WordPress-inlägg och -sidor och låna layout och stil från ditt befintliga WordPress-tema.

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

Därifrån måste du downloada och installera Thrive Product Manager plugin. För mer detaljer, se vår tutorial om hur du installerar ett plugin för WordPress.

När du är aktiverad måste du besöka Thrive Product Manager page.

Klicka på knappen ”Logga in på mitt account” för att ansluta WordPress till ditt Thrive Themes account.

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

Gå vidare och klicka på checkboxen ”Install Product” under Thrive Architect och klicka sedan på knappen ”Install selected products” längst ner.

Thrive Product Manager kommer nu att installera Thrive Architect plugin för you.

Efter det kan du redigera eller skapa ett nytt WordPress-inlägg eller en ny sida och klicka på knappen ”Redigera med Thrive Architect” eller ”Starta Thrive Architect”.

Thrive Architect kommer att be you att välja en template om det är en new page.

Du kan använda din temamall för att skapa en mall för en ”normal sida” eller en ”förbyggd landningssida”.

Om du väljer alternativet ”Förbyggd landningssida” kommer pluginet att visa dig en massa mallar att välja mellan.

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

Om det är en normal sida (med ditt temas stilar) eller en landing page, skulle Thrive Architects page builder ha samma funktioner.

Du kommer att se en live preview av din page med en toolbar till höger och en settings panel till vänster.

Du kan peka på och clicka på ett element för att selecta det. Eller klicka på knappen add [+] i toolbaren för att lägga till ett new element.

När you clickar för att selecta och edit ett element, kommer dess settings att visas i den vänstra colonnen.

Klicka sedan på fliken ”Layout & Position” för att ändra marginaler och utfyllnad.

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

Take your mouse over to any side of the margin and drag the handle to increase or decrease the margin.

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

När du är klar, glöm inte att klicka på knappen Save Work och välj sedan alternativet Save and Exit to Post Editor.

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

Ändra marginaler i WordPress med hjälp av CSS-kod

Denna metod kräver att du addar CSS-kod till ditt WordPress theme. Du behöver också en mycket grundläggande förståelse för HTML och CSS.

Den här metoden ger dig dock mer flexibilitet eftersom du manuellt kan välja det area där du vill add to eller justera marginalerna.

Lägga till och ändra marginaler med hjälp av Custom CSS i WordPress Theme

WordPress allow you to save custom CSS in your WordPress theme options. Beroende på ditt WordPress theme 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.

Till exempel, om du vill ändra marginaler runt sidans kropp, kan du använda följande kod:

body { 
margin:50px; 
}

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

Öppna din webbplats i en ny webbläsarflik och för muspekaren till det element som du vill ändra marginalerna runt. Därefter högerklickar du och väljer ”Inspektera” i webbläsarens meny.

Detta kommer att dela upp din webbläsare och du kommer att se HTML-koden och CSS bakom sidan.

You can move your mouse over the code, and your browser will highlight the area affected by it.

I koden kan du se det HTML-element eller den CSS-klass som du måste rikta in din customize CSS på.

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

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

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

Använda Custom CSS för att ändra marginaler i Site Editor

Om du använder ett block editor-tema med fullt stöd för Site Editor. Då kan du här se hur du kan add to custom CSS till ditt theme.

Gå först till sidan Utseende ” Editor för att starta webbplatsredigeraren och växla sedan till panelen ” Styles”.

Klicka på fliken ”Additional CSS” längst ner i panelen ”Styles”.

Detta kommer att visa en textredigerare där du kan add to din custom CSS-kod. Din CSS-kod kommer omedelbart att tillämpas och du kommer att kunna se ändringarna på vyn.

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

Lägga till marginaler med CSS i Theme Customize

Om du använder ett klassiskt tema (utan support för Site Editor) kan du save din Custom CSS i temats customizer.

Gå till sidan Appearance ” Customize för att starta theme customizer.

Customize visar olika alternativ beroende på ditt WordPress theme.

Du måste clicka på tabben Additional CSS för att förstora den.

Tabben kommer att glida för att visa dig en enkel box där du kan lägga till din customize CSS.

Så snart du add to en giltig CSS-regel kommer du att kunna se den tillämpas på din website i live preview-fönstret.

När du är nöjd med ändringarna klickar du på knappen ”Publish” för att lagra ändringarna.

Ändra marginaler med Custom CSS-kod med hjälp av WPCode

Det enklaste sättet att add to Custom CSS-kod i WordPress är att använda WPCode plugin.

Det är det bästa WordPress code snippets plugin som tillåter dig att lägga till någon CSS/HTML/PHP/JavaScript-kod till din WordPress website utan att bryta den.

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

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

Efter aktivering, gå till Code Snippets ” + Add New page.

För muspekaren till alternativet ”Add Your Custom Code (New Snippet)” i biblioteket med code snippets och click på knappen ”Use snippet”.

Därefter, högst upp på sidan, add a title for your custom CSS snippet. Det kan vara vad som helst som hjälper dig att identifiera koden.

Därefter skriver du ner eller klistrar in din anpassade CSS i ”Code Preview” boxen och ställer in ”Code Type” genom att välja alternativet ”CSS Snippet” från dropdown-menyn.

Till exempel, om du vill add to eller ändra marginalerna runt hela webbsidan, då kan du använda följande CSS-kod:

body { 
margin:50px;
}

Därefter rullar du ner till ”Insertion” section och väljer ”Auto-Insert” method för att köra koden över hela din WordPress site.

Om du bara vill köra koden på vissa pages eller posts kan du välja metoden ”Shortcode”.

Nu måste du gå tillbaka högst upp på sidan och toggle omkopplaren till ”Active”.

Slutligen klickar du på knappen ”Save Snippet” för att lagra dina ändringar.

You kan nu besöka din website och se din customize CSS i action.

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 lägger bilder sida vid sida i WordPress eller hur du lägger till knappar för understruken och rättfärdigad text i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.