ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Use Lines and Dividers to Separate Text:Hub Writing Tips

Updated on March 27, 2012

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


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

  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.


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.

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.


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 -

If you are not already using an image editor, or want to try a new one, 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 (That should keep you in compliance with HP)

Black Divider Line


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


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?

See results

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,,,, 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 -


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

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

    0 of 8192 characters used
    Post Comment

    • taiwokareem profile image

      Taiwo Kareem 

      4 years ago from Salford

      thanks for the hub. it was really useful

    • GA Anderson profile imageAUTHOR

      GA Anderson 

      5 years ago from USA

      @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


    • brakel2 profile image

      Audrey Selig 

      5 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 imageAUTHOR

      GA Anderson 

      5 years ago from USA

      Thanks for the visit Carly, Glad this was helpful.


    • CarlySullens profile image

      Carly Sullens 

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

    • profile image


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

    • profile image

      Sarra Garrett 

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

    • profile image

      Sarra Garrett 

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

    • RonElFran profile image

      Ronald E Franklin 

      5 years ago from Mechanicsburg, PA

      Good, useful info. Thanks.

    • GameApathy profile image


      5 years ago

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

    • Louise Lately profile image

      Louise Lately 

      5 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 :)

    • saitam profile image


      5 years ago from Lisbon

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

    • rajan jolly profile image

      Rajan Singh Jolly 

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

    • Suzie HQ profile image

      Suzanne Ridgeway 

      6 years ago from Dublin, Ireland

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

    • profile image


      6 years ago

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

    • GA Anderson profile imageAUTHOR

      GA Anderson 

      6 years ago from USA

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


    • FreezeFrame34 profile image


      6 years ago from Charleston SC

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

    • GA Anderson profile imageAUTHOR

      GA Anderson 

      6 years ago from USA

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


    • LR45 profile image


      6 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 imageAUTHOR

      GA Anderson 

      6 years ago from USA

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


    • urmilashukla23 profile image


      6 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 imageAUTHOR

      GA Anderson 

      6 years ago from USA

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


    • peoplepower73 profile image

      Mike Russo 

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

    • MelChi profile image

      Melanie Chisnall 

      6 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! :)

    • GA Anderson profile imageAUTHOR

      GA Anderson 

      6 years ago from USA

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


    • wayseeker profile image


      6 years ago from Colorado


      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,



    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)