Så här lägger du till eller tar bort tomt utrymme mellan WordPress Block (4 sätt)

Vill du add to eller remove blanksteg mellan blocken i WordPress?

Genom att lägga till eller ta bort tomrum mellan dina WordPress block får du mer control över utformningen av din WordPress site.

I den här artikeln kommer vi att visa dig hur du lägger till eller tar bort tomt utrymme mellan WordPress block, steg för steg.

Varför lägga till eller ta bort blanksteg mellan WordPress Block?

WordPress gör det enkelt att skapa customizer sidor och posts med den built-in WordPress block editor.

Men you may notice that when you add certain blocks, there’s too much or too little spacing. Genom att lägga till eller ta bort tomt utrymme mellan dina WordPress block kan du skapa custom page layouts precis som du gillar.

Med mer control över den slutliga designen av din WordPress website kan du erbjuda dina besökare en bättre användarupplevelse.

Med detta sagt, låt oss ta en titt på hur du lägger till eller tar bort tomt utrymme mellan WordPress block på din website. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

Video Tutorial

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

Metod 1: Lägga till tomt utrymme mellan WordPress Blocks med Block Editor

Det enklaste sättet att add to tomrum mellan dina block är att använda Gutenberg block editor. Det finns ett built-in spacing block som låter dig add to blank space med ett par clicks.

För att använda detta, öppna posten eller sidan du vill redigera och klicka på knappen ”Plus” för att lägga till block.

Sök sedan efter ”Spacer” och välj blocket.

Detta kommer automatiskt att insert en spacer på page.

Du kan göra den större eller mindre genom att dra blocket uppåt eller nedåt.

När du är slutförd klickar du bara på knappen ”Update” för att save your changes.

Om du använder ett block theme kan du också använda Full Site Editor för att justera blockavståndet i dina templates.

Kolla in vår guide för nybörjare till WordPress Full Site Editing för mer information.

Förutom att infoga Spacer-block kan du också öka marginalen för dina block för att få mer utrymme mellan dem och andra block. Du kan utforska dessa alternativ i sidebaren Block settings.

För mer details, you can see our guide on padding vs. margin in WordPress.

Tänk på att den här metoden bara allow to add some white space between blocks. Om du vill remove utrymme måste du använda någon av de andra metoderna under.

Metod 2: Lägga till eller ta bort tomt utrymme mellan WordPress Blocks genom att lägga till Custom CSS

Ett annat sätt att både lägga till och ta bort tomt utrymme mellan dina block är genom att lägga till custom CSS-kod i ditt theme.

Om du inte har gjort detta tidigare rekommenderar vi att du tar en titt på vår guide om hur du enkelt lägger till custom CSS på din WordPress site innan du börjar.

Öppna sedan upp sidan eller posten du vill editera och klicka sedan på blocket där du vill lägga till eller ta bort det tomma utrymmet.

Klicka sedan på menu itemet ”Block” i den högra panelen för valfria alternativ.

Därefter rullar du ner till dropdown ’Avancerat’ och clickar på den. Detta ger en uppsättning ytterligare alternativ för det blocket.

I boxen ”Additional CSS classes” addar du sedan till följande kod:

.add-remove-bottom-space

Detta snippet skapar en new CSS-klass specifikt för det blocket.

Efter det klickar du på knappen ”Update” för att save your changes.

Navigera sedan till Appearance ” Customize för att få upp WordPress theme customizer.

Sedan rullar du ner och klickar på alternativet ”Additional CSS” i menyn.

Du får upp ett fält där du kan add to CSS-kod.

Följer du detta klistrar du in följande code snippet i boxen:

.add-remove-bottom-space {
 margin-bottom: 0;
}

Detta code snippet sätter den nedre marginalen till noll och kommer att ta bort det tomma utrymmet från blocket.

Om du vill addera utrymme längst ner ändrar du helt enkelt ’0’ till något som gillar ’20px’.

När du har gjort dina ändringar, se till att klicka på knappen ”Publicera” för att göra dina ändringar live.

Save Custom CSS-kod med hjälp av ett tillägg

Genom att lägga till anpassad CSS i WordPress tema customizer, kommer det bara att save för det tema du använder för närvarande. Om du ändrar WordPress-tema måste du kopiera över CSS-koden till ditt new theme.

Om du vill att din customize CSS ska gälla oavsett vilket theme du använder, måste du använda ett plugin.

WPCode är det bästa code snippets plugin som tillåter dig att add to PHP, CSS, och mer till din WordPress website utan att bryta något.

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

Efter aktivering måste du gå till Code Snippets ” + Add Snippet från WordPress adminpanelen.

Här hoverar du över alternativet ”Add Your Custom Code (New Snippet)” i biblioteket med code snippets och klickar på knappen ”Use snippet”.

Du måste enter ett namn för ditt code snippet och sedan klistra in din custom CSS i ”Code Preview” boxen.

Se till att välja ”CSS Snippet” från ”Code Type” dropdown.

Se sedan till att klicka på slidern högst upp för att göra ditt snippet ”Activate” och klicka på ”Save Snippet” för att köra det på din WordPress website.

För mer detaljer kan du se vår guide om hur du enkelt lägger till custom CSS på din WordPress site.

Alternativt kan du använda Simple Custom CSS plugin. Efter aktivering, gå bara till Appearance ” Custom CSS och add to din custom CSS kod.

När du är slutförd klickar du bara på knappen ”Update Custom CSS” för att save dina ändringar.

Metod 3: Lägga till eller ta bort tomt utrymme mellan WordPress Blocks med CSS Hero

Ett annat nybörjarvänligt sätt att lägga till eller ta bort tomt utrymme mellan WordPress block är genom att använda ett WordPress custom CSS plugin. Detta låter dig göra visuella ändringar i din WordPress blogg utan att editera någon CSS-kod.

Vi rekommenderar att du använder CSS Hero plugin. Det låter dig editera nästan alla CSS-stilar på din WordPress site utan att skriva en enda rad kod.

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

Efter aktivering måste du klicka på knappen ”Proceed to Product Activation” för att aktivera pluginet. Du hittar knappen direkt ovanför din lista över installerade tillägg.

Detta leder dig till en vy där du måste enter ditt användarnamn och password. Följ sedan instruktionerna på skärmen så kommer du att redirectas tillbaka till din dashboard när ditt account har kontrollerats.

Därefter måste du öppna upp den page eller det post du vill edit och sedan clicka på knappen ”CSS Hero” högst upp i admin-verktygsfältet i WordPress.

Detta kommer att öppna samma page med CSS Hero som körs högst upp på den. Pluginet använder en visual editor, så du kommer att kunna göra dina ändringar i realtid.

When you click on any element on your page, it will bring up a toolbar on the left side of the page for you to make customizers.

Om du vill ta bort eller add to tomrum mellan dina block klickar du bara på alternativet ”Spacings” och rullar sedan ner till ”Margin-Bottom” section.

Här kan du flytta slidern upp eller ner för att add to eller remove blank space.

Alla ändringar du gör kommer automatiskt att visas på din page.

När du är klar med ändringarna måste du clicka på knappen ”Save” för att dina ändringar ska börja gälla.

Metod 4: Lägga till eller ta bort tomt utrymme mellan WordPress Block med SeedProd

SeedProd är den bästa drag-and-drop page buildern, som används av över 1 miljon websites.

Du kan använda biblioteket med över 300 templates för att skapa custom 404 pages, sales pages, landing pages och mycket mer. SeedProd kan även användas för att skapa ett custom WordPress theme utan att skriva någon kod.

Med drag and drop-byggaren har du full control över utformningen av din site, och du kan enkelt ta bort eller add to spacing till alla element på webbplatsen.

För mer information, se vår guide om hur du skapar en customize page i WordPress.

När du customizear din page kan du add to space var som helst med hjälp av Spacer blocket.

Det är bara att drag and drop den var som helst på sidan där du vill add to mer utrymme mellan blocken.

Sedan kan du använda slidern för att justera dess höjd.

You can also control the spacing between any block. För att göra det klickar du helt enkelt på ett block som du vill lägga till eller ta bort utrymme från.

Detta ger panelen med alternativ till vänster. Klicka sedan på tabben ”Avancerat”.

Därefter rullar du ner till dropdown ”Spacing” och clickar på den.

Detta ger dig en menu där du kan kontrollera ”Margin”. Du behöver bara enter ett nummer i boxen för marginal längst ner för att add to utrymme eller delete numret för att remove befintligt tomt utrymme.

När du har slutfört dina ändringar klickar du på knappen ”Save”.

Välj sedan dropdown ”Publicera” för att göra dina ändringar Live.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till eller tar bort tomt utrymme mellan WordPress block. Du kanske också vill se vår guide om hur du startar din egen podcast och våra expertval av de bästa hosting providers för 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.