- HubPages Tutorials and Community»
- Improving Your Article
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!
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!
You know you want this TV...
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:
Buy a new TV, already!
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
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
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:
- View the HTML source of the page you want to link to
- Find the "div id" of the page element you want to link to
- Create a link using the HTML editor
- 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:
What HTML Editor?
- How To Use The HubPages HTML Editor In Your Text Capsules
I wrote this hub that explains how to use the HTML Editor...
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
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
To create a link to a specific part of an external, already published hub:
the "mod_xxxxxxx" id in the same way as above, by viewing the page
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!
Not a member of HubPages?
- HubPages New User Signup
What are you waiting for! Sign up for HubPages today and make money online writing what you know!
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!