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.
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.
Välj sedan blocket Separator i sectionen Layout Elements.
Du kan också söka efter den med hjälp av sökfältet.
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.
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.
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.
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”.
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:
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:
Your horisontella linje kommer att vara ljusgrå.
Det kommer att täcka hela bredden på din post gillar detta:
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:
Du kan customize höjden på distanshållaren.
Och så här ser spacern ut på din site:
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.
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.
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:
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.
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.
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.
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.
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.
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.
Nu kommer du att se ett alternativ för att välja ditt formulär.
Välj från dropdown-listan.
När du har gjort det kan du publicera posten eller page.
Kontrollera sedan hur ditt formulär ser ut på din 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.
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!
Jiří Vaněk says
May I ask you, if its possible to make dividier horizontal, instead fo vertical?
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
Shoaib says
Does using hr tags between article affect SEO?
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