ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Custom Website Design On HubPages :: Create A Professional Looking Layout

Updated on May 1, 2012

Create A Professional Looking Website Design On Your Hubs

Have you ever been frustrated because you just could not get the capsules on your Hub to line-up the way you wanted them too?

  • Do you wish that HubPages allowed you to create a custom website design, the kind you could have if you make your own website?
  • Do your Amazon capsules overlap your text capsules?
  • Do you wish you could have two photos side-by-side on a hub?
  • Have you tried in vain to break up your text so that it doesn't look like a massive brick wall of words?
  • Do you just want some tips to help you tweak your best hubs to make them look just a little more slick and polished?

If you answered Yes to any of those questions, then read on!

Don't Want To Make Your Own Web Site?

Just use HubPages the right way and you won't have to!

You can do it!
You can do it!

One of the best features of publishing on HubPages is the easy-to-use tool kit that is built right in! There's no need to learn how to build a website on your own, and you can create a nice looking layout with just a few clicks of the mouse...

Even if you have no idea how to create a website, the tools here make it easy! And I have a few tip to share that can make your hubs look even better!

I will go over some of the web design tips and tricks that I've learned here on HubPages to help you improve the layout of your web pages on HubPages! These are simple to follow steps, and I'll illustrate both the problems and the results of the tips I present. I'll even walk you through some simple solutions, step-by-step!

So let's get started - by the end, you should be able to create HubPages hubs that look like you paid a fortune for a professional website design team!

Break Things Up With Images!

The first thing you may have noticed so far is the thin black line above this text...

Looks pretty good, right? Well, it's just a simple image that I made in Microsoft Paint - it's 780 pixels wide and 2 pixels high. It makes a great divider when you want to break up long text blocks, and it has the added purpose of keeping capsules lined up!

Here's an example. The next paragraph is in a separate text capsule...

See how this text has to wrap around the Amazon capsule?

You'll notice that the great looking 55-inch LCD HDTV, accompanying wall mounting bracket and amazing LG Blu-ray player look very tempting, but they are intruding on the text in this capsule!

And the more words I write in this capsule, the more intrusive that Amazon capsule becomes!

Grrr! Aaargh! This looks terrible. I don't want to break up the Amazon capsule with fewer items, so what am I supposed to do now??

Let's clean that up!

So here's the same layout, but with a cleaner look:

Break Things Up With Images!

(The only difference here is that the Amazon capsule no longer intrudes into the next capsule's text)

You'll notice that even though the Amazon capsule to the right is much longer than the text in this capsule, there is no intrusion into the following text...

Look, Ma - No Wrapping Of The Subtitle Text from that Amazon capsule up there!

Notice that the intruding word-wrap is gone!! And the text in this capsule is able to stretch to its full width.

"But where's the black line?" you ask.

It's a trick - I used a white line instead! It's the same size as the black line image, but because it's white I can create an invisible divider between capsules...

And, no, an empty photo capsule will not do the same trick!

Here's what the layouts look like before and after

Click to get a closer look...
Click to get a closer look...

Hold on a minute...

I thought you couldn't place two photo capsules side by side like that!

Well, you can't! The image above is actually two separate screen captures merged into a single image. I just edited the original in Microsoft Paint, created a new image that whose with was equal to the sum of the widths of the original. Then I pasted the original in and, bang! Side by side images...

Here's the layout that preserves the subtitle

Click for a closer look...
Click for a closer look...

The Next Tip Is A "Two-For"

Something else you might have noticed near the top of this hub is that the image of the winking smiley face does not cause the subtitle of the text capsule to be wrapped. Check out what I mean (click your browser's back button to come back!) by clicking here.

Did you click and come back?

If not, do it now, it won't hurt, I promise! Plus you'll need to click if you want the next tip to make sense...

What was that click all about??

Okay, if you're wondering what just happened when you clicked that link above, I'll show you how I did it!

The link above is an internal anchor that points to another specific spot on this very page, like an internal "page jump". It's very simple to create:

  1. View the HTML source of the page you want to link to
  2. Find the "div id" of the page element you want to link to
  3. Create a link using the HTML editor
  4. You're done!

Okay, so that may not sound easy, but trust me - it is!

First, the methods differ slightly depending on whether the hub you want to link to is published or not.

  • For a published hub, right click anywhere on the page and select "View Page Source ("View Source" in Internet Explorer) from the drop down menu.
  • If the hub is unpublished, click the "Preview" button at the top of the page and then right-click select "View Page Source ("View Source" in Internet Explorer) from the drop down menu.

On the screen that pops up, click "Ctrl-F" to find the text related to the element you want to link to. In this example, I searched for "Don't want to make" - the beginning text of the subtitle I want to link to. Look the left until you find the text "<div id=mod_" followed by a number. Highlight the "mod_xxxxxxx" (where the x's are numbers) and copy it.

Go back to the page you want to create the link on. Click on the page URL in the address bar of the browser. Go to the end of the URL and type a pound sign (#) then paste the "mod_xxxxxxx" after it. Press Enter and watch the page load to the point you wanted!

What to do with this information?

If you want to create a link like the one above that navigates within the same page:

Edit the page in question and create some link text, like "Click here". Click the little "HTML" button at the top of the Text Capsule Editor. Find the link text you just created. Just before it, type

<a href="#mod_xxxxxxx">

then right after the link text type


Click "Update To Editor" and save your text capsule. Then Preview it, click the new link, and voila!

If this sounds hard, watch the video...

I created a video that walks through this, Step-By-Step!

Create a link

Other options...

To create a link to a specific part of an external, already published hub:

Find the "mod_xxxxxxx" id in the same way as above, by viewing the page source.

Decide where you want to place the outgoing link and create your link text, like "Click here". Highlight the link text and click the chain icon in the Editor to turn the text into a link. Enter the full URL of the destination page, and add "#mod_xxxxxxx" to the end. Click Update and save your text capsule. Preview the page and check out your new link!

See them in action!!

If you want some real-world examples of using these techniques, then look no farther!

Some of you are probably familiar with the "Dark and Stormy Night" contest that's going on. If not, here a link to the HubPages blog that introduces it. I wrote an entry, and if you're familiar with the contest's official hub, you know there are thousands of comments. But now I can jump to Edweirdo's "Dark and Stormy Night" entry (link opens in a separate window!

That's It!

So I hope those tips help you to tweak your hubs to make them look a little more professional! You don't have to pay a professional web site design team or learn to make your own web site to get great results!

Happy Hubbing!

Take the poll !

Were these tips useful?

See results

Smiley face image from
Little hands image from Image: Danilo Rizzuti /
Curious boy image from
Exclamation image from


Submit a Comment
  • Edweirdo profile imageAUTHOR


    8 years ago from United States

    @peacefulcarol - here's a hub that explains setting up a sign up link:

  • peacefulcarol profile image


    8 years ago

    Hi, Edweirdo - I know there is literally tons of info, almost too much. One link leads to another to another, etc. And speaking of links, If I write an article on writing an article, which link would I put for people to click on hubpages so if they sign up, I'll get paid. Hope that wasn't too confusing, I'm tired after studying all day, again.

  • L.L. Woodard profile image

    L.L. Woodard 

    8 years ago from Oklahoma City

    I love the way you break things down in an easy-to-understand format.

  • Edweirdo profile imageAUTHOR


    8 years ago from United States

    @peacefulcarol: There's no need to pay anyone - there are loads of useful hubs that you can teach you all you need to know. You can also check out the HubPages forums "Need help?" and "Extreme Hub Makeover" for help...

  • peacefulcarol profile image


    8 years ago

    Edweirdo - Do you help others to get set up and if so, how much per hour? thanks

  • profile image

    akhtar hussain 

    8 years ago

    Great hub, Edweirdo - I've been looking for ways to improve appearance, specifically two photos side by side. I like the lines between capsules, too, and expect to use that tip. Thanks!

  • viryabo profile image


    8 years ago

    Experimented one of your tips on one of my hubs. Loved it so much, i've gone round to do it to many more of them.

    Thanks for the tips. Edweirdo.

  • wyanjen profile image

    Jen King 

    8 years ago from Wyandotte Michigan

    Hee hee

    You rock Edweirdo! I forgot how to do this... but I had this hub bookmarked. Thanks again buddy

  • Alison Graham profile image

    Alison Graham 

    8 years ago from UK

    Thanks for the fantastic tips and ideas - I will have to bookmark this and watch the videos whilst I am trying to do the neat linking tip! Thanks also for the white line idea - I must have spent hours trying to figure out something that would stop the text wrapping round like that - looks like I have some editing to do now! Voted up and awesome!

  • acaetnna profile image


    8 years ago from Guildford

    This has been so helpful to me as a new hubber. Bookmarked and voted up - thank you.

  • exchangerecovery profile image


    8 years ago from India

    Great Hub.

  • wilderness profile image

    Dan Harmon 

    8 years ago from Boise, Idaho

    Great hub, Edweirdo - I've been looking for ways to improve appearance, specifically two photos side by side. I like the lines between capsules, too, and expect to use that tip. Thanks!

  • profile image

    Website Designer Atlanta 

    8 years ago

    If that could be done then it would be great fun!

  • vinividivici profile image


    8 years ago

    When a hub gets `20 useful votes' it doesn't require further confirmation to claim that it's an unique, useful hub. From last 24 hours I was searching for `how to use anchor code in same hub', no hub did fulfill my hunt. Finally you did Edweirdo! Though I yet did not try it, i`m sure, it will work. This hub also has some extraordinary tips on design, that I did not see anywhere. Ok, I`m the 21st hubber to vote you : USEFUL.

  • wolfpack5 profile image


    8 years ago from Alberta Canada

    Awesome hub, thank you very much for the info :)

  • hoov45 profile image

    Terry Hoover 

    8 years ago from Denham Springs, Louisiana

    Voted up and like your work. I'm a fan.

  • Edweirdo profile imageAUTHOR


    8 years ago from United States

    @Sally - Well said, and thanks for the link :D

  • Sally's Trove profile image


    8 years ago from Southeastern Pennsylvania

    "...the tools here at HubPages aren't limitations on creativity - they can actually be pretty powerful layout tools if you get to know how to make THEM work for YOU!!"

    You are so right. I linked to this Hub from mine on improving the readability of your Hubs.

    As less is more, limitations are wide open doors to endless horizons.

  • travelespresso profile image


    9 years ago from Somewhere in this exciting world.

    Great info Edweirdo. Thanks very much.

  • FGual profile image


    9 years ago from USA

    Hello Ed. Great information here, keep trying to improve my Hubs and this is helpful.

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    @Shaz - Not sure what the tune is - I used the YouTube "AudioSwap" feature and liked the sound of this one. I almost went with a tune by Alvin and the Chipmunks, but that seemed too over the top ;D

  • shazwellyn profile image


    9 years ago from Great Britain

    p.s. Hands off mega! *wink* lol

  • shazwellyn profile image


    9 years ago from Great Britain

    Isnt that Noah and the Whale tune? Great demonstration of images here Ed... another bookmarked hub from your number 1 follower! :)

  • World-Traveler profile image


    9 years ago from USA

    Great information! The message speaks for itself. Well done.

  • samsons1 profile image


    9 years ago from Tennessee

    Hey Ed, thanks for the useful info, rated up & bookmarked!

    (If I try to do to much at one time, 'indigestion'). Appreciate all your advice & help.

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    @mega - Yes to the first (check out my "Edweirdo's Cook Book" hub!) and No to the second!

    Is that an offer ;)

  • mega1 profile image


    9 years ago

    Thanks! And you can cook? you're married, right? lol

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    Thanks everyone! And wavegirl, you are far too sweet (*blushing*)


  • wavegirl22 profile image


    9 years ago from New York, NY

    Ed - one of the best things that has happened for me in the 60Dc is meeting up with you. You and your Hubs never cease to amaze me. This Hub is almost as terrific as you are. . and another one of Edwierdos hubs bookmarked!!!!!!! If I didnt have to do some "work" in a thread over at the academy I would be twittering this right now. .but I am sure I will be back here and Ill do it then;)))

  • johnyater profile image


    9 years ago from Hamilton, Ohio

    I had often seen the link to a perticular part of a page, but had no idea how to do it. This trick will come in handy. Thanks..

  • bizwoo profile image


    9 years ago from Nottingham, UK

    Nice information. Will definitely give these advises a try.


  • climberjames profile image


    9 years ago from Steel City

    Great hub thanks for the info!!

  • Jen's Solitude profile image

    Jen's Solitude 

    9 years ago from Delaware

    Wow, thank you so much for all the great instructions for making my hubpages look custom made. Of course I will have to bookmark this and STUDY it, but at least the info made sense and I can actually see myself pulling some of this off. You are a great teacher and I appreciate your help.

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    Thanks everyone for commenting, and good luck giving these a try! Let me know how it goes :D

  • 2patricias profile image


    9 years ago from Sussex by the Sea

    This looks like useful stuff! Will give it a try soon.

  • vox vocis profile image


    9 years ago

    Useful hub! Rated up and bookmarked!

  • Pamela99 profile image

    Pamela Oglesby 

    9 years ago from Sunny Florida

    Edwierdo, I just struggled last night trying to get everything to fit and look nice with the last hub I wrote. This tips are great. I wish I had known before I spent all that time arranging and rearranging my hub. Thanks for great information. I am looking forward to trying it out.

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    Thanks, Sidd! I hope you get some use from this :D

  • SiddSingh profile image


    9 years ago

    Hey Ed,

    Really useful hub - nice of you to share with everyone here! I will need to bookmark this and come back to digest it better!

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    Thanks SF!

    I think the main problem is that my "work" computer is an older XP laptop with just 500Mb of RAM :(

    And I hope lots of folks come to see that the tools here at HubPages aren't limitations on creativity - they can actually be pretty powerful layout tools if you get to know how to make THEM work for YOU!!

  • sunforged profile image


    9 years ago from

    lol, yes that can happen - which is the primary reason i use Opera for my normal browsing now ..but look into "firefox profiles" set your profiles for your different hats and you may enjoy a faster experience plus cool plug-ins!

    Anyways, once again - beautiful! and I hope this really inspires

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    Sunforged and Rebekah - Thanks so much for the kind words! It was a lot of work, but things worth doing usually are :D

    And I'll check out those Firefox tools, SF - though my browser currently has so many plug-ins that after a few hours of use it gets slooooooooow ;)

  • rebekahELLE profile image


    9 years ago from Tampa Bay

    very cool. and this hub looks amazing. I'll have to try some of these tips. thanks! must have taken some work to put this together for us! :) rated up and bookmarked!

  • sunforged profile image


    9 years ago from

    Awesome! - if your a Firefox user you can cut down on your code searching time with the plug-in "firebug" or "web developer" or use Opera its a built in function "inspect element' - I look forward to all the more beautiful layouts this article will inspire

    -very happy music BTW :)

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    I'm glad you liked it, Jen! I learn something new around here everyday and I like to share the knowledge :D

  • wyanjen profile image

    Jen King 

    9 years ago from Wyandotte Michigan

    a ha

    So THAT'S how to make a TOC. :D


    I can finally make "see recipe below" into a link, that goes right to the recipe below. hee hee

    I already feel less like an HTML hack!

  • Edweirdo profile imageAUTHOR


    9 years ago from United States

    Thanks for the karma boost, hospitalera :D

    And thanks for the kind words, Lensflare!!

  • Lensflare profile image


    9 years ago

    I never knew about the module linking thing, that's fantastic. Thanks Edweirdo :)

  • hospitalera profile image


    9 years ago

    That must have been the best hub about hubpages I have read in a long time! Excellent work, good karma on your way ;-) SY


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)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)