The Horizontal Rule

When you are composing the content for a page or post and include a number of images with your text it is always nice to float your images to the right, left or center. Gaining a decent page layout with WordPress can be just a tiny bit frustrating to get text to wrap images and not have everything run together. Solution: the horizontal rule! That’s one right below this line of text.


Here’s an example layout where everything runs together:

Subject One Image

Subject one: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet leo eget magna lacinia mollis. Curabitur sagittis, magna et eleifend interdum, magna metus faucibus magna, et venenatis metus nulla id urna.

Subject One Image

Curabitur molestie quam quis neque. Phasellus ante augue, euismod vitae, interdum non, semper id, ligula. Donec ante turpis, porta sed, rhoncus vitae, sodales non, nibh. Aenean nec orci eu metus blandit porttitor. Quisque vehicula urna nec augue.

Curabitur molestie quam quis neque. Phasellus ante augue, euismod vitae, interdum non, semper id, ligula. Donec ante turpis, porta sed, rhoncus vitae, sodales non, nibh. Aenean nec orci eu metus blandit porttitor. Quisque vehicula urna nec augue.

Subject Two Image

Subject Two: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet leo eget magna lacinia mollis. Curabitur sagittis, magna et eleifend interdum, magna metus faucibus magna, et venenatis metus nulla id urna. Maecenas at tellus. Quisque nisl libero, ornare quis, vehicula elementum, commodo id, sapien. Fusce semper fermentum mauris. Aliquam placerat. Phasellus pulvinar imperdiet turpis. In hac habitasse platea dictumst. Aenean semper euismod arcu. Integer lacinia dolor sed erat. Curabitur molestie quam quis neque. Phasellus ante augue, euismod vitae, interdum non, semper id, ligula. Donec ante turpis, porta sed, rhoncus vitae, sodales non, nibh. Aenean nec orci eu metus blandit porttitor. Quisque vehicula urna nec augue. Maecenas gravida neque.


See how the text for Subject Two creeps up and over laps the second image for Subject One. I want a visual separator between the two subjects. To do that I am going to insert a horizontal line between them.

Here it is cleaned up:


Subject One Image 1

Subject one: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet leo eget magna lacinia mollis. Curabitur sagittis, magna et eleifend interdum, magna metus faucibus magna, et venenatis metus nulla id urna.

Subject One Image 1

Curabitur molestie quam quis neque. Phasellus ante augue, euismod vitae, interdum non, semper id, ligula. Donec ante turpis, porta sed, rhoncus vitae, sodales non, nibh. Aenean nec orci eu metus blandit porttitor. Quisque vehicula urna nec augue.

Curabitur molestie quam quis neque. Phasellus ante augue, euismod vitae, interdum non, semper id, ligula. Donec ante turpis, porta sed, rhoncus vitae, sodales non, nibh. Aenean nec orci eu metus blandit porttitor. Quisque vehicula urna nec augue.


Subject Two Image 

Subject Two: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet leo eget magna lacinia mollis. Curabitur sagittis, magna et eleifend interdum, magna metus faucibus magna, et venenatis metus nulla id urna. Maecenas at tellus. Quisque nisl libero, ornare quis, vehicula elementum, commodo id, sapien. Fusce semper fermentum mauris. Aliquam placerat. Phasellus pulvinar imperdiet turpis. In hac habitasse platea dictumst. Aenean semper euismod arcu. Integer lacinia dolor sed erat. Curabitur molestie quam quis neque. Phasellus ante augue, euismod vitae, interdum non, semper id, ligula. Donec ante turpis, porta sed, rhoncus vitae, sodales non, nibh. Aenean nec orci eu metus blandit porttitor. Quisque vehicula urna nec augue. Maecenas gravida neque.


This is how to insert a horizontal rule.

Way One: Simply add the HTML tag <hr /> where you want the horizontal rule to appear and the theme CSS for the line will apply the style.  The tag has to be added in the HTML view of the editor. If you add it in the Visual view then it will just look like this <hr />.

Way Two: Use the Horizontal Rule from the editor tools. Look for the icon that is a small horizontal line. You can also hover your mouse over the icons and a small tool tip will fly out to tell you what it is. Note you must have the plugin TinyMCE Advanced Editor Tools installed in order to use this icon. The themes CSS will style the line for you all you have to do is click the button.

1. Place your cursor where you want the line to be.
2. Click on the “Horizontal Rule” icon in the visual editor.

Now you have a horizontal rule. Notice how I used multiple horizontal rules on this page to separate content.  Here’s another to end my post.


Share

Comments

comments

This entry was posted in Website Content and tagged , on by .

About Kim Bruce

Design is Kim Bruce’s background; art, her passion; digital technologies, her tool. Kim is a visual problem solver who designs WordPress themes for fine art. Here at Artbiz.ca, she helps artists get and maintain an online presence using WordPress.