Xsitepro Templates and Website Design

July 23, 2008 by  
Filed under XsitePro Templates, Xsitepro Tutorials

Xsitepro version 1 and version 2 both work with templates to help you build a website.

The program comes with many templates, however, sooner or latter everyone wants to learn how to make templates for xsitepro. We run into a little bit of a snag since Xsitepro 2.0 has more panels which make up the template. This makes some Xsitepro 2.0 templates incompatible with Xsitepro version 1.0.

There is a nice Xsitepro tutorial in the help section of your xsitepro program and you can see the xsitepro tutorial here….just click on the link.

Let me go through the process of creating a xsitepro template.

  1. First imagine a legal pad of paper….and imagine that legal pad is your webpage.
  2. Now take the legal page and draw out your webpage.
  3. Header across the top
  4. Navigation panel on the left side
  5. Navigation panel on the right side
  6. Body Section in between the 2 Navigation panels
  7. Footer Across the Bottom

Ok…you have to use a graphics editor like photoshop to create the website you just designed on the legal pad. NVU is a free version of photoshop and will work just as well or you can use any graphics editor that will allow you to slice the image for use in a website.

After you create an image of the website with your graphics editor, you will slice the image into boxes or panels that will be used in the numbered steps above (version 2 allows for more slices or panels)

Let me backtrack a second. The whole purpose of designing your own template is to have something that looks good and doesn’t look like an out of the box Xsitepro template. So….when designing your webpage in your graphics editor keep in mind the fact that you will be slicing into component parts. Know what those parts are and where they are located. It doesn’t matter if its in Xsitepro 1 or Xsitepro 2.

The awesome difference in Xsitepro 2 is that you have additional panels or boxes to work with. This will allow you more freedom in your design and help eliminate the traditional xsitepro template look.

Finally, save the images and make sure you optimize them first so they load fast.

You can view Video Tutorials on how to make Xsitepro Templates by clicking on any of the links in this sentence.

Post to Twitter Digg This Post

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

Powered by Yahoo! Answers