Customize Site Elements
Site Elements are composed of a Top Image, a Left Hand Side Image, and a Background Image. This is where you can customize one, two or all three of the Site Elements.
Your Top Image sits at the top of each page on your site...
Notice that there's no Logo. The Top Image is the background upon which your Logo sits. The SiteBuilder system merges your Logo (which you'll customize following the Site Elements, if applicable) with the Top Image, creating one image that appears at the top of all your pages...
The Left Hand Side Image is aligned to the top left and forms the left margin of your Web page. The NavBar (which you'll customize following the Logo, if applicable) sits on top of this background.
The Background Image is a small graphic that repeats itself over and over (both sideways and vertically) to create a Web page's background. This tiling pattern fills the entire browser window.
As you can see, Site Elements form your L&F's "foundation," upon which you'll add the Logo and NavBar...
The Process
- Choose your template, 2 or 3 columns, and your color combination, then click on Customize Site Elements.
-
Click on Download Image to download onto your computer the graphic you want to modify.
In the dialog box that pops up, do not change the name of the file. Also note the download's destination.
-
Use a graphics program to customize the graphic. It must be saved in either .jpg or .gif format. Do not change the height or width of the Top or Left Hand Side Image.
If you add a Logo to the Top Image, you also need to visit Customize Logo and remove any logo text that's already there.
- Browse to select the file (Choose File in Safari) and Upload the customized graphic.
- Click on Show Me to see each particular graphic. Click on Preview to see the overall effect of the Site Elements.
- When you're satisfied with your Site Elements, click on the Customize Site Elements button.
The customizing process boils down to five steps...
1) Choose whether you want to use two columns or three.
2) Download the specific image that you want to change.
3) Customize that image with your own graphics program (ex., Paint Shop Pro or PhotoShop). Use the Preview button (at the bottom of the page) frequently to see the effect of your changes.
4) Upload the revised image in .gif or .jpg format.
5) Click on the Customize Site Elements button. This will take you to a Success page. Repeat for the other two images, if applicable.
If you plan to also customize your Logo and NavBar, do them now during this work session (one after the other).
When all of the modifications are done, return to the Look & Feel Selector tool page. Click on the Preview button to make sure that you like the total L&F" (Site Elements, Logo and NavBar).
Satisfied? Click on the Select/Save this Style button to activate or make the changes "go live" on the Web.
Keep in mind that if you change your mind about your modifications, you have the "Revert to Default" link as a backup option. You can start the customization process all over again.
Tips
- Simplicity is the goal. Beginning designers often fall into the trap of confusing cool effects with design. Always remember to stay focused on the overall theme of your site content, and the impression that you want to make on your visitors.
- Right-click on the image to modify (Control-click for Macs) and choose "Save this picture as...", which will bring up the standard Save dialog box. Click Save.
- A common technique for the Left Hand Side Image is to create a strip of color (from top to bottom) that fades to white or to your background color. Whatever you do, it must "fit" nicely with the Top Image.
-
If you use a non-white background, make a small .gif image (1x1 or 2x2 pixels), light in color so that the text on the page is easy to read. Do not use a "reverse effect" (dark background with light text) for a content site -- studies show that viewers tire more easily, and it causes much longer print times.
You can use larger graphics if you want to create a textured look -- but again, remember your reader. If a page is hard to read (whether on screen or printed), your reader is likely to give up.
- The "Show Me" link always shows the last image (of each kind) that you uploaded. Use the Preview button if you want to see what a newly uploaded graphic looks like in the template itself (i.e., the bigger picture).
- If you see an error message (ex., "change of file name") when you click on the Customize Site Elements button, the message will tell you how to fix the error.
- At any time, you can return to modify the Top Image, Left Hand Side Image, or Background Image.