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

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

</a>

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?

  • Definitely!
  • Maybe I'll try one?
  • That's old news, man...
See results without voting

More by this Author


Comments 49 comments

hospitalera profile image

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


Lensflare profile image

Lensflare 6 years ago

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


Edweirdo profile image

Edweirdo 6 years ago from United States Author

Thanks for the karma boost, hospitalera :D

And thanks for the kind words, Lensflare!!


wyanjen profile image

wyanjen 6 years ago from Wyandotte Michigan

a ha

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

Thanks!!!

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 image

Edweirdo 6 years ago from United States Author

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


sunforged profile image

sunforged 6 years ago from Sunforged.com

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


rebekahELLE profile image

rebekahELLE 6 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!


Edweirdo profile image

Edweirdo 6 years ago from United States Author

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


sunforged profile image

sunforged 6 years ago from Sunforged.com

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 image

Edweirdo 6 years ago from United States Author

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


SiddSingh profile image

SiddSingh 6 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 image

Edweirdo 6 years ago from United States Author

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


Pamela99 profile image

Pamela99 6 years ago from United States

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.


vox vocis profile image

vox vocis 6 years ago

Useful hub! Rated up and bookmarked!


2patricias profile image

2patricias 6 years ago from Sussex by the Sea

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


Edweirdo profile image

Edweirdo 6 years ago from United States Author

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


Jen's Solitude profile image

Jen's Solitude 6 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.


climberjames profile image

climberjames 6 years ago from Steel City

Great hub thanks for the info!!


bizwoo profile image

bizwoo 6 years ago from Nottingham, UK

Nice information. Will definitely give these advises a try.

Thanks


johnyater profile image

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


wavegirl22 profile image

wavegirl22 6 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;)))


Edweirdo profile image

Edweirdo 6 years ago from United States Author

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

:D


mega1 profile image

mega1 6 years ago

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


Edweirdo profile image

Edweirdo 6 years ago from United States Author

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

Is that an offer ;)


samsons1 profile image

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


World-Traveler profile image

World-Traveler 6 years ago from USA

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


shazwellyn profile image

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


shazwellyn profile image

shazwellyn 6 years ago from Great Britain

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


Edweirdo profile image

Edweirdo 6 years ago from United States Author

@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


FGual profile image

FGual 6 years ago from USA

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


travelespresso profile image

travelespresso 6 years ago from Somewhere in this exciting world.

Great info Edweirdo. Thanks very much.


Sally's Trove profile image

Sally's Trove 6 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.


Edweirdo profile image

Edweirdo 6 years ago from United States Author

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


hoov45 profile image

hoov45 6 years ago from Denham Springs, Louisiana

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


wolfpack5 profile image

wolfpack5 6 years ago from Alberta Canada

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


vinividivici profile image

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


Website Designer Atlanta 6 years ago

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


wilderness profile image

wilderness 6 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!


exchangerecovery profile image

exchangerecovery 6 years ago from India

Great Hub.


acaetnna profile image

acaetnna 6 years ago from Guildford

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


Alison Graham profile image

Alison Graham 6 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!


wyanjen profile image

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


viryabo profile image

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


akhtar hussain 5 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!


peacefulcarol profile image

peacefulcarol 5 years ago

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


Edweirdo profile image

Edweirdo 5 years ago from United States Author

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


L.L. Woodard profile image

L.L. Woodard 5 years ago from Oklahoma City

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


peacefulcarol profile image

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


Edweirdo profile image

Edweirdo 5 years ago from United States Author

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

http://hubpages.com/hub/Create-a-Join-Hubpages-Lin...

Submit a Comment
New comments are not being accepted on this article at this time.

Smiley face image from OpenClipArt.org
Little hands image from Image: Danilo Rizzuti / FreeDigitalPhotos.net
Curious boy image from OpenClipArt.org
Exclamation image from OpenClipArt.org

Click to Rate This Article
working