Step 5: Creating a Template
What is a Template?
A template controls the entire look of your website, each page has a template assigned to in (in most cases all pages will have the same template). The template is where you decide what your website looks like, what colors you use, what your text, links and menu will look like.
This section is still being worked on, however we have provided some steps to help you get started.
Creating a new template
1. Open the 'Template Design' section
2. Press the 'Add Template' button to add a new template. One thing you will notice different in this section is that there are no categories. Templates are items without categories since in most cases you won't have very many of them. Another difference is that these template items can have extensions, but more on that later.
3. Select the new template that you just created, it will be called 'A New Template'.
You will now see the settings on the right side. Here there are many tabs which take you to the different styles that you can customize individually.
4. First lets enter a name for our new template, call it 'My First Template'. Then press the save button 
in the top right of the settings. You will get confirmation that the template saved along your bottom infobar, and the save button will no longer be greyed out once it's complete.
Looking at the image above, this is the first area you will see, you will notice the 'Template Setup' tab is selected. This is different to all of the other tabs as they all relate to styles, where as this tab is primarily for settings. You will see here you can change the name of your template, edit the template layout or perform a number of useful template operations.
5. Press the Template Layout button as shown below:
The Template Layout is where you will decide on the layout of this template, how many columns will it have, which column will be the content, which column will be the menu and will you have a header and footer. The template layout sets up the layout and size of your website.
Whenever you create a new template you need to make sure you open up the template layout settings, choose a layout and save it.
Once you have pressed the Template Layout button you will see a new window popup with a few settings.
On the left you will see a scaled sample of the current template layout. On the right you will see the settings used to make up this layout. If you play around or change any of the settings on the right, you will see that the sample updates to reflect your changes.
6. Press the 'Select Preset Template' button below the sample on the left.
This will open a new window where you will see preset layouts. If you click on any of the presets it will give you the details on the right; how many columns it has, the width, if it has a header and footer etc.
7. Select the 'Standard' preset layout as in the above image.
8. Press the 'Load Selected Preset' button.
You will now be back at the template layout screen, and will see the selected template in the sample.
9. Press the 'Save' button.
10. Once the template has been saved (check for confirmation in the bottom infobar), Press the 'Close' button.
You will now be back at the template settings screen.
11. Before continuing we will make this our default template. Press the 'Set as Default' button under template operations.
When you set a template as default, this means that any NEW pages you create in the 'Pages and Content' section will have this template applied to them. It will not change the template for any of the existing pages!
12. The final step with creating your template is setting up the many styles available to you. We will go through a couple of them, since the rest of the use exactly the same method.
Styling our Page Header.
First lets style our page header. This what appears at the very top of our website across the top.
a. Select the 'Layout Styles' tab. This tab is where you style your header, footer, pagesize and window body of your website. You will notice each element is listed and has a set of buttons.
b. Press the 'Customize' button under the 'Page Header' element. This is where we change the style for this element, control its color, borders etc.
c. Enter the same settings as the above image to see what happens. You will notice the sample box update as you make your changes. You can use whichever colors you like, they don't need to be the same as above.
There are a number of handy ways to apply colors. You can either:
1. Click on the style you want to color. (Text color, background color or one of the border colors). Then select your color with the color picker and press 'Apply New Color'.
2. Do the same as step 1, but instead of pressing 'Apply New Color', just double click on a color you want on the color picker.
3. The best and most efficient way is to first select your color on the color picker, then double click on the style to change it to that color. E.g. pick the color red on the color picker, then double click on each of the four border colors.
d. Once completed press the 'Accept' button. You will be back at the template settings and will notice that the 'Page Header' has updated to match the style you just selected. You can repeat this exact process for any of the elements on any of the tabs and that is how you control the look of your site.
e. Press the 'Image' button under the 'Page Header' element. We will now add an image to our page header.
You will now see the image library pop up, with all of the categories and images that we created in the 'Image Library' section from the menu.
f. Select a category and find and image and select it. You will see a sample of the image.
g. Press 'Accept'. You will be back at the template settings and notice the image you selected has been applied to the template.
h. Save your template by pressing the save button in the top right corner.
Congratulations you have created your first template! There is one more important step that needs to be done. We need to make sure the page we created in step 3 is using this new template.
13. Select the 'Pages and Content' section from the menu.
14. Select the page that you created in Step 4.
If you are doing this entire tutorial at once without having closed the Website Builder, you will notice that this section is exactly where we left it, and the page should still be open in front of you!
This applies to any section, you can instantly switch between any section of the website builder and it will remember where you were and you will not lose anything you were working on!
Looking at the page settings you will notice a setting called 'Page Template'. We want to set this to the template we just created.
15. Press the Change Page Template 
button. This will open up a list of the available templates.
16. Select our new template 'My First Template' from the list and press 'Accept'.
17. Save the page by pressing the save button.
18. Preview the page with the preview page 
button. You will notice now that the page has an entirely new look too it! When we did this in step 4 it didnt look quite right because it didnt have a template.
Some extra tips.
- Once a page has a template selected, if you make any changes to the template they will automatically show on your website. You don't need to change the page template every time you change the template - only if you want to select a different template for the page to use.
- Using the Swap Template feature in the 'Template Design' section, you can instantly swap the template to a different one for all pages that were using it.
- Template extensions allow you to create a 'sub template' under an existing template. This extension will use the settings from the parent template, allowing you to change just a few settings in the extension.
The Template Style Map
We have created a simple template style map to show the different style areas for the main styles so you can determine which style relates to which area on your site. Click on the image to enlarge.
Step 5 is now complete.
