- HubPages Tutorials and Community»
- Improving Your Article
Use Lines and Dividers to Separate Text:Hub Writing Tips
Hub Format and Layout Using Divider Lines
It's a common question for new hubbers, (and some experienced ones too); "How can I get those lines or dividers to separate my text capsules?" And the answer is easier than you would think because those text dividers and horizontal spaces are just images in a photo capsule.
It usually pops up in one of two ways; you are browsing some hubs and notice one that uses lines or designs to separate blocks of text, and you think, "How did they do that?" or you might be writing a hub and the capsules just won't line up the way you want - and you don't know how to fix it.
These simple hub writing and formatting tips will have you using text dividers in no time. You can use the included samples or create your own.
*ps. Free-to-use divider images are included below
Example of a solid line divider
How to separate text blocks with solid lines
The process for inserting solid lines as text dividers is as simple as inserting a photo capsule where you want the diving line to appear.
The example on the right shows a solid black line as a text divider between different capsules.
Note: A typical solid line divider is only 2 to 3 pixels thick, and can be any color appropriate to your topic or color scheme. Thicker lines look bulky.
As illustrated by the second photo, the capsule layout for the example is:
- text capsule and poll capsule, side-by-side
- photo capsule (for the black line image)
- followed by a text capsule
That is really all the instruction needed to explain the process, but there is a bit more to understanding how to use it correctly.
Tips for using dividing lines or designs
- Solid dividing lines should only be 2 or 3 pixels thick, by 480 pixels wide. (they can be any width over 480, the HP photo capsule will automatically size them to the capsule width), but as mentioned, too thick lines will look clunky
- You can use this dividing line technique for both full width and side-by-side capsules
- It is appropriate to match you dividers, (solid lines or designs), to the hub color scheme created by your hub theme and/or the photos used. For example; A Christmas hub could use red, blue, green, etc. colored lines, or even designs, like a string of Christmas lights.
- Do not put any text in the photo capsule; Name of source, Source URL, or Caption, boxes. If you do it will show up with the image and ruin the "dividing" effect you are looking for.
Note: To comply with HP image source credit requirements, at least for the free images I offer below, just add a text capsule at the end of your hub tilted "Image Credits," then, in that text capsule add this line: Free image use rights granted by http://gaanderson.hubpages.com (That should keep you in compliance with HP)
- Do not use images that aren't free-use commons, or ones you don't have rights permission for - because you will not be able to credit the source when you use it as a divider.
- Do not get carried away with the number of dividing lines you use. Like using bold words, it can be over-done and detract from the appearance of you hub.
- You can use this technique to divide text even when you don't want a line or image to appear. Just use a white line as a divider and it will look like normal space in your hub layout.
- You can also use this technique to force specific capsule alignments. For example, if you want to keep a short text capsule next to a photo, and NOT have the next text capsule creep up into the space remaining by the photo, a full-width photo capsule used as a divider will prevent that and force the capsules to layout the way you want.
- The same process for inserting solid lines or blank images as separators can be used on half-width, (side-by-side), capsules also.
- Images to use as dividers are available all over the web, and many folks just recommend using a Google search to find ones you like. But... most are not free to use, the sites providing them want something, a subscription, price, email or something. So I am not going to recommend that because, well... it's not legal use of the images.
- Instead, I am going to show you how to create your own, legally, with a simple photo editing or "paint" program like MS Paint or Corel Paint Shop. *you really should be using one of these programs already, but if not, there are some good ones available as freeware, just do a search.
- Don't get carried away with your new ability! Your readers are looking for content, not a demonstration of your "cutsey" design efforts. Dividers are a tool to use, not an art show.
How to create your own dividing lines
(*Note: You can create lines without using an image editor - how-to instructions are shown following the explanation of this example)
Using a photo editing or "Paint" program to create your own dividing lines is a simple three-step process:
- Pick an image that has the colors or design you want to use
- Use the "Crop" feature to crop the part of the image you want
- Use the "Resize" feature to turn the cropped portion into appropriate "divider" size. As mentioned, 2 or 3 pixels for solid lines, and no more than 10 or 15 pixels for designs
The photos below demonstrate these steps using Corel Paint Shop Pro. Any graphic program will do the same.
- In the examples below, I wanted to create a divider that would fit the theme of a camping and campfire cooking hub article.
First the source image
First I found an image that contained the colors I wanted.
Note: Some may call this "skirting the edge," but... I may not have rights to an image, but I am also not going to use the whole image - just a piece of it, so I don't think this is illegal use of someone's property. hmmm... your call *(this demo image is a free commons)
Now I crop the part I want
Using the program's crop function, I choose a band of colors from the flames. Note: This is a theme-divider, so it can be a little thicker. This example in full size is 398 x 9 pixels, as seen full-size below.
This is the cropped image, and it is a little too thick for how I wanted to use it. So I used the "Re-size" function in Paint Shop to make it 398 x 4 pixels.
Layout formatting trick
Notice how the images to the right of each text block, in the descriptions above, are fairly centered with the text block. This was not how the photo capsules originally positioned the images, they were at the top of each text block. So I inserted more photo capsules and used blank white images to force the alignment of the visible images.
- You will need to experiment with each layout to make it work for you, but in the above photos I used a 150 x 50 pixel white image, 1/4 size, to force the cropped line image to line up with the text. In the second, "resized" image, I used a blank white divider line, 288 x 2 pixels, full-size, to force the centered alignment.
The capsule arrangement for the above section is shown below.
Capsule layout for above explanation
Also note that I used a full size photo capsule with a white dividing line image to keep the text/photo capsule combinations aligned together, instead of bleeding up onto each other.
Create dividing lines without an image editor
Once more, it is highly recommended that you get and learn to use an image editor, but it is possible to create dividing lines and blank images without one by using an image grabber add-on for your web browser.
I am a devoted Firefox user, and I use an image grabber called Pixlr Grabber. It is an add-on that integrates with your browser and gives you the ability to "grab" any image on your screen. (the ethics of how you use what you "grab" are on you to decide) It allows you to capture anything from a full-screen to any size of user-defined area with just a couple clicks. As shown by the image below.
Sceenshot of Pixlr Grabber in action
In the above image, the important thing to note is the pixel numbers pointed to - in this example; 487 x 371. This is the size of the area you have selected to copy. But, that area is user-defined, so you can move that box to anywhere on the screen, and/or re-size it to any size you want.
- You could move and re-size the box to capture just a part of the white area of the image, thus instantly creating a blank white image to save and use like I did in the formatting example above, 150 x 50 pixels. As you re-size the box, the area dimensions are displayed in pixels, so just re-size the box until they match the image size you want to save. Then just double-click and save the captured image to your computer as an appropriately named image file that can be uploaded to, and used on Hubpages. (saving as a .jpg file is recommended)
- You can use the same process to create a dividing line image - just find an image with the colors you want, and re-size the box to grab an area 480 x 2 pixels. The example above, using the campfire flames is an example of this process - but without using an image editor.
With just a little practice you will amaze yourself with your new-found creative ability.
Here are some links to free image-grabber add-on's for browsers:
Pixlr Grabber for Firefox - (The one I use and very highly recommended)
Awesome Screenshot for Safari - **Note: this one is not free, it is an app add-on for Safari that costs $4.99
Free Online Image Editor - Pixlr.com
If you are not already using an image editor, or want to try a new one, Pixlr.com is a good one to check out. You don't have to download it, you use it online, and save the images to your computer.
Note: I have only browsed this program. It looks good, with all the easy to use features you might need. (I use Corel Paint Shop Pro X - and swear by it)
More than divider images
As you can see divider line images are not only easy to make and use, but they can also be "white," which gives you the text separation you want without a visible line. And you can also see how you can use blank white images for other formatting and spacing uses.
With just a little practice you will be making any images you need in a snap. But, if you don't have, or want to use, a photo or graphics editing program, here are some basic divider lines that I created and you can use for free - without crediting me. (that would ruin the clean effect of a dividing line) You have my permission.
Free Line Divider Images: (just right-click on the image you want and "save as" whatever name you want to use. ie. divider line black.jpg, or divider line white.jpg, etc.)
Note: To comply with HP image source credit requirements, at least for the free images I offer below, just add a text capsule at the end of your hub tilted "Image Credits," then, in that text capsule add this line: Free divider line image use rights granted by http://gaanderson.hubpages.com (That should keep you in compliance with HP)
Black Divider Line
White Divider Line
Red Divider Line
Green Divider Line
Blue Divider Line
Pink Divider Line
ebay Colors Divider Line
Here are some free "design" divider lines.
Divider Line Red Hearts
Divider Line Red Diamonds
Divider Line Black Diamonds
Red Scroll Divivder Line
Blue Scroll Divider Line
Butterflies Divider Line
Were these instructions helpful and easy to understand?
How to insert black divider lines, so easy
That's all there is to it. All those hubs you see with divider lines, or graphics, are just photo capsules with divider images.
Plus, now you see how you can also use a blank white image in a photo capsule to force format spacing in your hub layout, not just as text separators. So play with the concept a little, and pretty soon you will be able to manipulate your text blocks and hub capsules to do what you want, not just the default layouts.
Note: If you have suggestions that would make this tutorial better and/or easier to understand, or if you spot an error - leave a comment and I will update it.
About the Author
Reporting for the Daily Constitutional, and providing articles for various online publishing sites are my primary work responsibilities, but it is the freelance editorials from the Curmudgeon's desk that provide the most satisfaction. - GAA
See more of my writings at:
*Composite image component source citations: Creative Commons images from:commons.wikimedia.org, flickr.com/creativecommons, search.creativecommons.org, http://googlesystem.blogspot.com/2009/06/find-creative-commons-images-in-google.html, and personal art and graphic programs: GreenStreet Clipart, Print Shop, Art Explosion Pro Silver Edition Publishing program - *photo and image source credits: divider and separation images - http://gaanderson.hubpages.com
Do you want to be an author?
Is there an author in you? Just waiting for the chance? Are you looking for a place to publish your writings, and make some money doing it?
Do it on Hubpages!
Establish your own writing credentials free, and make money doing it. Learn more, and get your free author's account at Hubpages.com