WPBeginner - WordPress-handledningar för nybörjare

Pålitliga WordPress-handledningar, när du behöver dem som mest.
Nybörjarguide till WordPress
WPB Cup
25 miljoner+
Webbplatser som använder våra plugins
16+
År av WordPress-erfarenhet
3000+
WordPress-handledningar
av experter

Hur man lägger till en radbrytning i WordPress (nytt radavstånd)

Av Redaktionen | | Läsardisclosure

Shares 89 ChatGPT Perplexity X LinkedIn WhatsApp

Har du märkt hur vissa webbplatser har perfekt avstånd mellan innehållet som är lätt att skanna, medan andra känns trånga och svårlästa?

Hemligheten kommer ofta ner till något enkelt: korrekt radbrytning och avstånd.

Om du någonsin har lagt till radbrytningar i din WordPress-redigerare bara för att upptäcka att de inte visas på din publicerade sida, är du definitivt inte ensam. WordPress hanterar avstånd lite annorlunda än ordbehandlare som Google Docs eller Microsoft Word.

När du väl förstår hur det fungerar, har du dock fullständig kontroll över hur ditt innehåll ser ut.

Vi kommer att visa dig flera pålitliga metoder för att lägga till radbrytningar i WordPress, från snabba genvägar till mer avancerade formateringsalternativ.

Hur man lägger till en radbrytning i WordPress

Varför lägga till ett radbrytning i WordPress (nytt radavstånd)?

Vid första anblicken kan ett radbrytning verka som ett litet formateringsval – men det kan ha stor inverkan på hur ditt innehåll presterar.

Från att förbättra läsbarheten till att öka användarupplevelsen, hjälper korrekt avstånd dina sidor att se rena och professionella ut. Här är varför det är viktigt:

  • Bättre läsbarhet: Bryter upp textväggar för enklare skanning.
  • Mobilvänligt: Håller innehållet tydligt på mindre skärmar.
  • Rensar klistrad text: Rengör formatering från andra källor.
  • Dragningskraft: Hjälper tips och CTA:er att sticka ut.

Kort sagt, radbrytningar gör ditt innehåll lättare att läsa och mer engagerande – både för besökare och sökmotorer.

Notera: Innan vi börjar är det viktigt att veta att radavstånd styrs av det WordPress-tema du använder.

Vi visar dig hur du lägger till utrymme mellan block i blockredigeraren, och sedan täcker vi hur du justerar radavståndet i ditt tema om du inte är nöjd med standardresultaten.

Med det sagt, låt oss titta på hur du enkelt lägger till en radbrytning i WordPress.

Hur man lägger till dubbelt radavstånd mellan block

När du trycker på tangenten Enter för Windows eller tangenten Return för Mac på ditt tangentbord för att lägga till en radbrytning, betraktar WordPress det som ett nytt stycke.

Detta innebär att det automatiskt läggs till ett dubbelt radavstånd. Mängden avstånd styrs av ditt tema, och denna stil är en standardfunktion i alla bra WordPress-teman.

Lägga till dubbelt radavstånd i WordPress

Gå bara till innehållseditor, tryck på Enter- eller Retur-tangenten efter raden och skriv sedan något annat på nästa rad.

Genom att bara göra det, baserat på din temas stil, bör du se en tydlig åtskillnad mellan stycken.

Dubbelt radavstånd lagt till för att skapa ett stycke i WordPress

Hur man lägger till ett enkelt radavstånd

Nu, om du skriver något som en adress, då vill du förmodligen att den ska vara enkelradig istället för dubbelradig på din WordPress-webbplats.

Förhandsgranskning med enkelradsavstånd

I det här fallet måste du trycka på tangenterna SHIFT + ENTER på Windows eller SHIFT + RETURN på Mac.

Detta talar om för WordPress att du vill starta en ny rad inom samma stycke. Denna åtgärd skapar en enkel radbrytning istället för det dubbla utrymme som används för ett nytt stycke.

Det enklaste sättet: Använda Spacer-blocket

För ett enkelt, kodfritt sätt att lägga till extra utrymme mellan två block är den enklaste metoden att använda det inbyggda Spacer-blocket.

Klicka helt enkelt på knappen 'Lägg till block' i redigeraren för att lägga till ett nytt block och sök efter 'Spacer'. När du har lagt till det kommer ett nytt tomt utrymme att visas på din sida.

Lägg till Spacer-blocket i WordPress

Du kan sedan klicka på avståndsskaparen och dra det blå handtaget uppåt eller nedåt för att justera dess höjd.

Detta ger dig exakt kontroll över ditt vertikala avstånd direkt i redigeraren.

Spacer fungerar i blockredigeraren

Ändra radhöjd och avstånd

Ibland, även när du lägger till rätt radavstånd i redigeraren, visas det inte som du vill i ditt tema.

Det finns två sätt att åtgärda det:

  1. Använda ett plugin (det enkla sättet)
  2. Manuellt med CSS-kod (mer avancerat)

Låt oss titta på den enkla metoden först.

Lägga till radavstånd med en plugin

Om du vill göra stiländringar i ditt tema utan att behöva lära dig kod, är det bästa sättet att använda ett plugin som CSS Hero.

CSS Hero gör det enkelt att ändra designen på din WordPress-webbplats utan att kunna någon kod.

Lägg till styckeavstånd i WordPress med CSS Hero

Du kan se mer detaljer i vår fullständiga CSS Hero-recension.

Om du vill göra större ändringar i ditt tema, som att flytta en sidofält eller lägga till en sidfot, då skulle en dra-och-släpp-sidbyggarplugin vara ett bättre alternativ. En sidbyggarplugin skulle också låta dig göra små justeringar som att ändra teckensnittsfärger eller lägga till radbrytningar i WordPress.

Vill du inte använda ett plugin, eller bara göra den här enda ändringen? Då kan alternativet med manuell CSS-kod vara bäst för dig.

Ändra styckeavstånd manuellt med CSS-kod

För att lägga till radbrytningar manuellt utan en plugin behöver du lägga till lite CSS till ditt tema.

CSS är i princip som formateringsfunktionen i Microsoft Word. Istället för att klicka på knappar skriver du lite vanlig CSS-kod. Det är inte så skrämmande som vissa nybörjare kan tro. CSS är mycket lätt att förstå om du bara följer instruktioner.

För att lägga till anpassad CSS i ditt tema måste du besöka sidan Utseende » Anpassa. Detta startar WordPress temaanpassare, där du måste klicka på fliken 'Ytterligare CSS' från den vänstra kolumnen.

Om du inte kan se dessa menyalternativ kan du använda ett blocktema. Se vår artikel om hur du åtgärdar saknad anpassningsfunktion för teman i WordPress-administrationen.

Lägga till din anpassade CSS

I rutan för anpassad CSS måste du lägga till följande CSS-kod:

Denna kod riktar sig mot alla stycke-element (p) specifikt inom huvudinnehållsområdet för dina inlägg, vilket WordPress ofta identifierar med klassen .post. Detta säkerställer att det bara påverkar dina artiklar.

.post p{line-height: 1.5em;}

CSS-regeln som visas ovan ändrar radavståndet för styckesinnehåll till 1,5 em. Em är en enhet för bredd inom typografi.

Lägga till anpassad CSS för att öka radhöjden

Nu ändrar detta bara avståndet för enkelradsavstånd.

Om du vill ändra styckeavståndet i WordPress (dvs. dubbelt avstånd), då skulle du behöva lägga till stoppning.

.post p { 
line-height: 1.5em;
padding-bottom: 15px;
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

Justera gärna siffrorna i denna CSS-kod. Att ändra värdet för padding-bottom ändrar utrymmet mellan dina stycken.

Du kan också lägga till anpassad CSS på din webbplats med hjälp av WPCode-pluginet. Pluginet gör det mycket enkelt att infoga och hantera kod på din webbplats.

För mer information, se vår guide om hur man enkelt lägger till anpassad CSS på din WordPress-webbplats.

Om du inte gillar att läsa instruktionerna, titta bara på vår videoguide.

Videohandledning

För en visuell genomgång kan du titta på vår videoguide nedan. Den täcker alla metoder vi har diskuterat för att lägga till enkel- och dubbelradsavstånd i ditt innehåll.

Prenumerera på WPBeginner

Vi hoppas att den här artikeln hjälpte dig att lägga till en radbrytning i WordPress. Du kanske också vill se vår guide om hur man använder WordPress blockmönster och vår lista över de bästa Gutenberg-vänliga WordPress-teman.

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.

Populärt på WPBeginner Just nu!

Upplysning: Vårt innehåll stöds av läsarna. Det innebär att om du klickar på några av våra länkar kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt och hur du kan stödja oss. Här är vår redaktionella process.

Det ultimata WordPress-verktyget

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som alla proffs bör ha!

Ladda ner nu

Läsarnas interaktioner

99 CommentsLeave a Reply

  1. Detta var ett stort problem förr i den gamla skaparen. Jag visste aldrig hur det skulle se ut och var tvungen att trycka på förhandsgranskning varannan rad, men jag tror att det med Gutenberg är mycket enklare och jag lärde mig att bara använda shift+enter. Jag gör detta automatiskt och nästan utan medvetenhet. Vet inte varför, men vissa webbplatser tillåter inte shift+enter, bara enter eller inte, och då tänker jag "VARFÖR fungerar det inte"!

    Reply

  3. Tack så mycket för denna information! Mycket användbart. Precis vad jag letade efter.

    Reply

  4. Jag kom äntligen på hur man gör med shift-enter för poesi med enkelradsavstånd, men när inlägget publiceras och skickas till följare, förlorar det formateringen och alla rader flyter ihop. Hur fixar jag det?

    Reply

    • Du skulle vilja kontrollera med det verktyg som används för att skicka meddelandet för styling för att åtgärda det problemet.

      Reply

      Admin

  8. Tack för förklaringen. En fråga dock. Hur kan jag göra samma sak på en smartphone. Jag redigerar min blogg på vägen och har ingen bärbar dator tillgänglig. Jag försökte med shift enter men det fungerade inte

    Reply

    • På grund av begränsningarna med mobila enheter skulle du troligen behöva använda CSS-metoden.

      Reply

      Admin

  11. För att ändra CSS säger den att jag måste köpa en premiumplan. Är jag chanslös?

    Reply

    • Om du använder en sidbyggarplugin kan de ha en annan metod för enkel/dubbel radavstånd. Annars kan det vara en plugin/tema-konflikt där du skulle behöva inaktivera dina plugins och/eller byta tema för att kontrollera

      Reply

      Admin

  14. Jag skulle vilja minska avståndet mellan normala styckesrader — IMHO, det finns för mycket vitt utrymme som standard. Jag skulle också vilja lägga till en halv rad i slutet av ett stycke, snarare än en hel rad: Wordpress verkar som standard bara göra motsvarande en dubbel vagnretur vilket är ganska 1900-tal och inte efterliknar vad Word kan göra. Några idéer?

    Reply

    • You would want to reach out to the support for your specific theme and they should be able to tell you what CSS needs to be added to reduce your line spacing :)

      Reply

      Admin

  17. Gud välsigne dig! Jag är så tacksam för att du postade detta med CSS:en! Vem visste att det var allt som krävdes för att jag skulle ändra avståndet! Jag har letat efter något sådant här länge! Tack så mycket!

    Reply

  18. Jag använder metoden "shift" enter men den tillåter inte olika storlekar på teckensnittet när jag gör det. Finns det en lösning?

    Reply

  21. Jag har ingen Ytterligare CSS. Jag har provat alla möjliga andra sätt att ändra radavståndet men inget fungerar, det ser ut som en riktig röra. Hjälp tack!!!

    Reply

  22. Tack för hjälpen. Jag har letat överallt och ville göra det med ett plugin. Du gjorde det så enkelt. Tack igen så mycket.

    Reply

  23. Hej! Jag vill ha ett enkelt avstånd mellan mina stycken och även efter att ha tryckt på enter (för dubbelt mellanslag), när jag förhandsgranskar utkastet har inget ändrats (det är fortfarande ett enda stycke). Kan någon hjälpa till?

    Reply

  24. Hej
    Jag skulle vilja ändra radhöjden och avståndet. Det finns dock ingen 'redigeringsikon' (Utseende » Redigerare) från temat CSS-fil.
    Så, vad kan jag göra?
    Tack för ditt svar!

    Reply

  25. Wow. Didn’t know it was so easy. Thank you so much! This double space was driving me crazy! :D

    Reply

  27. Tack, tack, tack!

    Jag var i en annan HTML-redigerare och kunde inte lista ut hur man gör enkel avståndstagning.

    You saved the day! :)

    Reply

  28. Strålande och en evig livräddare.

    Jag kämpade med mellanrum på en av mina klienters webbplatser och det är helt fantastiskt att du hade det exakta svaret nästan till hands. Jag blir nu en permanent prenumerant

    Reply

  29. Tack för alla Wordpress-tips. Den här sidan har hjälpt mig mycket med de flesta svårigheter jag hade

    Reply

  30. Jag använder Pilcrow-temat och jag har ingen aning om hur jag ska få dubbelt mellanslag mellan stycken. Ibland händer det i mina inlägg men ibland inte. När jag tittar i HTML-filen ser jag inga inlägg p eller padding. Jag ser bara slutresultatet av hur inlägget kommer att se ut och då vet jag att dubbla mellanrummet inte fungerade. Kan jag fortfarande gå tillbaka och redigera och fixa det? Sist men inte minst, där du säger att gå från utseende till redigeringsmenyer har jag inte de alternativen.
    Jag har under utseende följande alternativ: teman, anpassa, widgets, menyer, header, bakgrund, AMP, temainställningar, mobil.
    Snälla hjälp.

    Reply

  31. Mitt tema är trasigt, som i att det inte har dubbelt avstånd som standard. Temat är fast i shift+enter-läget med andra ord. Så i relation till följande kod:

    .post p { line-height: 1.5em; padding-bottom: 15px; }

    Är 15px ett normalt standard dubbelt avstånd? Hur många pixlar bör det vara som standard? Spelar det inte heller någon roll var jag placerar den här koden? Tack!

    Reply

  32. Tack för tipset om Shift + Enter. Jag visste inte detta på flera år. Din webbplats har alltid varit en räddning när jag fastnar.

    Reply

  33. Hej: Hur får man anpassat radavstånd (säg, 1.5em) för en enskild instans på en sida istället för att ändra hela temats CSS? Jag ser att två andra personer har frågat samma sak utan svar, åtminstone inte som jag hittade. Tack!

    Reply

  34. Jag satte p-marginalerna till noll. I din CSS skulle det vara något i stil med p {margins: 0; }

    Reply

  35. Shift+Enter för att undvika stort mellanrum mellan rader i wysywig tinye mce-redigeraren i WordPress. Fungerar !!!! Fantastiskt!

    Reply

  36. Vad sägs om att helt enkelt lägga till lite text och ändra textfärgen till vit (om bakgrunden är vit)? Detta bör göra det möjligt att skapa och anpassa radavstånd mycket enklare (om inte bakgrunden, naturligtvis, är en bild av något som inte kan matchas med teckensnittsfärg).

    Reply

  38. Hej WPBeginner-personal,

    Jag har en annan fråga. Jag använder Visual Composer och har lagt till många avdelare med text mellan mina sektionsrubriker på min startsida. Jag skulle vilja att dessa textrubriker också skulle vara en länk till den sektionen.
    Men varje gång jag lägger till länken förlorar jag den sektionsidentifierande texten som jag hade i avdelaren och den ersätts magiskt med standardtexten "TITLE".

    För att försöka göra det till en länk lägger jag till länk koden inuti denna hakparentes:
    [vc_text_separator title=”BILAR FRÅN 1950-TALET”]

    Jag kliar mig i huvudet så hårt att jag tror att jag är flintskallig. All hjälp kommer att ge dig en livstids tacksamhet!!!

    Tack,
    Mike

    Reply

  39. Jag använder WordPress-temat 'Divi' och upptäckte att om du trycker på enter (eller shift + enter) två gånger, för att skapa ett större utrymme, ignoreras det. För att komma runt detta, tryck enter en gång, skriv en tecken på raden, (det spelar ingen roll vilken), markera den och ändra teckenfärgen på tecknet till vit och tryck sedan enter igen; detta resulterar i önskat utrymme mellan raderna utan att behöva redigera temat. Detsamma gäller för extra utrymmen i en rad; ange så många tecken som önskas, markera dem och ändra deras teckenfärg till vit och fortsätt sedan i önskad teckenfärg.

    Reply

    • Strålande tips! Tack så mycket för detta, du räddade mig från många huvudvärk och besvär Anthony!

      Reply

  41. THANK YOU!! I Love you guys! So glad I found this site! I’ve almost literally been banging my head against the wall. If I knew how to insert emojis, this post would be covered with hearts and smiley faces. :-)

    Reply

    • P.S. ~ HA! Jag visste INTE att min lilla kolon och parentes faktiskt skulle förvandlas till ett smiley-ansikte. LOL

      Reply

  42. Åh ja! Du har precis hjälpt mig att lösa ett problem (tvingat enkelt avstånd mellan stycken) som har gäckat mig i åratal!

    Reply

  43. Jag är prenumerant på WP Beginner.
    Jag hade en fråga angående inmatning av ingenjörsdata för min produkt på min webbplats. Utrymmet i tabellerna verkade för stort på sidan. Jag sökte i Wordpress support och allt jag såg var kortfattade svar på frågan om enkelradsavstånd.

    Du är den första att svara på frågan, och det var uppenbarligen korrekt. Tack.

    Med vänliga hälsningar,

    Dave

    Reply

  44. Vad sägs om Android. Den senaste uppdateringen har tvingat fram dubbelt radavstånd (nytt stycke). Inte särskilt bra för poetskrivare. Finns det något sätt att återställa det till enkelradsavstånd?

    Reply

  45. Jag använder Omega Theme och Ctrl/Enter fungerar inte. Finns det något annat jag kan göra. Jag kan inte hitta post.p i CSS-filen.

    Reply

  48. Tack för "skiftet" och enter för enkelradsavstånd eftersom jag har velat lista ut detta i år ... och aldrig kommit till att hitta lösningen.

    Reply

  50. Jag letar överallt efter ett svar... när jag lägger till en
    i textredigeraren tas den bort i den visuella redigeraren. Det driver mig till vansinne. Har wpbeginner någon rekommendation?

    Ska jag lägga till ett plugin för att stoppa detta?

    Jag provade ett plugin för flera år sedan, men jag var tvungen att gå tillbaka och formatera om varje inlägg.

    Alla länkar med handledning eller råd uppskattas mycket!

    Reply

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt vår kommentarspolicy, och din e-postadress kommer INTE att publiceras. Använd INTE nyckelord i namn fältet. Låt oss ha en personlig och meningsfull konversation.

Copyright © 2009 - 2025 WPBeginner LLC. Alla rättigheter förbehållna. WPBeginner® är ett registrerat varumärke.

Hanteras av Awesome Motive | WordPress-hosting av SiteGround

WordPress®-varumärket är immateriell egendom som tillhör WordPress Foundation. Användning av WordPress®-namn på denna webbplats är endast för identifieringsändamål och innebär inte ett godkännande från WordPress Foundation. WPBeginner är inte godkänt eller ägt av, eller anslutet till, WordPress Foundation.

Jag behöver hjälp med…

Populära sökningar:

Starta en blogg WordPress SEO WordPress-prestanda WordPress-fel WordPress-säkerhet Bygga en onlinebutik