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

Trots hur enkelt det är att använda WordPress blockredigerare kämpar många användare med att kontrollera avståndet mellan blocken. Du kanske blir frustrerad när ditt innehåll känns för trångt eller utspritt, och standardalternativen för avstånd räcker helt enkelt inte till.

Vi har hört från många läsare som står inför just detta problem. Det är därför vi har hittat några effektiva sätt att navigera i detta problem så att du kan ha full kontroll över dina sidlayouter och skapa en mer polerad, professionell webbplats.

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 du kanske märker att det är för mycket eller för lite mellanrum när du lägger till vissa block. Genom att lägga till eller ta bort tomrum mellan dina WordPress-block kan du skapa anpassade sidlayouter precis som du vill.

Genom att justera utrymmet mellan blocken kan du gruppera relaterat innehåll tillsammans eller separera olika avsnitt. Detta hjälper till att styra besökarnas uppmärksamhet och gör det tydligt vilka element som hänger ihop.

Dessutom bidrar korrekta avstånd till att bryta upp innehållet, vilket gör det lättare för besökarna att läsa och förstå din information.

Sammantaget kan det leda till en bättre användarupplevelse att ha mer kontroll över den slutliga designen av din WordPress-webbplats.

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 öppnar du det inlägg eller den sida du vill redigera och klickar 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 sidofältet Blockinställningar.

Du kan också justera blockets utfyllnad. Ju mindre utfyllnad, desto mindre utrymme finns det mellan blocken, och vissa block har lagt till utfyllnad som standard. Så du kan tänka på det som ett sätt att ta bort lite avstånd mellan blocken.

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

Du kanske också vill kolla in dessa guider för fler sätt att få ut det mesta av blockredigeraren:

• Så här använder du More-blocket i WordPress på rätt sätt
• Så här lägger du till en radbrytning i WordPress (nytt radavstånd)
• Så här väljer och använder du nästlade block i WordPress
• Så här lägger du till innehåll i flera kolumner i WordPress-inlägg (ingen HTML krävs)

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.

Om du använder ett blocktema kan du läsa vår guide om hur du åtgärdar den saknade temaanpassaren i WordPress för att lära dig var du ska lägga till CSS-koden .

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 dra-och-släpp-sidbyggaren, som används av över 1 miljon webbplatser. Det är faktiskt vad vi använder för att skapa anpassade sidor för WPBeginner och andra varumärken.

SeedProd har ett bibliotek med över 300 mallar för att skapa anpassade 404-sidor, försäljningssidor, landningssidor och mycket mer. Du kan till och med använda det för att skapa ett anpassat WordPress-tema 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 WordPress inläggsrevisioner och våra expertval av de bästa Gutenberg-blockpluginsen.

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.