Do you need to add a horizontal line throughout your publish or web page in WordPress?
Horizontal line dividers are a wonderful means to break lengthy posts into smaller sections, spotlight particular bulletins or promotion, and clearly separate totally different components of a web page.
In this text, we’ll present you the way to simply add a horizontal line divider in WordPress.
Since that is a complete information on how to add a horizontal line divider in WordPress, chances are you’ll discover it useful to use our desk of content material:
- How to Add a Horizontal Line Divider in Block Editor
- How to Add a Horizontal Line Divider in Classic Editor
- How to Add a Horizontal Line Divider with Manual HTML
- How to Add Other Types of Spacers and Page Breaks in WordPress
- How to Break a Long WordPress Forms into Multiple Sections
Adding a Horizontal Line in the WordPress Block Editor
To add a horizontal line utilizing the WordPress block editor, click on the (+) icon to add a new block wherever you need the road to be.
Next, choose the Separator block from the Layout Elements part or seek for it utilizing the search bar.
Once added, you’ll see your horizontal line divider in your content material space.
Styling the Horizontal Line in the WordPress Block Editor
By default, the horizontal divider is a pale grey line throughout the middle of your publish or web page.
You can change the way it appears to be like by clicking on the road to choose its block. Then, the ‘Block’ modifying panel will open up on the right-hand facet of your display.
To change the type of your line, simply click on the little arrow subsequent to Styles. Then, you’ll see the totally different choices.
You can change the horizontal line to certainly one of these, if you would like:
- A large line that covers the complete width of your publish’s content material.
- Three dots that show in the middle of your publish.
Note: In some WordPress themes, each the broad line and the default line will cowl the entire width of your publish.
You also can change the colour of your horizontal line below the Color settings. Simply click on on one of many choices displayed, or use the ‘Custom color’ hyperlink to decide any colour in any respect.
If you need to return to the default grey colour, simply click on ‘Clear’ button below the colour choices.
Here, our horizontal line is blue and makes use of the “wide” type.
Adding a Horizontal Line in the WordPress Classic Editor
If you’re nonetheless utilizing the basic editor, then you’ll be able to add fundamental horizontal strains. To achieve this, merely edit an present publish or web page or create a new one.
If you solely see one row of buttons in the toolbar above the publish editor, then click on on the Toolbar Toggle icon on the proper:
This will open up the second row of buttons, which incorporates the horizontal line choice.
Now, go forward and put a line break between the paragraphs the place you need the horizontal line to go. You can then click on the Horizontal Line button. It’s the second from the left on the second row:
Your horizontal line might be mild grey. It’ll cowl the entire width of your publish like this:
Manually including a Horizontal Line divider utilizing HTML
In some uncommon instances, chances are you’ll want to manually add a horizontal line divider in your WordPress content material.
If so, you’ll be able to merely try this through the use of the hr HTML tag in your content material:
This will add the horizontal line separator in your publish content material.
Other Separators You Can Use in Your Posts and Pages
The default WordPress block editor permits you to add a number of sorts of separators to your posts and pages.
Aside from the horizontal line separator, the opposite choices in the Layout Elements set of blocks embody the Spacer, the More hyperlink, and the Page Break blocks.
The Spacer Block
The Spacer allows you to add white area between blocks. For occasion, if you would like a slight hole on the finish of your publish earlier than a particular supply, you should use the Spacer.
You can customise the peak of the spacer. Here’s the way it appears to be like if you’re creating your publish in the block editor:
And right here’s how the spacer seems in your website:
The More Block
If your theme reveals full posts (quite than excerpts) in your predominant weblog web page, then including a ‘More’ hyperlink will break off your publish at that time. The customer can click on to learn extra.
Here’s the way it appears to be like if you’re creating your publish:
And right here’s how the More hyperlink seems in your website:
You can study extra about excerpts, in our information on how to simply customise excerpts in WordPress.
You May Also Like : How to Create a Loyalty Program in WooCommerce
The Page Break Block
The Page Break allows you to break up lengthy weblog posts into a number of pages. You can’t customise it in any manner. Here’s the way it appears to be like if you’re creating your publish:
And right here’s how the web page break seems in your website:
Any of these might be good alternate options to including a horizontal line in WordPress, relying on what you’re aiming to do.
Adding a Page Break in WordPress Forms Using WPForms
What if you would like to put a break not in a publish or web page, however in a WordPress contact kind? You can try this, too. We’re going to be utilizing WPForms for this.
First, you’ll want to obtain, set up, and activate the WPForms plugin. If you’re unsure how, simply take a look at our step-by-step information on how to set up a WordPress plugin.
Next, go to WPForms » Add New in your WordPress dashboard.
Enter a title on your kind then decide a template. We’re going to use the ‘Request a Quote Form’ template for ours. Run your mouse cursor over the template and click on the button to create your kind.
Next, scroll down the Add Fields tab on the left hand facet to the Fancy Fields part. Drag and drop the Page Break to wherever you need it on the shape. We’re placing it simply earlier than the Request field.
You’ll see that the shape is now damaged into two components. WPForms has robotically added a ‘Next’ button, too.
You can change the ‘Next’ label if you would like to and you’ll add a ‘Previous’ button to go on the second web page of the shape. Just click on on the web page break discipline to edit it.
Save your kind when you’re achieved, by clicking the Save button on the highest proper.
You can now add the shape to your web site. First, you’ll want to create a new publish or web page, or edit an present one.
Click the (+) to add a new block to your publish or web page and discover the WPForms block. You can use the search bar or look in the Widgets part. Add the block to your web page.
Now, choose your kind from the dropdown checklist.
Once you’ve achieved that, you’ll be able to publish the publish or web page and look at how your kind appears to be like in your web site.
We hope this tutorial helped you learn the way to add a horizontal line separators in WordPress. If you need to add extra design and structure parts to your posts and pages, take a look at our article on the very best drag and drop WordPress web page builders.