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

capsule layout for the example on the left
capsule layout for the example on the left | Source

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

General:

  • 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.

Don'ts:

  • 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.

Tidbits:

  • 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.

Cautions:

  • 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:

  1. Pick an image that has the colors or design you want to use
  2. Use the "Crop" feature to crop the part of the image you want
  3. 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.

Source

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)

Source

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.

Source
re-sized to 398 x 4 pixels
re-sized to 398 x 4 pixels | Source

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.

Source

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

capsule layout in above explanation examples
capsule layout in above explanation examples | Source

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

The "bright" area is the image area selected to copy
The "bright" area is the image area selected to copy | Source

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.

For instance:

  • 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)

Pixlr Grabber for Google Chrome

Faststone Capture for Internet Explorer

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

Source

White Divider Line

Yes, I know, you can't see it because it's white, but it is here
Yes, I know, you can't see it because it's white, but it is here | Source

Red Divider Line

Source

Green Divider Line

Source

Blue Divider Line

Source

Pink Divider Line

Source

ebay Colors Divider Line

Source

Here are some free "design" divider lines.

Divider Line Red Hearts

Source

Divider Line Red Diamonds

Source

Divider Line Black Diamonds

Source

Red Scroll Divivder Line

Source

Blue Scroll Divider Line

Source

Butterflies Divider Line

Source

Were these instructions helpful and easy to understand?

See results without voting

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.

Source
Source
Source

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

Source
Source

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

More by this Author


Use Lines and Dividers to Separate Text:Hub Writing Tips Comments 26 comments

wayseeker profile image

wayseeker 4 years ago from Colorado

GA,

This is a very thorough hub on explaining this process--wonderful. I also really appreciate the additional resources and links you've provided. I've played with some of this on my recent hubs, but it took a bit of experimentation to get it right. This hub would have saved me a lot of time!

Oh well, I still picked up a number of good ideas and I now have a place to send others who ask me about it.

Very solid work. Thanks for writing it,

wayseeker


GA Anderson profile image

GA Anderson 4 years ago from USA Author

@wayseeker - Thanks for reading "Use Lines and Dividers to Separate Text:Hub Writing Tips," and leaving such a nice comment.

I'm glad you found it helpful.

GA


MelChi profile image

MelChi 4 years ago from Cape Town, South Africa

I was wondering how other Hubbers managed to get this onto their hubs. I'm going to give it a try right now. Thanks for the info and helpful, easy to follow steps! :)


peoplepower73 profile image

peoplepower73 4 years ago from Placentia California

GA: This is a super great hub. I love the way you presented the information and all of it is very useful. You will definitely serve as a role model for me. My background is technical writing and I've seen those dividers in some hub pages, but because of your hub, now I will be able to do them. Thanks for SHARING this information and I will be visiting your profile. Voting up and useful.


GA Anderson profile image

GA Anderson 4 years ago from USA Author

@peoplepower - thanks for reading, "Use Lines and Dividers to Separate Text:Hub Writing Tips," and leaving such a complimentary comment - I am glad you found the information helpful.

GA


urmilashukla23 profile image

urmilashukla23 4 years ago from Rancho Cucamonga,CA, USA

"Use Lines and Dividers to Separate Text:Hub Writing Tips," is really wonderful hub. Very well explained here. Because of clear instructions, first time I was able to make divider for my Hub. Thank you for sharing it. Useful and voted up!


GA Anderson profile image

GA Anderson 4 years ago from USA Author

@urmilashukla23 - thanks for the read and comment - glad you found it helpful

GA


LR45 profile image

LR45 4 years ago from Wales, UK

Thank you so much for this well written, informative hub. I have been trying to figure out how to divide text within a hub, and this has answered my questions.


GA Anderson profile image

GA Anderson 4 years ago from USA Author

@Lr45 - glad I could help. Thanks for the visit and comment.

GA


FreezeFrame34 profile image

FreezeFrame34 4 years ago from Charleston SC

Thanks for writing this! I love your writing and Pixlr Image Editor! Thanks again!


GA Anderson profile image

GA Anderson 4 years ago from USA Author

@freezeframe - thanks for the visit and nice comment - glad you found it helpful

GA


zacharyyoon 4 years ago

Thanks, this really helped me out! Was pretty confused on how to go about this!


Suzie HQ profile image

Suzie HQ 4 years ago from Dublin, Ireland

Thanks so much, for putting this together, much appreciated!! Your entire selection of hub help is excellent.


rajan jolly profile image

rajan jolly 4 years ago from From Mumbai, presently in Jalandhar,INDIA.

Thanks for this informative and useful hub. Just want to know if dividers that are free to use from online sites need to be attributed to the source?

Voted up & useful.


saitam profile image

saitam 4 years ago from Lisbon

Nice hub with well explained information. It seems easy after reading this hub.


Louise Lately profile image

Louise Lately 3 years ago from London, UK

Thanks GA Anderson! This is just what I was looking for! Will 'borrow' one of your free divider lines for my latest hub-under-construction :)


GameApathy profile image

GameApathy 3 years ago

Great Hub, I may consider doing this once I get some more free time.


RonElFran profile image

RonElFran 3 years ago from Mechanicsburg, PA

Good, useful info. Thanks.


Sarra Garrett 3 years ago

Great hub however I'm technically challenged so I think I'll just skip the lines for now until my brain is 20 years younger.


Sarra Garrett 3 years ago

Great hub however I'm technically challenged so I think I'll just skip the lines for now until my brain is 20 years younger.


Educateurself 3 years ago

Thanks Anderson I have found my solution. Before this I was thinking that It should be crop the image to use this, but know I am confirm.


CarlySullens profile image

CarlySullens 3 years ago from St. Louis, Missouri

Great tutorial! I love how you included the size to crop with and also offerings some of your dividers.


GA Anderson profile image

GA Anderson 3 years ago from USA Author

Thanks for the visit Carly, Glad this was helpful.

GA


brakel2 profile image

brakel2 3 years ago from Oklahoma City, Oklahoma

Thanks GA for sharing this well written hub . I do not have any dividers in my hubs but always wanted to use them. You are kind to allow us to copy them for our hubs. I am hard at work on a project to make my older hubs better looking and more organized. I enjoy your comments and suggestions on Google+. Take care. Audrey


GA Anderson profile image

GA Anderson 3 years ago from USA Author

@brakl2 - Thanks for taking the time to comment, and I'm glad you found the information helpful.

Line dividers can perform a useful function, but as in all things, moderation is key

GA


taiwokareem profile image

taiwokareem 2 years ago from Salford

thanks for the hub. it was really useful

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working