Step One -- Design Your Site

Be creative and build your site as an image in Photoshop or any other design tool.  While designing, keep in mind how your design will work on our management system.  You will build a template (frame) of the site that always stays the same.  Then, you will create editable regions where the user can add and change content.  As you design, think about where you want these editable regions to be.  (For an example of an editable region, see our token visual reference).

Templates
You will need to design multiple templates for your site.  Usually, a site will have at least three templates.

  1. The home page template -- since the home page is usually different than all of the other pages in a site, it generally has its own unique template.
  2. The inside page template -- often a single template can work for every other page in the site.
  3. The administrator template -- this is a special template required by the system.  You must have an administrator template in your design and it must be called "Admin.html".  See more on the administrator template in step four below.

Step Two -- Cut-up and Build Out Your Site

Once you've created your design images, it's time to cut them up into HTML and CSS.  The great thing about our software is that you can use whatever method you choose to do your build out.  You should use linked external CSS stylesheets and we encourage you to utilize web standards and separate your layout (CSS) from your structure (XHTML).  When building out your site, remember to leave room for those editable regions.  

Files, Directories and Paths
When you're finished building out your site, you'll have multiple files, just like you would for a normal website.  You'll have:

  • HTML files for each of your templates (i.e. Home.html, Inside.html, Admin.html . . . etc.).
  • Supporting files such as javascript files (i.e. scripts.js) and cascading style sheets (i.e. styles.css)
  • Graphics files that appear in the template (should be .GIF and .JPG images). 

All files should use paths relative to the site root.  For example, the following shows a link to a style sheet called mystyle.css, located in a folder called "styles," which exists at the root of the site.

<link rel="stylesheet" type="text/css" href="styles/mystyle.css" />

Step Three -- Add Tokens

Tokens are simple bits of code that add dynamic tools to your HTML template files.  For example, you will add the <$region$> <$/region$> token whenever you want to create an editable region in your design.  Adding this simple token transforms your design from static to dynamic, allowing your website users to add and edit website content with our software's easy-to-use tools. 

There are several tokens available for you to use.  Please see our Token Reference Guide to get full documentation on tokens.

Step Four -- Double Check a Few Things

You're almost done, but first you need to double check a few important things:

1)  Do you have an administrator template?  You must have an administrator template file in your design.  The system uses this template when you are editing your elements or editing your website settings.  Your administrator template must meet the following criteria:

  • The file MUST be named "Admin.html"
  • It MUST be a simple template with a single editable region that is more than 600 pixels wide.
  • The single editable region MUST be named "MainContent"

2)  Do you have other templates?  Your design must include at least one additional template file, but it may include as many template files as you like.  Each template file should have a unique name.  These filenames will be what you see when you choose your template inside the software, so make them descriptive (i.e. Home.html, Inside.html, AboutUsSection.html . . . etc.)

3) Is your home page template named "Home.html" and your inside page template named "Inside.html"? This naming convention is required for the "apply template" function to work which automatically applies the home template to the home page and the inside template to the website default template.

4)  Does each of your templates have an editable region named "MainContent"?  Every template in your design must have a region named "MainContent".  For more information on this, see the editable region token reference page.

4)  Do you want to include a screen shot thumbnail?  A thumbnail image is not required, but can be a nice feature to include.  If you include a thumbnail image, the system will display the thumbnail wherever the user is able to select templates.  To include thumbnail images for your templates, follow these steps:

  • Take screen shots of your templates and size them to exactly 160 pixels wide by 120 pixels tall
  • Save the images as .GIF files and name each file exactly the same as its template, with the .gif extension appended. For example, the thumbnail image for the template named "Home.html" should be named "Home.html.gif". If the image is not named exactly the same as the template with the additional .GIF extension, the system will not display it.
  • Create one thumbnail image for each of your templates and include the images anywhere in your .zip file (see below).  The system will recognize them by their filenames and display them where appropriate.

Step Five -- Zip and Upload

Now that your design is complete, all files (graphics, CSS, HTML, thumbnails) should be archived in a ZIP format to upload.  Organize your files inside a folder on your computer (see notes on "files, directories and paths" under step 2 above), then right-click (command-click on Apple OS X) and choose the appropriate archive option to make a .ZIP archive.  The name of your zip file will become the name of your design.

Next, login to your website, choose Designs from the My Website menu on the toolbar, and follow the on screen instructions to upload your design.  That's it!  You're done.

Making Changes to Your Design
Should you need to make changes to your design, you have two options:

  1. Changes to the HTML, CSS, and Javascript files in your design can be made inside our software.  From the design manager home page, click on "My Designs," locate your design and click "edit."  This will launch the design editor interface which will allow you to edit and save your design files.  When you are finished making your changes, you can download your design as a .zip file so that you will always have the most recent version as a backup.
  2. You can also make changes on your original website files outside of our system, re-zip your files and re-upload.  As long as your zip file is named exactly the same thing, your new design will replace your old design.