Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här lägger du till en horisontell radseparator i WordPress (3 metoder)

Att lägga till en horisontell linje i ett WordPress-inlägg eller på en WordPress-sida är ett effektivt sätt att förbättra läsbarheten. Dessa linjer hjälper till att bryta ner långa inlägg till hanterbara avsnitt, vilket säkerställer att ditt innehåll förblir engagerande.

Horisontella avdelare är också perfekta för att uppmärksamma viktiga meddelanden eller kampanjer. De separerar tydligt olika delar av din sida, vilket gör det lättare för läsarna att följa med.

I den här guiden går vi igenom 3 enkla metoder för att lägga till horisontella linjedelare i WordPress. Vi kommer också att dela med oss av några alternativ för horisontella linjeavdelare.

How to add a horizontal line in WordPress

Varför ska du add to en horisontell linje separator i WordPress?

Det tar bara några sekunder för besökarna att bestämma sig för om de vill lämna din sida. Beroende på enhet kan webbläsare visa ditt blogginlägg som en lång textvägg.

Många läsare lämnar oss om innehållet är för svårläst, även om blogginlägget är fullspäckat med värde.

Att lägga till en horisontell radseparator kan vara allt som krävs för att ditt innehåll ska bli läsbart.

En horisontell radseparator kan bidra till att förbättra läsbarheten och i slutändan öka användarnas engagemang i dina blogginlägg och sidor. Utöver det kan den markera viktiga punkter, vilket hjälper till att betona viktiga citat eller övergångar i ditt innehåll.

Eftersom detta är en omfattande guide om hur du lägger till en horisontell linjeavdelare i WordPress, kan det vara bra att använda vår innehållsförteckning för att hitta den metod som du gillar att använda:

Är du redo? Låt oss komma in i det.

Metod 1: Lägga till en horisontell linje i WordPress Block Editor

Om du vill lägga till en horisontell linje med WordPress blockredigerare kan du klicka på ikonen ”+” för att lägga till ett nytt block där du vill att linjen ska vara.

Adding a new block where you want your horizontal line

Därefter väljer vi blocket ”Separator” från avsnittet ”Layoutelement”.

Du hittar den enkelt med hjälp av sökfältet.

Find and add the Separator block

När du har add to kommer du att se din horisontella linjeavdelare i ditt content area.

Styling av den horisontella linjen i WordPress Block Editor

Som standard är den horisontella avdelaren en ljusgrå linje över centrerat på din post eller page.

Du kan ändra hur den ser ut genom att clicka på linjen för att selecta dess block. Då öppnas panelen för edit av ”Block” på höger sida av din vy.

Click on the Separator block to select it and edit the settings

Om du vill ändra stilen på din rad klickar du bara på den lilla pilen bredvid Styling. Då ser du de olika alternativen.

Du kan ändra den horisontella linjen till en av dessa om du vill:

  • En bred linje som täcker hela bredden av innehållet i din post.
  • Tre prickar visas centrerat på din post.
The different styles available for the Separator block

Note: I vissa teman i WordPress kommer både den breda linjen och standardlinjen att täcka hela bredden på your post.

Du kan också ändra färgen på din horisontella linje under inställningarna för ”Färg”. Klicka bara på ett av alternativen som visas eller använd länken ”Egen färg” för att välja vilken färg som helst.

Change the color of the horizontal line

Om du vill återgå till den grå standardfärgen klickar du bara på knappen ”Clear” under färgalternativen.

Här är vår horisontella linje blå och använder stilen ”wide”.

A horizontal line that's been modified to be wide and blue

Metod 2: Lägga till en horisontell linje i WordPress klassiska redigerare

Om du fortfarande använder den klassiska editorn behöver du inte oroa dig; du kan fortfarande lägga till grundläggande horisontella linjer.

Det gör du genom att redigera ett befintligt inlägg eller en befintlig sida eller genom att skapa ett nytt inlägg eller en ny sida. Om du bara ser en rad med knappar i verktygsfältet ovanför inläggsredigeraren klickar du på ikonen Toolbar Toggle till höger:

Click the Toolbar Toggle button to see the second row of icons

Detta öppnar den andra raden av knappar, som innehåller alternativet horisontell linje.

Gå nu vidare och lägg till en radbrytning mellan styckena där du vill att den horisontella linjen ska gå. Du kan sedan klicka på ikonen ”Horisontell linje”. Det är den andra från vänster på den andra raden:

The horizontal line button in the classic WordPress editor

När du har lagt till den ser du en ljusgrå horisontell linje.

Det kommer att täcka hela bredden på din post gillar detta:

A horizontal rule created using the classic editor

Lägga till en horisontell linjeavdelare manuellt med hjälp av HTML

I vissa sällsynta fall kan du behöva lägga till en horisontell linjeavdelare manuellt i ditt WordPress content.

Om så är fallet kan du helt enkelt göra det genom att använda hr HTML-taggen i ditt content:

<hr>

This will add the horizontal line separator to your post content.

Metod 3: Lägga till en sidbrytning i WordPress-formulär med hjälp av WPForms

Vad händer om du vill lägga in en paus inte i ett inlägg eller en sida utan i ett WordPress-kontaktformulär? Du kan göra det också!

Vi kommer att använda WPForms för detta.

Först måste du downloada, installera och aktivera pluginet WPForms. Om du ej är säker på hur du gör, kontrollera vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Därefter kan du gå till WPForms ” Lägg till nytt från din WordPress instrumentpanel.

Creating a new form using WPForms

På nästa skärm anger du ett namn för ditt formulär och väljer sedan en mall.

I den här handledningen ska vi använda mallen”Formulär för offertförfrågan”.

När du har valt en mall kan du helt enkelt föra muspekaren över mallen och klicka på knappen för att skapa ditt formulär.

Creating a quote form in WPForms

Låt oss sedan rulla ner fliken ”Lägg till fält” på vänster sida till avsnittet ”Fancy Fields”.

Sedan kan du dra och släppa ”sidbrytningen” dit du vill ha den på formuläret. Vi placerar den precis före rutan ”Request”.

Adding a page break in WPForms

Du kommer att se att formuläret nu är uppdelat i två delar. WPForms har också automatiskt addat en knapp för ”Nästa”.

Du kan ändra etiketten ”Nästa” om du vill, och du kan lägga till en ”Föregående”-knapp så att användarna kan gå till formulärets andra sida.

Klicka bara på fältet för sidbrytning för att redigera det.

Editing the page break field in WPForms

När du är klar kan du spara formuläret genom att klicka på knappen ”Spara” längst upp till höger.

Nu är det dags att lägga till formuläret på din webbplats.

Gå vidare och klicka på knappen ”Embed” precis bredvid knappen ”Save” för att komma igång. Detta öppnar ett snabbfönster där du kan skapa ett nytt inlägg eller en ny sida eller redigera en befintlig.

I den här handledningen väljer vi alternativet ”Välj befintlig sida”.

WPForms' embed prompt window

Nästa steg är att välja bland de tillgängliga sidorna och klicka på ”Let’s Go!”.

Du kommer då att omdirigeras till WordPress innehållsredigerare.

Härifrån klickar du bara på ikonen ”+” för att lägga till ett nytt block i ditt inlägg eller på din sida och hitta blocket ”WPForms”. Du kan använda sökfältet eller titta i avsnittet ”Widgets”.

När du har hittat det klickar du på det för att lägga till blocket på din sida.

Adding the WPForms block to your page or post

Nu kommer du att se ett alternativ för att välja ditt formulär.

Gå vidare och välj det formulär som du just skapade från rullgardinsmenyn.

Choose your form from the dropdown list

När du har gjort det kan du publicera inlägget eller sidan. Och det är allt som behövs!

Om du nu besöker inlägget eller sidan kan du se formuläret i aktion.

The form with a page break on the website

Bonus tips: Andra separatorer som du kan använda i dina inlägg och sidor

Med WordPress standardblockredigerare kan du lägga till flera olika typer av separatorer i dina inlägg och sidor.

Förutom den horisontella linjeseparatorn finns det andra alternativ i blockuppsättningen ”Layoutelement”, bland annat blocken ”Avstånd”, ”Mer”-länken och ”Sidbrytning”.

Distansblocket

Med ”Spacer”-blocket kan du lägga till ett vitt utrymme mellan blocken. Om du till exempel vill ha ett litet mellanrum i slutet av ditt inlägg före ett specialerbjudande kan du använda ”Spacer”.

Så här ser det ut när du skapar din post i Block Editor:

The Spacer block in the block editor

Du kan anpassa distansens höjd så att den passar ditt innehållsområde bättre.

Och så här kan distansen se ut på din webbplats:

How the spacer block appears in a page or post

The More Block

Om ditt tema visar hela inlägg på huvudbloggsidan i stället för utdrag kommer inlägget att avbrytas vid den punkten om du lägger till en ”Mer”-länk.

Det innebär att besökarna måste klicka för att läsa mer.

The More block in the post editor

Bilden ovan visar vad du kommer att se i content editor.

Och nedan ser du hur det kan se ut på din webbplats för besökare:

The Read More block in a post on the site

Du kan lära dig mer om detta i våra guider om hur du använder more-blocket på rätt sätt och hur du enkelt anpassar utdrag i WordPress.

Blocket för page break

Med ”Page Break” kan du dela upp långa blogginlägg i flera sidor, men du kan inte anpassa det på något sätt. Så här ser det ut när du skapar ditt inlägg:

The page break block shown in the block editor

Sedan kommer ”Sidbrytning” att använda sidnummer och låta läsarna välja vilken sida de vill gå till.

Så här kan det se ut på din webbplats:

The page break as it appears on a site

Alla dessa kan vara bra alternativ till att lägga till en horisontell linje i WordPress, beroende på ditt mål.

Vi hoppas att denna handledning hjälpte dig att lära dig hur du lägger till horisontella radseparatorer i WordPress. Om du vill lägga till fler design- och layoutelement till dina inlägg och sidor kan du kolla in vår artikel om de bästa dra-och-släpp-sidbyggarna i WordPress eller läsa vårt blogginlägg om hur du skapar en anpassad formdelare i 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.

Avslöjande: Vårt innehåll stöds av våra läsare. 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 editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

5 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    May I ask you, if its possible to make dividier horizontal, instead fo vertical?

    • WPBeginner Support

      For that you would want to create columns and then you would use css to add the border property to the columns.

      Administratör

  3. Shoaib

    Does using hr tags between article affect SEO?

    • WPBeginner Support

      It would depend on how they are being used but for the most part they should not have a major effect.

      Administratör

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åra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.