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 addar du en horisontell separator i WordPress (5 metoder)

Vill du add to en horisontell linje över din post eller page i WordPress?

Horisontella linjeavdelare är ett bra sätt att dela upp långa posts i mindre sections, lyfta fram speciella meddelanden eller främjande och tydligt separera olika delar av en page.

I den här artikeln visar vi dig hur du enkelt kan add to en horisontell linjedelare i WordPress.

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 innan visitorerna vet om de vill lämna din page. Beroende på device kan webbläsare ibland displaya ditt blogginlägg som en lång textvägg.

Många Läsare kommer att lämna bloggen om innehållet ser för svårt att läsa, även om artikeln är fylld med mycket värde.

Att lägga till en horisontell radseparator kan vara all som krävs för att göra ditt content läsbart, vilket förbättrar läsbarheten och i slutändan ökar användarnas engagement i dina blogginlägg och pages.

Utöver det kan horisontella separatorer lyfta fram viktiga punkter. Det kan till exempel hjälpa till att betona viktiga citat eller övergångar i ditt content.

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:

Lägga till en horisontell linje i WordPress Block Editor

Om du vill lägga till en horisontell linje i Block Editor i WordPress klickar du på icon (+) för att lägga till ett nytt block där du vill ha linjen.

Adding a new block where you want your horizontal line

Välj sedan blocket Separator i sectionen Layout Elements.

Du kan också söka efter den 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 Color settings. Klicka bara på ett av alternativen som visas eller använd länken ”Custom color” 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 alternativen för färg.

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

Lägga till en horisontell linje i WordPress Classic Editor

Om du fortfarande använder den klassiska Editorn kan du lägga till grundläggande horisontella linjer. Det gör du genom att helt enkelt editera en befintlig post eller page eller skapa en new.

Om du bara ser en row med knappar i verktygsfältet ovanför post editor, klicka då på Toolbar Toggle icon 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.

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

The horizontal line button in the classic WordPress editor

Your horisontella linje kommer att vara ljusgrå.

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.

Andra separatorer som du kan använda i dina posts och pages

Standard WordPress Block Editor allow you to add multiple types of separators to your posts and pages.

Notis: Förutom den horisontella linjeseparatorn finns det andra alternativ i blockuppsättningen Layout Elements, bland annat blocken Spacer, More link och Page break.

Distansblocket

Med Spacer kan du add to mellanrum mellan blocken. Om du till exempel vill ha ett litet mellanrum i slutet av din post 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 customize höjden på distanshållaren.

Och så här ser spacern ut på din site:

How the spacer block appears in a page or post

The More Block

Om ditt theme visar hela inlägg (snarare än excerpt) på din huvudsakliga blogginläggssida, kommer en ”More”-länk att bryta av ditt inlägg vid den tidpunkten.

Besökaren kan clicka 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 under ser du hur det ser ut på din site för besökarna.

The Read More block in a post on the site

Du kan lära dig mer om excerpt i vår guide om hur du enkelt customize excerpt i WordPress.

Blocket för page break

Med Page Break kan du dela upp långa blogginlägg i flera pages. Du kan inte customize den på något sätt. Så här ser det ut när du skapar din post:

The page break block shown in the block editor

Och så här ser page breaket ut på din site.

Notice how it uses page numbers and allows readers to choose which page they want to go to.

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å vad du vill göra.

Lägga till en page break i WordPress-formulär med hjälp av WPForms

Vad händer om du vill lägga in en break ej i en post eller page utan i ett kontaktformulär i WordPress? 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.

Gå sedan till WPForms ” Add New i din WordPress dashboard.

Creating a new form using WPForms

Enter ett namn för ditt formulär och välj sedan en template. Vi kommer att använda templaten”Request a Quote Form” för vår.

Run din muspekare över templates och click knappen för att skapa your form.

Creating a quote form in WPForms

Därefter rullar du ner tabben Add Fields på vänster sida till Fancy Fields section.

Drag and drop page break till var du vill ha den på formuläret. Vi placerar den precis före boxen 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 för att gå till formulärets andra page. Klicka bara på fältet för page break för att editera det.

Editing the page break field in WPForms

Save your form när du är klar genom att click the Save button högst upp till höger.

You kan nu add formuläret till your website.

Först måste du skapa en new post eller page eller edit en befintlig.

Click the (+) to add a new block to your post or page and find the WPForms block. Du kan använda sökfältet eller titta i Widgets section. Add blocket till din page.

Adding the WPForms block to your page or post

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

Välj från dropdown-listan.

Choose your form from the dropdown list

När du har gjort det kan du publicera posten eller page.

Kontrollera sedan hur ditt formulär ser ut på din website.

The form with a page break on the website

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du addar horisontella linje separatorer i WordPress. Om du vill add to fler design- och layoutelement till dina inlägg och sidor, kontrollera vår artikel om de bästa drag and drop WordPress-sidbyggarna eller läs vårt blogginlägg om hur du skapar en customize 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 says

    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!

    • WPBeginner Support says

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

      Administratör

    • WPBeginner Support says

      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.