XSitePro Templates

Understanding XSitePro Layout

I like XSitePro. And I have been trying out the template system. From what I know, people at Intellimon Limited are testing out a more advance beta version of the template system. It’ll be awesome if they have a more advance template management system, especially one that allows you to share templates between XSitePro users.

Anyhow, I like to share with you what I’ve gathered about the templates in XSitePro.

I will be sharing on how you can create your own awesome templates for your XSitePro projects. If you are web designer, learning this will open up a new stream of income creating XSitePro templates for your clients.

Before we get into designing the templates for XSitePro, let’s cover the basics about XSitePro template system.

XSitePro uses a simple, yet powerful layout. This layout is truly optimized for the search engines. Why do I say so? When you study the codes, you see that the layout forces content to the top of the web page. All other elements like navigation goes after that, even when the navigation is on the right side of the content. When I build content-sites that is the first thing that I make sure of.

With XSitePro, you have 6 content panels that you can use on your website. The XSitePro manual explains this in more detail. But in short, you have the Header Panel, the Right Panel, the Left Panel, the Main Panel, the Main-footer Panel and the Footer panel.

Header Panel
Left Panel	Main Panel	Right Panel
	Main-Footer Panel
Footer Panel

By applying different settings on each of this panel, you can design yourself your own XSitePro templates. When designing a template for XSitePro, the idea is to use the Header Panel, Left Panel, Right Panel and Footer Panel to wrap the content.

What I do when I design a template, I will create one long image for the header, and another long image for the footer. As for the left and right panel, you need an image that will look nice when tiled vertically.

Now let’s get started design the template. I use Photoshop for this, and later I will do some image slicing with Image Ready.

Next: Designing XSitePro Template with Photoshop