Adding your design template to Backpage

You've created a fantastic leading edge design in your authoring package of choice (Dreamweaver, Frontpage, notepad etc), taken time to test across the various browsers and ensured it validates. Your markup is just itching to be seen by the world. But how? The following video and step by step guide show you how:

Those steps again?

Prepare your template:
Make sure your paths your templates assets (the images, css, javascript and other files your template requires) reference the web server root. While it's not mandatory to use the /media/ folder and its subfolders, it does make an awful lot of sense as your website grows.

Add the placeholders:
Every template shares an area designated for page content, navigation etc. Placeholders dropped in these areas will allow Backpage to discover and add the appropriate content. These placeholders are called BpTags and resemble harmless HTML comments. The following simple example would add a page title:

Upload your assets:
Transfer the images, css etc required by your design template to the required paths on your server using FTP (or using the web upload provided by Backpage if you have chosen to use the /media/ folders).

Add your template to Backpage:
This step is almost as easy as copy and paste. Almost. First you will need to login to Backpage using an Administrator level of privilege. Once access has been granted, click the 'Settings' menu in the top left of the interface, then click 'DesignTemplates'. A screen will appear listing all templates presently in the system, with a button to their left labelled 'New Template' - give that a click!

Give your new template a memorable title (I don't recommend 'blue design 1') and maybe even a description (if you work with other designers or are a little forgetful).

That leave the last step... pasting your template markup into the field labelled 'Template' and clicking the 'Save' button. Your new template is now ready for use across your website!

Download a simple reference template.

Tags: BpTag, support, templating, video.