Har du någonsin publicerat ett WordPress-blogginlägg som såg bra ut vid första anblicken men kändes svårläst när du scrollade igenom det? Långa textblock kan överväldiga läsare och få dem att tappa intresset, även om innehållet är värdefullt.
Ibland räcker det med en enkel horisontell linje för att innehållet ska flyta bättre. Dessa avdelare bryter upp texten så att den känns mer organiserad och lättare att följa. De hjälper också till att lyfta fram viktiga meddelanden, kampanjer eller övergångar mellan sektioner på ett naturligt sätt.
I den här guiden går vi igenom tre enkla sätt att lägga till horisontella linjeavdelare i WordPress.
På så sätt kan du få dina inlägg att se polerade och professionella ut med minimal ansträngning. 🙌
Varför ska du lägga till en horisontell linjeskiljare i WordPress?
En horisontell linjeseparator bryter upp sektioner, gör ditt innehåll lättare att skanna och håller läsarna engagerade.
Förutom läsbarhet är horisontella linjer också användbara för att dra uppmärksamhet till viktiga punkter, betona citat, eller skapa smidiga övergångar mellan idéer.
Sammantaget bestämmer besökare på några sekunder om de ska stanna kvar på din sida eller lämna. På många enheter kan ditt blogginlägg se ut som en enda lång textvägg, vilket kan vara överväldigande att läsa.
En enkel horisontell linje kan ändra det. ✅
Eftersom detta är en omfattande guide om hur man lägger till en horisontell linjedelare i WordPress, kan du använda vår innehållsförteckning för att hitta den metod du vill använda:
- Method 1: Adding a Horizontal Line in the WordPress Block Editor
- Method 2: Adding a Horizontal Line in the WordPress Classic Editor
- Metod 3: Dela upp ett långt formulär i flera sidor med WPForms
- Bonus Separators You Can Use in Your Posts and Pages
- Vanliga frågor om att lägga till horisontella linjer i WordPress
- Fortsätt lära dig: Tips för att hantera dina WordPress-inlägg och sidor
Redo? Nu kör vi.
Metod 1: Lägga till en horisontell linje i WordPress blockredigerare
För att lägga till en horisontell linje med WordPress blockredigerare, kan du klicka på ikonen '+' för att lägga till ett nytt block var du vill att linjen ska vara.
Välj sedan blocket 'Avdelare' från sektionen 'Layout-element'.
Du kan hitta den enkelt med hjälp av sökfältet.
När det är tillagt ser du din horisontella linjeskiljare i ditt innehållsområde.
Stilning av den horisontella linjen i WordPress blockredigerare
Som standard är den horisontella avdelaren en ljusgrå linje tvärs över mitten av ditt inlägg eller sida.
Du kan ändra hur den ser ut genom att klicka på linjen för att välja dess block. Sedan öppnas redigeringspanelen 'Block' på höger sida av skärmen.
För att ändra stilen på din linje, klicka bara på den lilla pilen bredvid 'Stilar'. 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 ditt inläggs innehåll.
- Tre punkter visas i mitten av ditt inlägg.
📌 Notera: I vissa WordPress-teman kommer både den breda linjen och standardlinjen att täcka hela bredden av ditt inlägg.
Du kan också ändra färgen på din horisontella linje under 'Färg'-inställningarna.
Klicka bara på ett av de visade alternativen eller använd länken ‘Anpassad färg’ för att välja vilken färg som helst.
Om du vill återgå till standard grå färg, klicka helt enkelt på knappen 'Clear' under färgalternativen.
Här är vår horisontella linje blå och använder stilen ‘wide’.
Metod 2: Lägga till en horisontell linje i WordPress klassiska redigerare
Om du använder den klassiska redigeraren (aktiveras ofta med ett plugin), kan du fortfarande enkelt lägga till horisontella linjer.
För att göra det, redigera helt enkelt ett befintligt inlägg eller en sida eller skapa en ny. Om du bara ser en rad knappar i verktygsfältet ovanför inläggsredigeraren, klicka sedan på ikonen 'Toolbar Toggle' till höger:
Detta öppnar upp den andra raden med knappar, som inkluderar alternativet för horisontell linje.
Härifrån är det första du behöver göra att placera markören på en ny rad där du vill infoga den horisontella linjen.
Du kan sedan klicka på ikonen 'Horisontell linje'. Den är den andra från vänster på andra raden:
När den har lagts till ser du en ljusgrå horisontell linje.
Det kommer att täcka hela bredden av ditt inlägg som detta:
Lägg manuellt till en horisontell linje med HTML
I vissa sällsynta fall kan du behöva lägga till en horisontell linjedelare manuellt i ditt WordPress-innehåll.
Om så är fallet kan du helt enkelt göra det genom att använda HTML-taggen <hr> i ditt innehåll:
<hr>
Du kan lägga till den här taggen i 'Text'-vyn av den klassiska redigeraren eller inom ett 'Anpassad HTML'-block i blockredigeraren.
Det är ett snabbt sätt att lägga till en avdelare när du arbetar med kod.
Metod 3: Dela upp ett långt formulär i flera sidor med WPForms
Ibland behöver du bryta upp ett långt formulär för att göra det mindre överväldigande för användarna. Istället för en visuell linje kan du dela upp ditt formulär i flera sidor. Vi visar dig hur du gör detta med hjälp av vår favorit WordPress-formulärbyggare, WPForms.
Faktum är att WPForms är verktyget vi älskar och använder själva, så vi rekommenderar starkt att du överväger det. För mer information om pluginet, hoppa över till vår fullständiga WPForms-recensionsguide!
Först måste du ladda ner, installera och aktivera WPForms-pluginet. Om du är osäker på hur, kolla bara vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
📌 Notera: gratis WPForms-version fungerar bra för den här guiden. Med det sagt, om du behöver avancerade funktioner som villkorsstyrd logik, måste du uppgradera till Pro-versionen.
Gå sedan till WPForms » Lägg till ny från din WordPress-instrumentpanel.
På nästa skärm anger du ett namn för ditt formulär och väljer sedan en mall.
För den här handledningen kommer vi att använda mallen 'Formulär för offertförfrågan'.
Efter att ha valt en mall kan du helt enkelt föra muspekaren över mallen och klicka på knappen för att skapa ditt formulär.
Låt oss sedan skrolla ner i fliken 'Lägg till fält' på vänster sida till avsnittet 'Fancy Fields'.
Sedan kan du dra och släppa 'Sidbrytning' dit du vill ha den i formuläret. Vi placerar den precis före rutan 'Begäran'.
💡 Proffstips: Vill du snabbt bygga ditt formulär? Då kommer du att uppskatta WPForms AI-drivna formulärbyggare! Ge bara en kort beskrivning och vänta på att AI:n genererar ditt formulär.
Du kommer att se att formuläret nu är uppdelat i 2 delar. WPForms har automatiskt lagt till en 'Nästa'-knapp också.
Du kan ändra etiketten 'Nästa' om du vill, och du kan lägga till en knapp 'Föregående' så att användare kan gå till formulärets andra sida.
Klicka bara på fältet för sidbrytning för att redigera det.
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 promptfönster där du kan skapa ett nytt inlägg eller en sida eller redigera ett befintligt.
För den här handledningen väljer vi alternativet 'Välj befintlig sida'.
Nästa steg är att välja bland de tillgängliga sidorna och klicka på 'Låt oss gå!'
Du kommer sedan att omdirigeras till WordPress innehållsredigerare.
Härifrån klickar du helt enkelt på '+' ikonen för att lägga till ett nytt block i ditt inlägg eller din sida och hittar 'WPForms' blocket. Du kan använda sökfältet eller leta i sektionen 'Widgets'.
När du hittar den, klicka på den för att lägga till blocket på din sida.
Nu ser du ett alternativ för att välja ditt formulär.
Välj formuläret du just skapade från rullgardinsmenyn.
När du har gjort det kan du publicera inlägget eller sidan. Och det är allt!
Nu, om du besöker inlägget eller sidan, kan du se formuläret i aktion.
Bonusavdelare du kan använda i dina inlägg och sidor
Förutom en horisontell linje erbjuder WordPress Block Editor andra användbara block för att hjälpa dig att organisera ditt innehåll och förbättra layouten. Låt oss titta på några bra alternativ.
Avdelarblocket
Blocket 'Avstånd' låter dig lägga till vitt utrymme mellan block.
Till exempel, om du vill ha ett litet mellanrum i slutet av ditt inlägg före en lead magnet, kan du använda 'Spacer'.
Så här ser det ut när du skapar ditt inlägg i blockredigeraren:
Du kan anpassa höjden på avdelaren för att bättre passa ditt innehållsområde.
Och så här kan mellanrummet se ut på din webbplats:
Blocket Mer
Om ditt tema visar hela inlägg på din huvudsakliga bloggsida istället för utdrag, kommer tillägget av en ‘Mer’-länk att klippa av ditt inlägg vid den punkten.
Detta kräver att besökare klickar för att läsa mer.
Ovanstående bild visar vad du kommer att se i innehållsredigeraren.
Och nedan är hur det kan se ut på din webbplats för besökare:
Du kan lära dig mer om detta i våra guider om hur du korrekt använder mer-blocket och hur du enkelt anpassar utdrag i WordPress.
Blocket Sidbrytning
‘Sidbrytning’ delar upp ett långt blogginlägg i flera sidor (en teknik som kallas paginering).
Själva blocket har inga stilalternativ i redigeraren, så dess utseende styrs av ditt WordPress-tema. Så här ser det ut när du skriver ditt inlägg:
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 WordPress-webbplats:
För mer information kan du hänvisa till vår guide om hur du delar upp WordPress-inlägg i flera sidor.
Något av dessa kan vara bra alternativ till att lägga till en horisontell linje i WordPress, beroende på ditt mål.
Vanliga frågor om att lägga till horisontella linjer i WordPress
Vad är HTML-taggen för en horisontell linje?
HTML-taggen för en horisontell linje är <hr>, vilket står för "horizontal rule". Du kan lägga till denna tagg i kodredigeraren för att manuellt infoga en standardlinjeavdelare.
Hur kan jag anpassa den horisontella linjen i WordPress?
WordPress blockredigerare har inbyggda inställningar som låter dig ändra linjens stil och färg. För mer avancerade anpassningar, som att justera tjockleken eller skapa unika designer, skulle du vanligtvis använda anpassad CSS.
Kan jag använda en bild istället för en linje som avdelare?
Absolut. Att använda en anpassad bild som avdelare kan ge ditt innehåll en unik, varumärkesmässig touch. För ännu mer kreativ kontroll, låter en sidbyggarplugin som SeedProd dig designa anpassade sektionsavdelare utan kod.
Fortsätt lära dig: Tips för att hantera dina WordPress-inlägg och sidor
Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till horisontella linjeskift i WordPress.
Om du vill lägga till fler design- och layout-element i dina inlägg och sidor, kolla in våra artiklar om:
- De bästa dra-och-släpp WordPress sidbyggarna
- Hur man skapar en anpassad formdelare i WordPress
- Hur man visar en lista över senast uppdaterade inlägg i WordPress
- Hur man lägger till anpassad inläggsstatus för blogginlägg i WordPress
- Hur man skapar anpassade inläggstyper i WordPress
- Hur man lösenordsskyddar en sida eller ett inlägg i WordPress
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.
Jiří Vaněk
Får jag fråga dig, om det är möjligt att göra en avdelare horisontell, istället för vertikal?
WPBeginner Support
För det skulle du vilja skapa kolumner och sedan använda CSS för att lägga till egenskapen 'border' till kolumnerna.
Admin
Shoaib
Påverkar användningen av hr-taggar mellan artiklar SEO?
WPBeginner Support
Det skulle bero på hur de används, men för det mesta bör de inte ha någon större effekt.
Admin