Hur man ändrar radavstånd i WordPress för bättre användarupplevelse: 4 snabba metoder

Tät, rörig text stöter bort besökare innan de har läst klart första stycket. Att justera radavståndet är ett av de snabbaste sätten att förbättra hur ditt innehåll känns utan att behöva designa om hela din webbplats.

Den här guiden täcker fyra metoder för att ändra radavstånd i WordPress, från blockredigeraren till anpassad CSS, så att du kan välja den metod som bäst passar din konfiguration.

Vikten av radavstånd i WordPress

Radavståndet styr hur mycket vertikalt utrymme som ska finnas mellan varje textrad. För lite utrymme och innehållet känns trångt och svårt att läsa igenom. För mycket och det förlorar sammanhang och uppfattas som osammanhängande.

Rätt radhöjd gör att läsarna kan navigera igenom ditt innehåll utan friktion. Det signalerar också professionalism. En sida med bra radavstånd ser genomtänkt och ren ut. En sida med dåligt radavstånd ser oavslutad ut oavsett hur bra texten är.

För de flesta WordPress-webbplatser ger en radhöjd mellan 1,5 och 1,8 bekväm och läsbar text på både dator- och mobilskärmar.

Hur ändrar man radavstånd i WordPress?

WordPress erbjuder flera sätt att justera radavstånd, beroende på din redigerare, ditt tema och din användarvänlighet med kod. Utför den metod som bäst passar din konfiguration.

Metod 1: Ändra radavstånd i WordPress med hjälp av den klassiska redigeraren

Om du fortfarande använder den klassiska redigeraren har du två alternativ för att justera radavstånd. Listrutan Format är den snabbaste. Textredigeraren ger dig mer exakt kontroll genom inbäddad CSS.

Använda rullgardinsmenyn "Format"

• Steg 1: Gå till ditt WordPress-inlägg eller din WordPress-sida och markera texten du vill justera.

• Steg 2: Klicka på rullgardinsmenyn Format i verktygsfältet i den klassiska redigeraren.

• Steg 3: Välj Linjehöjd om ditt tema stöder det och välj ett förinställt värde som 1,5 eller 2,0.

Använda textredigeraren

I den klassiska redigeraren kan du växla mellan visuell redigering och textredigering (HTML). Så här anpassar du radavståndet med textredigeraren:

• Steg 1: Klicka på fliken "Text" i det övre högra hörnet av den klassiska redigeraren för att växla till HTML-vyn.
• Steg 2: Nu kan du lägga till inbäddad CSS direkt i dina stycketaggar för att kontrollera radavståndet.

Till exempel:

<p style="line-height: 1.7;">Detta stycke har en radhöjd på 1,7.</p>

Precis som i Gutenberg kan line-height-egenskapen här använda siffror, längdvärden, procentsatser eller nyckelord för att definiera avståndet.

Metod 2: Använd Gutenberg-redigeraren för att ändra radavstånd

Gutenbergs blockredigerare har inbyggda typografikontroller som låter dig justera radavståndet utan att röra någon kod. För mer exakt kontroll kan du också redigera blockets HTML direkt.

Justera radavstånd genom styckeinställningar

• Steg 1 : Markera det stycke du vill ändra i ditt WordPress-inlägg eller din WordPress-sida

• Steg 2: Gå till sidofältet för blockinställningar till höger. Leta efter avsnittet "Typografi" eller "Textinställningar".

• Steg 3: Klicka på trepunktsmenyn bredvid Typografi så ser du alternativet för "Linjehöjd".

• Steg 4: Justera bara radavståndet efter dina önskemål. Så enkelt är det!

Anpassa radavstånd med HTML

Om du vill ha mer exakt kontroll finns det anpassade HTML- alternativet som hjälper dig.

Så här gör du:

• Steg 1: Markera det styckeblock du vill redigera. Klicka på ikonen ”p” och växla sedan till ”Kod”.

• Steg 2: Klicka på kodikonen igen och välj sedan "Anpassad HTML". Detta omvandlar ditt stycke till redigerbar HTML.

• Steg 3: Lägg nu till följande kodavsnitt med önskat innehåll:

<p style="line-height: 1.8em;">Din text här.</p>

Line-height-egenskapen styr avståndet mellan textrader.

Så här kan du ställa in det:

• Tal: En multiplikator av teckenstorleken (t.ex. 1,5 betyder 1,5 gånger teckenstorleken).
• Längdvärde: Typ 20px för 20 pixlars avstånd.
• Procentandel: 150 % för avstånd, vilket är 150 % av teckenstorleken.
• Nyckelord: Till exempel normal (som vanligtvis är cirka 1,2 som standard).

Obs! Justeringar som görs i blockinställningarna gäller endast för det specifika stycket, men att använda blocket "Anpassad HTML" med inbäddad CSS ger dig mer flexibilitet, så att du kan formatera flera stycken eller element exakt som du vill.

Metod 3: Justera radavstånd med hjälp av temaanpassaren

Med temaanpassaren kan du justera radavståndet för hela webbplatsen utan att redigera enskilda block eller inlägg. Vad som är tillgängligt beror på ditt tema, men de flesta moderna teman inkluderar typografikontroller.

Steg 1: Gå till din WordPress-adminpanel och gå till Utseende > Anpassa. Detta öppnar temaanpassaren.

Steg 2: I anpassaren letar du efter avsnitt märkta "Typografi", "Innehåll" eller "Globalt". Det exakta namnet och platsen kan variera beroende på ditt tema.

Steg 3: Leta nu reda på kontrollerna för linjehöjd. Beroende på ditt tema kan du hitta något av följande:

• Skjutreglage: Dra det bara för att justera avståndet.
• Numeriskt inmatningsfält: Ange ett specifikt radhöjdsvärde, till exempel 1,5.
• Förinställda alternativ: Välj fördefinierade inställningar för radhöjd.

Steg 4: När du har gjort dina justeringar klickar du på knappen ”Publicera” för att spara dina ändringar. Det bästa? Du får en förhandsvisning i realtid av hur ändringarna påverkar din webbplats, så att du kan se resultaten direkt!

Hur använder man ytterligare CSS för radavstånd?

Om ditt tema inte inkluderar inbyggda kontroller för radhöjd, använd avsnittet Ytterligare CSS i anpassaren. Lägg till följande för att justera radavståndet i alla stycken på din webbplats.

För att endast rikta in dig på ett specifikt innehållsområde, justera väljaren så att den matchar ditt temas innehållsklass. Du kan använda px-, em-, rem- eller enhetslösa värden beroende på dina önskemål.

Metod 4: Använd WordPress-plugins för att justera radavstånd

Om du vill justera avståndet utan att röra kod eller anpassaren är ett plugin det enklaste alternativet. Spacer-pluginet lägger till ett dedikerat avståndsblock i Gutenberg-redigeraren som låter dig styra höjden mellan element med hjälp av ett reglage eller numerisk inmatning.

Installera och aktivera Spacer från WordPress plugin-katalog. Ett nytt Spacer-block visas i din blockinserter. Lägg till det mellan två valfria block, ange önskad höjd, förhandsgranska resultatet och publicera eller uppdatera sedan din sida.

Slutsats

Radavstånd är en liten förändring som gör en betydande skillnad för hur ditt innehåll läses och hur länge besökare stannar på din sida. Börja med Gutenberg Typography-inställningarna om du vill ha en snabb lösning på enskilda block.

Använd avsnittet Ytterligare CSS i temaanpassaren för att justera radavståndet över hela webbplatsen samtidigt. En radhöjd mellan 1,5 och 1,8 fungerar bra för de flesta WordPress-webbplatser och är en säker utgångspunkt innan du finjusterar för att matcha ditt specifika typsnitt och din design.

Vanliga frågor om att ändra radavstånd i WordPress