Site Design / Templates
Choose from over 1200 professionally-designed templates, then modify the one
you want. You can move the Menu, change the Menu font, add and remove borders,
add your own images, and so much more! Every change you make can be immediately
seen by scrolling down to an image of your template.
Overview
- Choosing a New Template
- Making Changes to Your Template
- Editing Your Current Template
1. Choosing a New Template
- From the Dashboard page, select the site you want to edit.
- Click 'Design', then 'Choose a Template'. You'll then see
a variety of website design templates. Please note that under Category, you
can change the template category and see other templates.
- Click on the template you like for a full size preview.
- If you like the chosen template, click 'Apply Design'. Please note
that your current template will be replaced and any customizations will be
lost.
If you are happy with the way the template looks, you can just click on the
'View Page' button. All changes to your site are immediate.
If you would like to make changes to the template, please continue below.
2. Making Changes to Your Template
You can customize your template or use it as is. To make changes to the template,
click the 'Edit Site' tab -> 'Design' and then click 'Edit
Current Template' on the left.
Layout
After clicking the 'Edit Current Template', you're then
on the 'Edit Layout' page. This allows you to change the placement
of your navigation menu. You have a choice of 4 different layouts and
the current layout is highlighted. To change your layout, click on one of the
options. When you scroll down, you can see a preview of your template.
Border
Within the 'Edit Current Template' page, click 'Edit
Border'.
You now see several options.
Make your changes and click on the 'Update' button. See below
for an explanation of the different options and how to use them. The illustation
below shows what some of the items refer to.
Here is a detailed explanation of the features:
Background Image
Allows you to insert your own background image. Click 'Browse' to
retrieve an image from your computer. If you leave it blank, the space reverts
to the Page Color.
Page Layout -> Alignment
Allows you to align your border with your contents to the left, right or center.
Page Layout -> Width
This is only relevant to pages having an Menu down the left or right side.
This option determines how wide your content with its border span across your
page. It will overide the Margin Size option.
Page Layout -> Border
Refers to the line that surrounds your content.
Page Layout -> Margin Size
Allows you to change the size of the space that surrounds your content with
border.
Colors -> Page Color
Refers to the color just outside your border. If you insert a background image,
this color is replaced with the image. Click on the color swatch to see a palette
of colors to choose from and click on the one you like or enter in the hexadecimal
color code in the text box..
Colors -> Border Color
Refers to the colored line that surrounds your content. Click on the color swatch
to see a palette of colors to choose from and click on the one you like or enter
in the hexadecimal color code in the text box..
Header
Within the 'Edit Current Template', click 'Edit
Header'.
You will now see several options.
Make your changes then click on the 'Update' button. See below
for an explanation of the different options. Please note that the header space
will grow to accommodate the height of your image. Your image is not stretched
or shrunk.
Header Images -> Left
The image you upload here shows up in the left hand corner. If it does not fill
the header area, the empty space is shown as the Background Color you've chosen.
To upload a Header Image, click on the 'Browse' button. Double-click
on your image file and then click on the 'Update' button.
Header Images -> Background
The image you upload here shows up repeated until it gets to the end of the
window. To upload a Header Image, click on the 'Browse' button.
Double-click on your image file and then click the 'Update'
button.
Header Images -> Right
The image you upload here shows up in the right hand corner. It does not repeat.
If it does not fill the header area, the empty space is shown as whatever Background
Color you have chosen. To upload a Header Image, click on the 'Browse'
button. Double-click your image file and then click the 'Update'
button.
To remove an image, check mark 'Clear Image' and then click
the 'Update' button.
No Header
If you do not want a header, check mark 'Clear Image' under
all three header types (Left, Center and Right), then click the 'Update'
button.
Combination Left and Right Header
You can also add an image to the left and to the right of the header at the
same time.
Background Color
Refers to the color that shows up in any empty space leftover by your header.
The color is only seen for headers on the left and right. To choose a new color,
click on the color sample, then click on the color you want from the palette
that shows up, otherwise enter the hexadecimal color code.
Menu
Within the 'Edit Current Template', click 'Edit
Menu'.
You will now see several options.
Make your changes and click on the 'Update' button. See below
for an explanation of the different options.
Menu Background Image
Refers to the image you upload behind the Menu. To upload a background
image, click on the 'Browse' button. Double-click on your image
file and then click on the 'Update' button.
To remove an image, check mark 'Clear Image' and then click
on the 'Update' button.
Menu Colors -> Background
Refers to the color that shows up behind the Menu. It is not seen
if you upload an Menu Background Image. To choose a new color, click on the
color sample on the right and then click on the color you want from the palette
that shows up, otherwise enter the hexadecimal color code.
Menu Colors -> Border
Refers to the border color of each of your Menu items. To choose a
new color, click on the color sample on the right and then click on the color
you want from the palette that shows up, otherwise enter the hexadedimal color
code. If you do not want a border around your Menu items, erase the hexadecimal
code (i.e. the text inside the box by Border) and click on 'Update'.
Menu Colors -> Button
Refers to the color that shows up behind your text in the Menu boxes.
To choose a new color, click on the color sample on the right and then click
on the color you want from the palette that shows up, otherwise enter the hexadecimal
color code.
Menu Colors -> Active Button
Refers to the color that shows up in the Menu box that you have your
mouse on. To choose a new color, click on the color sample on the right and
then click on the color you want from the palette that shows up, otherwise enter
the hexadecimal color code.
Menu Colors -> Text
Refers to the color of your text in the Menu boxes. To choose a new
color, click on the color sample on the right and then click on the color you
want from the palette that shows up, otherwise enter the hexadecimal color code.
Button Layout -> Alignment
Allows you to choose whether the text in your Menu boxes is aligned
to the left, center or right.
Left
Center
Right
Button Layout -> Button Spacing
Refers to the space between the Menu boxes. You can choose from 0 to 10 pixels.
Click on the down arrow to make your selection.
Button Layout -> Button Border
Refers to the thickness of the border around each Menu item. You can choose
from 0 to 4 pixels. If you choose 0, no border will show.
Button Layout -> Button Width
Refers to how much your Menu buttons spans across.
Font
To change fonts, click on the down arrow beside the font name and
then click on the font name you want. Change the font size by clicking on the
down arrow beside the current font size and clicking on the size you want. You
can choose a font size from 10 to 18. To bold the text in your Menu, checkmark
the box beside the B.
Body
Within the 'Edit Current Template', click 'Edit
Body'.
You will now see several options.
Margin Size -> Margin Width
Refers to the distance between your body text and the margin. You can
choose from 0 to 40 pixels in width in intervals of 5.
Margin Size -> Margin Height
Refers to the distance between your body text and the upper margin.
You can choose from 0 to 40 pixels in width in intervals of 5.
Background Image
Allows you to have a background image behind your body text. The image
keeps repeating if it is not big enough to fill all the space.
Colors -> Background
Allows you to choose a background color behind your body text. It is
not seen if you upload a Background Image. To choose a new color, click on the
color sample on the right and then click on the color you want from the palette
that shows up, otherwise enter the hexadecimal color code.
Colors -> Text
Refers to the color of your body text. To choose a new color, click
on the color sample on the right and then click on the color you want from the
palette that shows up, otherwise enter the hexadecimal color code.
Colors -> Link
Refers to the color of your links before they are clicked on and while
they do not have the mouse on them.
Colors -> Visited Link
Refers to the color of your links after they have already been clicked
on and while they do not have the mouse on them.
Colors -> Hover Link
Refers to the color of your links when the mouse is on one of them.
3. Editing Your Current Template
At any time, you can edit the template you are currently using. Click the 'Edit Site'
tab -> 'Design' -> 'Edit Current Template'. Then skip to the items under Step 2 and make your changes.
When you are done, click on the 'View Page' button.
