Image Showing How To Add Line Separator In Wordpress

If your material includes horizontal line separators, the reader will be able to discover and move through them. This tutorial will demonstrate how to add separators in WordPress posts and pages. So let’s get this started.

How to add a separator in WordPress?

Do you want to create a horizontal line that runs through the middle of your WordPress post or page?. Horizontal line dividers are an excellent method to separate long articles into pieces. In addition, emphasize any special announcements or promotions. And delineate distinct sections of a page.

We’ll teach you how to quickly install a horizontal line divider in WordPress in this post.

Add a Horizontal Line in the WordPress Block Editor

Create a horizontal line by using the WordPress block editor. You can add a new block wherever you want by clicking on the (+) symbol.

Image Showing How To Add A New Block In Block Editor

Then choose the Separator block from the Layout Elements section. Then look for it using the search box.

Image Showing How To Add Line Separator In Wordpress

Your horizontal line divider will be displayed in your content area after it has been added.

Style the Horizontal Line in WordPress Block Editor

The horizontal divider is a faint grey line that runs across the middle of your post or page by default. By clicking on the line and selecting the relevant block, you may make changes. Then, The ‘Block’ editing window will then appear on the right side of your screen.

To alter the look of your line. Click the arrow next to Styles. Then you’ll see the many choices.

If you want, you may replace the horizontal line with one of the following:

  1. A broad line spans the whole width of your post’s text.
  2. Three dots appear in the middle of your post.

Image Showing How To Style The Horizontal Line In Wordpress Block Editor

Insert a Horizontal Line in WordPress Classic Editor

You can create simple horizontal lines if you’re still using the old editor. Modify an existing post or page to accomplish this. Alternatively, make a new one.

If there is just one row of buttons on the toolbar above the post editor, Then, on the right, click the Toolbar Toggle icon.

Image Showing How To Insert A Horizontal Line In Wordpress Classic Editor

The second row of buttons will appear. It provides the option for a horizontal line. Now Insert a line break between the paragraphs where you want the horizontal line to travel. Then select the Horizontal Line option. It’s the second row, second from the left.

Image Showing How To Insert A Horizontal Line In Wordpress Classic Editor

The color of your horizontal line will be light grey. It will take up the whole width of your post like follows:

Image Showing How To Insert A Horizontal Line In Wordpress Classic Editor

Manually Create a Horizontal Line Separator using HTML

You may need to manually insert a horizontal line separator into your WordPress content in some instances. If so, you may effortlessly accomplish this by including the hr HTML tag into your content:

<hr>

It will insert a horizontal line divider into the body of your post.

Other Separators for Your Posts and Pages

You may use the basic WordPress block editor to add several separators to your articles and pages, except for the horizontal line separator.

Other blocks in the Layout Elements collection include the Spacer, More link, and Page Break blocks.

The Spacer Block

You may use the Spacer to add white space between blocks. For example, if you want a slight pause before a special offer at the end of your post. Again, you can make use of the Spacer.

It may adjust the Spacer’s height. For example, here’s how it looks in the block editor while you’re making a post:

Image Showing How To Add Space Using Spacer

And here’s how the Spacer seems on your website.

Image Showing How The Block Looks Like After Adding Space

The More Blocks

Suppose your theme displays complete entries on your main blog page rather than excerpts. Then, at that time, adding a ‘More’ link will break off your article. The visitor may read more by clicking on it.

Here’s how it appears when you’re generating your post:

Image Showing How To Add Read More In Wordpress

And here’s how the More link looks on your website:

Image Showing How To Add Read More In Wordpress

The Page Break Section

The Page Break feature allows you to divide lengthy blog articles into numerous pages. It cannot be customized in any manner. Here’s how it appears when you’re making your post:

Image Showing How To Add Page Break In Wordpress

And here’s how the page break will look on your website:

Image Showing How To Add Page Break In Wordpress

Any of these options might be viable alternatives to inserting a horizontal line in WordPress.

Using WPForms to Insert a Page Break in WordPress Forms

What if you want to include a break in the WordPress contact form rather than in a post or page? You can do so. For this, we’ll be using WPForms.

To begin, download, install and activate the WPForms plugin.

Then, in your WordPress dashboard, navigate to WPForms » Add New.

Image Showing How To Add Page Break In Wordpress Forms

Give your form a name, and then select a template. For ours, we’ll use the ‘Request a Quote Form’ template. Move your mouse over the template. To create your form, click the button.

Image Showing How To Add Page Break In Wordpress Forms

Then, on the left, go down to the Fancy Fields area of the Add Fields tab. Drag and drag the Page Break to the desired location on the form. We’ll place it just before the Request box.

Image Showing How To Add Page Break In Wordpress Forms

You’ll see that the form has been divided into two sections. WPForms has also automatically inserted a ‘Next’ button.

You have the option of changing the label ‘Next.’ If you like, you may include a ‘Previous’ button on the second page of the form. To edit the page break field, click on it.

Image Showing How To Add Page Break In Wordpress Forms

When you’re finished, click the Save button in the upper right corner to save your form.

You can now incorporate the form into your website. To begin, you must create a new post or page. Alternatively, you may modify an existing one.

Find the WPForms block by clicking the (+) to add a new block to your post or page. You may look in the Widgets area or use the search box. Then, insert the block into your page.

Image Showing How To Add Page Break In Wordpress Forms

Now, choose your form from the dropdown menu.

Image Showing How To Add Page Break In Wordpress Forms

Once you’ve completed that, you can make the post or page public. Also, have a look at how your form appears on your website.

Image Showing How To Add Page Break In Wordpress Forms

Customizing the separator

Depending on the type of separator used. There will be three CSS classes: is-style-default, is-style-wide, and is-style-dots.

Would you please keep in mind that the Dots style differs from the Lines style? As a result, the identical CSS code will not work. It necessitates unique bespoke code. It is somewhat outside the scope of this instruction. However, it’s not quite that simple.

To change the line separator, you’ll need to use one of these.

CSS allows for a plethora of modifications. However, I will show you a few of them. I believe these are the ones that the majority of you would like to alter.

So, with WordPress, you can add some CSS code like this:

.wp-block-separator.is-style-default{

background-color: #616b73;

height: 2px;

}

This code will modify the color and thickness of the horizontal line.

You may modify the hex color code (for example, #E08A95) and height (for example, 5px) to whatever you like. Here’s a tool that will produce a hex color code for you.

If you don’t want to use the default separator, modify the second CSS class with .is-style-wide. Additionally, if you are unable to view the changes, clear your site and browser cache.

Customizing the Horizontal line

You do not have a CSS selector to pick from, unlike the Gutenberg separator block. However, all you need to do is add some custom CSS to the < hr /> HTML tag itself.

I’ll show you a few of the customizations that I believe you’ll be interested in. But, of course, if you know CSS, you can add more.

So, in WordPress, paste the following CSS code:

hr {

background-color: #616b73; height: 2px;

}

You may use this tool to produce a hex color code that it can use to replace the one shown above, and You may also alter the height (thickness) value to something else (e.g., 7px). If the changes do not take effect, delete your browser’s cache and your site’s cache.

Conclusion

That’s how to add a horizontal line divider to WordPress posts and pages. You may take advantage of the Gutenberg editor’s default separator block. If you want greater control over the divider, utilize the Divider block from Ultimate Blocks.

Adding a divider to the WordPress menu is simple. There are several approaches. The simplest method to accomplish this is to use a pair of custom functions registered with the WordPress API.

Load More Related Articles
Load More By Susana Taylor
Load More In Wordpress

Leave a Reply

Your email address will not be published. Required fields are marked *