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.
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
- Hur man lägger till ett enkelt radavstånd
- Det enklaste sättet: Använda Spacer-blocket
- Modifying the Line Height and Spacing
- Videohandledning
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.
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.
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.
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.
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.
Ä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:
- Använda ett plugin (det enkla sättet)
- 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.
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.
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.
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;
}
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.
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.
phil rooksby
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!!!
Norm
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.
Maria
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?
Rashmi
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!
Hannah
Wow. Didn’t know it was so easy. Thank you so much! This double space was driving me crazy!
Christine
Tack! Så mycket enklare!
Donna
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!
Gerard
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
Elandre
Tack för alla Wordpress-tips. Den här sidan har hjälpt mig mycket med de flesta svårigheter jag hade
LR
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.
WPBeginner Support
Hej LR,
Du kan lägga till CSS genom att besöka Utseende->Anpassa och sedan klicka på fliken Ytterligare CSS i anpassaren. Se vår guide om hur man lägger till anpassad CSS i WordPress.
Om du tror att det är ett problem med temat, försök att tillfälligt byta till ett standard WordPress-tema. Om problemet försvinner kan du be din temautvecklare om support.
Admin
Derek Cummings
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!
Femi
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.
Lyn
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!
Denise B
Jag satte p-marginalerna till noll. I din CSS skulle det vara något i stil med p {margins: 0; }
Los Hundlos
Shift+Enter för att undvika stort mellanrum mellan rader i wysywig tinye mce-redigeraren i WordPress. Fungerar !!!! Fantastiskt!
Cat
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).
Tim
Tack så mycket! Livräddare!
Michael Rich
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
Anthony Cooper
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.
Julie
Strålande tips! Tack så mycket för detta, du räddade mig från många huvudvärk och besvär Anthony!
Robin Brinkler
Kom ihåg att vissa sökmotorer kan behandla "dold" text som denna som spam.
Ellen
Detta var verkligen hjälpsamt, tack!
Christy
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.
Christy
P.S. ~ HA! Jag visste INTE att min lilla kolon och parentes faktiskt skulle förvandlas till ett smiley-ansikte. LOL
Linda Paul
Å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!
WPBeginner Support
Glad you found it helpful
Admin
David M. Ebersole Sr.
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
WPBeginner Support
Glad you found it helpful
Admin
Mark
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?
Cheryl
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.
Becky
Mycket hjälpsamt, tack!
Adnan Khan
Tack, detta mest användbara tips för nya wp-användare
Tina Gleisner
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.
Ian
Hej,
Det här fungerade för mig men CSS:en gör ingenting på min sida...
Med vänliga hälsningar
Samma sak hände mig. Finns det en uppdaterad kod att infoga?
A. Lougheed
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!
WPBeginner Support
Actually it is also removed from your comment.
Se vår guide om Hur man lägger till specialtecken i WordPress-inlägg.
Admin
Jessica
Vad är koden för att justera radhöjden för ett enda inlägg?
Bharadwaj
Tack, Hjälpsamt
Samadarshi
Thank you for such wonderful articles
I was completely lost when I started wordpress but now I have a pretty basic idea
Thank u
Neal Umphred
Tack! Detta hjälpte mig att strama upp mina inlägg – förutom det första stycket i varje inlägg. Av någon anledning verkar raderna vara dubbelradiga. Finns det en kodsnutt som jag kan lägga till i Redigera CSS som skulle tillåta mig att strama upp dem?
Neal Umphred
Tack! Att lägga till kodavsnittet (.post p{line-height: 1.5em;}) i min Edit CSS gjorde min text mycket lättare att läsa. Nu, här är mitt problem: det första stycket i varje WordPress-inlägg har mycket större radavstånd än resten av styckena – och det påverkas INTE av denna radhöjdskod. Finns det ett annat kodavsnitt som jag skulle kunna lägga till i Edit CSS som skulle dra ihop dessa inledande rader?
tiffany
Tack så mycket. Er webbplats är anmärkningsvärd. Den har hjälpt mig så mycket. Prenumererad!! Fortsätt med det fantastiska arbetet!!
WPBeginner Support
Tack för de vänliga orden. Vi är glada att kunna hjälpa till.
Admin
Joe Simmons
Tack! Jag visste inte heller om "shift+enter"-tricket.
Debby
Shift + Enter. Vem visste att det var så enkelt! Tack, tack, tack!
Gamo Nana
tack för enkelradsavståndet med SHIFT + Enter
Bob M.
Jag vill tacka dig för denna visdom (Shift+Enter) också!
JE
Tack för handledningen. Hur kan jag dock justera radavståndet för enstaka stycken? Jag har en titel på 3 ord, centrerad och staplad på 3 rader. Alla rader har olika teckenstorlek, så radavstånden är inkonsekventa. Jag har letat efter ett sätt att enkelt justera genom ett textredigeringsverktyg eller plugin.
Några idéer?
Syed Balkhi
Vi använde bara en webbläsar-sökruta som du kan hitta genom att trycka Ctrl + F
Mx
Hittade .post p du använde en sökruta. Kan du berätta för mig hur jag hittar den sökrutan? Tack4
Jun Han
Det här är mycket hjälpsamt.
Tack.
http://www.digitalgrog.com.au/
det var min stora irritation tills nu.. tack, nu kan jag utrymmet ordentligt.. förresten, jag gjorde en lista över värdar, kolla in den
http://www.digitalgrog.com.au/australian/comparison-on-blog-web-hosting-for-australians/
Karen Surfy Mum
Fantastiskt!! Jag har också velat veta hur man gör detta i evigheter!!! Så enkelt när man vet… tack xxx
Widdershins
Oiiiiiiiiiiii!!! I’ve been trying to find out how to do that for yonks!!!!
Thankyouthankyouthankyou
fastow2012
"Om du inte hittar .post p-taggen, skapa en helt enkelt."
Var? ska jag bara kopiera/klistra in den var som helst i css-filen?
WPBeginner Staff
helst längst ner i css-filen.
Mx
Tyvärr, men jag förstår fortfarande inte var jag ska placera den. Är det möjligt att förklara det mer detaljerat? Tack
James
Jag har alltid undrat hur man gör detta. Tack för utbildningen.
Valerie
Jag är inte ens en riktig "nybörjare" men det finns luckor i min kunskap och du har precis löst en av de mest frustrerande sakerna med WP för den här skribenten och Word-användaren… Tack för detta och för all din fantastiska information… Jag fortsätter att lära mig fantastiska saker från dina inlägg och din webbplats. Tack och skål för dig!
kelly
almost four years of blogging and finally!
so awesome, thanks!!