How to Add a Horizontal Line in WordPress (4 Methods for 2023)
Do you want to visually break up your WordPress posts and pages to make them easier to read and skim through? Horizontal lines, also known as horizontal rules, are a great way to separate sections of an article, highlight important information, or add some visual flair to your content.
While the topic may seem simple, there are actually several different ways to insert a horizontal line separator in WordPress. Some methods provide more flexibility and customization options than others.
In this guide, we‘ll cover four methods you can use to add a horizontal line to your WordPress posts and pages:
- Using the WordPress block editor (Gutenberg)
- Using the classic TinyMCE editor
- Manually adding HTML code
- Splitting your forms into multiple sections
We‘ll provide detailed steps you can follow for each option. Let‘s get started!
Why Use Horizontal Lines in WordPress Posts and Pages?
Before we dive into the tutorial, let‘s quickly go over some of the benefits and common uses of horizontal dividers:
Improve readability and scannability – Adding a horizontal separator between sections of a long article makes the content less overwhelming and helps guide the reader‘s eyes. It provides a visual cue that they are transitioning to a new section or idea.
Separate different types of content – Use a horizontal line to clearly split up the body of your article from additional elements like a call-to-action box, related post links, or author bio. This makes it obvious that the reader has reached the end of the main content.
Draw attention to important text – Placing a horizontal divider above and below a block of text is an effective way to highlight noteworthy quotes, product details, special announcements, or disclaimer notices. It helps those elements stand out from the rest of the article.
Add visual interest to plain-text content – When used sparingly, horizontal separators can enhance the aesthetic appeal of your posts and make them look more polished and professional. You can get creative with decorative dividers to match your site‘s branding.
Now that you know some of the benefits and use cases, let‘s look at how to actually add a horizontal line in WordPress using the block editor.
Adding a Horizontal Line Using the WordPress Block Editor
Adding a horizontal line in the WordPress block editor (aka Gutenberg) is very simple. Start by creating a new post or page, or editing an existing one.
Put your cursor where you want to insert the horizontal line and click the "+" button to add a new block:
Type "separator" in the search bar or locate the Separator block under the Layout Elements section. Click the block to insert it:
[Screenshot – Insert separator block]And that‘s it! Your horizontal line will appear in the content editor:
[Screenshot – Separator block default style]By default, the separator is a thin gray line that stretches to the full width of your content area. Depending on your theme, it may or may not have a slight margin above and below the line.
Customizing the Separator Block
The real advantage of using the block editor to insert a horizontal line is that you can easily customize it to fit your needs and preferences.
With the separator block selected, look at the settings in the right-hand sidebar. Click the block‘s name to expand the customization options if needed:
[Screenshot – Separator block settings]The first setting you‘ll see is the Style selector. Click the dropdown to choose between three styles:
- Default – A thin line that extends edge-to-edge
- Wide Line – A thicker line that also spans the full width
- Dots – A series of three bold circular dots in the center of the block
You can further customize your horizontal line by choosing your preferred color. By default it will match your theme‘s body text color. Use the color picker to select one of the theme colors or enter a custom hex code:
[Screenshot – Choose custom color]Another setting you can adjust is the spacing around the separator. If your theme doesn‘t add any top or bottom margin by default, you may want to add some here. You can enter a value in pixels or use the up/down arrows to increase or decrease the amount of space.
Keep in mind that you can also achieve spacing by adding a Spacer block above and/or below the separator. This gives you more control over the spacing and lets you quickly adjust it for different screen sizes.
Feel free to play around with the various options until you‘re satisfied with how the horizontal line looks. The customizations will automatically reflect in the post editor as you make them.
When you‘re happy with the separator style, publish or update the post or page to make it live on your site. Check the front end to ensure it looks as intended.
Adding a Horizontal Line Using the Classic Editor
If you‘re still using the classic WordPress editor, you can also add horizontal lines to your posts and pages. However, the process and options are a bit more limited compared to the block editor.
In the classic editor, look for the Horizontal Line button in the toolbar. It‘s usually located in the second row of buttons. If you don‘t see it, click the Toolbar Toggle icon to reveal the extra options:
Put your cursor where you want the horizontal divider to appear in your content, then click the button. The line will be inserted immediately:
[Screenshot – Inserted horizontal line in classic editor]Unlike the block editor, the classic editor doesn‘t provide any settings or options for customizing the appearance of the line. It will inherit the default styling of your WordPress theme.
Manually Adding a Horizontal Line With HTML
For more control over your horizontal lines, you can add them manually by switching over to the text editor and inserting an HTML tag.
In the classic editor, click the Text tab to access the underlying HTML. In the block editor, click the options button on the block and select Edit as HTML:
[Screenshot – Edit as HTML classic] [Screenshot – Edit as HTML Gutenberg]Now locate the spot in your content where you want to add the line and insert the following self-closing HTML tag:
<hr>The <hr> tag (short for "horizontal rule") will add a line that extends the full width of the content. By default it will use a shaded color and have a small amount of margin above and below.
Styling Horizontal Lines With CSS
To customize the default appearance of the line, you can use CSS to target the <hr> tag. For example, to change the color to match your theme‘s main accent color, you could add the following to your stylesheet:
hr {
border-color: #2e8b57;
}Here are a few other CSS properties you can use to style your horizontal lines:
border-width– Makes the line thicker or thinner (default is 1px)border-style– Changes the line to a dotted or dashed style instead of solidwidth– Allows you to set a specific width in pixels or percentagesmargin– Adds more blank space above and below the line
Keep in mind that these CSS styles will apply to every <hr> tag on your site. If you want different styles for single lines, you‘ll need to add a unique class or ID attribute to the tag:
<hr class="primary-separator">Then you can create more specific CSS rules to target only that line:
.primary-separator {
border-width: 4px;
border-color: #ff6347;
width: 50%;
margin: 2em auto;
}This would result in a thicker, orange line that‘s centered on the page with ample spacing. The specific styles you use will depend on your design goals.
If you aren‘t comfortable modifying your theme files directly, you can use a plugin like Simple CSS to add custom CSS styles.
Other Types of Content Separators in WordPress
In addition to the basic horizontal line, there are a few other blocks and elements you can use to visually divide your content:
Spacer Block – Allows you to insert a blank space of any height between your blocks. Useful for adding extra spacing without a visible divider.
More Block – Truncates your post or page content at the specified point and adds a "Read More" link. Handy for displaying excerpts on your blog archive page.
Page Break Block – Splits a single post into multiple pages. Automatically adds "Next" and "Previous" links for navigation.
You can also find WordPress plugins that offer fancier content dividers, such as Content Blocks and Separator Shortcode. These let you add dividers with icons, images, and other decorative styles.
For even more flexibility, you can use a page builder plugin like Beaver Builder or Elementor. Page builders provide a visual drag-and-drop interface and include various styled separators in their content modules.
How to Add a Horizontal Line to Your WordPress Forms
Besides posts and pages, you may also want to add dividers to your WordPress forms to break them up into logical sections. With the WPForms plugin, you can easily add page breaks to split long forms into multiple pages.
After installing and activating the plugin, create a new form or edit an existing one. In the form builder, locate the Page Break field under the Fancy Fields section and drag it onto your form where desired:
[Screenshot – Page break field]WPForms will automatically split your form and insert Next and Previous buttons. To customize the button text and labels, click on the Page Break field to edit its settings:
[Screenshot – Page break settings]You can also change the settings for each "page" of your form. Click the Page 1 or Page 2 tabs in the preview area to bring up options for that page:
[Screenshot – Form page settings]Use the settings to add a title and description for each page. This helps provide context to the user about what information they need to fill out in that section.
Splitting up your form into bite-sized pages can improve completion rates and prevent users from feeling overwhelmed. Use page breaks strategically to group related fields together.
Tips and Best Practices for Using Horizontal Lines
Here are a few tips to keep in mind when adding horizontal separators to your WordPress site:
Use them sparingly – Don‘t go overboard by adding a line between every paragraph or section. Too many dividers can have the opposite effect and make your content harder to read. Stick to using them for major section breaks or to highlight important information.
Keep them subtle – Unless you‘re purposely using them as a design element, horizontal lines should be unobtrusive. Avoid overly thick or brightly colored lines that distract from your content. Thinner, neutral-colored lines tend to work better.
Provide breathing room – Always include some whitespace above and below your separators to prevent them from crowding your text. Add a margin or an empty Spacer block to maintain proper spacing.
Consider responsive styling – Be mindful of how your horizontal lines will look on smaller screens. You may want to decrease the width, margin, or thickness of the line on mobile devices to maintain readability and avoid excess scrolling.
Stick to a consistent style – Establish a consistent look for your separators to create a cohesive design and eliminate distractions. Avoid mixing too many different colors, thicknesses, or styles of dividers in a single post.
Conclusion
Horizontal lines are a versatile tool for structuring your website content and guiding your visitors‘ eyes. When used appropriately, they help break up long text, separate ideas, and highlight key information so readers can quickly find what they‘re looking for.
The WordPress block editor makes it super easy to insert and customize horizontal lines in your posts and pages. Alternatively, you can add a basic divider in the classic editor or manually insert the <hr> HTML tag for even more control.
Don‘t forget about other types of content dividers like spacers, page breaks, and fancy separators to enhance your content and streamline your forms.
By implementing the tips and best practices covered in this guide, you can start using horizontal lines to improve the readability, flow, and visual appeal of your WordPress site.
){kind=link}