XSitePro Templates

Using Template Images in Your XSitePro

Now that we have created the template images, it's time to put them into the Page Layout.

When you create a new project and then a website in XSitePro, you will be able to see that there's a tab labeled with "Page Layout". Select this, and we can start designing our own layout.

There are six panels that you can edit. We'll start with the Header Panel. When we saved the sliced artwork, if we named the slice properly, we should have an image named "header.gif". In the Header Panel, at the Background property, click on the folder icon and search for that image. I would check the User custom html option. At times I may need to edit the header. You can do that by clicking on the Designer button. In the Height property, enter the height of the header.gif. You should have saved this information when you saved the sliced artwork.

At times, you may want to add some padding value. Padding value is the amount of space (in pixels) that you put from the table border to the content.

If you can do the Header Panel, you should be able to do the rest. I don't think that it should be much of a trouble.

Just continue with the left, the right and the footer. In the Main Panel, you don't have to define any background image. But you may need to define how wide it is. Set that in the Width parameter.

In some cases with the Main Panel, you may want or not to apply some padding values. In this case of the Flower template, you see that that the left and right background images has already give the Main Panel some space. So you don't need to define any value for the padding.

just a note, you may not be able to see what the website is suppose to look like right away. Only when you have finished entering all the background images for their respective panels that you'll see how the template actually look like.

Next: Adding To Website Template Selector