You are here: Blog » Tutorials » Add divider line in WordPress

Add divider line in WordPress

This tutorial will outline in brief how to add divider lines in WordPress. Divider lines are also known as section breaks, line breaks, spacers, thought breaks, paragraph breaks, chapter breaks, and can go by many other names as well.

In fact, one option that you have is to use the Horizontal line button in the Wysiwyg visual editor within WordPress for creating divider lines.

This tutorial, however, will outline the process using the Visual Artist method. Visual Artist is an add-on for the Spacer plugin, so you will need both Spacer and Visual Artist running on your WordPress site in order to follow along.

The benefit of using the Visual Artist method is that it allows you to easily create fancy divider lines, ornate section breaks, and beautiful spacer elements that incorporate vibrant colors and custom images. Unlike the horizontal line button, you don’t have to know CSS or how to code in order to create stylish line dividers using Visual Artist.

In this example, we will be making a divider line using an image.

Step 1. Find an image you want to use


I went with a typographic element known as a flueron. After you have the image saved on your computer, you are ready to create your spacer.

Step 2. Create your Spacer using the image


Navigate to the Spacer settings page which can be found in your WordPress admin > Setttings > Spacer. In the top tabs, click the “Add Spacer” tab, and then click the blue “New Spacer” button at the bottom of the page.

Give your spacer a name that will help you remember it. I called mine “Flower”. I gave the Spacer a default height of 40 pixels. This will vary depending on the image you choose and how you want your divider to look.

In the Visual Artist console, I uploaded my image and set the position to Proportional Stretch. This centers my background image in the middle section, and will also scale my image proportionally to match the default height (in this case, 40 pixels). Finally, I set the bottom margin to make sure there was space added after the divider. Often times in WordPress, themes will add a margin before your spacer but there will be no margin spacing after it. You can use this Bottom Margin setting to adjust the Spacer so that there is equal spacing before and after the divider. These settings should be tweaked based on your desired look and theme.

Save your new Spacer.

Step 3. When writing, select the divider you created


Click the Spacer button and choose the divider that you just made. All of the spacers and dividers that you create will appear here. Oh yeah, I called mine “flower”, so I’ll pick that one!

Step 4. Admire your fancy new line divider


Our new flueron breaks up the text nicely. Hurray for a job well done 🙂

There is a lot more that you can do with Visual Artist, but this should get you off to a good start. Thanks for taking the time to follow this tutorial. Hope you find it helpful. Please let me know if you have any questions or other feedback in the comments.

The step headers (Step 1, Step 2, etc...) and dividers on this post were proudly made with Visual Artist
This entry was posted in Tutorials and tagged , by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over twenty years. His company is called The Motech Network and his website is In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">