Friday, November 27, 2020
Home Blogging How to Add a Horizontal Line Separator in WordPress (5 Methods)

How to Add a Horizontal Line Separator in WordPress (5 Methods)

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.

How to add a horizontal line 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.

Adding a new block where you want your horizontal line

Next, choose the Separator block from the Layout Elements part or seek for it utilizing the search bar.

Find and add the Separator block

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.

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

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.

The different styles available for the Separator block

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.

Change the color of the horizontal line

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.

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

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:

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

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:

The horizontal line button in the classic WordPress editor

Your horizontal line might be mild grey. It’ll cowl the entire width of your publish like this:

A horizontal rule created using the classic editor

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:

The Spacer block in the block editor

And right here’s how the spacer seems in your website:

How the spacer block appears in a page or post

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:

The More block in the post editor

And right here’s how the More hyperlink seems in your website:

The Read More block in a post on the site

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:

The page break block shown in the block editor

And right here’s how the web page break seems in your website:

The page break as it appears on a site

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.

Creating a new form using WPForms

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.

Creating a quote form in WPForms

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.

Adding a page break in WPForms

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.

Editing the page break field in WPForms

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.

Adding the WPForms block to your page or post

Now, choose your kind from the dropdown checklist.

Choose your form from the dropdown list

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.

The form with a page break on the website

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.



Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Post Matric & Pre-Matric Scholarship Scheme – How to Apply

Scholarship is an effective way to finance your training. If your child is vivid and anticipated to have a promising profession forward then you...

How to Earn Money from Google Online Jobs

  I can swear… Google on-line jobs comes on the highest of my listing for real on-line jobs. I've been getting cash from Google from the final...

List of Different MBA Courses in India

Master of Business Administration, generally known as MBA, is one of probably the most coveted and prestigious academic {qualifications} in India. Earlier, most MBA...

Everything You Should Know About Salary Slip / Pay Slip

Salary slip, also referred to as pay slip, is given to each worker of corporations small and enormous. Some employers challenge the pay slip...

Recent Comments